Share
La composizione riguarda la stesura di tutte le tue idee e elementi di design in un tutto; comporre il tuo design. Combineremo tutte le lezioni precedenti che abbiamo trattato, e per questo rende la composizione uno di quegli aspetti davvero difficili della progettazione di qualsiasi cosa.
La creazione di una buona composizione aumenterà l'esperienza degli utenti durante la navigazione nel tuo sito e contribuirà a modellare un design migliore nel suo complesso. Puntiamo all'allineamento, alla coerenza e alla forte unità. La composizione ci aiuta anche ad aggiungere una rilevanza visiva ai nostri layout in modo che possiamo aiutare i nostri utenti a comprendere meglio il loro viaggio su un sito web, dove dovrebbero andare avanti.
La composizione è probabilmente la parte più importante del tuo processo di progettazione, punto e basta.
Come abbiamo appreso all'inizio di questa serie, progettare è "decidere l'aspetto e la funzione di (un edificio, indumento o altro oggetto), tipicamente facendo un disegno dettagliato di esso" - e la composizione significa "scrivere o creare ”. Pertanto, quando mettiamo insieme questi due elementi, nella nostra fase di composizione stiamo componendo (creando) l'aspetto e la funzione del nostro design - in sostanza, stiamo ora mettendo tutto insieme.
Nel design di stampa tradizionale, ci sono molte composizioni e layout di stampa che hanno dimostrato di funzionare nel tempo. Molti di questi stanno ora trovando la loro strada sul web - e con buone ragioni. Sebbene possa essere difficile tradurre questi layout in termini assoluti per la progettazione sul Web, può almeno darci una piccola idea e concentrarci sui layout che potremmo voler provare a creare.
Ci sono molti tipi di composizione o layout popolari in giro - ma ne parlerò solo alcuni. Ci sono così tante risorse online per guardarle più avanti, e mentre questi layout tradizionali sono importanti voglio anche entrare in maggiori dettagli su altri aspetti della composizione.
Il primo è il layout visivo singolo.
Un grande esempio del layout visivo singolo, come visto sul sito web di Creative People. Questo è abbastanza semplice - è dove c'è un aspetto importante di un design che funge da singolo focus visivo. Ad esempio, potresti creare un disegno con una grande fotografia sullo sfondo, con abbondanza di spazio bianco e semplice tipografia sovrapposti.
Il layout Z è abbastanza auto-esplicativo e si relaziona pesantemente con il layout scelto per i tuoi elementi di design.
Lo Z-Layout visto in azione su BBC News. In poche parole, il layout Z segue il modello naturale che i nostri occhi potrebbero normalmente assumere quando eseguiamo la scansione su un sito web. Se non riesci già a immaginarlo, a volte nella ricerca viene mostrato che si trova nello schema della lettera "Z", che scorre da in alto a sinistra, lungo a destra, in diagonale e poi di nuovo attraverso.
Questo può essere molto utile quando stai pensando a dove posizionare i tuoi articoli in modo che siano rilevanti per l'utente. Può aiutarti a dare peso a elementi importanti.
Un principio di design utilizzato nella fotografia e nella realizzazione di filmati (e molto altro), la regola dei terzi è un buon layout compositivo per la progettazione per il web.
La regola dei terzi è una linea guida che propone di dividere un'immagine in nove parti uguali (tre in orizzontale, tre in basso) con elementi di quell'immagine o disegno allineati ai bordi di ciascuna di queste parti. Ciò è particolarmente utile nel web design, in quanto può aiutarci a creare proporzioni e layout migliori nei nostri progetti.
La regola dei terzi è un grande strumento compositivo e layout. Anche se non è qualcosa che dovrebbe essere sempre seguito, può essere di grande aiuto nel progettare con più equilibrio. Può anche essere usato insieme ad altri layout visivi o di composizione, come ad esempio la visuale singola o anche quando si creano i sistemi di griglia.
Fortemente coinvolto con la matematica, il Golden Ratio (o Golden Section se preferisci chiamarlo così) è uno dei più riconoscibili (in nome almeno) layout o strumenti di composizione in qualsiasi forma di design.
Spesso pensato per essere creato dagli antichi greci (folk abile, lo erano) il Golden Ratio descrive la relazione tra due proporzioni. Il Golden Ratio è 1.618 (03398875 ...) e sembra che molti elementi in natura si trovano spesso corrispondenti a questo rapporto. È quindi sempre qualcosa che è più rassicurante e gradito ai nostri occhi umani.
Poiché è un modello così familiare per noi, ha senso cercare di utilizzare la sezione aurea nei nostri progetti; per creare un equilibrio armonioso che sembra proprio giusto e sensato.
Un modo semplice per implementarlo nei nostri progetti è quello di prendere il numero aureo (1.618) e usare un po 'di matematica. Nel nostro progetto potremmo avere un'area in cui, ad esempio, vogliamo inserire alcuni contenuti e una piccola parte o una barra laterale. Semplicemente suddividerlo nei nostri progetti senza pensarci potrebbe essere facile, soprattutto se si dispone di un semplice sistema di griglia, ma quando ci pensiamo in termini di golden ratio, potremmo ottenere risultati migliori alla fine.
Quindi abbiamo quest'area che vogliamo dividere in due, usando il nostro numero di golden ratio. Per fare ciò, misura la larghezza dell'area disponibile (andiamo con 950px per amore di questo articolo) e dividila per 1.618.
Se la nostra larghezza disponibile è 950px, questo significa che il nostro primo calcolo (per il nostro contenuto principale) dovrebbe essere: 950 / 1,618 = 587,144622991 (che arrotonderemo fino a 587px).
Quindi, sottraiamo semplicemente quella figura dalla larghezza originale disponibile per ottenere la nostra seconda larghezza, per la sidebar o da parte: 950 - 587 = 363 px.
Poiché il nostro contenuto principale è più pertinente e vogliamo che questo sia l'obiettivo in questa parte del design, possiamo utilizzare la più grande delle due cifre finali per la larghezza di quel contenuto. Possiamo quindi utilizzare la figura più piccola per la nostra sidebar o sidebar. E ce l'abbiamo - il nostro design perfettamente dorato!
Nota: Estrapolando questa relazione è tutto parte della creazione di una scala modulare per il tuo design.
La composizione riguarda anche lo spazio. Questo non significa che tu lasci vaste aree vuote nei tuoi progetti, ma sia invece di essere intelligente con lo spazio che hai a disposizione. Sfruttare gli spazi vuoti equivale a fornire attenzione ai contenuti, come lasciare aree vuote.
Detto questo, usa il padding e gli spazi bianchi a tuo vantaggio: nessuno troverà facile navigare in un sito web ingombrante, con poca gerarchia e dove gli elementi sono angusti e non hanno spazio per respirare. Invece, introdurre lo spazio in luoghi che è possibile per consentire una migliore esperienza complessiva per i tuoi progettisti.
Dopo esserci introdotti al concetto di composizione, nella prossima sezione esamineremo ulteriormente lo spazio nei nostri progetti. Ci vediamo lì!
Accentsconagua