Le design est une bête complexe, le webdesign doublement. Il y a beaucoup plus que l'harmonie visuelle et l'équilibre à prendre en compte, c'est souvent le cas, vous devez creuser et effectuer des mathématiques de la vie réelle (halètement!).
Curieusement, j'aime bien réfléchir à ce sujet, à tel point que je construis réellement mes propres calculatrices plutôt que d'utiliser les outils disponibles auprès d'autres développeurs. Aujourd'hui, je vais vous montrer comment et pourquoi construire vos propres calculatrices de conception afin de pouvoir maîtriser les chiffres qui se cachent derrière vos conceptions.
Rencontrez Instacalc
J'ai déjà mentionné Instacalc une ou deux fois auparavant dans Design Shack. Ce n'est pas du tout un outil de conception, mais un terrain de jeu mathématique ringard. Alors pourquoi est-ce que je l'aime tellement dans le monde?
Instacalc est ce produit parfait qui se situe quelque part entre une calculatrice normale et un tableur. C'est beaucoup plus puissant qu'une calculatrice et pas aussi complexe qu'un tableur.
Comment ça marche
Lorsque vous chargez Instacalc, vous verrez une série de champs. Ce sont où vous insérez vos calculs. Tapez simplement un problème pour voir instantanément la solution à droite.
Ces champs peuvent traiter beaucoup plus que de simples formules, n'hésitez pas à vous aussi complexe que nécessaire, Instacalc gérera facilement tout ce que vous lui lancerez.
Cependant, le vrai pouvoir d’Instacalc réside dans sa capacité à référencer d’autres lignes pour s’appuyer sur des calculs antérieurs. Par exemple, nous effectuons ici un calcul dans R1, puis nous utilisons la solution de ce calcul pour obtenir quelque chose d'encore plus complexe dans R2.
En plus de référencer directement d'autres lignes, vous pouvez définir des variables dans chaque ligne, puis les référencer dans le reste de vos calculs. Voici un exemple:
Instacalc gère aussi très bien le texte. Si vous ajoutez simplement du texte après un chiffre, celui-ci sera ignoré et ne gênera pas le calcul. Si vous faites précéder quoi que ce soit avec? // ?, ce texte sera reporté sur le résultat final et placé après la solution en tant que commentaire.
Enfin, vous pouvez titrer, sauvegarder et partager n’importe quelle calculatrice que vous créez. Cela fait de Instacalc un outil puissant pour la création de calculatrices personnalisées réutilisables pouvant être référencées encore et encore par vous-même et par d'autres.
On s'en fout?
«Lorsque vous construisez et réutilisez votre propre calculatrice, vous êtes obligé de saisir les concepts à l’œuvre dans les calculs.Donc, voilà, un outil de calcul sophistiqué. Alors, pourquoi devriez-vous vous en soucier? La raison en est que vous pouvez utiliser Instacalc pour créer et enregistrer vos propres calculatrices de conception. Par exemple, disons que vous voulez convertir les pixels en EMS, comment le feriez-vous? Il suffit de frapper votre calculatrice!
Je sais ce que tu penses. Il existe déjà une tonne de calculatrices prédéfinies, parfaitement fonctionnelles et liées au design, sur le Web. Pourquoi passer par la peine de faire les vôtres? Je suis un fervent partisan de l’utilisation de tout outil qui vous permettra de gagner du temps, mais je suis tout aussi soucieux de comprendre les processus à la base de ces outils.
Lorsque vous utilisez une calculatrice px au hasard en ligne aléatoire, vous obtiendrez peut-être la réponse que vous recherchez, mais vous ne gagnerez aucune connaissance ou expérience dans le processus. Lorsque vous construisez et réutilisez votre propre calculatrice, vous êtes obligé de saisir les concepts à l’œuvre dans les calculs. Vous n'êtes pas obligé de faire le calcul dans votre tête, mais vous devez savoir d'où vient le calcul, ce qui est un élément de connaissance précieux.
Calculateur px de base
Assez de configuration, creusons et construisons des calculatrices. Le premier que nous allons essayer est notre exemple ci-dessus, votre convertisseur de base de pixels en em. Ceci est un calcul très simple et à comprendre ce qu'est un? Em? est à un niveau fondamental, vous devriez vraiment travailler sur les mathématiques.
Pour commencer, vous devez avoir une taille de police de base pour votre document HTML, par exemple 16px. Nous entrons cette variable dans notre calcul comme suit:
Notez qu'il s'agit d'une valeur personnalisable. Si vous voulez que la taille de base soit 14px, remplacez simplement? 16? avec? 14 ?. Ensuite, nous avons besoin de la valeur en pixels que nous voulons convertir en ems. Encore une fois, nous avons créé une variable personnalisable.
Voici la partie éducative. Pour terminer la calculatrice, vous devez savoir comment fonctionne la conversion. En fin de compte, pour convertir px en em, il vous suffit de prendre la valeur en pixels que vous souhaitez convertir et de la diviser par la taille de la police de base. Pour effectuer ce calcul, nous connectons les variables que nous avons créées aux deux étapes précédentes.
Comme vous pouvez le constater, en utilisant une base de 16 pixels, le format 24 pixels est converti en 1,5 µm. Si nous modifions la valeur px en 8px, elle se convertit en 0.5em.
Essaye le
C'est tout! Nous avons maintenant un joli petit px pour em calculatrice. Tout ce que vous avez à faire est de remplacer la taille de base et / ou la valeur à convertir et la calculatrice créera une solution. Vous pouvez tester notre calculatrice en utilisant le widget intégré ci-dessous (cliquez ici si le widget ne se charge pas).
em to px Calculator
Maintenant que nous avons compris comment tout cela fonctionne, inversons le calcul et convertissons-le de em en px. Comme auparavant, nous devons créer une taille de base et une valeur à convertir.
Cette fois cependant, nous multiplions la valeur à convertir par la taille de base pour obtenir la conversion en pixels. Donc, avec une valeur de base de 14px, 2em est égal à 28px.
Essaye le
Maintenant, notre calculatrice est vraiment intelligente! Il convertit px et em dans les deux sens. Vérifiez-le à l'aide du widget intégré ci-dessous (cliquez ici si le widget ne se charge pas).
% d'em calculatrice
Parfois, les développeurs déclarent en fait la taille de la police de base sous forme de pourcentage. Par exemple, 62,5% est une taille de police de base commune, car elle facilite la conversion mentale en px dans votre tête (1,2 em = 12px, 1,4em = 14px, etc.). Pourquoi ça marche? Si nous calculons le calcul, nous pouvons le découvrir!
Comme vous pouvez le constater, pour convertir em en px avec une taille de base exprimée en pourcentage, nous commençons par multiplier la taille de base exprimée par la valeur de pixel de départ de la taille réelle du navigateur (100% ou 16 pixels). Nous multiplions ensuite le résultat de ce calcul par la valeur em que nous souhaitons convertir en px. Avoir un jeu avec cette calculatrice ci-dessous ou aller ici pour le voir sur Instacalc.
Hauteur de ligne du ratio d'or
Comme exemple concret de la création de ma propre calculatrice liée au design, consultez l'exemple ci-dessous. Après avoir lu le Guide ultime de la typographie du ratio d’or de Pearsonified, je souhaitais comprendre les formules complexes qu’il calculait, alors construisit cette calculatrice.
Fondamentalement, elle exploite le concept du nombre d'or pour obtenir la hauteur de ligne idéale pour un bloc de texte lorsque deux entrées sont fournies: la taille de la police et la largeur de la ligne.
Si je m'étais simplement arrêté après avoir lu l'article de Pearsonified, je n'aurais jamais vraiment compris les principes mathématiques qu'il énonçait. Ce n'est que lorsque j'ai creusé profondément et joué avec les chiffres moi-même que tout a cliqué.
Calculateur de grille
Un autre endroit où nous utilisons fréquemment des calculs dans la conception Web est lors de la conception d'une présentation en grille. Les calculatrices de grille ne coûtent que très peu, mais lorsque vous comprenez bien les calculs qui les sous-tendent, vous pouvez créer vos propres cadres de grille parfaitement conçus pour votre situation unique. Voici un exemple de calculateur de grille que j'ai construit pour vous aider à démarrer.
Que construirez-vous?
Vous devriez maintenant tout savoir sur Instacalc et sur la manière dont il peut vous aider à vous concentrer sur les calculs les plus complexes relatifs à la conception. Il est maintenant temps de vous lancer et de construire quelques-unes de vos propres calculatrices. Laissez un commentaire ci-dessous et montrez-moi ce que vous venez avec!