Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progettazione Grafica e
ResponsiveWeb Design
Corso diVisual 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 sta...
IlWireframe non è altro che una bozza del lavoro
che verrà svolto, è un documento a bassa-fedeltà
Può essere considerato c...
IlWireframe non è altro che una bozza del lavoro
che verrà svolto, è un documento a bassa-fedeltà
La produzione di un wire...
Prototipo
Produrre un prototipo, solitamente successivo al wireframe, è fondamentale e
rappresenta il mezzo più potente in...
Prototipi condivisi come antidoti al vicolo cieco
La prototipazione è un processo impegnativo ma fondamentale, serve a
val...
Mockup
Il mockup è una rappresentazione del prodotto realizzato con il più alto livello
di dettaglio e fedeltà possibile. ...
Balsamiq Mockups
Balsamiq Mockups è un tool
grafico per sviluppatori,
designer e progettisti che
permette di "schizzare"
i...
Axure RP Pro
Wireframe a bassa e alta
fedeltà, prototipi navigabili:
Axure RP Pro è senz’altro fra
le migliori soluzioni; ...
Sketch 3
Sketch, l’applicazione
sviluppata da Bohemian
Coding per Mac che, sta
velocemente prendendo
piede tra i designer ...
Diversi i workflow prima di
arrivare al codice
Un approccio potrebbe essere:
1. Sketchare con Balsamiq
2. Restituire lo Sk...
Realizzazione
dello Sketch a
definire gli
ingombri:
Una colonna di
sinistra
Una colonna di
destra suddivisa
in una griglia...
Impostazione
della Griglia
liquida. HTML5:
Una colonna di
sinistra
Una colonna di
destra suddivisa
in una griglia 3x3
Un f...
Le due colonne sono rese
flottanti dando a <main> un
float: right; e a <aside> un
float: left;
Riguardo alla griglia 3x3
p...
Psudo classe :nth-child
Ipotizzando che la classe
content del wireframe diventi
nella sua evoluzione
.corpicelesti.
Per re...
Elementi non testuali
Il prossimo obiettivo è inserire e
gestire immagini liquide e altri
contenuti non testuali. Comincia...
Progettare in Team per il Responsive Web Design
Progettare in Team per il Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Progettare in Team per il Responsive Web Design

392 views

Published on

Progettazione Grafica e Responsive Web Design

Published in: Design
  • Be the first to comment

  • Be the first to like this

Progettare in Team per il Responsive Web Design

  1. 1. Progettazione Grafica e ResponsiveWeb Design Corso diVisual design ed elaborazione grafica (a.a. 2015/2016)
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Realizzazione dello Sketch a definire gli ingombri: Una colonna di sinistra Una colonna di destra suddivisa in una griglia 3x3 Un footer
  13. 13. Impostazione della Griglia liquida. HTML5: Una colonna di sinistra Una colonna di destra suddivisa in una griglia 3x3 Un footer
  14. 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. 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.
  16. 16. 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.

×