Sei stanco di creare siti web usando gli stessi vecchi layout basati sulla griglia per ogni progetto? Sei stato prurito a rompere con la norma e tentare qualcosa di un po 'più organico?
Oggi daremo un'occhiata ad alcuni siti che hanno fatto proprio questo per vedere cosa possiamo imparare sui metodi di layout alternativi e su come possono essere implementati con successo.
Layout a griglia
Il layout basato sulla griglia è una pietra angolare del moderno web design. In un momento in cui i design puliti e minimalisti sono considerati l'ideale ideale (una risposta diretta agli stili disordinati di design degli anni '80 e '90), la definizione stessa di "buon design"? senza dubbio includerà menzioni di allineamenti semplici e solidi.
In fin dei conti questa è una buona cosa. I layout basati su griglia forniscono struttura, equilibrio e organizzazione senza pari. Portano un ritmo prevedibile e un senso di familiarità al design e fanno risaltare il contenuto di propria iniziativa.
I layout a griglia sono incredibilmente intuitivi. Istintivamente leggiamo una pagina da sinistra a destra, dall'alto verso il basso e le griglie tendono a rinforzare piuttosto che sfidare questa tendenza. Con un design basato sulla griglia, il contenuto è esattamente dove lo spettatore si aspetterebbe che fosse, senza sforzi straordinari.
Disponiamo di intere gallerie di design, come quella mostrata sopra, dedicate ai progetti basati sulla griglia. Esistono innumerevoli framework CSS e modelli di Photoshop dedicati per aiutarci a realizzare rapidamente layout di griglia con il minimo sforzo. Se il design è una religione, le griglie sono le sacre scritture alle quali ascriviamo la verità.
Se corriamo ancora con questa metafora che va oltre, allora l'argomento di oggi non è altro che "bestemmia". Scopriamo come introdurre un po 'più di varietà nei nostri layout abbandonando la griglia, almeno in parte, a favore di layout e grafici più organici. Si scopre che ci sono molti modi in cui puoi strutturare le informazioni, ma non dire agli dei del design.
Trova altri modi per dirigere l'attenzione
Il nostro primo esempio di layout alternativo viene da We Are Empire, un'agenzia di design digitale. Ecco uno screenshot della home page del loro sito web.
Come puoi vedere, sicuramente non rappresenta il tuo tipico layout di pagina web. Ci sono molte cose da notare qui. Innanzitutto, gli oggetti primari nella pagina sono cerchi. Qualsiasi normale sito web basato sulla rete è generalmente costituito principalmente da oggetti rettangolari. Le griglie sono costituite da rettangoli, quindi gli oggetti con quattro spigoli e almeno gli angoli minimamente rigidi funzionano abbastanza bene.
Al contrario, quasi tutti i layout organici che incontrerai utilizzano le cerchie pesantemente. I cerchi si sentono più organici e sembrano adattarsi meglio a questo stile di layout. Inoltre, presentano designer ribelli con un altro modo di allontanarsi dalla norma.
Ancora più importante delle forme degli oggetti è il modo in cui sono connessi. Ancora una volta, i layout della griglia possono essere letti in modo molto naturale, ma i layout organici lasciano l'occhio per vagare nella confusione alla ricerca di cosa guardare dopo.
Creando un percorso rudimentale, il designer qui ha creato un chiaro flusso di informazioni da seguire. Guardando questa pagina, quasi non puoi fare a meno di seguire il percorso con i tuoi occhi; un trucco semplice ed estremamente efficace per controllare l'esperienza dell'utente.
Meno oggetti
Il percorso aiuta, ma non è una necessità completa. Questo è particolarmente vero quando ci sono davvero pochi oggetti nel layout. Per esempio, controlla la pagina di Michael Wong qui sotto, che utilizza un layout simile.
Il sito di Wong utilizza un'altra tecnica popolare per questi tipi di layout: l'animazione controllata da mouse. Spostando il mouse sullo schermo, gli oggetti nel layout si muovono in un effetto di parallasse che simula un'interfaccia 3D.
La struttura è ancora presente
Una cosa molto importante da ricordare quando ti allontani dai layout basati sulla griglia è che non devi necessariamente abbandonare del tutto la struttura. Come illustra il layout di Melonfree di seguito, il tuo progetto può ancora essere altamente logico.
Qui, a favore di una griglia semplice, troviamo l'utilizzo pesante della simmetria arrotondata. Il design è abbastanza attraente e ben bilanciato. Leggere in un cerchio non è sicuramente la cosa più facile del mondo, ma il risultato finale è piacevolmente diverso.
Punti focali
Quando lavori con un layout alternativo, cerca sempre di rimanere ben consapevole di dove stai creando punti focali. Il layout sopra intenzionalmente ha un pesante disegno verso il centro dove troverai una grande grafica di un melone, che rappresenta il nome dell'azienda.
Nei tuoi layout, usa dimensioni, colore e posizione degli oggetti per creare punti focali specifici e analizzare come funzionano bene con il percorso visivo che stai cercando di creare (dall'alto).
Costruisci una scena
Un metodo di layout alternativo molto diverso ma ancora abbastanza popolare è quello di creare una scena che funge da interfaccia per il tuo sito. In genere metto in guardia contro questo, perché di solito finisce nella direzione di un brutto sito di tipo fast food basato su Flash, in cui non è possibile trovare una sola cosa.
Tuttavia, questo metodo può anche portare ad alcuni siti interessanti e ben progettati. Considera il sito iCodeLabs di seguito, che utilizza una scena illustrata davvero fantastica che può essere esplorata, indovinata, spostando il mouse.
Una caratteristica chiave qui è che il sito iCode riserva la scena esplorativa come elemento divertente opzionale del sito. La navigazione principale è un'interfaccia della barra più familiare nella parte inferiore della pagina. Qui non ci sono battute di caccia!
Grids: Hidden But Rarely Gone
Il grande segreto di tutta questa discussione sull'abbandono dei layout basati sulla griglia è che raramente sono completamente assenti da un determinato web design. Infatti, se visiti i siti mostrati sopra, puoi vedere che c'è ancora una struttura di griglia generale per molte pagine.I metodi di layout alternativi esistono nelle aree entro la struttura più grande
La lezione qui è che non devi, e spesso non vuoi, abbandonare completamente la sicurezza di layout chiari, semplici e logici per ottenere qualcosa che appaia e si senta unico.
Griglie inclinate
Un modo intelligente per nascondere il layout basato sulla griglia consiste nel fare un uso forte delle linee diagonali anziché delle linee verticali e / o orizzontali. Si possono applicare le stesse convenzioni esatte che si usano nelle normali griglie, il risultato sembra semplicemente spigoloso.
Come potete vedere, Estilo DLT ha l'aspetto di un layout organico, ma in realtà è conforme ad alcuni principi di layout molto rigidi.
Conclusione
Allontanarsi dalla norma può essere un esperimento straordinariamente rinfrescante. Ti aiuta a pensare in modo diverso e a vedere il design in modi che non hai mai avuto prima. Esplorare idee di layout alternative è il modo migliore per bagnare i piedi in questa arena. Usa gli esempi e le informazioni di cui sopra per iniziare nella giusta direzione.
Ricorda che i layout della griglia sono spesso interrotti ma raramente vengono abbandonati completamente e che anche quando non si utilizza una griglia, può ancora esserci una struttura molto logica per il layout. Lascia un commento qui sotto con un link a tutti i layout non tradizionali che hai trovato. Inoltre, facci sapere se sei un pignolo per le griglie o sei incline ad avventurarti fuori dagli schemi con i tuoi layout.