Realizzare un layout Minimal in Photoshop

E’ il momento di un altro tutorial PSD. Oggi vediamo come realizzare il templete di un sito in Photoshop. Tra i tanti stili di moda adesso, uno di quelli che sta riscuotendo maggiore successo è il Minimal.

Il cliente per  questo layout è un albergo, mica per niente, la maggior parte dei clienti per cui realizzo layout web è proprio l’albergo .

Questo layout prevede, infatti, sezioni dedicate a strutture ricettive come le offerte, gli eventi e gli itinerari, strumenti che come ho già detto in altri post, non dovrebbero mai mancare nel sito di un hotel in quanto attira la clientela, prechè  offrono servizi utili al cliente.

Vi piace? Allora iniziamo subito! Vediamo il risultato finale e successivamente iniziamo a realizzarlo.

Partiamo col aprire un nuvo file in Photoshop, io personalmente utilizzo il sistema di griglie che trovo particolarmente utile ed effica, oltre che veloce da utilizzare, in particolar modo utilizzo quello di 960 grid system da 12 colonne.

Con lo strumento rettangolo creiamo una maschera di color #e5f2ce larga quanto tutto il nostro file, questo sarà lo sfondo del nostro layout. Rasterizziamo la maschera (tasto destro sul livello – Rasterizza livello) e applichiamo il filtro dal menu Filtro>texture>granulosità con intensita pari a 17 con un contratto di 50 di tipo regolare.

A questo punto possiamo iniziare a suddividere il nostro layout nelle varie sezioni del sito. Partiamo realizzando un rettangolo bianco largo quanto tutto il file e alto 110px. Questa sezione conterrà il logo, uno dei 2 menu di navigazione e il menu delle lingue. A questo rettangolo applichiamo uno bordo di colore grigio chiaro, facendo attenzione che il bordo venga visualizzato solo nella parte inferiore del rettangolo.

Creiamo un altro rettangolo, questa volta largo 940px, calcolando i 10 px di margine nella due colonne esterne del layout. Lo facciamo abbastanta alto, perchè questo farà da sfondo ai contenuti del nostro sito, e lo posizioniamo come nell’immagine appena sopra la linea di fondo del rettangolo precedente, in modo da posizionare il un menù princilale proprio sopra. Io l’ho posizionato 25px sopra la linea di fondo, anche a questo rettangolo applichiamo la stessa bordatura di quello precedente.

L’azione che segue invece prevede l’inserimento di un rettangolo a cui applichiamo lo stesso effetto di granulosità dello sfondo, questo rettangolo farà da sfondo al Quick Booking e alla slide delle foto dell’albergo.

Il passo successivo invece creiamo un rettangolo con lo stesso effetto altro 25px e lo posizioniamo in alto, questo conterrà il menu delle lingue, il rettangolo sarà sulla destra spezzato per lasciare spazio al logo.

Abbiamo inziato anche a inserire del testo, i font che utilizziamo nel sito sono il Verdana per i testi e il Trebuchet MS per i titoli, e i colori sono il rosso e il nero, come vedremo successivamente, giocheremo con questi 2 colori per creare dei titoli originali.

Veniamo al logo!

Utilizziamo come font il GeosansLight, molto minimal e che si adatta benissimo con lo stile del nostro layout.

Applichiamo una sfumatura al testo e un ombra interna, come nelle immagini.

Ora procediamo con l’inserimento del contenuti del sito, con il menu di navigazione principale, il menu dei servizi, il Quick Booking e la foto dell’albergo, che generalmente nel momento in cui si passa all’Html si trasforma in una slide di 4-5 fotografie. Tutti gli alberghi hanno questa soluzione nell’header del sito.

Per il menu di navigazione principale utilizziamo come font il Trebuchet MS con colore nero, mentre per il menu dei servizi, utilizziamo il rosso e separiamo le voci da un rettangolo  molto stretto a cui applichiamo lo stesso effetto che abbiamo utilizzato per il logo (tasto destro sul livello del logo Copia stile, tasto destro sul livello del rettangolo Incolla stile).

Per il booking creiamo un pulsante per la verifica della disponibilità di colore rosso con un algolatura di 5px e con una forma triangolare bianca all’interno, che precede il testo di descrizione del pulsante.

Come vedete il lavoro che abbiamo fatto fin quì richiede poco utilizzo degli effetti, volutamente per rispettare lo stile minimal che richiede forme semplici, layout pulito, pochi colori e una architettura standard/lineare, come da figura successiva.

Questa è la parte più importante del sito, quella in cui i visitatori si concentreranno maggiormente, quì il nostro layout diventa quanto più lineare.

Troviamo, come detto precedentemente alcuni, strumenti che per il sito di un albergo non dovrebbero mai mancare come gli Eventi, le Offerte e gli Itinerari, ho inserito in più la sezione Come raggiungerci nelle tre diverse modalità: auto, treno, aereo. Questa sezione sarà gestita tramite jQuery con uno effetto di scorrimento ogni volta che il visitatore clicca su rispettivi pulsanti, i quali riprendono la stessa forma di quello precedentemente realizzato, solo che più schiacciati, stessa cosa vale per i pulsanti a forma quandrata a lato dei vari titolo delle sezioni, che indirizzano l’utente alle rispettive pagine con maggiori informazioni.

Una cosa che possiamo aggiungere a quanto già fatto sono i margini di separazione tre le diverse aree del corpo del sito.

Con lo strumento linea o rettangolo creiamo una forma molto sottile e larga di colore nero, e diamo opacità 10%, la duplichiamo (tasto destro del mouse sul livello – Duplica livello) e diamo colore bianco con opacità 90%, posizioniamo questa seconda forma in basso rispetto a quella nera, in modo da creare un effetto simil 3D.

Come vedete rispetto a quanto fatto precedentemente non vi è quasi nulla di nuovo, riprendiamo gli stessi effetti e le stesse figure per ricollocarle in contesti diversi, in questo modo rispettiamo la pulizia del layout.

Piccoli dettagli che però rendono il nostro sito unico e originale.

Non rimane che disegnare la parte finale del nostro sito: il footer, con i dati aziendali e le icone dei social network.

E con questo è tutto! Spero vi sia piaciuto.

Voi avreste aggiunto qualcosa o fatto qualcosa di diverso? Parliamone assieme!