Come progettare un sito responsive con i mockup

Dallo studio dei contenuti, alla definizione dei wireframe. L'applicazione di un metodo per la progettazione del sito Abstract responsive.

Progettare un layout attraverso l'utilizzo delle griglie è sempre stato un ottimo metodo per consentire attraverso l'allineamento degli elementi, stabilità alla pagina e una solida stuttura al layout web.

Con l'arrivo del responsive la progettazione si è adeguata a quelle che sono le nuove esigenze di questa tecnica.

Progettare wireframe in maniera responsive, significa fare in modo che il contenuto si adatti in modo flessible alle diverse larghezze della griglia imposte dai diversi DEVICE.

Talvolta però, l'incompatibilità dei diversi device a disposizione rende ancora più complicato tutto ciò. Ecco perchè in quest caso l'approccio della progressive enchancement semplifica le cose: nessun compromesso verso i browser più vecchi modulando il contenuto in maniera progressiva in base al mezzo su cui viene presentato.

Vediamo ora come si potrebbe tradurre il nostro sito www.abstract.it in una versione "adattiva" dal wireframe al mockup finale.

Fase 1: identificare il contenuto

Prima di cominciare a delineare un nuovo modello responsive è necessario un attento studio del sito in tutta la sua interezza allo scopo di identificarne il contenuto. Nella home oltre agli elementi strutturali di base (header e footer) troviamo:

  1. Il banner che funge da vetrina vera e propria: è utilizzato per dare maggiore risalto sia per eventi importanti, sia per promozione aziendale.
  2. News di varia natura classificate in "buone nuove", "news" e "rilasci"
  3. News di lancio dei progetti dal portfolio (case study)

I blocchi principali che compongono la home sono:

1. Header (Obbligatorio)
1.1 Brand (Obbligatorio)
1.2 Global Navigation (Obbligatorio)
1.3 Tools (Obbligatorio)

2. Banner (Opzionale)
2.1 Banner Featured
2.2 Banner call to action

3. Body (obbligatorio)
3.1 Articolo Feature
3.2 Listing articolo (Obbligatorio)

4. Sidebar (opzionale)
4.1 Sidebar Feature

5.Footer

Questi elementi vengono combinati tra di loro dando vita a quella che è la struttura della home page attuale.

Fase 2: Selezione degli schermi target

Stabilito che il contenuto e il template delle interfacce sono quelli appena descritti, la fase successiva è quella di definire il nostri target di visualizzazione.

  1. Predefinito
    Min-width: 780px
  2. Tablet Portrait (al paesaggio e desktop)
    Min-width: 768px / max-width: 979px
  3. Smartphone
    Max-width: 480px;

Questo consente successivamente l'identificazione della griglia più adatta alle nostre esigenze.

La figura che segue mostra i modelli di supporto dalla libreria di simboli Bootstrap su Mockups to Go che ho utilizzato nel progetto.

BootstrapGridLayout1.png

Fase 3: Wireframe su griglia

Prima di posizionare i blocchi sulla griglia passiamo ad identificare graficamente quali sono gli elementi contenuti nella pagina.

L'obiettivo è quello di decidere dove posizionare i blocchi in base allo spazio a disposizione: man mano che la griglia va a restingersi sarà necessario prevedere un nuovo layout e l'eventuale eliminazione dei blocchi facoltativi.

blocchisugriglia.jpg

Dal modello a blocchi al wireframe

In questo progetto come strumento di wireframing ho utilizzato Balsamic, ma qualsiasi altro tool può andare bene.

wireframe.jpg

Analizzando il risultato ottenuto è evidente, già in questa fase, come degli elementi reputati superflui siano stati riadattati e/o addirittura eliminati dalla visualizzazione compatta che offre un dispositivo mobile come uno smartphone..

Il menu di navigazione, il search e il footer per esempio, sono stati ridotti a "icona" per lasciare maggiore spazio a qulli che sono i contenuti principali della pagina.

Applicata una skin grafica ai wireframe otteniamo un risultato che è possibile vedere qui nella figura seguente:

mockup.jpg

Concludendo...

Il presente del web ormai è mobile e la responsività dei siti è pane quotidiano per gli addetti ai lavori. Rilasciare un buon prodotto responsive prevede alla base uno studio accurato ed una buona progettazione in tal senso. Quello appena proposto è l'applicazione di questo post ed è, a mio avviso, un modo interessante per acquisire un metodo per una buona progettazione dei siti responsive.

 

Rif.:

http://www.alistapart.com/articles/understandingprogressiveenhancement/

http://francescogavello.it/progressive-enhancement-migliorare-esperienza-utente-per-i-browser-moderni

Share this on

Share |

On same topics

Commenti

comments powered by Disqus