La storia è vecchia quanto la progettazione grafica: hai due sezioni diverse e hai bisogno di un modo per separarle visivamente. Come designer, mi capita spesso di ricorrere allo stesso vecchio uno o due trucchi per rimuoverlo. Perché non mescolare un po '?
Oggi ti mostreremo dieci modi fantastici per creare due distinte sezioni di contenuti. Ogni esempio proviene da un sito Web reale, quindi è possibile fare clic per vederlo in azione.
Il re di contrasto
Questo è uno dei modi più semplici e più comuni per separare due sezioni. Tutto quello che fai è trovare due colori che contrastano davvero bene.
Questo è in genere fatto con bianco o un equivalente vicino oltre a qualcosa di veramente scuro come il nero o davvero brillante come il rosso. Il contrasto di colori è uno dei tuoi strumenti di design più potenti, brandilo abilmente e avrai sempre un design accattivante.
La dissolvenza veloce
La dissolvenza veloce è come l'opposto dell'esempio precedente. Qui invece di un sacco di contrasto e una linea dura abbiamo pochissimo contrasto e una separazione morbida.
Questo è l'ideale per le situazioni in cui si desidera aggiungere un minimo di differenza visiva tra due sezioni che sono ancora strettamente correlate da un punto di vista concettuale.
L'esempio sopra usa la dissolvenza rapida per separare le icone dal testo del descrittore. Ancora una volta, i due appartengono insieme e tuttavia funzionano bene con una leggera distinzione.
La tacca
La tacca può essere combinata con molte altre tecniche, ma viene generalmente utilizzata con una linea dura come si vede nell'esempio qui sotto. Questo è più di un punto di una tacca, ma una variante popolare è di invertire il triangolo in modo che tagli nello strato inferiore.
La tacca è perfetta quando vuoi attirare l'attenzione su qualcosa. Questo di solito si presenta sotto forma di una raccolta orizzontale di elementi con una selezione attiva. Il triangolo ovviamente si sposta mentre selezioni elementi diversi.
L'album
Non sono sicuro di chi l'abbia iniziato, ma i separatori frastagliati come quello qui sotto sono diventati molto popolari negli ultimi due anni. È una soluzione elegante che aggiunge sicuramente più interesse visivo rispetto alla tipica linea continua.
La tecnica non suggerisce necessariamente un tema scrapbook, è proprio quello che penso ogni volta che lo vedo. Per la variazione, prova a sperimentare l'altezza, la spaziatura e la rotondità del punto. Si potrebbe anche andare con un modello meno regolare come un bordo strappato.
The Cutoff
Questo esempio in realtà proviene dallo stesso sito dell'ultimo, complimenti a Colin Grist per un sito fantastico. Scopri come separa queste due sezioni:
Qui usa una linea dura, ma al posto del contrasto del colore taglia semplicemente un grafico. La soluzione è meravigliosamente semplice e funziona molto bene. Se scorri un po 'più in basso, riprende la scena, quindi questa è più una striscia, ma puoi sicuramente usarla in entrambi i modi.
La silhouette
Questo è concettualmente lo stesso del look dell'album, in pratica stai semplicemente rompendo la linea in modo che non sia lineare e noioso. Tuttavia, una grafica entra in gioco per aggiungere molto più interesse visivo.
Mi piace molto il modo in cui questo designer ha fatto un passo in avanti e ha messo a strati gli edifici sullo sfondo. Rende la separazione molto più complessa e impressionante. Non rubare solo questa idea e andare con gli edifici, cosa su alcune altre forme che potresti provare: montagne, acqua, alberi, ecc.
La sovrapposizione
L'overlay è un altro modo per separare due sezioni in modo molto sottile. È un po 'più elegante e comune della dissolvenza veloce.
Questo può essere facilmente realizzato in Photoshop con l'opacità del livello, ma anche l'utilizzo di CSS per realizzarlo è semplice. Assicurati di dichiarare il tuo colore usando RGBa e imposta quel valore alfa su qualcosa che si adatti al livello di trasparenza che stai cercando.
Il trucco di sovrapposizione è comunemente usato sulla navigazione e su altre barre di menu, sia nella progettazione dell'interfaccia utente che di quella del sito web. E 'davvero una tecnica solida per quasi tutti gli scopi però e dovrebbe sicuramente andare nel tuo? Usa spesso? borsa di trucchi.
The Ruler (a.k.a The Timeline)
Mi piace molto l'aspetto di questo e sicuramente lo terrò a mente per i progetti futuri. L'esempio sotto lo usa verticalmente ma può anche essere facilmente orizzontale.
Puoi usare questa tecnica come un semplice elemento statico, ma questo designer ha fatto un passo in più. Fermati dal sito e scorri verso il basso per vedere come diventa uno strumento di navigazione dinamico. Molto lucido!
Questo esempio ha anche una tecnica bonus, nota la semplice linea orizzontale a pixel singolo. Se hai un design minimale, a volte il modo migliore per separare due cose è solo disegnare una linea! Quanto può essere più facile ottenere?
The Slice
Ho discusso per un po 'su cosa chiamare questo. È un cuscino, una diga, un soffio, una fetta, una linea o una piega? Non so come lo chiami ma sembra piuttosto bello.
Ci sono diverse varianti su questa idea. Fondamentalmente puntano tutti ad aggiungere un po 'di dimensionalità all'interruzione del contenuto e di solito implicano poco più di un intelligente posizionamento delle ombre. Questo è perfetto per quando stai andando per un po 'di realismo nel tuo design.
Il lavandino della cucina
Se questo post ti fa girare la testa chiedendoti quale metodo usare per il tuo attuale progetto di design, tieni presente che puoi usarne diversi!
Come con qualsiasi altra cosa, è facile andare troppo lontano, ma penso che il design sopra sia un buon esempio dell'utilizzo di molti dei metodi, ma che lo mantenga attraente e non troppo occupato. Possiamo individuare contrasto di colore, sovrapposizioni, linee semplici e il metodo di album, il tutto in poche centinaia di pixel di spazio!
C'è sicuramente qualcosa da dire per coerenza e ripetizione, quindi assicurati di non usare solo qualcosa di diverso per ogni sezione. Scegli un paio di metodi diversi e ripeterli più volte attraverso il design.
Conclusione
Bene, questo include i nostri dieci esempi su come progettare i separatori di contenuti. Questo può sembrare un po 'banale ora, ma fidati di me, la prossima volta che progetterai qualcosa penserai a questo post e alle tue varie opzioni per creare distinzione visiva!
Lascia un commento qui sotto e facci sapere quali tecniche usi regolarmente nei tuoi progetti.