• News
  • Come creare il layout di un sito web

Come creare il layout di un sito web

Web Design
Come creare il layout di un sito web

In questo articolo di Web Design vogliamo mostrarvi quali sono le fasi di sviluppo per creare il layout di un sito web.

Queste sono le fasi principali per la realizzazione di una singola pagina web o di un intero sito:

  • partire dalle idee e dagli obiettivi
  • strutturare la navigazione del sito
  • disegnare il layout
  • sviluppare un mockup
  • realizzare un prototipo

Partire dalle idee e dagli obiettivi

Ogni sito ha degli obiettivi precisi: far leggere un articolo di un blog, far acquistare un prodotto, mostrare i propri dati di contatto etc. Dopo aver capito quale azione far compiere al nostro visitatore possiamo individuare il target più idoneo e chiederci quali sono i messaggi da voler trasmettere.

Strutturare la navigazione del sito

Creare la mappa del sito è la fase più importante perché dirà esattamente all’utente e ai motori di ricerca come sarà il nostro intero sito web. Oltre alle classiche pagine (chi siamo, servizi/prodotti, contatti) è opportuno scegliere quali informazioni dare al nostro utente.

Possono esserci informazioni più tecniche e dettagliate all’interno delle singole pagine di  prodotto/servizio oppure pagine più informative per gli utenti meno informati (che possono trovarsi nelle FAQ o all’interno del nostro blog).

Disegnare il layout

Prima di trasformare il sito in un file digitale con foto, testi e colori consigliamo sempre di partire da uno schizzo, una bozza del nostro layout. In modo tale da progettare in modo approssimativo le varie schermate di navigazione e una volta concluse, ragionare sul corretto inserimento di link e contenuti.

Una volta definite pagine e contenuti possiamo passare ad una rappresentazione visuale del nostro sito.

Sviluppare un mockup

Per trasformare il disegno in qualcosa di reale possiamo utilizzare programmi di grafica come Photoshop o Illustrator oppure strumenti online come SketchMoqups, etc.  Dobbiamo tenere a mente l’importanza del responsive design, perciò creeremo il layout di ogni singola pagina nei 3 diversi formati: desktop, tablet e mobile in modo da pensare ad eventuali problematiche prima di andare a sviluppare il codice.

Realizzare un prototipo

Dopo aver trasformato il disegno in grafica digitale è ora di includere tutto in codice web (HTML, CSS, JavaScript, etc.) da visualizzare sul browser e da mostrare ad eventuali clienti o a semplici amici per avere un feedback.

Raccolte le indicazioni, possiamo andare a rifinire il nostro progetto con testi e foto definitive e siamo pronti per la messa online del sito.

Corso di Web Design Torino

Questo è solo un piccolo estratto degli argomenti che vengono trattati ogni giovedì sera, dalle 19:30 alle 21:30, in Novel Academy.



Articoli recenti