Come e perché costruire i tuoi calcolatori di design

Il design è una bestia complessa, il web design è doppiamente così. C'è molto di più dell'equilibrio visivo e dell'equilibrio da considerare, è spesso il caso che devi scavare e fare qualche matematica della vita reale (sussulto!).

Stranamente, mi piace pensare a queste cose, così tanto che in realtà costruisco le mie calcolatrici piuttosto che usare gli strumenti disponibili da altri sviluppatori. Oggi ti mostrerò come e perché costruire i tuoi calcolatori di design in modo da poter padroneggiare i numeri dietro i tuoi progetti.

Scopri Instacalc

Ho citato Instacalc una o due volte su Design Shack. Non è affatto uno strumento di design, ma un campo da gioco nerd matematico. Allora perché nel mondo mi piace così tanto?

Instacalc è quel prodotto perfetto che si trova da qualche parte tra un normale calcolatore e un foglio di calcolo. È molto più potente di una calcolatrice e non è così complesso come un foglio di calcolo.

Come funziona

Quando carichi Instacalc, vedrai una serie di campi. Questi sono i punti in cui inserisci i tuoi calcoli. Basta digitare un problema per vedere immediatamente la soluzione a destra.

Questi campi possono gestire molto più delle semplici formule, sentiti libero di diventare il più complesso possibile, Instacalc gestirà qualsiasi cosa tu passi con facilità.

Il vero potere in Instacalc risiede nella sua capacità di fare riferimento ad altre righe per costruire su calcoli precedenti. Ad esempio, qui eseguiamo un calcolo in R1, quindi usiamo la soluzione di quel calcolo per ottenere qualcosa di ancora più complesso in R2.

Oltre a fare riferimento direttamente ad altre righe, puoi impostare variabili all'interno di ciascuna riga, quindi fare riferimento a quelle nel resto dei tuoi calcoli. Ecco un esempio:

Instacalc gestisce anche il testo piuttosto bene. Se si inserisce semplicemente il testo dopo un numero, questo verrà ignorato e non interferirà con il calcolo. Se precedi qualcosa con? // ?, questo testo verrà trasferito al risultato finale e inserito dopo la soluzione come commento.

Infine, puoi titolo, salvare e condividere qualsiasi calcolatrice che crei. Ciò rende Instacalc un potente strumento per la creazione di calcolatori personalizzati riutilizzabili che possono essere consultati più e più volte da soli e da altri.

Che importa?

Quando costruisci e riutilizzi la tua calcolatrice, sei costretta a cogliere i concetti in gioco nei calcoli.

Quindi ce l'hai, uno strumento di calcolo elaborato. Allora perché dovresti preoccuparti? Il motivo è che puoi sfruttare Instacalc per creare e salvare i tuoi calcolatori di design. Ad esempio, supponi di voler convertire i pixel in em, come faresti? Basta premere la calcolatrice!

So cosa stai pensando. Ci sono già una tonnellata di calcolatrici pre-costruite e perfettamente funzionanti relative al design sul web. Perché passare attraverso il problema di crearne di propri? Sono un grande sostenitore dell'uso di qualsiasi strumento che ti aiuterà a farti risparmiare tempo, ma mi occupo anche della comprensione dei processi alla base di tali strumenti.

Quando si utilizza una calcolatrice casuale in formato px in em, si potrebbe ottenere la risposta che si sta cercando, ma non si acquisisce alcuna conoscenza o esperienza nel processo. Tuttavia, quando costruisci e riutilizzi la tua calcolatrice, sei costretta a cogliere i concetti in gioco nei calcoli. Non devi fare i conti con la matematica, ma devi sapere da dove viene la matematica, e questo è un bel po 'di conoscenza.

Calcolatore di base in em

Basta impostare, scaviamo e costruiamo alcuni calcolatori. Il primo che tenteremo è il nostro esempio da sopra, la tua corsa base del mulino pixel al convertitore em. Questo è un calcolo molto semplice e capire che cosa? Em? è a un livello fondamentale, dovresti davvero lavorare alla matematica.

Per iniziare, devi avere una dimensione del carattere di base per il tuo documento HTML, diciamo 16px. Inseriamo questa variabile nel nostro calcolo in questo modo:

