Progettazione Grafica e Responsive Web Design

Corso di Visual design ed elaborazione grafica

(a.a. 2015/2016)

Layout Liquido

Il designer impostava 1027px o 960px nell’asse orizzontale e il layout veniva concepito come un oggetto statico e l’influenza di un approccio cartaceo era evidente. Negli ultimi anni molta acqua è passata sotto i ponti, i designer hanno iniziato a pensare, già dal wireframe, ad un nuovo approccio fluido e i nuovi software di wireframing, prototipizzazione, mockup consento ciò: Balsamiq Mockups, Axure RP Pro, Sketch 3.

Il Wireframe non è altro che una bozza del lavoro che verrà svolto, è un documento a bassa-fedeltà

Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.

Il wireframe ha la funzione di:

• comunicare l’idea iniziale del progetto

• focalizzare l’attenzione solo su architettura e contenuti

• evitare le “distrazioni” della parte grafica

• comunicare cosa si vedrà

• essere alla base di un successivo prototipo

Il Wireframe non è altro che una bozza del lavoro che verrà svolto, è un documento a bassa-fedeltà

La produzione di un wireframe coinvolge diverse figure del team: projectmanager, business analyst, sviluppatore, designer, copywriter e possono servire anche in fase di test di usabilità nel momento in cui si sottopone al cliente la struttura prima che prenda forma attraverso grafica e codice.

In questa fase il lavoro in team è fondamentale, non coinvolgere tutte le parti in causa durante questa fase iniziale potrebbe avere ripercussioni sullo sviluppo.

Prototipo

Produrre un prototipo, solitamente successivo al wireframe, è fondamentale e rappresenta il mezzo più potente in fase di testing e documentazione in quanto questo genere di elaborato rappresenta il vero prototipo del sito (realizzato in HTML/CSS) e permette all’utente di testare l’esperienza di navigazione. Il prototipo serve anche a validare specifiche fattibilità tecniche.

Prototipi condivisi come antidoti al vicolo cieco

La prototipazione è un processo impegnativo ma fondamentale, serve a validare specifiche fattibilità tecniche e a costringere le diverse figure di un team alla concretezza del prodotto evitando così di ritornare a considerare eventuali variazioni che possano portare a vicoli ciechi.

Mockup

Il mockup è una rappresentazione del prodotto realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframevengono inseriti le parti visual. Un mockup serve a rendere l’idea del progetto finale rappresentando nel dettaglio i vari contenuti e le funzionalità base dell’applicazione web in maniera statica. I mockup rappresentano il modello più comprensibile e più vicino al prodotto finale.

Balsamiq Mockups

Balsamiq Mockups è un toolgrafico per sviluppatori,

designer e progettisti che permette di "schizzare"

interfacce utente e schermate (wireframe) per siti web e applicazioni con

elementi dal look "sketchy" (abbozzato). I prodotti finali possono essere esportati in formato PNG, PDF o XML.

Axure RP Pro

Wireframe a bassa e alta fedeltà, prototipi navigabili:

Axure RP Pro è senz’altro fra le migliori soluzioni; di

questo software si apprezza soprattutto la velocità e

facilità con cui permette di eseguire i wireframe e di

convertirli in prototipi interattivi navigabili. La

gestione drag&drop degli oggetti rende immediato

l'utilizzo nella progettazione incentrata sulla UI.

Sketch 3

Sketch, l’applicazione sviluppata da BohemianCoding per Mac che, sta

velocemente prendendo piede tra i designer come

alternativa ai più celebri software Adobe. Photoshop

non è pensata per le UI. Il software usato dalla quasi

totalità dei designer è, come suggerisce il nome, un editor

di foto e immagini. Successivamente, grazie alla

sua potenza e alla varietà delle sue funzioni, è stato

adattato a strumento tuttofare.

Diversi i workflow prima di arrivare al codice

Un approccio potrebbe essere:

1. Sketchare con Balsamiq

2. Restituire lo Sketch in modalità HTML/CSS

3. Incrementare il Wireframeprodotto fino ad arrivare

progressivamente ad alti livelli di dettaglio

Realizzazione dello Sketch a

definire gli ingombri:

Una colonna di sinistra

Una colonna di destra suddivisa in una griglia 3x3

Un footer

Impostazione della Griglia

liquida. HTML5:

Una colonna di sinistra

Una colonna di destra suddivisa in una griglia 3x3

Un footer

Le due colonne sono rese flottanti dando a <main> un

float: right; e a <aside> un float: left;

Riguardo alla griglia 3x3 possiamo definire il margine in

modo che sia identico allo spazio fra due colonne principali

con la seguente equazione: x*0.65=0.01*100 >

(0.01/0.65)*100 = 1,538462%

Di conseguenza possiamo determinare le larghezze delle 3

colonne:

(100%-2* 1,538462%)/3 = 32.307692%

Psudo classe :nth-child

Ipotizzando che la classe content del wireframe diventi

nella sua evoluzione .corpicelesti.

Per regolare il numero degli elementi della griglia per ogni

riga è stato sufficiente utilizzare la psudoclasse :nth-child(3n+1) la quale reimposta la riga ogni

tre elementi a partire dal primo.

Elementi non testuali

Il prossimo obiettivo è inserire e gestire immagini liquide e altri

contenuti non testuali. Cominciamo per esempio ad inserire una

immagine nella colonna di sinistra <aside>, senza particolari accortezze

al ridursi del browser l’immagine supera i limite del contenitore.