Tutorial: come creare il layout di una pagina web con Adobe Photoshop

C'è una grande varietà di strumenti per progettare pagine web e lavorare in modo totalmente semplice e funzionale senza inserire o toccare il codice. Sono innumerevoli, proposti da applicazioni (Adobe Dreamweaver è un esempio) o direttamente da piattaforme online come Wix. Tuttavia, per un web designer, conoscere le procedure manuali è essenziale. HTML5 e CSS sono i pilastri fondamentali per il layout di siti web e landing page.

Tuttavia, più spesso di quanto potresti aspettarti, dovrai rivolgerti ad applicazioni come Indesign o Adobe Photoshop per completare il tuo lavoro di layout e dare loro una finitura perfetta. Oggi vedremo in questo ampio tutorial, come possiamo impaginare una pagina web usando Adobe Photoshop. In questa prima parte rimarremo nel lavoro da sviluppare da Photoshop, anche se nelle prossime puntate vedremo come applicare questo lavoro già direttamente in codice HTML per renderlo funzionale.

A partire dal design del nostro wireframe

Per iniziare con il layout e il design di una pagina web, è estremamente importante che iniziamo definendo quali saranno gli elementi di base, questo è lo scheletro. Questa struttura servirà da supporto per contenere tutti i contenuti (sia testuali che multimediali). Definendo ciascuna delle sezioni che compongono la nostra pagina saremo in grado di lavorarci con la massima accuratezza e fornire un design visivo il più accurato possibile.

È molto importante che teniamo conto delle dimensioni che avrà il nostro sito web, se avrà un file inscatolato o a tutta larghezza. Una pagina web boxed sarà all'interno di un piccolo contenitore e quindi apparirà uno spazio intorno ad essa. Al contrario, un web full witdth occuperà l'intero schermo del dispositivo che riproduce la pagina. La scelta tra una modalità o l'altra risponde a domande meramente stilistiche e dipenderà anche dalle esigenze del progetto su cui stiamo lavorando. Lavoreremo in questo esempio con la modalità boxed, quindi non occuperà tutto lo spazio fornito dal browser.

Per creare il nostro wireframe, la prima cosa che dobbiamo fare è entrare nell'applicazione Adobe Photoshop e includere le dimensioni che vogliamo che la nostra pagina abbia. In questo esempio la nostra pagina sarà larga 1280 pixel. Tuttavia, il problema delle dimensioni può variare a seconda della destinazione finale o del dispositivo su cui vogliamo riprodurre la nostra pagina. Non c'è dubbio che perché un web design sia funzionale ed efficiente, deve esserlo di risposta e deve adattarsi a tutti i dispositivi sul mercato. Tuttavia, in questo caso lavoreremo per creare un prototipo che riprodurremo su un computer desktop. Anche così, il problema di risposta che affronteremo in seguito, per ora, qui è una gerarchia di dimensioni dello schermo con cui lavorare in questo esempio. Tieni presente che in questo caso creeremo un layout della pagina di destinazione in Adobe Photoshop e quindi lo migreremo in HTML5 E CSS3. L'obiettivo di questa piccola pratica è convertire un design creato in Photoshop in un web design utilizzabile e interattivo che risponda ai movimenti dell'utente.

Misurazioni per telefoni cellulari

iPhone 4 e 4S: 320 x 480

iPhone 5 e 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nesso 4: 384 x 598

Nesso 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Misurazioni in compresse

iPad tutti i modelli e iPad Mini: 1024 x 768

Galaxy Tab 2 e 3 (7.0 pollici): 600 x 1024

Galaxy Tab 2 e 3 (10.1 pollici): 800 x 1280

Nesso 7: 603 x 966

Nesso 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Misurazioni per computer desktop

Schermi piccoli (usati ad esempio nei netbook): 1024 x 600

Schermi medi: 1280 x 720/1280 x 800

Schermi di grandi dimensioni: larghezza maggiore di 1400 pixel, esempio 1400 x 900 o 1600 x 1200.

Per iniziare a distribuire gli elementi e ad assegnare le sezioni all'interno del nostro mockup web, è molto importante che prendiamo in considerazione le proporzioni per garantire un finale leggibile e melodico. Sarà essenziale utilizzare le regole e le opzioni delle guide che puoi trovare nel menu Visualizza in alto. Per lavorare in modo proporzionale ed esatto, è meglio lavorare in base alle percentuali. Faremo clic sul menu Visualizza e poi sull'opzione «Nuova guida» per scegliere la modalità di divisione. In questo caso faremo quattro divisioni verticali al 25% e le prenderemo come riferimento per posizionare le nostre immagini nel footer e l'immagine del nostro logo nell'header.

C'è un codice per designare ciascuna delle aree che occuperanno il nostro modello e la funzione che ciascuno di loro avrà. Ad esempio, per indicare l'area che occuperà un'immagine, creeremo dei rettangoli con una specie di croce. Per indicare che vogliamo includere video in una determinata area, includeremo il simbolo di riproduzione all'interno del nostro contenitore. In questo primo esempio lavoreremo solo con le immagini, nell'acquisizione in alto puoi vedere l'area che occuperà il file logo dal nostro sito web.

