Upload
salvatore-paone
View
216
Download
0
Embed Size (px)
Citation preview
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.