Tipografia e minimalismo per un layout semplice e bello da vedere
Una delle perplessità più comuni che ho sentito esprimere nei confronti dello stile tipografico è: si, va bene, carino, creativo…ma non è uno stile adatto a un sito aziendale, corporate, proprio no.
Si tratta certo di uno stile particolare, eclettico se vogliamo, ma che può benissimo essere adattato anche per un sito aziendale, ovviamente con qualche piccolo accorgimento e senza “osare” con font troppo particolari e scenici.
Se dovessimo realizzare un sito vetrina ricalcando le caratteristiche di questo stile, dovremmo giocare con la tipografia per calamitare il focus su determinati punti del layout, ridurre al minimo – un po’ come nello stile minimal, appunto – gli elementi grafici e fare in modo che l’effetto sia accattivante proprio grazie all’utilizzo di elementi testuali.
Titoli forti, colori provocanti, scritte audaci…un gioco di lettere e spazi per una grafica semplice, minimalista e, allo stesso tempo, d’impatto.
Si, ma come?
Facciamo subito un esempio e sperimentiamo in prima persona: Sweet House, un’azienda che produce componenti di arredo esclusivi, si rivolge a noi per la realizzazione del proprio sito.
Molto siti di Interior Design hanno uno stile volutamente essenziale: molto bianco e poca grafica per dare risalto alle immagini, il vero punto di interesse. Anche noi abbracceremo questa scelta estetica, arricchendo visivamente il layout con qualche artifizio tipografico…ti assicuro che il risultato finale ne varrà la pena.
Cominciamo?
Impostiamo il documento
Come al solito iniziamo con il creare un nuovo documento in Adobe Photoshop. Impostiamo una larghezza di 1680 e un’altezza di 1200 px (dovrebbe bastare) e inseriamo le linee guida a 360px dai margini laterali. Disegneremo la nostra home page all’interno della sezione – larga 960px- delimitata da tali guide.
Creiamo il background del nostro logo: con lo strumento rettangolo disegniamo un’area larga circa 270pixel e assegniamogli una sfumatura radiale che va dal rosso scuro (#8d0202) ad un rosso più chiaro (#dc0909), in modo che al centro del rettangolo sia visibile un piccolo bagliore.
Scriviamo il logo/nome di Sweethouse, con il font “Century Gothic” in grassetto (rimaniamo sul semplice) e il colore bianco.
Adesso proviamo a rendere il logo un po’ piu accattivante, giocando con la spaziatura tra le lettere e le dimensioni del font e facendo in modo che il bianco del logo si fonda alle estremità con il bianco del background.
Aggiungiamo anche una piccola tagline:
Realizziamo un menu testuale, molto semplice (lo stile deve rimanere comunque minimalista e pulito, non dimentichiamolo!):
Ora scriviamo uno slogan testuale molto incisivo, capace di attirare l’attenzione del visitatore del sito.
Adesso lavoriamo un po’ su questo testo. La tipografia deve essere molto curata sia dal punto di vista tecnico (margini, allineamenti, interlinee), sia dal punto di vista estetico (armonia, colore, focus).
Riduciamo la spaziatura tra le lettere, in modo da rendere il testo più corposo, e impostiamo il grassetto alle parole chiave che vogliamo evidenziare, aumentando alle stesse anche la dimensione.
Aggiungiamo un’altra breve riga testuale, più piccola della precedente dato che deve essere messa in secondo piano rispetto all’oggetto dell’attività (Interior Design) e lavoriamo sulla spaziatura delle lettere fino ad ottenere questo effetto:
In pratica, tutti i blocchi testuali sono allineati simmetricamente, cosi che l’occhio li colga “in blocco” e li percepisca come un tutt’uno. Vediamo l’effetto visivo:
Vogliamo dare un tocco moderno e sbarazzino? Usiamo un font estroso (il fantastico Honey dovrebbe essere perfetto) e alleggeriamo la taratura dello slogan in questo modo:
Gradevole e d’impatto!
Adesso inseriamo qualche immagine inerente il settore dell’attività. Potremmo, per esempio, rappresentare le quattro categorie di prodotti che Sweet House offre. Per farlo useremo quattro immagini opportunamente elaborate. Selezioniamo le foto di nostro interesse e suddividiamo il layout in quattro colonne.
In ogni colonna andiamo a inserire un’immagine verticale atta a rappresentare visivamente la famiglia del prodotto selezionato (cucine, bagni, ecc.). Guarda come e’ elegante l’effetto finale:
Contrassegniamo ogni foto con il nome della categoria, utilizzando sempre lo stesso font, molto leggibile e dalle curvatore estremamente morbide ed eleganti:
Il testo cosi e’ poco leggibile. Ovviamo a questo problema inserendo una sezione rettangolare bordeaux, a cui abbassiamo leggermente l’opacità per far si che si continui a scorgere la foto in background:
Sotto questa sezione centrale, possiamo inserire due call-to-action, manipolando anche qui la tipografia in modo da far risaltare maggiormente determinate parole (come “catalogue”, che ha ovviamente priorità rispetto alla parola “download”, e mettendo in evidenza il numero di telefono)
Come vedi il testo ha una componente visiva molto forte: non c’e’ bisogno di icone, immagini, texture, pattern e altri ornamenti grafici, poiché il layout e’ già altamente comunicativo cosi e la tipografia svolge perfettamente il duplice ruolo di elemento grafico e concettuale.
Aggiungiamo un piccolo copyright, e il nostro layout e’ completo. Che cosa te ne pare?
Abbiamo ridotto la grafica ai minimi termini, tuttavia esteticamente il layout e’ luminoso, ricco di dettagli e gradevole. Questo grazie anche alla tipografia e a come abbiamo sperimentato con i font.
Che cosa ne pensi di questo stile, a metà strada tra il minimal e il tipografico? Ti piace o sei più tipo da pattern, brush e texture?
DownloadGli 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:
40 commenti
Trackback e pingback
-
Tweets that mention Tipografia e minimalismo per un layout semplice e bello da vedere | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Medifocus. Medifocus said: Tipografia e minimalismo per un layout semplice e bello…
Questi articoli mi piacciono sempre di più :)
Peccato che stiano per finire, allora ;)
Meraviglioso!
Addirittura! Grazie…toto’ :D
Mi piace tutto quello che è ricercato (non solo minimal) e qui direi che ci siamo proprio! Brava!
Grazie Roberto ;)
Ottimo articolo Sara!
Sperando di non fare spam e che la cosa sia gradita, tempo fa ho proposto nel mio blog un tutorial dove si spiega proprio come animare le 4 immagini centrali in modo da migliorare la user experience dell’utente. ;)
Ciao Federico :)
Grazie per la segnalazione, farai senz’altro cosa gradita a chi vorra’ mettere in codice il nostro psd.
Gia’ che ci sono segnalo un altro effetto, simile e molto carino: http://tympanus.net/Tutorials/CollapsingSiteNavigation/
;)
Complimenti davvero, quest’articolo è la ciliegina sulla torta dopo quel consiglio che ti chiesi su FB per quanto riguarda la tipografia :)
Lo dico sempre: chiedete e vi sara’ sato ;)
Mi fa piacere che l’articolo (e il psd) sia piaciuto.
..proprio quello che mi serviva :)
ero a corto di idee ma ora credo di aver trovato la soluzione ;)
Grazie!
E’ bello sentirsi utili :)
Buon lavoro, allora!
A presto
Che bellissimo esempio, Sara!
I colori poi sono splendidi, caldi e adatti ad ogni occasione =)
Brava e grazie =D
I colori sono quelli di YIW, nonche’ i miei preferiti: rosso e arancione :)
Grazie a te Claudie’, a presto!
perche questi articoli stanno per finire???? nooooooooo :-(
Perche’ non c’e’ altro da dire :D troveremo qualcosa di ugualmente interessante. Anzi, a proposito, ne approfitto: si accettano suggerimenti sugli argomenti che potremo trattare nei prossimi lunedi ;)
Sara tu fai paura!! Hai uno spiccato gusto estetico e una ricercata armonia nel design e che sono doti innate! Mi complimento sempre con te e anche questa volta, ma perchè lo meriti davvero!
Big up!
Ame
Mamma mia che complimentoni, Amerigo :) mi metti in imbarazzo. Grazie ;)
Brava sarah, davvero i miei più sinceri complimenti…come nello stile descritto post essenziale e senza tanti fronzoli che però colpisce nel segno! Mi piace molto l’uso dei font (l’HONEY, lo trovo azzeccatissimo..) interessante come lezione..ma…perchè terminano??? NOOO!!!
Ciao Ale :)
Come detto, ormai la guida sugli stili sta per volgere al termine, credo che ormai i nostri lettori abbiano imparato tutto cio’ che c’era da apprendere.
Mi ripeto: se avete qualche spunto o qualche argomento che volete venga trattato, fatemelo sapere ;)
Io sono estasiata dalla chiarezza e dalla cura con cui crei queste guide… grazie davvero perchè non si finisce mai d’imparare!!!! Fra l’altro mi hai fatto scoprire le griglie: una vera manna dal cielo!!! :)
Grazie Simona :)
All’inizio lavorare con le griglie puo’ essere un po’ fastidioso, ma una volta fatta l’abitudine non si puo’ tornare indietro ;)
Ci sto provando anch’io, spero di ottenere un buon risultato.
Come faccio a capire se ho realizzato qualcosa di efficace? Devo farlo vedere a tutti quelli che conosco fino alla nausea? :)
Intanto puoi cominciare facendolo vedere a noi ;) nel forum c’e’ proprio uno spazio dedicato a questo :)
Così però mi sembra di approfittarne troppo :)
ad ogni modo ho scritto una bella presentazione (quanto sono educato) e ho caricato l’ “obrobrio” nell’area lavori del forum, vediamo quanti insulti ricevo :D :D :D
Vediamo vediamo :D
Devo dire k è perfetto! Mi piace !!!
anche se a scoppio ritardato (vi ho scoperto da pochissimo)…complimenti, bella guida, ottimo risultato. ho usato gimp e il risultato non si discosta di moltissimo. grazie mille.
N.B. ho lasciato questo commento all’articolo “le caratteristiche del corporate style” per errore…scusate.
Bhè, cosa dire, grazie per questo articolo, finalmente ho trovato una direzione che sinceramente trovo molto elegante e versatile! :)
Non potevo non citarti sul mio primo post!
Grazie Sarah
Grazie per la citazione Pako :) e benvenuto su YIW!
Ciao…
mi sono letto tutto di un fiato tutti i diversi tipi di stile che avete proposto.. ovviamente non posso che porgervi nuovamente i migliori complimenti.
Una cosa non capisco.. (spero non sia una domanda da risposta scontata…) perchè stabilire come area di lavoro su PhotoShop una larghezza di 1680 (stabilendo due guide distanti 360px dai margini laterali) se poi effettivamente utilizziamo solo la sezione centrale larga 960px ?
Inoltre, in alcuni stili impostate di default un’altezza definita a priori (ad esempio in questo articolo è di 1200 px ) mentre in altri no ?
Grazie anticipate e ancora buon lavoro
Ok.. forse ho trovato la risposta (ed effettivamente era scontata..) almeno per il 1° quesito qui:
https://www.yourinspirationweb.com/2009/09/27/come-trasformare-un-psd-in-xhtml-e-css-senza-perderci-la-ragione/
Praticamente, se non sbaglio, la larghezza di 1680px va nel wrapper e copre lo sfondo per tutti quei monitor che hanno risoluzione da 1080 px a 1680px mentre la parte centrale dei contenuti di 960px viene sempre vista anche da quei monitor che hanno una risoluzione inferiore (e che ovviamente non vedranno il background)
Risoluzioni inferiori a 1080px ormai sono una piccola minoranza (10 anni fa consideravo max un ‘area di contenuto a 760 px.. oggi è diventata 960px :) )
E’ così ? :)
Scusate se rifaccio la domanda.. volevo avere solo una conferma di quanto ho riferito su “eccc la larghezza di 1680px va nel wrapper e copre lo sfondo per tutti quei monitor che hanno risoluzione … ecc”
Grazie :)
E da un po’ che seguo questo blog ed anche con molto interesse. Questa guida in particolare mi è piaciuta tantissimo in quanto ho sempre apprezzato lo stile minimal. Strada facendo ho cambiato un po’ di cose: colore, font (ho usato il kravitz, quindi il template necessiterebbe di google fonts e simili), il ‘cliente’ (ho deciso di riadattarlo per un portfolio online) e infine ho cambiato il numero delle foto centrali (da 4 a 3). Il risultato mi piace parecchio e sarei tentato di farlo vedere in giro, tuttavia se la cosa ti crea disagio, in quanto la paternità del progetto iniziale è tua, nessun problema: rimarra nel mio HD. Mi sembrava corretto chiedere.
Ciao Michelangelo, non mi crea assolutamente disagio, fai pure :) cio’ che viene fuori dai tutorial di YIW e’ liberamente utilizzabile da tutti voi. Ti ringrazio comunque per il garbo dimostrato nei miei confronti.
A presto!
Scusate se rifaccio la domanda.. volevo avere solo una conferma di quanto ho riferito su “eccc la larghezza di 1680px va nel wrapper e copre lo sfondo per tutti quei monitor che hanno risoluzione … ecc”
Grazie
Ciao Francesco, e’ esatto, i contenuti del sito vengono inseriti nella sezione di 960px, cosi che risoluzioni fino a 1024×768 non vengano penalizzate. Nel resto del documento viene impostata la grafica che verra’ visualizzata nelle risoluzioni superiori (in realta’ ora si dovrebbe arrivare a 1920 e non a 1680, le cose cambiano!)
In questo articolo spiego meglio il concetto:
https://www.yourinspirationweb.com/2009/06/15/come-trovare-lispirazione-e-disegnare-il-layout-di-un-sito-web/
alla fine puoi trovare anche un’immagine abbastanza chiara di come verra’ visualizzato il layout.
Spero sia tutto chiaro ora :)
Sara scrive:
>> Spero sia tutto chiaro ora
si.. hai confermato.. grazie.. effettivamente guardando questa img https://www.yourinspirationweb.com/wp-content/uploads/2009/06/sezioni.jpg dell’articolo che hai riportato è ancora più chiaro
>> in realta’ ora si dovrebbe arrivare a 1920 e non a 1680, le cose cambiano!
ehh quando ho iniziato a fare qualche lavoretto sul web si partiva da 800×600
ma 1920 mi sembra forse un pò esagerato.. almeno da quello che vedo da queste statistiche: -4% per il 1920 (il link http://www.w3counter.com/globalstats.php l’avete consigliato voi) e confermato da quest’alto a gennaio 2011 >> http://www.w3schools.com/browsers/browsers_display.asp
:)