4 tendenze di layout essenziali per il 2015
Il web è cambiato molto nell'ultimo decennio e allo stesso tempo non è cambiato affatto. Se guardiamo indietro di 10 anni, scopriremo che il web ha un modello di layout molto comune al lavoro attraverso la maggior parte dei siti. Questo modello di go-to consisteva in un'intestazione, un piè di pagina, una barra laterale e un'area di contenuto. Era il layout previsto per il web. Allo stesso tempo, abbiamo avuto l'ascesa di Macromedia Flash che ha dato il via a un'era di layout alternativi. Layout che non si attengono a questa formula rigorosa. E naturalmente con l'implosione di Flash questo approccio è sfumato per un po '... lo dico per un po', perché è tornato con una vendetta.
Se si esamina una delle molte gallerie popolari che mostrano il web design attuale, si noterà senza dubbio che la struttura fondamentale per le pagine Web è tutt'altro che fissa. Può flettere e cambiare praticamente tutto ciò che deve essere. Questo a mio parere è uno dei migliori effetti collaterali che il web design reattivo abbia mai prodotto. La nuova norma, per così dire, è che sembra non esserci alcuna formula fissa.
Tutto ciò ha detto che possiamo osservare diverse tendenze di alto livello nella progettazione del layout che rappresentano quelli che considero essere layout insoliti. Insolito perché non seguono una formula rigorosa, o un sistema predefinito. Ma sono tendenze in cui posso fornire dozzine, se non centinaia di esempi che riempiono ciascuna di queste categorie.
Quello che trovate qui è un interessante mix di tendenze e layout insoliti che si spera possano ispirarvi a valutare le strutture fondamentali che state applicando al web design. Entriamo e dai un'occhiata ...
Schermi divisi
In questa categoria troviamo una selezione di siti che dividono tutti lo schermo usando una divisione verticale. Ci sono forse molte ragioni per farlo, e nel rilevamento di molti campioni di questo tipo ho trovato due ragioni principali.
Il primo è che a volte un design può avere realmente due elementi primari di uguale importanza. Un approccio comune al web design è quello di classificare le cose in ordine di importanza. Questa importanza viene quindi riflessa nella gerarchia e nella struttura del progetto. Ma cosa succede se in realtà hai due cose da promuovere? Questo approccio consente di dare risalto a entrambi e consentire all'utente di selezionare rapidamente tra di loro.
La seconda ragione per cui ho trovato questo approccio è che a volte è necessario trasmettere una dualità importante. Per esempio, prendi in considerazione il sito Web di Otto e Quattro. Qui vogliono trasmettere il fatto che i loro punti di forza principali sono le loro radici digitali e il loro personale di talento. Questo abbinamento è ciò che li definisce. Lo schermo diviso è un bel modo per presentare questo. E mi piace soprattutto come la e commerciale unisca le due parti.
Niente cromo!
Uno degli elementi principali utilizzati nel web design sono gli elementi: scatole, bordi, forme e contenitori di tutti i tipi usati per dividere il contenuto di una pagina. Considera un'intestazione stereotipata in cui gli elementi sono contenuti e separati in modo ordinato dal contenuto. Una tendenza comune ora è quella di rimuovere tutto questo cromo extra.
Questo è un approccio minimalista, ma fa un passo avanti e presenta alcuni interessanti colpi di scena lungo il percorso.
In questo esempio hanno eliminato la nozione di intestazione e piè di pagina tutti insieme. Invece sembra più un chiosco interattivo. La gerarchia dei contenuti avviene principalmente attraverso un'organizzazione da sinistra a destra, che aiuta a rendere il layout molto intuitivo. E il chrome per separare la navigazione dal contenuto non è semplicemente necessario. Invece, i bei prodotti brillano.
Qui scopriamo che il contenuto è fortemente enfatizzato rimuovendo qualsiasi senso di intestazione o piè di pagina. Invece di leggere prima un'intestazione, leggi il nome della compagnia e una dichiarazione chiara su cosa fanno (e dove lo fanno). Seguito dalla navigazione principale. Che bel modo di sottolineare il marchio prima di far navigare le persone. Rende un flusso elegante. È interessante notare come si scorre la pagina ottiene un colpo di testa e un tocco di cromo. Un layout bello ed efficace che utilizza il modello in modo stimolante.
Modulare o basato su griglia
Successivamente abbiamo layout costruiti su strutture modulari o simili a griglia. In questi progetti ogni modulo è progettato per adattarsi in base alle dimensioni dello schermo. Questo non è esattamente un nuovo approccio, ma l'introduzione del responsive web design lo ha reso ancora più utile. Questo suggerisce il tipo di layout adattabili che è possibile creare con plugin come Masonry.
Questo esempio dimostra perfettamente l'idea. Il design è completamente reattivo. Poiché le dimensioni dello schermo cambiano, ciascun modulo si adatta e si adatta alle dimensioni dello spazio. Dividendo lo spazio in modo uniforme è più facile adeguare il design. E ottengono punti bonus per l'introduzione di un elemento (a schermi di dimensioni maggiori) che rompe le rigide barriere tra i moduli.
Questo esempio è una versione piuttosto intensa del modello. Ovviamente abbraccia l'approccio modulare, che consente loro di spostare facilmente il contenuto dentro e fuori quando necessario. Ma qui c'è un importante elemento di design, a cui mancava l'esempio precedente. Le dimensioni dei moduli variano per riflettere l'ordine di importanza e il suo posto nella gerarchia. Un rischio di questo approccio modulare sta rendendo tutto delle stesse dimensioni, il che significa che non stai davvero sottolineando nulla. Al contrario, questo esempio dà chiaramente importanza all'elemento primario.
Riempire una singola schermata
Finalmente abbiamo siti che utilizzano un approccio in cui il design si adatta a riempire completamente lo schermo. Questo è un sottoinsieme di design reattivo in quanto si adatta alle dimensioni dello schermo. Ma in questa nicchia i disegni si adattano in modo tale da riempire completamente lo schermo e non produrre barre di scorrimento. Questa mancanza di scorrimento significa che il contenuto deve essere estremamente focalizzato e la gerarchia dei contenuti chiaramente stabilita. Trovo che l'attenzione e la chiarezza di questi siti siano rinfrescanti.
Conclusione
Mentre ho sezionato ognuna di queste tendenze qui in isolamento, la realtà è che esse rappresentano elementi costitutivi. E questi blocchi costitutivi possono essere assemblati in molti modi diversi. In effetti, molti dei campioni presentati qui potrebbero essere spostati in numerose delle categorie che abbiamo discusso. La diversità dei layout sul Web moderno e il fatto che siano utilizzabili rendono il Web un mezzo eccitante con cui lavorare.