Share
In precedenza, nella Settimana del Web Design, abbiamo visto come un semplice layout può essere combinato con sfondi, motivi e foto diversi, oggi faremo un ulteriore passo avanti. Cambiamo completamente l'aspetto di un sito Web cambiando non solo lo sfondo, ma lo stile generale del design.
Inizieremo con il sito Grungy Paper Texture che abbiamo creato in un precedente tutorial, quindi modificheremo il design per sembrare minimali, metallici, astratti e web2! E dopo parleremo del processo di apprendimento di una libreria di stili di web design. Quindi iniziamo…
Questo post è il giorno 8 della nostra sessione di Web Design. Sessioni creative "Session Day 7Session Day 9"Quindi, come ti ricordi dal nostro tutorial originale, il design del sito assomiglia a questo:
È un design sgangherato e strutturato basato su un layout semplice, solido e sottostante. Quello che faremo è prendere il layout sottostante e trattarlo come un appendiabiti, scambiando stili diversi e osservando il motivo per cui ogni aspetto funziona.
In ogni stile c'è molta variazione, ma qui ci sono alcuni tratti distintivi di un look sgangherato:
Un design relativamente pulito sposato con alcuni elementi sgangherati: carta, trame.
Visita il sito
Off testo, elementi e trame collati.
Visita il sito
Un buon esempio di look sgangherato messo a disposizione in una struttura di blog.
Visita il sito
Un sacco di altri esempi di tutte le cose sgangherate!
Visita il sito
Il nostro primo passo di progettazione è quello di ridimensionare completamente il nostro look e sbarazzarsi di tutto ciò che non è essenziale. Vogliamo fare in modo che abbiamo un punto di partenza per gli altri progetti, ma lungo il percorso creeremo una sorta di look minimale.
Questi sono i passi da compiere:
Ecco la nostra versione minima:
Di tutti gli sguardi che faremo oggi, questo è il meno adatto a questo layout, in particolare all'area a schede. Comunque è un'approssimazione OK ...
In ogni stile c'è molta variazione, ma qui ci sono alcuni tratti distintivi di un aspetto minimale:
Davvero minimo con una combinazione di colori
Visita il sito
Tipografia minimale e linee pulite mescolate con un pizzico di elementi audaci di fotografia / design
Visita il sito
Minimal incontra Flash - e controlla il portfolio di lavoro che include molti altri esempi di design minimali.
Visita il sito
Tanto più design minimale da verificare
Visita il sito
Prendendo il look minimale che abbiamo appena creato, ora possiamo aggiungere un po 'di stile. Questa volta vogliamo fare un look metallico. Per questo abbiamo bisogno di alcuni grigi chiari, e questi sembrano particolarmente fantastici su uno sfondo scuro.
Questi sono i passi da compiere:
Ecco la nostra versione metallica:
Ed ecco alcune note:
In ogni stile c'è molta variazione, ma qui ci sono alcuni tratti distintivi di un aspetto metallico:
Apple utilizza da tempo una barra di navigazione superiore metallica, con una leggera smussatura sul testo, un'icona Apple incorporata e alcuni altri effetti metallici.
Visita il sito
Lance è un maestro nel design dell'interfaccia di Photoshop, controlla il suo portfolio di interfacce metalliche
Visita il sito
Un design metallico dall'aspetto molto lucido.
Visita il sito
Uno sguardo sempre popolare è usare uno sfondo astratto, una trasparenza e una tipografia super pulita. Quindi lo faremo dopo!
Quindi, ricominciare dal design minimale:
Ecco la nostra versione astratta:
E qui ci sono alcune note sul design:
In ogni stile c'è molta variazione, ma qui ci sono alcuni tratti distintivi di questo aspetto:
Splendido effetto di sfondo fumoso.
Visita il sito
Combina un brillante sfondo sgangherato con strati e sezioni di grande effetto
Visita il sito
La nostra ultima interruzione di stile è nella terra cliché del design Web 2.0. Devo ammettere che non sono nemmeno sicuro di quale sia veramente il design di web2, ma ho cercato di rendere questa versione un po 'amichevole e accessibile, il che credo sia la caratteristica principale dello stile.
Ripartire con il design minimale:
Ecco la nostra versione web 2.0:
E qui ci sono alcune note!
In ogni stile c'è molta variazione, ma qui ci sono alcuni tratti distintivi di un aspetto del web 2.0:
Per me questi ragazzi hanno davvero iniziato molto di quello che associo al Web 2.0
Visita il sito
Adoro quel piccoletto! Un asso design di SimpleBits.
Visita il sito
Un gradiente luminoso rende questo sito Web.
Visita il sito
Quindi eccoli tutti, puoi cliccare sull'immagine qui sotto per vederli a grandezza naturale. Inoltre, se sei un membro Plus, puoi prendere tutti e cinque i file PSD dall'area Plus.
Quindi siamo onesti, i cinque layout non sono necessariamente esempi particolarmente buoni dei loro rispettivi stili. Il mio obiettivo piuttosto in questo tutorial è quello di mostrare come è possibile dare un design un certo look o stile seguendo alcuni segnali visivi. Dovresti essere in grado di vedere che puoi vestire lo stesso layout in modi diversi.
Per produrre davvero un ottimo esempio di un certo stile di design, probabilmente cambierai il tuo layout in modo più specifico per adattarlo allo stile. E naturalmente avrebbero avuto bisogno di molto più tempo di quello che avevo :-) Spero comunque che questo scambio di stili illustri come iniziare a guardare i progetti web per imparare diversi stili di design.
Nel nostro precedente articolo - 8 Idee, tecniche e trucchi per il tuo Web Design Toolkit, ho detto che è una buona idea avere una libreria di stili da disegnare.
Quando si disegna uno spazio vuoto all'avvio di un nuovo progetto, a volte può essere utile solo per ricorrere a una scelta stilistica predefinita e quindi lasciarsi guidare. Inevitabilmente finirai con qualcosa di totalmente diverso da qualsiasi cosa tu abbia progettato prima, e almeno ti aiuterà a iniziare. Ma sii molto cauto nell'usare lo stile sbagliato solo perché sembra interessante, e non perché sia appropriato per il client / messaggio / contenuto. L'unico antidoto a fare questo è conoscere e avere molti stili di design diversi.
In questo articolo abbiamo brevemente esaminato cinque look o stili e ci sono milioni di stili, sottostili, combinazioni, adattamenti e look che sfidano lo stile tutti insieme.
L'unico vero modo per imparare gli stili di design è guardarli. Ora c'è guardando e poi c'è analizzare, cercare, guardare! Una persona normale di solito guarda un sito web, un poster o qualche altro design e vede solo il contenuto, il messaggio e forse la sensazione del design. Come designer devi guardare tutto in modo analitico, cercare di capire perché un design ha un certo feeling, quale messaggio il design stesso sta dando, quali caratteri sono stati usati, quali elementi visivi e tecniche ha usato il designer, come è stato combinato e come è stato organizzato.
Dovresti sempre guardare al design, non solo online, ma ovunque, perché gli stili di design non sono in alcun modo limitati ai siti web. Poster, pubblicità, crediti televisivi, volantini e ovunque ci sia design, c'è l'opportunità di imparare.
Più guardi e impari, più ne avrai a tua disposizione. Quando ti siedi per progettare un nuovo progetto, sarai in grado di creare nuove idee visive anche di fronte a una tela bianca. Quando ti vengono dati materiali di design o marchi, cose come caratteri tipografici, loghi e messaggi attiveranno scelte stilistiche come indizi di mistero.
Quando fai uso di stili che hai visto prima, dovresti sempre cercare di far sentire la tua voce di design. Dagli un tocco personale, sei proprio mix o guarda, in modo che la tua voce di design sia ascoltata. E sempre, sempre, assicurati di applicare il design che si adatta e migliora il messaggio - non cadere nella trappola di pensare solo all'estetica.
Ricorda che la forma segue la funzione. Lo stile e le scelte estetiche che fai sono lì per aiutare il sito web a svolgere la sua funzione.
Questo post è il giorno 8 della nostra sessione di Web Design. Sessioni creative "Session Day 7Session Day 9"
Accentsconagua