Si noti che questo è un valore personalizzabile. Se vuoi che la dimensione della base sia 14px, sostituisci semplicemente? 16? con? 14 ?. Successivamente, abbiamo bisogno del valore in pixel che vogliamo convertire in ems. Di nuovo, impostiamo una variabile personalizzabile.

Ecco la parte educativa. Per completare la calcolatrice, devi sapere come funziona la conversione. Si scopre, per convertire px in em, basta prendere il valore del pixel che si desidera convertire e dividerlo per la dimensione del carattere di base. Per eseguire questo calcolo, inseriamo le variabili che abbiamo creato nei due passaggi precedenti.

Come puoi vedere, usando una base di 16px, 24px si converte in 1.5em. Se cambiamo il valore di px a 8px, converte in 0.5em.

Provalo

Questo è tutto! Ora abbiamo una piccola calcolatrice px in em bella. Tutto quello che devi fare è sostituire la dimensione base e / o il valore da convertire e la calcolatrice sputerà una soluzione. Puoi testare la nostra calcolatrice usando il widget incorporato qui sotto (vai qui se il widget non viene caricato).

em a px Calcolatrice

Ora che abbiamo capito come funziona tutto questo, giriamo il calcolo sulla sua testa e convertiamo da em a px. Proprio come prima, dobbiamo creare una dimensione base e un valore da convertire.

Questa volta però, moltiplichiamo il valore per convertire le dimensioni della base per arrivare alla conversione dei pixel. Quindi con un valore base di 14px, 2em è uguale a 28px.

Provalo

Ora la nostra calcolatrice è davvero intelligente! Converte px ed em in entrambe le direzioni. Controllalo usando il widget incorporato qui sotto (vai qui se il widget non viene caricato).

% a em Calcolatrice

A volte, gli sviluppatori dichiarano effettivamente la dimensione del carattere di base come percentuale. Ad esempio, il 62,5% è una dimensione del carattere di base comune perché rende facile convertire ems in px in testa (1,2 em = 12px, 1.4em = 14px, ecc.). Perché funziona? Se scopriamo la matematica, possiamo scoprirlo!

Come puoi vedere, per convertire em in px con una dimensione di base espressa in percentuale, per prima cosa moltiplichiamo le dimensioni di base espresse per il valore iniziale del pixel a dimensione intera del browser (100% o 16px). Quindi moltiplichiamo il risultato di quel calcolo per il valore em che vogliamo convertire in px. Gioca con questa calcolatrice qui sotto o vai qui per vederlo su Instacalc.

Golden Ratio Line Height

Come esempio di vita reale di quando ho creato la mia calcolatrice relativa al design, controlla l'esempio qui sotto. Dopo aver letto la Ultimate Guide di Pearsonified sulla tipografia del Golden Ratio ho voluto avvolgere la mia mente attorno alle complesse formule che stava lanciando, così ho costruito questa calcolatrice.

Fondamentalmente, ciò che fa è sfruttare il concetto della sezione aurea per arrivare all'altezza della linea ideale per un pezzo di testo quando vengono dati due input: dimensione del carattere e larghezza della linea.

Se mi fossi semplicemente fermato dopo aver letto l'articolo di Pearsonified, non avrei mai veramente capito i principi matematici che stava esponendo. Non è stato fino a quando ho scavato in profondità e giocato con i numeri me stesso che tutto ha fatto clic.

Grid Calculator

Un altro punto in cui vengono spesso utilizzati i calcoli nel web design è quando si crea una griglia. I calcolatori di griglie sono una dozzina di dozzine, ma quando capisci davvero la matematica dietro di loro, puoi realizzare i tuoi quadri grigliati che sono perfettamente progettati per la tua situazione unica. Ecco un calcolatore di griglia di esempio che ho creato per iniziare.

Cosa costruirai?

Ora dovresti sapere tutto su Instacalc e su come può aiutarti a comprendere anche i calcoli più complessi relativi alla progettazione. Ora è tempo per te di entrare e costruire alcuni dei tuoi calcolatori. Lascia un commento qui sotto e mostrami cosa ti viene in mente!