Come disegnare un layout in stile web 2.0? tutorial e psd
Dopo aver analizzato le caratteristiche e i trend dello stile web 2.0, oggi disegneremo il terzo layout di questa rubrica. Dopo il corporate e il grunge, oggi tocca ad un layout web 2.0 per una pagina web che offre software per applicativi mobili. Questa settimana il nostro cliente e’, manco a dirlo, Your Inspiration Web 2.0.
Sei pronto? Cominciamo a disegnare il nostro layout in Photoshop.
DownloadApriamo un nuovo documento di 1680 e, tramite il frame work 960 grid system, delimitiamo l’area di 960 px entro cui verrà racchiuso il sito, con dei margini laterali di 360px.
Cosi come già fatto nel layout in stile corporate, creiamo una fascia centrale, in cui posizioneremo (un po’ come una testata) le immagini del prodotto che vendiamo, un piccolo testo descrittivo …questa sezione avrà il compito di attrarre il focus dell’utente che naviga il sito del nostro cliente.
Con lo strumento rettangolo creiamo quindi la nostra sezione centrale, che si estende per tutta la larghezza del documento e che sarà alta 400px. Dalla finestra degli stili di livello assegniamo una sfumatura radiale che va da un blu scuro (#043573) all’azzurro (#0a97f1) con le seguenti impostazioni:
Adesso posizioniamo il logo, in alto a sinistra:
A destra invece, con lo strumento rettangolo arrotondato, disegniamo un rettangolo celeste (#b7d7f1): questo sarà il background del nostro menu di navigazione. Con lo strumento forma personale scegliamo la forma di un triangolo che, posizionato sotto il background, darà l’idea di “fumetto”.
A questo punto assegniamo una sfumatura al livello 0 (il livello di sfondo), cosi da rendere meno bianca la pagina web. (Nota: se il livello e’ ancora bloccato, basta cliccare due volte con il mouse per sbloccarlo). Utilizziamo una sfumatura dall’azzurro (#c8e4fc) al bianco. Il risultato dovrebbe essere simile a questo:
Adesso prendiamo un’immagine raffigurante un cielo azzurro con delle nuvole bianche, una cosa del genere:
Importiamola nel nostro documento e posizioniamola in alto, sotto il logo e sotto il rettangolo arrotondato. Riduciamo un po’ l’opacita’ (circa il 60%) e giochiamo con i livelli di fusione fino a che non troviamo un risultato che ci soddisfi. Nel nostro caso abbiamo scelto il livello di fusione Luminosità) .
Adesso il cielo e’ meno evidente, ma rende più accattivante il background.
Non resta che inserire i link della navigazione per completare la parte superiore del nostro layout. Utilizziamo un font morbido e leggibile: il Century Gothic.
Disegniamo ora un altro rettangolo azzurro (#badefc), largo 220px (3 colonne della grigia a 12 colonne) e alto 430px. Posizioniamolo in modo che fuoriesca (sopra e sotto) dalla sezione centrale.
Adesso, con lo strumento penna, uniamo le estremità del rettangolo con la sezione centrale, creando una specie di triangolo:
Assegniamo a questo triangolo un colore leggermente più scuro dell’azzurro del rettangolo (#92b8d7) per dare un effetto 3d al rettangolo. Seguiamo lo stesso procedimento anche per l’angolo inferiore destro per ottenere questo effetto:
Su questo rettangolo abbiamo deciso di inserire un testimonial e due banner di contatto (uno con i recapiti telefonici, l’altro che invita l’utente a contattarci tramite e-mail.) Disegniamo un rettangolo arrotondato con un triangolino, per richiamare il fumetto utilizzato come background del menu e inseriamo all’interno la testimonianza di un nostro cliente.
Sotto inseriamo un piccolo pulsante che offre l’opportunità’ di leggere le altre testimonianze.
Adesso, sempre con il font Century Gothic, lo strumento rettangolo arrotondato e l’ausilio di due icone, creiamo una sezione di contatto semplice ma esteticamente gradevole.
Importiamo l’immagine del nostro prodotto (in questo caso l’immagine di un telefono, facilmente reperibile sul web) e inseriamola al centro della sezione blu.
Ora duplichiamo il livello del telefono: tasto destro sul livello, click su duplica livello.
A questo punto, una volta posizionato nel livello duplicato, clicca sul menu Modifica >> Trasforma >> Ruota 90 gradi come mostrato nella seguente immagine:
Il risultato e’ questo:
Trasciniamo il livello del secondo telefonino e posizioniamolo sotto il livello del primo, in modo che venga visualizzato dietro di esso:
A questo punto uniamo i due livelli in un unico livello (selezionando i livelli e premendo CTRL+E) e duplichiamo nuovamente il livello. Poi cliccando sul menu Modifica >> Trasforma >> Ruota 180 gradi:
Avremo questo risultato:
A questo punto, sempre dal menu Modifica >> Trasforma scegliamo la voce “rifletti orizzontale” e abbassiamo un po’ l’immagine.
Riduciamo l’opacità’ (25%) e con lo strumento gomma impostato come pennello morbido, cancelliamo una buona parte dell’immagine riflessa.
Cancelliamo fino ad ottenere questo risultato:
Bene, abbiamo visto come realizzare un buon effetto riflesso in modo molto semplice ed efficace. Diamo un’occhiata allo stato attuale del nostro layout:
Il sito sta prendendo sempre più forma. Accanto ai due telefoni aggiungiamo le caratteristiche del software che stiamo vendendo, magari accompagnando le varie frasi con alcune icone.
E infine inseriamo un bel pulsante call-to-action, che mi portera’ alla pagina di acquisto e download del software.
Ora che la sezione superiore e’ terminata, passiamo al resto del layout. Dividiamo la sezione inferiore in 3 box celesti (rettangoli arrotondati con colore #b7d7f1), aiutandoci con la griglia.
Nel primo box inseriamo l’ultima news:
Nel secondo visualizziamo alcuni degli utenti attivi nel forum:
E nell’ultimo visualizziamo gli ultimi tweet.
A questo punto duplichiamo il cielo con le nuvole, ruotiamolo di 180 gradi e posiziona molo in fondo al documento.
Per finire creiamo il footer del layout: con lo strumento rettangolo arrotondato disegniamo un’altra sezione, posizionata al centro, in cui inseriremo i dati di copyright.
Curioso di vedere il risultato? Ecco il nostro layout in stile web 2.0:
Conclusioni
Riflessi, icone, pulsanti call-to-action, curve morbide: il layout che abbiamo disegnato possiede molte caratteristiche dello stile web 2.0. Non e’stato molto difficile ottenere un buon risultato, esteticamente gradevole e al tempo stesso semplice da realizzare, non trovi? Scarica pure il psd e utilizzalo per i tuoi progetti personali: l’appuntamento e’ al prossimo stile, non mancare!
Gli altri articoli di questa guida:
- Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style?
- Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style?
- Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0 style?
- Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style?
- Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style?
- Gli stili nel web design: le caratteristiche dell’organic style | Come realizzare un sito in organic style?
- Gli stili nel web design: le caratteristiche dello stile tipografico | Come realizzare un sito in typography style?
- Gli stili nel web design: le caratteristiche dell’illustration style | Come realizzare un sito in illustration style?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
30 commenti
Trackback e pingback
-
Gli stili nel webdesign: le caratteristiche dello stile grunge | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Come disegnare un… -
March’s Fresh Photoshop Web Layout Tutorials
[...] 29. How To Design A Web 2.0 Style Layout [...] -
Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
Come disegnare un layout in stile magazine? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0…
sarah sei un mito!
Grazie Ilaria :) e’ un piacere trovarti nelle nostre pagine!
A presto
Sarah for president! Fossi andata alle elezioni avresti vinto…dire interessante questo post è poco! Complimenti!
Addirittura! :) Che dire, grazie! Sono felice che questa rubrica abbia cosi successo. Alla prossima!
uhmm… mi hai dato ispirazione per un sito che devo realizzare, GRAZIE! :D
Felice di esserti stata d’ispirazione :D
Ovviamente poi ci farai vedere il risultato!
A presto
Complimenti per l’articolo!
Sarah hai mai preso in considerazione di usare Fireworks per disegnare i layout?
Io lo trovo più immediato, ed ha alcune funzioni che mi velocizzano il lavoro.
Ciao Mirko, benvenuto su YIW e grazie per i complimenti.
Se devo essere sincera non ho mai utilizzato Fireworks per disegnare i layout (quindi non ne conosco ne’ pregi ne’ difetti), sono “nata” con Photoshop, ormai mi e’ familiare e riesco a ottenere gli effetti che desidero con molta semplicita’.
Imparare a gestire un nuovo programma per ottenere gli stessi risultati mi porterebbe via troppo tempo, e dato che tra una cosa e l’altra ne ho davvero poco :) preferisco investirlo per migliorare i miei skills.
Potresti togliermi una curiosita’? Quali sono gli effettivi vantaggi nell’utilizzo di Fireworks rispetto a Photoshop? Io per esempio ho letto da qualche parte che Fireworks ha una gestione dei filtri piu’ limitata rispetto a Photoshop, ma non so quanto possa essere vero.
Questo confronto potrebbe essere utile anche agli altri lettori di YIW ;)
Grazie per il tuo intervento, a presto!
Semplice e geniale!
Grazie Sara, lo usero’ di sicuro come riferimento e complimenti per la palette di colore, mi piace parecchio =)
Grazie Claudie’!
In realta questi colori (blu e azzurro) sono i colori preferiti di Just e Nando…io preferisco tonalita’ calde, il rosso, l’arancione. ;)
Ps. Le risate che mi sono fatta con il tuo articolo….mi sa che questo mese andra’ nei preferiti della redazione, casomai qualche lettore di YIW se lo fosse perso :)
Ecco cosa mi piace di questo blog. Tutorial come questo spiegati nei MINIMI DETTAGLI.
Scritti con chiarezza, ben formattati etc
I love YIW
Ciao Caluk, ti ringrazio, commenti come il tuo ci ripagano del tempo (e delle energie) investite per creare articoli come questo. E’ una grande soddisfazione per tutti noi :)
A presto
Troppo buona SaraH =)
Cito testualmente
Fireworks CS4 is an amazing web design and storyboarding tool. If you are not leveraging its power within your own design processes you are crazy.
http://www.gridlinked.info/reflections-made-easy-with-fireworks-cs4-commands/
Che bel layout!
Mi unisco anche io al club degli uomini. Il blu è il top. non ci sono storie.
Grazie Maurizio :)
…ma che blu e blu! Rosso, colore dell’amore, della passione!
(chissà se statisticamente la maggior parte degli uomini si orienta per blu e azzurro mentre le preferenze delle donne vanno verso le tonalità calde e vivaci..mumble mumble..)
E io che impazzisco per l’arancione devo cercare un bravo psicologo? :)
Ciao a tutti. E’ da qualche giorno che seguo il vostro blog e vorrei farvi i complimenti per gli interessanti e utili articoli che scrivete quotidianamente!
Finalmente posso imparare qualcosa di nuovo sul web design anche su un sito italiano!! Credo che questo sito sia un po’ come lo Smashingmagazine o il Nettuts del nostro paese!
Complimenti ancora, continuate così!
Ciao Gio, benvenuto su YIW e grazie per questo bellissimo commento. Fin dal principio la molla che ci ha spinto a mettere in piedi questo progetto è stato il desiderio di voler condividere le nostre esperienze e offrire articoli e risorse di qualità, anche se questo ovviamente richiede un impegno non indifferente. Quando ciò che facciamo viene apprezzato in modo così plateale è una soddisfazione grandissima :)
A presto e grazie per il tuo intervento.
Ciao, stavo leggendo e provando a fare questo ottimo tutorial. Solo che a lavoro concluso (forse non perfettamente) sono incappato in un bloblema. Ho messo come dimensioni 1680 come è scritto nella guida, il problema è ceh se poi lo visualizzo su un monitor con risoluzione tipo 1280 vi appare la scrollbar orizzontale. Come mai? Ho visto che anche questo sito è 1680px pero’ la scroll non appare :(((( Dove sbaglio?
Grazie.
Dario.
Bellisimo! Complimenti Vivissimi.Grazie per aver spiegato passo passo tutto il disegno.Mi piacciono moltissiomo i colori utilizzati ed il riflesso all’immagine del telefono.bellissimo!
P.S. Ho visto questo lavoro usato come esempio e codificato in html qui http://www.imediacreatives.it/portfolio.html Grazie Ancora per il Tutorial! Marzia-
ciao sara, ciao tutti, una domanda, ma come fai a scegliere il modello frame work 960 grid system tra quelli proposti??? mi spiego meglio, ce ne sono diversi che cambiano sulla base del numero delle colonne… tu su che cosa ti basi per sceggliere questo modello????
grazie
paolo
Ciao Paolo, scelgo il framework sulla base del mockup progettato per il sito, esempio: se ho intenzione di disporre tre colonne con tre box in home non andro’ a prendere la griglia a 16 colonne ma usero’ quella a 12, cosi che ogni box sia precisamente di 4 colonne.
Prima decidi gli elementi da inserire e come inserirli, poi sulla base di questi scegli la griglia che piu si avvicina alle esigenze del layout che si sta progettando :)
ok ok capito capito… ho appena finito un master in progettazione multimediale, ma le vostre lezioni valgono più di qualsiasi corso, davvero!!! ti ringrazio per la disponibilità e per quello che fa insieme a tutti gli altri… spero di diventare bravo come voi!!!!
Non è descrivibile quanto sto imparando da voi…siete dei mostri! (in senso positivo ovviamente) :)