Questo sarebbe il risultato finale del nostro wireframe. Come possiamo vedere, è diviso in un'intestazione composta dall'immagine in cui si troverà il logo e che fungerà da collegamento alla home page accompagnata da due schede, un motore di ricerca e quattro pulsanti sulla casella di ricerca. Inoltre, già all'interno del corpo, abbiamo inserito una barra laterale composta da una barra di divisione e una serie di categorie che categorizzano il tipo di contenuto che sarà sul nostro sito. Un'altra sezione con una numerazione che include le voci che esisteranno sul nostro sito, e infine un elenco con i meta tag più rappresentativi del nostro sito.

Nell'area del contenuto, che sarà definita da una sezione che includerà contenuto autogestibile, troveremo il contenuto dei nostri articoli. In questo caso il breadcrumb o il breadcrumb (che indica la struttura organica del nostro sito web, il titolo dell'articolo, i metadati, un paragrafo come corpo di testo, all'interno del quale è inclusa un'immagine.

Come piè di pagina abbiamo incluso quattro immagini che serviranno da collegamento ad altre aree della nostra pagina. Qui possiamo includere loghi o altre sezioni interessanti. Sebbene in realtà quest'area agirà più come pre-piè di pagina, poiché il piè di pagina stesso andrà un po 'più in basso con la politica di utilizzo, le note legali e il copyright.

Una volta definita la struttura di base o lo scheletro della nostra pagina, dovremo passare al livello successivo. Ciò consisterà nella progettazione effettiva di ciascuna delle aree del nostro sito web. In altre parole, inizieremo a "riempire" ciascuna di queste aree con il contenuto che sarà finalmente inserito nel nostro sito. Si consiglia di non iniziare a progettare questi elementi prima di lavorare sul wireframe perché è molto probabile che se lo facciamo in questo ordine, avremo bisogno di modificare le loro proporzioni in seguito. Corriamo il rischio di distorcere le nostre immagini e dover rifare il design di ciascuno degli elementi, che diventerà una perdita di tempo o un risultato di qualità inferiore.

In questo caso, il design del nostro sito web sarà estremamente semplice. Useremo il file precetti di material design, poiché utilizzeremo il logo di Google per esemplificare questa pratica. Devo precisare che lo scopo di questo tutorial è illustrare le conoscenze tecniche, quindi il risultato estetico in questo caso è irrilevante. Come puoi vedere, a poco a poco abbiamo riempito lo spazio con tutte le aree che abbiamo precedentemente determinato nel nostro schema. Tuttavia, abbiamo apportato una piccola modifica all'ultimo minuto. Come avrai notato, abbiamo ridotto notevolmente le dimensioni del nostro logo e abbiamo inserito una linea di divisione nell'area dell'intestazione inferiore che si collega perfettamente con il menu superiore. In questo caso abbiamo utilizzato pulsanti e materiali da una banca di risorse. Come designer possiamo progettarli noi stessi (soprattutto questa opzione è consigliata se vogliamo che presenti un tonico molto simile a quello presentato dall'immagine o dal logo del marchio).

È importante tenere presente che per fare questo esempio lavoreremo su due livelli diversi. Da un lato lavoreremo sugli oggetti e dall'altro sull'aspetto del sito web. Cioè, da un lato nello scheletro del nostro sito web e dall'altro in tutto elementi fluttuanti che questo scheletro supporterà. Noterai che ci sono aree che non fluttueranno affatto, come l'area che occuperà la nostra barra laterale, il preefooter o la barra di divisione che divide l'intestazione dal corpo.

Le strutture 1, 2, 3 e 4 faranno parte del programma sfondo della nostra pagina web, quindi in realtà non sarà necessario esportare come tale da Adobe Photoshop, anche se possiamo farlo, non è necessario. Quando si tratta di Colori piatti (una delle caratteristiche essenziali del design piatto e del material design, possono essere applicati perfettamente tramite codice utilizzando un foglio di stile CSS). Tuttavia, il resto degli elementi deve essere salvato per un successivo inserimento nel nostro codice HTML. In questo piccolo diagramma abbiamo riprodotto anche le aree che appartengono allo sfondo della pagina in modo da avere un'idea chiara di quale sarà l'aspetto finale del nostro sito.

Come potrai capire, lo scopo della creazione di questo schema in Adobe Photoshop è quello di ottenere la dimensione reale di ogni elemento e chiarire la disposizione e la struttura di ogni elemento. Naturalmente, il contenuto testuale non ha posto in questa fase del processo poiché deve esserlo fornito dal nostro editor di codice. Dobbiamo anche sottolineare che in questa pratica lavoreremo con pulsanti ed elementi statici, anche se generalmente questi vengono solitamente applicati da framework come Bootstrap o direttamente da Jquery.

