Share
La matematica è ovunque, anche dove non ti aspetteresti. Puoi trovare rapporti matematici e costanti in architettura, ma anche negli strumenti che usiamo per fare musica. Puoi trovare la matematica in alcuni giochi che suoniamo, e quindi non dovrebbe sorprendere che la matematica abbia un ruolo importante anche nel web design. Ma cos'è questo ruolo? E come possiamo usare questi rapporti, costanti e teorie per rendere i nostri progetti web più belli?
Walt Disney una volta fatto un film su Paperino in Mathmagicland. In questo video, disponibile su YouTube, introducono i bambini alla matematica e a cosa serve. Mostra che un rapporto matematico è usato per definire le note sui nostri strumenti e che un rettangolo matematico può essere trovato sia nell'architettura antica che in quella moderna. Inoltre, possiamo trovare questo stesso identico rettangolo in alcune opere del Rinascimento, ad esempio, il famoso Leonardo Da Vinci.
La lezione generale è semplice: puoi usare alcuni principi matematici di base per progettare l'ordine e la bellezza nelle tue creazioni.
Nell'antica Grecia c'era un gruppo elitario di matematici che si definivano i Pitagorici. I pitagorici avevano il pentagramma come loro emblema. Hanno scelto questa forma per la sua perfezione matematica: la forma lineare del pentagramma contiene già la ratio aurea tre volte! Inoltre, ci sono tonnellate di rettangoli dorati nascosti all'interno della forma, questi sono gli stessi rettangoli dorati che sono presenti nella Gioconda.
Qualche tempo dopo, nel 12esimo e 13esimo secolo, visse un talentuoso matematico italiano. Il suo nome era Leonardo Pisano Bigollo, anche se potresti conoscerlo meglio come Fibonacci. Per il suo libro Liber Aci, ha osservato l'allevamento naturale dei conigli. In questo mondo ideale di lui, in cui nessun coniglio sarebbe mai morto e ogni singolo coniglio avrebbe iniziato a riprodursi il più presto possibile, scoprì che questo ciclo conteneva una sequenza speciale di numeri. Questa sequenza divenne in seguito nota come Numeri di Fibonacci.
La cosa che è così speciale in questa sequenza è che se dividi un numero scelto con il numero precedente nella sequenza, riceverai (approssimativamente) lo stesso numero ogni volta. Questo numero è di circa 1.618, meglio conosciuto come Phi. Più vai avanti nella sequenza, più il risultato della divisione arriva più vicino a Phi. Fibonacci ha anche scoperto che questa sequenza non si trova solo nell'allevamento dei conigli, ma anche in altre cose in natura, come la disposizione dei semi in un girasole.
Come forse già saprai, Phi è anche una costante molto importante nel design; Questo perché un rapporto da 1 a 1.618 è meglio conosciuto come il Rapporto aureo - spesso indicato come il Sezione d'oro, Golden Mean o il Rapporto Divino. Se crei un rettangolo in base a questo rapporto, ottieni una forma nota come Rettangolo d'oro.
Il Golden Ratio e il Golden Rectangle sono usati in molte forme di arte e design. Nel periodo rinascimentale, molti artisti proporzionavano le loro opere secondo questo rapporto e rettangolo. Nell'antica Grecia, gli architetti hanno usato questo rettangolo nella progettazione degli edifici; il Partenone ne è un buon esempio. Anche nell'architettura moderna, il rettangolo d'oro ha una forte presenza.
Ma cos'è che rende questo rapporto così speciale? Poiché questo numero, Phi, trova le sue origini nella natura, noi umani ci troviamo automaticamente a nostro agio con questo rapporto. Poiché siamo così consapevoli di questo rapporto, innesca naturalmente una sensazione di equilibrio e armonia. Per questo motivo, l'utilizzo di questo rapporto ti garantisce una composizione bilanciata dei tuoi elementi.
Prima ancora di iniziare a pensare di applicare il rapporto ai nostri progetti, dobbiamo prima esaminare alcuni esempi che utilizzano già il rapporto.
Un buon esempio è questo sito Web, in quanto il suo design ospita più casi del rapporto. Nell'immagine sottostante, puoi vedere uno screenshot di questo sito web. Come puoi vedere, ho usato due colori per contrassegnare le diverse colonne. La larghezza della colonna principale con i post del blog in esso è più o meno 1.618 volte più grande della barra laterale con gli annunci. Un rapido calcolo sul fondo lo dimostra.
Ma non solo questo sito usa la sezione aurea sulla sua larghezza totale, ma si applica anche ad alcune delle parti più piccole del sito.
Diamo una rapida occhiata alla colonna principale e poi al contenuto all'interno. Come puoi vedere qui sotto, l'elemento contenitore è circa 1.618 volte più grande del contenuto che deve essere letto all'interno di questo elemento.
Un altro buon esempio è il famoso blog di Smashing Magazine. La sua colonna principale ha una larghezza totale di poco più di 700 pixel. Quando dividi questo numero per 1,618, circa 435 è il risultato: La larghezza esatta della barra laterale.
La tela di un dipinto e la larghezza di un edificio hanno tutti una larghezza fissa, i monitor che mostrano il nostro lavoro sono di dimensioni variabili. Pertanto, e soprattutto nei progetti di fluidi, è necessario tenere in considerazione una variabile aggiuntiva per il calcolo del rapporto aureo.
Tuttavia, esiste un modo semplice per superare questo problema. Quando vuoi calcolare la larghezza di un elemento in base al rapporto, devi solo prendere la larghezza del suo elemento genitore, quindi l'elemento contenitore. Nel nostro primo e ultimo esempio, questa era la larghezza completa di un sito web. Nel secondo esempio, questa era solo la larghezza di una parte più piccola: la loro colonna principale.
In ogni caso, quando hai determinato la larghezza dell'elemento contenitore, dovresti ora dividere questo valore per Phi. Il risultato ti darà la larghezza dell'elemento principale. Ora, tutto ciò che resta da fare è sottrarre il risultato dall'elemento principale dalla larghezza originale, questo ti darà la larghezza della colonna secondaria.
Se hai qualche problema a ricordare Phi, o quando sei solo pigro per riempire alcuni numeri su una calcolatrice, ti suggerisco di usare Phiculator. Questa piccola applicazione richiede di inserire un valore (la larghezza dell'elemento che lo contiene) e calcola automaticamente la larghezza corrispondente. Puoi anche chiedere di calcolare con numeri interi, quindi non devi preoccuparti nemmeno dei numeri decimali.
Un'altra famosa divisione matematica è il regole di terzi. Questa regola può aiutarti a creare una composizione equilibrata dividendo la tela in nove parti uguali. La regola è un po 'simile al Golden Ratio, in quanto la divisione per 0.62 è molto simile a 0.67 - che equivale a due terzi.
Una forma d'arte in cui la regola dei terzi viene usata molto spesso è in fotografia in quanto è facile e veloce guida per ottenere una buona composizione. Questo è il motivo per cui è probabile che tu trovi una funzione sulla tua fotocamera digitale che divide il suo schermo LCD in nove parti, usando la regola dei terzi. Anche alcuni dSLR hanno questa funzione, dato che mettono a fuoco alcuni punti luminosi nel mirino.
Usando la regola dei terzi, dividi la tua tela orizzontalmente e verticalmente in da tre. Questa divisione ti dà nove rettangoli uguali, quattro linee e quattro punti di intersezione. Puoi creare una composizione interessante ed equilibrata usando queste linee e punti di intersezione.
La chiave di una buona composizione, ovviamente, sta nel posizionare correttamente i tuoi elementi. Quando si usa la regola dei terzi, ci sono due cose che puoi posizionare con.
Le prime sono le linee utilizzate per dividere la tela. Nella fotografia, le cose con una forma lunga e dritta sono spesso allineate a queste linee. Nel design, anche le cose con questa stessa forma, come una barra laterale, possono essere allineate a queste linee.
Le seconde cose da allineare sono i punti in cui le linee divisorie si intersecano. Dovrai mettere uno o due oggetti su questi punti, perché troppo ucciderà ancora la tua composizione.
Un buon esempio di questo ho trovato sul sito di fotografia Flickr. Come potete vedere qui sotto, il fotografo ha allineato la fila di edifici con la linea superiore, e sul punto di intersezione in alto a destra, troverete una casa che si distingue maggiormente per il suo colore. Poiché è già di per sé un punto focale, allinearlo con il punto di intersezione aggiunge una buona composizione e una sensazione equilibrata.
foto di flickr trovata qui Abbiamo visto la regola dei terzi applicata alla fotografia, ma come applicarla alla progettazione di siti Web, possiamo trovare esempi di questo?
Un buon esempio della regola applicata al web design è, ancora una volta, questo sito web. Ho preparato un'immagine che puoi vedere qui sotto. Mostra che, a destra, la barra laterale è allineata molto vicino alla linea verticale sulla destra. Sulla sinistra, puoi vedere che gli articoli sono posizionati sui punti di intersezione.
I due allineamenti che vedi sopra creano una sensazione di armonia nel layout di questo sito web.
Quindi, in che modo esattamente la regola dei terzi può essere applicata alla progettazione del tuo sito? Ancora una volta, la larghezza variabile della nostra "tela" può causare qualche problema. Quando usiamo la stessa tecnica come abbiamo fatto con la sezione aurea, però, andremo bene.
Per applicare la divisione, devi prendere tutta la larghezza dell'elemento che la contiene e dividerla per tre. Devi quindi tracciare una linea - o una guida, qualunque cosa ti si addice meglio - due volte sul valore che ottieni (moltiplicare per due per ottenere la posizione della seconda riga).
La seconda parte della divisione può darti dei problemi, però. Anche l'altezza della nostra "tela" è variabile, quindi dividere questa variabile per tre ci darà qualche problema. Il modo in cui utilizzo per aggirare questo problema è quello di calcolare l'altezza della divisione con un rapporto 16: 9 (widescreen) o semplicemente utilizzare l'altezza dell'elemento contenitore. Dividi la larghezza dell'elemento che lo contiene per 16 e moltiplica quel numero con 9 e hai te stesso un'altezza. Ora puoi dividere nuovamente questo numero per 3 e tracciare le linee / le guide.
Dopo aver impostato le guide, ora puoi posizionare i tuoi elementi in base a queste guide. Allinea i tuoi elementi con le linee e devi mettere alcuni elementi di interesse e contrasto sui punti di intersezione.
Potresti non pensare alle griglie come matematiche, ma lo sono. Stai dividendo la tua tela in diverse colonne e grondaie, questa divisione per due, tre - e ho visto fino a sedici - è davvero matematica.
Un sacco di persone sostengono che i sistemi a griglia limitano la tua creatività, perché stai limitando la tua libertà con un sistema a griglia. Non penso che questo sia vero, come il libro intitolato Vormator mi ha insegnato che le limitazioni in realtà aumentano la tua creatività. Questo perché penserai a soluzioni con questi limiti in mente, mentre queste idee non sarebbero mai state pensate se non hai queste restrizioni.
La ragione per cui i sistemi di rete "funzionano" è che possono guidarti a dimensionare, posizionare e allineare la progettazione del tuo sito web. Possono aiutarti a organizzare e rimuovere la confusione dal contenuto. Ma soprattutto, sono facili da usare.
Un altro buon motivo per usare le griglie è che le regole sono destinate a essere infrante, vero? Se "rompi" la tua griglia una volta ogni tanto, non è male. Anzi! "Rompere" la tua griglia può creare un interesse speciale per un elemento specifico nella pagina, perché è in contrasto con il resto. Questo può aiutarti a raggiungere determinati obiettivi, come un invito all'azione che si distingue maggiormente per questo.
Non esiste un vero modo per costruire un buon sistema di rete, poiché ruotano attorno al contenuto e nessun contenuto è davvero lo stesso. Ma per il gusto di farlo, dimostrerò un semplice processo su come costruire una griglia a 6 colonne in un ambiente di 960 pixel.
Per prima cosa, divideremo la larghezza totale della tela per 6, quindi avremo la larghezza totale di ogni colonna. Il risultato di questa divisione è 160 pixel, come puoi vedere qui sotto nell'immagine.
In secondo luogo, creeremo un'immagine di una colonna, la duplicheremo in seguito. In questo modo è più facile creare la nostra griglia completa in seguito, poiché non dobbiamo ripetere questo passaggio per ogni colonna.
Decideremo sulla dimensione della nostra grondaia, penso che 20 pixel saranno sufficienti. La grondaia dovrebbe essere aggiunta su entrambi i lati della colonna, quindi dobbiamo dividerla per due. Se non lo facciamo, la nostra grondaia sarà larga 40 pixel. Come puoi vedere nell'immagine qui sotto, abbiamo aggiunto una grondaia da 10 pixel su ciascun lato.
Ora possiamo duplicare questa immagine fino a raggiungere il totale di 960 pixel e ci siamo creati una griglia (di base).
Non preoccuparti; anche se sei pigro non dovrai vivere senza griglie. Ci sono un sacco di simpatici e gratuiti sistemi a griglia in palio su internet. Il mio preferito, e sono sicuro che ne hai sentito parlare prima, è il famoso sistema di griglia 960.gs, che ha un framework CSS e un file PSD con tutte le guide installate.
Spero di averti mostrato che la matematica può essere bella se applicata al design e che ti ho dato abbastanza tecniche da utilizzare nel tuo prossimo progetto. Attenzione però, sono necessarie molte altre cose per rendere un progetto un successo, e quindi l'uso di questi trucchi non è garanzia di un buon design, ma possono sicuramente aiutarti e guidarti nel processo di creazione di uno.
Grazie per aver letto!
Accentsconagua