Progettazione Grafica e Responsive Web Design

1. Progettazione Grafica e
ResponsiveWeb Design
Corso diVisual design ed elaborazione grafica
(a.a. 2015/2016)

2. 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.

3. IlWireframe 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

4. IlWireframe 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: project
manager, 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.

5. 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.

6. 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.

7. Mockup
Il mockup è una rappresentazione del prodotto realizzato con il più alto livello
di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe
vengono 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.

8. Balsamiq Mockups
Balsamiq Mockups è un tool
grafico 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.

9. 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.

10. Sketch 3
Sketch, l’applicazione
sviluppata da Bohemian
Coding 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.

11. 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 ilWireframe
prodotto fino ad arrivare
progressivamente ad alti livelli
di dettaglio

12. Realizzazione
dello Sketch a
definire gli
ingombri:
Una colonna di
sinistra
Una colonna di
destra suddivisa
in una griglia 3x3
Un footer

13. Impostazione
della Griglia
liquida. HTML5:
Una colonna di
sinistra
Una colonna di
destra suddivisa
in una griglia 3x3
Un footer

14. 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%

15. 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.

17. 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.