Una volta che abbiamo creato ciascuno degli elementi che comporranno la nostra pagina web, è il momento di iniziare ad esportarli e salvarli nella cartella delle immagini situata all'interno della cartella del progetto HTML. È importante che ti abitui all'esportazione dal tuo wireframe, perché è molto probabile che dovrai modificare alcuni degli elementi originali in base alla configurazione dello scheletro. (Ad esempio, in questo caso, abbiamo modificato la dimensione dei pulsanti originali, il logo e la maggior parte degli elementi che fanno parte della composizione, comprese le immagini nella zona inferiore).

È importante che impariamo a salvare qualsiasi articolo in modo indipendente per salvarlo con le dimensioni che hanno e in modo preciso. Qualsiasi errore, non importa quanto piccolo, può influenzare tutti gli elementi che fanno parte della tua pagina web. Tieni presente che saranno correlati tra loro e devono avere dimensioni perfette in modo che possano essere inseriti da HTML nel web finale. In questo caso, dovremo tagliare e salvare in modo indipendente i seguenti elementi:

• Il nostro logo.
• Tutti i pulsanti (quelli che fanno parte del menu principale e il resto).
• Tutte le immagini.

Possiamo farlo in molti modi e forse troverai un'alternativa più efficace per te. Ma se è la prima volta che realizzi questo tipo di layout, ti consiglio di seguire i seguenti suggerimenti.

• Per prima cosa, devi andare nella cartella in cui si trova il file PSD che contiene il nostro wireframe e duplicarlo tante volte quanti sono gli elementi che stai per esportare. In questo caso abbiamo creato 12 copie dall'originale e le abbiamo salvate nella stessa cartella. Successivamente, rinominerai ciascuna delle copie e assegnerai a ciascuna di esse il nome dell'elemento che contiene. Le nostre 12 copie verranno rinominate: Logo, pulsante menu 1, pulsante menu 2, barra di ricerca, pulsante superiore 1, pulsante superiore 2, pulsante superiore 3 e pulsante superiore 4. I restanti quattro verranno rinominati come: Immagine 1, Immagine 2, Immagine 3 e Immagine 4.
• Fatto ciò, apriremo il file con il nome del logo.
• Andremo alla nostra palette dei livelli e individueremo il livello che contiene il nostro logo. Quindi premeremo Ctrl / Cmd mentre clicchiamo sulla miniatura di detto livello. In questo modo il logo sarà stato selezionato automaticamente.
• Il prossimo passo sarà dire a Photoshop che vogliamo che ritagli quel logo in modo preciso. Per questo dovremo solo effettuare una chiamata allo strumento di ritaglio dal tasto o dal comando C.
• Una volta fatto ciò, faremo clic sul nostro pulsante Invio per confermare il taglio.
• Ora andremo nel menu File in alto per fare clic su Salva come. Selezioneremo il nome, che in questo caso sarà «Logo» e assegneremo un formato PNG, per essere il file che offre la massima qualità sul web.
• Ripeteremo il processo con tutte le copie e gli elementi. Quando hai tagliato, assicurati che il resto degli strati nella nostra tavolozza lo sia invisibile o eliminati. In questo modo possiamo salvare ogni elemento con uno sfondo trasparente.

In questo caso stiamo selezionando il nostro pulsante di menu 2 dalla palette dei livelli. Puoi vedere nello screenshot come i limiti del nostro pulsante sono stati selezionati automaticamente.

Una volta selezionato lo strumento di ritaglio dal tasto C, la nostra tela viene ridotta solo alle dimensioni del nostro pulsante.

Adesso è il momento di salvare uno ad uno tutti gli elementi che fanno parte del nostro sito e inserirli nella cartella delle immagini e che utilizzeremo in seguito. Effettueremo chiamate dal nostro codice e continueremo con il nostro layout, ma d'ora in poi dal nostro editor di codice.

Sebbene ci siano molti strumenti e alternative per impaginare una pagina web e che rendono il processo totalmente intuitivo, è molto importante che impariamo a farlo in un Manuale. In questo modo impareremo quali sono i fondamenti dietro la progettazione di una pagina web.

Riassunto:

1. Progetta il struttura del sito web prestando particolare attenzione al contenuto che desideri trasmettere e alle sezioni che devi creare sul tuo sito web.
2. Lavora sul tuo scheletro o wireframe da Adobe Photoshop indicando in quali aree appariranno i contenuti e il loro formato.
3. Affidandoti alle misure e ai marchi che hai precedentemente sviluppato, inizia a disegno la superficie del web. Include tutti gli elementi (sia mobili che fissi). Non dimenticare di includere i pulsanti, il logo e le immagini corrispondenti.
4. Ritaglia uno per uno tutti gli elementi che fanno parte del progetto. Assicurati che abbiano le giuste misure e che non ti causino problemi in seguito.
5. Salva tutti gli elementi in formato PNG nella cartella delle immagini all'interno della cartella del progetto HTML.
6. Tieni presente che questo progetto avrà un output nella finestra web quindi è molto importante che tu prenda in considerazione la modalità colore e applichi RGB.
7. Lasciati ispirare da altre pagine web che ammiri prima di metterti al lavoro e non dimenticare di discuterne con i membri del tuo team. Nel caso si tratti di un progetto per un cliente, prova ad attenersi al briefing per quanto possibile.