Come disegnare un layout in stile magazine? tutorial e psd
La nostra rubrica sugli stili del web design procede: nuovo giro, nuovo tutorial… questa volta tocca ad un layout in stile magazine, realizzato sulla base delle caratteristiche e dei trend analizzati nel precedente articolo. Come al solito, alla fine dell’articolo verrà rilasciato il sorgente free del layout che andremo a progettare: inutile dire che puoi utilizzarlo per i tuoi progetti, personali o non.
Rimbocchiamoci le maniche ed iniziamo.
Step 1: scegliamo la griglia più adatta
Nonostante abbiamo utilizzato la griglia per molti dei templates progettati finora, questo tipo di layout è quello che più richiede un buon frame work che aiuti a disporre i contenuti (che possono essere molto numerosi) in modo semplice e immediato.
Dato che dovremo realizzare un gran numero di sezioni, alle classiche griglie da 12 o 16 colonne preferiamo un framework composto da 24 colonne (scaricabile, come al solito, in questa pagina).
Apriamo un nuovo documento in Photoshop (larghezza 1680px, altezza 1100px, 72dpi) e, una volta impostati i margini a 360px dai bordi in modo da ottenere una sezione di 960px di larghezza, importiamo la griglia nel documento.
Step 2: il contenitore del sito e il nostro logo
Creiamo un contenitore per il nostro magazine, con un background di colore bianco (#fff). Per il background del documento, invece, impostiamo un grigio chiaro (#f4f5f5).
Diamo una leggera ombra al contenitore e nascondiamo momentaneamente la griglia, per vedere il risultato.
Posizioniamo subito il nostro logo, una semplice scritta realizzata con il bellissimo font Comfortaa, in alto e al centro del nostro layout. Ho utilizzato il colore verde poiché, insieme all’azzurro, é uno dei colori più adatti per un’attività’ che tratta di salute, fitness e bellezza: YourBodyHealth, infatti, é un magazine tematico su tutto ciò che può riguardare la cura del nostro corpo.
Step 3: il menu di navigazione, le news e i social
Adesso creiamo il nostro menu di navigazione, utilizzando un font semplice e leggibile (Century gothic) che richiama in qualche modo le curve morbide del logo. Impostiamo un grigio per le voci di menu (#7b7c7c) e, per risaltare l’effetto hover, un verde acceso (#92a801).
Sotto il menu decidiamo di inserire una piccola sezione orizzontale denominata “Flash news” che contenga uno slider in Javascript che permette di visualizzare, con scorrimento automatico, alcune news brevi ed essenziali. Aggiungiamo anche due piccole freccette che permettono all’utente di sfogliare le news.
Aggiungiamo anche le icone dei social network, che in un magazine digitale sono sempre importanti.
Step 3: separiamo graficamente le varie sezioni
Adesso dobbiamo trovare un modo per dividere graficamente il logo dal menu, il menu dalle news e cosi via: qualcosa di visivamente carino, non troppo marcato e in linea con lo stile minimalista del nostro magazine. Optiamo quindi per delle linee tratteggiate, sempre di colore grigio chiaro, poste orizzontalmente tra le varie sezioni create.
Ora che abbiamo disegnato la sezione superiore del nostro layout in stile magazine, cominciamo a dividere la sezione inferiore in diverse colonne, aiutandoci ovviamente con la griglia. Scegliamo di creare un layout a 3 colonne, con una sezione sinistra più larga delle altre – che conterrà un articolo in evidenza- e le rimanenti due colonne di dimensioni identiche.
Step 4: l’articolo in evidenza
Inseriamo l’articolo in evidenza nella sezione di sinistra: titolo, sottotitolo, immagine e incipit dell’articolo.
Per sottolineare visivamente che questo articolo é in primo piano, aggiungiamo un leggero sfondo (disegnando un rettangolo con l’apposito strumento) di colore verde chiaro (#f2f7e7):
Un piccolo tocco grafico in più? inseriamo anche, in alto a destra, una piccola icona che rappresenta una puntina.
Step 5: i contenuti delle altre colonne
Nella seconda colonna inseriamo alcuni articoli brevi ed incisivi: titolo ed incipit, in modo da poterne inserire un maggior numero e fornire all’utente molte informazioni al primo sguardo. Continuiamo a rendere il titolo di un colore acceso rispetto al grigio del contenuto testuale, in modo da evidenziarlo e farlo risaltare in modo efficace.
L’ultima colonna a destra é generalmente riservata ai banner pubblicitari: nel nostro caso, invece, scegliamo di inserire un menu che ci permette di navigare tra le diverse categorie di articoli presenti nel nostro magazine: bellezza, sport, alimentazione, e cosi via.
Per dare un’impronta estetica più gradevole e funzionale creiamo dei pulsanti (strumento rettangolo arrotondato), alternando due colori per rendere meno monocromatica la sezione (colore azzurro #a4c9ce e verde #c3e003):
Inseriamo nei pulsanti il nome della categoria, accompagnandolo con un’icona che rappresenti visivamente la stessa.
Diamo un’occhiata al nostro layout?
Inseriamo altri due mini articoli sotto il post in evidenza, dividendo la sezione in due parti delle stesse dimensioni.
Adesso, sotto le icone di categoria, inseriamo un altro articolo, anch’esso evidenziato da un leggero background (questa volta un azzurro tenue #e6eeef) e da un’altra icona. Inseriamo anche una foto, per ravvivare l’insieme e scegliamo un colore diverso per il testo: esagerare con i colori potrebbe rendere il sito una pagliacciata, ma alternare due tonalità fa si che i contenuti sembrino meno “piatti” e attirino l’attenzione dell’utente in diversi punti della pagina.
Nello spazio vuoto tra le colonne, per non appesantire troppo il layout con i contenuti testuali, inseriamo un’immagine, che potrebbe riprendere le funzionalità di un banner pubblicitario, o di una call-to-action.
Adesso, se togliamo le guide, ci rendiamo conto che i contenuti non sono separati tra di loro e questo potrebbe creare una leggera confusione.
A nostra discrezione scegliamo allora di separare le varie colonne con la stessa linea tratteggiata utilizzata in alto, questa volta con delle linee verticali. Per farlo duplichiamo il livello della linea tratteggiata utilizzata per delineare il menu (tasto destro sul livello >> duplica livello) e lo ruotiamo di 90 grafi (Modifica >> trasforma >> ruota >> 90 gradi orari).
Conclusioni
Il nostro layout é pronto: veloce da realizzare, semplice, pulito e leggibile, perfetto per esporre in modo efficace e gradevole una grande mole di contenuti.
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:
34 commenti
Trackback e pingback
-
Tweets that mention Come disegnare un layout in stile magazine? tutorial e psd | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Maria Pia De Marzo and Your Inspiration Web, Giustino Borzacchiel. Giustino Borzacchiel… -
Come disegnare un layout in stile magazine? tutorial e psd | Your … « Social Computing Technology
[...] the original here: Come disegnare un layout in stile magazine? tutorial e psd | Your … a-anche-handrawn, che-possono, combinati-per,… -
Gli stili nel web design: le caratteristiche dello stile organic | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style? [...] -
Come disegnare un layout in stile web 2.0? tutorial e psd | Your Inspiration Web
[...] essere interessato anche ai seguenti articoli:Come disegnare un layout in stile magazine? tutorial e psd La nostra rubrica sugli… -
Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web
[...] stili del web design: due settimane fa abbiamo realizzato un template in stile magazine veramente...Come disegnare un layout in… -
Come realizzare un layout in stile grunge? | Your Inspiration Web
[...] essere interessato anche ai seguenti articoli:Come disegnare un layout in stile magazine? tutorial e psd La nostra rubrica sugli… -
Gli stili nel web design: le caratteristiche di un sito in stile magazine | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style? [...] -
Come disegnare un layout in stile organic? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style? [...] -
Template PSD di alta qualità da scaricare gratis | Web design Blog | yesWEBcan
[...] Come disegnare un layout in stile magazine? tutorial e psd [...] -
PSD Template free #1 | Blog Edos.it
[...] Scarica [...]
molto utile, grazie
Prego :)
Bellissimo =)
Brava Sarah, conciso ed efficace anche nella grafica!
L’ho scaricato e me lo tengo da parte, puo’ sempre servire come riferimento =)
Ciao Claudia!
Questa e’ una mia grande massima, ormai non so piu quante risorse (icone, font, tutorial, temi) ho accumulato nel mio hardisk ;)
eheh, lo stile di layout con cui mi interfaccio più spesso, generalmente il design di questi siti, si compone attorno agli spazi banner :D
Io odio i banner, sono antiestetici e non so mai come posizionarli nel layout senza rovinare l’equilibrio del design. :)
Non a caso non ho inserito pubblicita’, ma un semplice rettangolo oltretutto della stessa tonalita’ di verde usata nel layout :)
Ma che bello! I tuoi articoli mi piacciono sempre assaissimo :)
Grazissimo, ne sono assaissimo felice! :D
Ciao Sara.
Adesso che hai presentato un certo numero di stili, volevo farti una domanda.
E’ possibile / ci sono degli esempi dove vengono mescolati due stili al fine di creare un contrasto?
Io sono un appasionato di interior design (da osservatore ovviamente in quanto le mie capacità artistiche sono nulle) ed amo moltissimo quegli ambienti antichi, vecchie case ristutturate dove vengono sapientemente inseriti mobili utlramoderni (magari accanto ad altri originali).
Questo contrsto mi piace moltissimo. E’ immaginabile nel web design?
Ciao Maurizio,
sinceramente quando mi e’ capitato di vedere qualche elemento grafico web 2.0 su un layout vintage o viceversa (tanto per fare un esempio) ho storto il naso, e parecchio.
Certo, sono esperimenti fattibili, ma non so con che risultato estetico: gusti soggettivi, presumo, ma a me piace l’arredamento country-rustico e l’arredamento moderno, ma solo se con componenti separate :)
Aldila’ di questo ci sono stili che possono benissimo essere combinati per somiglianza (grunge e vintage, ma anche handrawn e grunge e cosi via) o per non-escludibilita’ (un layout in stile magazine puo’ avere un design web 2.0 o vintage, niente lo vieta).
Sarah, una domandina: mi piace un sacco l’idea del flash news reader ma.. dove trovo lo script?
Suggerimenti? =)
Ciao Cla’,
sinceramente non so se ci siano script pronti (ho guardato in giro ma non ho trovato niente), i siti da cui ho preso l’idea utilizzano un normalissimo slider in javascript.
Perche’ non provi ad adattare il news ticker creato da Nicolas, integrandolo in WordPress? Dovresti cambiare lo scorrimento da verticale a orizzontale, settare le giuste dimensioni e fare in modo che in questo slider vengano visualizzate solo le news di una determinata categoria…per supporto per questo ti invito a contattare Nando o zio Just :)
Bellissimo *-*
Brava Sarah!
Grazie mille Sarah,
dopo le vacanze chiedero’ alla coppia d’Assi lumi sul codice =)
Adesso e’ meglio sbollire dal caldo piuttosto che perdersi in simili quisquilie =)
Mi piace molto il design, ma trovo che questa tendenza del frame a 960px sia sopravvalutata, inoltre per un’impaginazione che richiama la carta stampata trovo che sia più consono un layout fluido o semifluido che prenda il 100% dello schermo.
Buongiorno,
Ho letto il vostro articolo ed vi devo fare i complimeni perchè è veramente bello.
Come si fà a scaricare il framework composto da 24 colonne (scaricabile, come al solito, in questa pagina).???
grazie mille
Ciao Claudio, in questa pagina, in alto a sinistra, se clicchi sulla parola ‘download’ in giallo, ti scarica lo zip contenente tutte le griglie (12, 16, 24 colonne).
Spero di esserti stata utile! A presto ;)
Ciao.. mi sei stata molto utile grazie..
ma come faccio a importare la griglia??
Scusa ma di photoshop non sono molto pratico
La griglia e’ un file .psd, la puoi aprire direttamente da Photoshop attraverso il menu ‘apri’, una volta aperta affianchi la finestra a quella del documento in cui vuoi disegnare il sito e trascini il gruppo contenente le guide al suo interno. Oppure puoi utilizzare come background il documento stesso della griglia, sono gia’ 960px, basta che tu allarghi in orizzontale il documento impostando +360px ai lati e avrai le guide perfettamente centrate.
Ok grazie mille…
un altra cosa!
Come faccio a far diventare le righe uno sfondo bianco??
IO ho cs4 su mac
Non devi farle diventare bianche, altrimenti a cosa servono? :) nascondi i livelli quando non ti servono, ma ogni tanto riattivali cosi hai modo di controllare che ogni elemento grafico sia sempre ben allineato.
ok grazie mille!
E le immagini come si importano??
ho visto che nel vostro modello ci sono varie categorie ma sono funzionanti o è solo per estetica??
scusa… ma ho provato a scrivere sulle righe e non mi fà vedere quello che scrivo!
Cosa faccio?
Ciao Claudio,
intanto ti chiedo un favore: per richieste di assistenza dovresti servirti del nostro apposito forum, altrimenti i commenti agli articoli degenerano in una lista di richieste d’aiuto e chi legge non capisce piu niente :)
In secondo luogo, dai tuoi commenti capisco che non hai la conoscenza base di Adobe Photoshop (Aprire e importare le immagini, cosi come l’uso dei livelli, ecc.) che ti possa permettere di realizzare o modificare un template come quello da me rilasciato. Il mio consiglio, da amica, e’: lascia perdere questo template e dedicati allo studio del programma con tutte le sue componenti e solo in un secondo momento rimetti mano al layout per effettuare le tue modifiche. Cosi e’ impossibile che tu riesca a fare un buon lavoro :)