C'è sempre quel momento all'inizio di un progetto di design del sito web dove pensi? Dove comincio ?? Combatterai con il desiderio di creare qualcosa di totalmente diverso e nuovo rispetto a qualcosa di testato e affidabile.
Realisticamente, ci sono alcuni layout che non invecchiano mai. Questi pattern sono generalmente accettati dagli utenti, facili da comprendere e forniscono una solida struttura per praticamente qualsiasi tipo di design e contenuto. Qui, guarderemo questi cinque? Senza tempo? layout del sito Web e come sfruttarli al meglio per il tuo prossimo progetto.
1. Immagine dell'eroe impilata su una semplice griglia
Indipendentemente dalle dimensioni dello schermo, questo formato dà all'utente qualcosa da guardare, scorrere e digerire. Mentre le specifiche effettive per questa forma potrebbero cambiare in base al tipo di dispositivo o se si preferisce un'immagine a larghezza intera o bassa, lo schizzo è più o meno lo stesso.
- Navigazione
- Immagine dell'eroe con sovrapposizione di testo
- Da 2 a 4 colonne con piccoli elementi informativi con o senza icone
- Area del corpo principale
- footer
Il design è pulito, offre una forte presenza visiva e tende a funzionare bene con strutture reattive, indipendentemente dal punto di interruzione. Alcune applicazioni alternative di questo formato sono per cambiare un'intestazione dell'eroe statico per un cursore o un'intestazione video.
Perché funziona: Ogni elemento ha un posto e c'è un flusso logico per seguire il contenuto. L'immagine principale è la prima impressione che dovrebbe attirare gli utenti nel design e gli elementi secondari dovrebbero spingere gli utenti a fare clic in giro.
Incorporare una tendenza: Aggiungi icone o scatole colorate luminose agli elementi informativi basati su colonne o usa uno stile piatto per gli elementi dell'interfaccia utente in tutto il progetto.
2. Una pagina, una colonna
I layout di una pagina sono una delle migliori soluzioni per siti Web con contenuti minimi e un singolo focus o messaggio. Quando il messaggio è semplice, non c'è bisogno di impazzire con la forma del layout. Un layout a una colonna può essere la soluzione perfetta.
- Navigazione
- Area del corpo principale con immagini e testo
- footer
Quando si utilizza questo modello di progettazione, lo spazio è un elemento di design essenziale. Assicurati che gli elementi abbiano un sacco di spazio tra loro e prendi in considerazione l'utilizzo di spaziature esagerate sui bordi esterni del disegno. Il rischio con un sito web di una sola pagina è che può sentirsi angusto o disorganizzato se la spaziatura è fuori pericolo.
Perché funziona: La formula di una pagina è più adatta per i piccoli siti web. Può rendere più pesante la mancanza di contenuti su una pagina introduttiva o un portafoglio semplice di quello che è. Il formato funziona anche per blog semplici o piani di contenuti che si limitano a un singolo formato.
Incorporare una tendenza: Aggiungi lo scrolling della parallasse per rendere la pagina più coinvolgente mentre gli utenti scorrono. Questi semplici effetti possono rendere più semplice e robusto un semplice disegno di una sola pagina (e come se avesse effettivamente più pagine con ogni tocco del mouse).
3. Griglia definita
Righe e colonne di contenuti ordinatamente impilati non passano mai di moda. Se la griglia è costruita con molti piccoli pezzi o solo una disposizione quattro per quattro, una griglia pulita dice all'utente qualcosa su di te sin dall'inizio. Questo contenuto è organizzato, gestito bene e ordinato per te.
Le griglie sono incredibilmente popolari tra i progettisti per i propri siti web di portfolio. La cosa bella di una griglia di immagini è che puoi mostrare molti contenuti visivi senza sembrare junky. Questo effetto galleria può essere piuttosto d'impatto.
Le griglie possono anche venire sotto forma di scatole colorate o contenitori per organizzare il testo. Le linee della griglia possono essere visibili o invisibili. Ci sono così tante opzioni tra cui scegliere. Ricorda solo di prestare particolare attenzione con la larghezza e la profondità delle colonne e delle righe e la spaziatura tra ciascuna di esse. Questi piccoli dettagli possono creare o distruggere l'intero progetto.
Perché funziona: L'organizzazione che crea una griglia è difficile da battere. Una bella griglia rende facile per gli utenti trovare e interagire con i contenuti durante la creazione di armonia visiva.
Incorporare una tendenza: Usa semplici bit di animazione per una griglia affiancata in modo tale da far passare il mouse su un clic? un blocco di griglia per mostrare informazioni aggiuntive. Vuoi un'altra opzione? Considera di trasformare la griglia in un mazzo di carte, con uno stile di Material Design.
4. Il modello F classico
La ricerca sul modo in cui le persone guardano i siti web ha scoperto un particolare flusso noto come F-Pattern. Il modello di lettura ha mostrato che gli utenti iniziano nella parte superiore di un sito Web e leggono da sinistra a destra sullo schermo. Poi si spostano e leggono di nuovo. Alla fine, sfiorano il fondo della pagina in linea retta.
La progettazione di contenuti in questo modello F è un modo per aiutare a mettere il contenuto che conta più esattamente dove gli utenti stanno guardando. Questo concetto si traduce in uno schema progettuale comune.
- Intestazione e navigazione
- Ampia colonna a sinistra come area del contenuto principale
- Colonna destra destra (barra laterale) per collegamenti e informazioni correlate che non vanno in fondo alla pagina
- footer
Perché funziona: Le persone sono creature abitudinarie, e questo è un modello testato che mostra il modo in cui la gente pensa, guarda e legge i siti web. È comodo e comune, facilitando la comprensione e l'interazione degli utenti.
Incorporare una tendenza: Capovolgere la posizione della barra laterale o ruotare la barra laterale nell'area di navigazione, oppure utilizzare un'immagine dell'eroe sopra il modello a forma di F.
5. Stratificazione minima
C'è solo qualcosa su un grande design minimale. Lo spazio aperto consente all'utente di sentirsi a proprio agio con un focus diretto. Poi c'è la giustapposizione di strati in quello spazio, che sono più complessi e dettagliati.
È questa combinazione di semplice e interesse che rende questo stile di progettazione lavorabile e modificabile per una serie di tipi di progetti. È anche qualcosa a cui gli utenti sono abituati grazie all'uso comune di Apple sul loro sito web.
Perché funziona: La stratificazione può attirare l'attenzione esattamente sulla posizione in cui è più importante nel design. Particolarmente in sintonia con un design generale semplice, questo è l'elemento che invita gli utenti a prendere nota. La stratificazione su una struttura minima è un ottimo modo per mostrare o evidenziare un particolare contenuto o invitare all'azione.
Incorporare una tendenza: Usa sfumature o ombre sottili per definire elementi in diversi livelli. Anche se queste tecniche di progettazione sono passate di moda per un po ', la creazione di una differenziazione a stento sta facendo un grande ritorno, grazie al Material Design e al rifacimento della creazione di qualcosa di tattile nello spazio bidimensionale.
Conclusione
Quando sei in dubbio con qualsiasi tipo di design, la cosa migliore che puoi fare è tornare alle radici della teoria del design. Usa idee e principi classici per guidare il tuo processo decisionale.
Nella maggior parte dei casi, ciò si tradurrà in qualcosa che è pulito, facile da leggere e segue lo stile convenzionale. Una volta completato il framework di base, è possibile aggiungere un elemento di tendenza per mantenere il layout fresco. Usando quelli di questa filosofia di layout ti aiuterà a creare un sito web che resisterà meglio alla prova del tempo senza apparire datato. (Ora che ci stai pensando, probabilmente inizierai a notare quanti siti web utilizzano effettivamente uno di questi concetti).