Un layout semplice e professionale? Disegniamolo insieme in pochi semplici step
In questo articolo abbiamo visto alcuni siti veramente accattivanti accumunati tra di loro da uno stile semplice, pulito e minimalista. I tratti distintivi? Grafica ridotta al minimo, buona tipografia, colori quasi assenti e una spiccata predilezione per bianco, grigio, nero.
Dato che trovo questo stile molto accattivante, oggi disegneremo un layout per un portfolio in Photoshop, concentrandoci su dettagli quali i margini, gli allineamenti e la tipografia e riducendo il più possibile i colori e gli ornamenti grafici che non riteniamo essenziali per l’efficacia estetica del sito.
In fondo all’articolo puoi trovare il file sorgente da scaricare: sei libero di personalizzarlo e di utilizzarlo liberamente nei tuoi progetti. Se invece sei alle prime armi ti consiglio di seguire passo dopo passo questo semplicissimo tutorial e disegnare questo layout insieme a me.
Le basi
Cominciamo con aprire un nuovo documento di 1680 x 1050 con background bianco. Posizioniamo le prime guide esterne a 360px dai bordi, così che la sezione centrale entro cui verrà sviluppato il sito sia larga 960px.
Apriamo il framework 960 grid system, che puoi scaricare su questo sito; nel nostro caso utilizziamo il template a 12 colonne. Per sapere come utilizzare questo framework ti consiglio di leggere il nostro articolo sull’argomento.
Inseriamo il template nel nostro file e posizioniamolo nella sezione centrale della pagina, lasciando esattamente 10px di margine da entrambi i lati. Blocchiamo il gruppo (cliccando sull’icona a forma di lucchetto) così che le colonne non vengano spostate per errore.
Lasciamo una colonna vuota a sinistra (per coerenza grafica ne lasceremo una vuota anche a destra) e inseriamo il logo. Grazie alla griglia possiamo posizionare ogni elemento nel nostro layout con la massima precisione e rispettando i vari margini e gli allineamenti.
Accanto al logo inseriamo la toolbar, partendo dal presupposto che il nostro sito sarà composto da cinque pagine: home page, about, portfolio, blog, contatti.
Dato che in questo tema ci limiteremo ad utilizzare un solo font, anche nel menù di navigazione abbiamo utilizzato il georgia, già presente nello slogan sotto il logo. Questo font verrà usato per tutte le sezioni della pagina, per rendere più omogeneo possibile il layout.
Disegniamo un piccolo effetto per l’hover e l’active, in modo da arricchire graficamente la toolbar. Con lo strumento rettangolo incorniciamo il link e aggiungiamo con lo strumento forma personale un piccolo triangolo, così da creare un grazioso baloon.
Scegliamo il colore nero per l’active e un grigio (#e4e4e4) per l’hover.
Aggiungiamo una linea grigia nella parte superiore e, con lo stesso colore, disegniamo una sezione centrale alta 360px. In questa sezione inseriremo i nostri ultimi lavori, che verranno visualizzati con un effetto slider.
Sempre facendo attenzione a utilizzare in modo corretto la griglia, inseriamo quindi l’immagine di un notebook, dentro cui metteremo un piccolo screenshot di un nostro lavoro. Lasciamo un po’ di spazio laterale per inserire le freccette che ci permetteranno di sfogliare i nostri lavori.
Accanto al notebook inseriamo una descrizione del lavoro, aggiungendo due pulsanti che permettono di vedere il dettaglio del progetto o, in caso di realizzazione di un sito web, di visitarlo.
Lateralmente aggiungiamo un pulsante (un rettangolo contenente due <<) che permetterà, cliccandoci sopra, di visualizzare gli ultimi lavori che abbiamo deciso di inserire in questa sezione centrale.
Duplichiamo il pulsante, lo riflettiamo ruotiamo di 360° e inseriamo la copia nel lato destro, facendo in modo che i due rettangoli siano allineati verticalmente.
La nostra sezione superiore è ormai terminata.
Non resta che definire che cosa vogliamo inserire sotto la sezione centrale: nel nostro caso abbiamo scelto di visualizzare gli ultimi messaggi di twitter, inserire i dati di contatto e dedicare un’altra sezione per gli eventuali testimonials.
Aiutandoci con le colonne, posizioniamo le guide in modo da creare tre sezioni di dimensioni identiche, ognuna con una larghezza di 160px.
Nella prima sezione inseriamo gli ultimi messaggi di twitter. Per rendere l’insieme più accattivante facciamo in modo di contrastare il nero del titolo con un tocco di colore, in questo caso arancione (#f56b06) I nomi degli utenti, invece, li facciamo di colore grigio (#757673).
Nella seconda sezione abbiamo deciso di visualizzare alcuni commenti di testimonials. Allineiamo titoli e contenuto testuale a sinistra e con una guida orizzontale controlliamo che i titoli delle sezioni siano allineati orizzontalmente.
Nella terza e ultima sezione, invece, scriviamo il nostro numero telefonico e inseriamo un link per invitare l’utente a contattarci tramite e-mail. Per rendere un po’ più grafico l’insieme arricchiamo questa sezione con due icone.
Ecco come si presenta il nostro layout adesso:
La nostra home page è praticamente finita! Aggiungiamo il footer sotto le tre sezioni: disegniamo una linea grigia e scriviamo i nostri dati sotto di essa, con allineamento centrale.
La home page del nostro portfolio è pronta: semplice, pulita, professionale. In poche mosse abbiamo disegnato un template veramente grazioso e intuitivo, dai contenuti chiari e facilmente personalizzabile.
E tu, che cosa ne pensi di questo stile? Ami la semplicità nel webdesign o preferisci sbizzarrirti con brush, texture ed altri effetti grafici? Qualè il tuo stile preferito (doodles, vintage, grunge..)? Dì la tua!
DownloadL'autore
21 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Un layout… -
YIW Minimal: un template clean & free per un sito semplice ma professionale | Your Inspiration Web
[...] settimana fa abbiamo visto come disegnare un layout minimal e al tempo stesso professionale e dall’estetica gradevole. YIW Minimal…
Ottimo.
Sono questi gli articoli che fanno la differenza e fanno crescere il web.
E’ la linea che sto cercando di intraprendere anche io con il mio blog.
Complimenti veramente.
Grazie, davvero. E’ dura realizzare articoli e materiale di qualità ed è veramente una grandissima soddisfazione vedere che i nostri sforzi sono riconosciuti e apprezzati. :)
Innanzitutto complimenti per l’articolo. E’ raro trovare contenuti di simile qualità scritti in Italiano.
Personalmente adoro i siti minimalisti e puliti. Recepire in maniera immediata le informazioni è una caratteristica fondamentale che ogni sito (personale,aziendale,ecc.) dovrebbe avere.
Apprezzo l’ottimo ‘utlizzo del framework 960 grid, l’ho usato diverse volte e lo trovo davvero utile.
Complimenti di nuovo all’autrice…grandi ragazzi!
Ciao marbio, grazie per i complimenti. Io devo essere sincera: agli esordi della mia “carriera” (chiamiamola così :D) non amavo lo stile minimalista, lo percepivo povero, scarso, poco creativo. Mi sembrava una via di fuga per i poveri di fantasia o per chi sapeva destreggiarsi poco con i programmi di grafica. Solo da pochi mesi sto rivalutando lo stile lineare, pulito, essenziale e ne sto percependo le reali potenzialità e i vantaggi. Anche per quanto riguarda il framework 960, all’inizio ero davvero riluttante ad utilizzarla, abituata com’ero a lavorare “selvaggiamente”, in preda all’ispirazione. Mi sembrava limitante. Ovviamente ho cambiato idea :) ma vedo che in italia ancora sono in pochi a lavorarci.
Grazie di essere passato! A presto
E’ davvero bellissimo l’outcome!
Grazie ai tuoi tutorial sto raccogliendo davvero moltissimi consigli preziosi su come realizzare layout in modo professionale!
Famba, felice di esserti utile :)
beh, fare i complimenti è d’obbligo!
Grazie Nick!
Ottimo articolo..Continui sempre di piu a stuzzicarmi la voglia d mettermi a studiare il montaggio di un website.
Ma c’ho tantissibi dubbi sul settore.. e vorrei cercare un modo per capirne una volta per tutte..
Una volta assemblata l’interfaccia su Ps. come si fa ad importare il materiale su Dw e farlo funzionare ?…
Sapresti indicarmi un libro.. un sito o qlks di utile.preferibilmente in italiano su come procedere.. e capire il funzionamento del codice css ecc.. dato che per adesso mi ha solamente intrippato le idee XD….
Grazie anticipatamente!…
Ps..YIW supporter XD
Ciao Rosnap, benvenuto su YIW.
Il montaggio di un website è come un gigantesco puzzle da ricomporre: in questo articolo (scomposto in due parti) puoi vederne un esempio.
Innanzitutto devi analizzare il layout conoscendo xhtml e css dato che devi, ad occhio, essere capace di capire come tagliare e riassemblare in codice le varie sezioni. Se mi dai una tua e-mail posso inviarti un’immagine per mostrarti come verrebbero ritagliate ed esportate le varie parti che compongono questo layout che, tra parentesi, è abbastanza semplice da mettere in codice.
Comunque, se proprio devi partire da zero e vuoi materiale semplice e in italiano, ti consiglio di studiarti bene le guide di html.it, quelle sull’xhtml e sul css sono veramente chiare.
A presto!
davvero un altro articolo ottimo ma il premio per il miglior sito web no?
davvero bravi ragazzi. E’ vero come dice marbio è davvero raro trovare articoli scitti bene in italiano e soprattutto comprensibili
davvero bravi!
Graficando: quanto onore, grazie :) è bello sentirvi parlare così, ci sprona a fare (e dare) sempre di più.
Siamo ancora agli inizi, stiamo crescendo e migliorando giorno per giorno, e il vostro supporto è veramente importante.
Grazie di essere passato, a presto
S.
Molto semplice e pulito. I like it!
Per quanto riguarda a tua domanda finale… beh, ti sembrerà strano ma io non ho uno stile che preferisco. Tutto dipende dal soggetto di cui “raccontare” e anche un po’ dallo stato d’animo.
Principalmente sono sobrio e pulito, ma adoro lo stile urban e mi piace anche sbizzarrirmi con effetti grunge o altro… quindi, perchè dover avere un solo stile quando si possono adottare tanti modi di espressione?
Ciao Igor :)
Ovviamente la scelta dello stile dipende dal progetto su cui si sta lavorando, dal target, dalle esigenze del cliente, ecc…ed è bellissimo avere la capacità di lavorare con ogni stile, dal minimal al grunge. Ma una preferenza è normale averla, no? io sono molto anni “60” quindi il mio stile preferito non può che essere il vintage. Texture carta, pin up…;)
Ora, però dovete far vedere come realizzate l’effetto slide con i CSS!!! :D
Non ho mai detto che l’avremmo fatto :D
Comunque se proprio dovessimo metterlo in codice in futuro, useremmo un javascript, niente di eclatante. :)
A presto e grazie per il tuo intervento
Ottimo articolo! E poi lo stile di questa ragazza è davvero apprezzabile.
Grazie.
Buon layout, mi piace il risultato!
Per quanto riguarda l’utilizzo del 960 grid system, hai fatto un ottima scelta ad avvicinarti all’uso delle grid. Il prossimo passo è quello di non usare una grid standard ma di scegliere (o creare da zero) una grid in base al contenuto del sito.
Un ottimo libro che ti consiglio vivamente di leggere è “Ordering Disorder: Grid Principles for Web Design”. Purtroppo quello che c’è da dire sul webdesign qui in italia viene trascurato, tipografia uso delle griglie uso dello spazio bianco, sono argomenti che raramente vengono trattati in maniera esaustiva.
Continuate con l’ottimo lavoro.
Ottimo lavora Sarah! Mi piace moltissimo il tuo stile, la semplicità, la chiarezza. Anche a me piacerebbe ricevere una tuo mail con l’immagine che avresti inviato a Rosnap (post #10).
Grazie mille e compliementi,
Federica