Un buon sito web non si realizza senza un lavoro di progettazione. Questa fase costituisce il momento creativo del web designer, ed è il primo passo per realizzare di un sito web di qualità.

wireframe

Prima di iniziare con il codice, un web designer deve organizzare le idee, strutturare la gerarchia degli elementi in rapporto alla loro importanza e cominciare a disegnare con carta e matita!

Penna e calamaio

Disegnare in Photoshop (o in qualsiasi altro elaboratore di immagini) vuol dire iniziare una fase successiva della creazione. Disegnare alla vecchia maniera, invece, ti permette di progettare in maniera diretta, di risparmiando tempo prezioso, ma anche di assicurarti una buona sintonia con il cliente.

Questo serve soprattutto ad evitare equivoci: anche dopo aver parlato a lungo su come s’intende strutturare il sito web, può capitare che i clienti si facciano un’idea di versa di come verrà realizzato.

Cosa è un wireframe?

Il wireframe è il concept, sottoforma di scheletro, del sito che realizzerai. In genere, il wireframe non è altro che una bozza su carta più o meno dettagliata. Molti web designer realizzano i wireframe su block notes o su fogli quadrettati per avere vaghi riferimenti geometrici.

A tal proposito ti segnalo Sneakpeekit, un sito gratuito che offre gratuitamente griglie pronte per essere stampate per la progettazione di siti web, oltre che di applicazioni per tablet e smartphone.

Sul sito si trovano template A4 di vario genere, da griglie generiche a contenitori specifici contenenti riferimenti in pixel dei più comuni grid systems usati dai web designer quali Less Framework 4, 978 grid system, 1140 css grid, etc.

wireframe

La parola al Mockup

“Mockup” è un termine associato alla composizione grafica del progetto realizzata con appositi software di elaborazione grafica quali Photoshop, Fireworks, Corel Draw, etc.

Si tratta di tradurre il layout del wireframe in qualcosa che si avvicini il più possibile, quantomeno nell’aspetto, al sito finito. Per ogni framework o grid system, Sneakpeekit mette a disposizione anche template per Photoshop con guide di riferimento in base alla larghezza del layout e al numero di colonne che si è scelto di adottare.

Una volta realizzato il mockup, si approda alla fase del coding.

A questo punto del workflow si procede con lo slicing (la scomposizione del progetto grafico) e all’impaginazione della pagine web mediante i linguaggi html, css, php, js e via dicendo.

Riassumendo, le fasi che costituiscono la realizzazione di un sito web  sono sintetizzabili nei seguenti punti:

  • Ideazione e progettazione (realizzazione dei wireframes)
  • Composizione grafica e rifinitura dei dettagli (realizzazione dei mockups)
  • Slicing
  • Coding (impaginazione del sito web)

Questo articolo è stato scritto da Pasquale Vitiello, autore di Sneakpeekit e guest blogger per My Social Web

Fonte Immagine

4 COMMENTI

  1. Io utilizzo la lavagna a quadretti per il wireframe, la fotografo e mando la foto al grafico magari elaborata con photoshop per aggiungervi qualche indicazione o migliorare i testi che indicano il contenuto.

  2. Si, molto bene, prima utilizzavamo foglio A4 e matita, ma dato che lo spazio non bastava mai siamo arrivati ad incollare più fogli.
    Infine la soluzione: la lavagna quadrettata 120×90 messa in verticale. Una bella foto in alta risoluzione alla lavagna ed eventualmente si aggiunge qualche nota con un programma di grafica.

    Anche il grafico ci ha dato feedback positivi su metodo. I wireframe sono chiari e anche dopo aver cancellato la lavagna si può sempre modificare in photoshop. =) Tu cosa usi?

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here