View
8
Download
0
Category
Preview:
Citation preview
WEB DESIGN Idocente: Gabriele Ruscelli
dispense: www.gabrieleruscelli.comemail: gabriele_ruscelli@docenti.naba.it
Queste slideQueste slides fanno parte del corso “Web Design & HTML”.Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com . Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0” (http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati.L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
ProgrammaIntroduzione al web e al design digitale
Elementi di una pagina
Navigazione
Layout e Box Model
Responsive Design
Look and Feel - colori
Look and Feel - interaction
Finalizzazione progetto
Finalizzazione progetto
Look and Feel - Icone
Look and Feel - tipografia
Look and Feel - immagini
10
11
12
13
14
1
2
3
4
5
6
7
8
9
ProgrammaScelta del progetto
Site map e User Journey
Site map e User Journey
Wireframe
Wireframe
Wireframe
Moodboard
Creazione icone
User Interface Design
Finalizzazione progetto
Finalizzazione progetto
Scelta di immagini
Definizione scelta stilistica
Scelta tipografica
PRO
GETTO
10
11
12
13
14
1
2
3
4
5
6
7
8
9
Progetti9 10 11 12 13 141 2 3 4 5 6 7 8
progetto look_and_feel
progetto design_styleguide
progetto personale
sitografia e bibliografiaBibliografia specifica: 1. CSS Guida Completa di Gianluca Trojani - editore Feltrinelli, nuova edizione copertina Blu 2. HTML and CSS web standard solutions by Christopher Murphy, Nicklas Persson - Editore: Friends of (an Apress Company) 3. HTML and CSS: Design and Build Websites di jon Duckett 4. Neuro Web Design di Susan M. Weinschenk - Editore: Apogeo; 5. Eyetracking web Usability. Siti che catturano lo sguardo di Jakob Nielsen e Kara Pernice - Amazon.it 6. HTML5 - the missing manual - by Mattew MacDonald - 2013 - Editore: O’Reilly 7. CSS3 - the missing Manual by David Sawyer McFarland - 2013 - Editore: O’Reilly 8. HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, Gianluca Troiani 9. Web usability 2.0. L’usabilità che conta di Jakob Nielsen e Hoa Loranger
Sitografica specifica: 1. http://www.italianalistapart.com 2. http://learn.shayhowe.com/advanced-html-css/ 3. http://www.zeldman.com 4. http://www.cssbeauty.com/gallery/ 5. http://www.webcreme.com/ 6. http://www.sitepoint.com/ 7. http://www.thefwa.com/ 8. http://www.awwwards.com/ 9. http://www.iwebdesigner.it/ 10. http://www.html5today.it/ 11. http://www.yourinspirationweb.com/ 12. http://onepagelove.com/
Bibliografia e sitografia generale: 1. JeffryZeldmanProgettareSitiWebStandard–tecnicheperildesignconXHTMLeCSS,EditoreParsonEducationItalia– disponibile da HOEPLI Milano in italiano e in inglese. 2. Jackob Nielsen, Designing Web Usability, New Riders Publishing, USA, 3. http://www.w3.org/ 4. http://www.w3.org/html/ 5. http://www.w3.org/Style/CSS/
introduzione al web e al
design digitale
introduzione
Web Design è un espressione utilizzata per definire la progettazione tecnica, strutturale e grafica di un sito web.
Progettazione per il world wide web. wikipedia
Nel mondo del web design nasce una “nuova” figura professionale:
il WEBDESIGNER
introduzione
il web designercosa fa?
Progetta & Realizza
Cosa deve avere/sapere?-creatività-grafica-logica
-conoscenza del www-conoscenza di usabilità e navigabilità
-saper lavorare in team
il web designerCompetenze:
Creativa/Logicacreatività, gusto estetico, capacità di progettazione, sintesi
Software & linguaggiphotoshop, illustrator, fireworks, flash, dreamweaver, sketch, XD
HTML, CSS, Javascript
Progetta disegna interfacce coda
altre figureDigital Designer
Digital Art directorUI Designer
Interaction DesignerUX Designer
Front-end Designer
WebDesigner
tantaprogettazione
tantagrafica
tantocodice
{{{{
http://www.skillprofiles.eu/
il web designerdifferenze:
GraphicDesigner ͢ WebDesigner
WebDeveloper ͢ WebDesigner
design design e navigazione
HTML, CSS, FlashPHP, ASP, XML, Java, Javascript
http://sixrevisions.com/infographics/web-designers-vs-web-deve-lopers-infographic/
?il web designer
Web Master
internet funzionamento
L’utente naviga o usa internet
utenteinternet
internet funzionamento
L’utente chiede e internet risponde
utenteinternet
internet funzionamento
Il computer chiede e il server risponde
computerserver
internet funzionamento
server
richiesta
ricerca/esecuzionerisposta
rendering
LATO CLIENT
LATO SERVER
computer
browser
Richiesta e risposta di un file nel web
file
internet funzionamento
file
windows
apple OS
linux800x600
1024x768
+1024x768
Crossbrowser Crossdevice
differenze
Web Designer
Utente
Web DeveloperFunzionamento legato
al Back-EndFunzionamento legato
al Front-End
differenze
Web Designer Graphic Designer
CMYKcartapantoniingombri e crocini di tagliocromalinemisure in cmfile pesanti terabytequante pagine hai detto che erano?
RGBschermo
palette rgbdiversi output
renderingminure in px
immagini leggerissime ma di alta qualitànooo, non dirmi che non si vede su iPhone?
Dalla grafica cartacea alla grafica digitale
Print DigitalBiglietti da visita
Brochures
Libri
Riviste
ADV stampa
ADV affissioni
Packaging
Stickers
nascita: 1455 con Gutenberg nascita: 1993 con Tim Berners-Lee
Spot
Viral
Siti web
Applicazioni smartphone e tablet
Applicazioni web
Evoluzione del mondo digital
Nascitadel www
1991 1993 1994 1996 20072005
wwwpubblico
con HTMLbasico
introduzioneCSS
Nokiaprimo cellulare
con connesione internet
PrimoiPhone
Nascitadel
Web 2.0
evoluzione a livello tecnico
Esercizio
Usare Sketch-Artboard
-forme-testi
-gestione livelli-AI in sketch-PS in sketch
-personalizzare toolbar-esportare un oggetto e artboard
-pixel e vettoriale
Usare XD-registrarsisuadobeXD
-provare il tutorial
solo per mac~50€ per studentiottimo per il design
mac e PCgratis con adobe IDottimo per i prototipi
Navigazione
missionLa mission della navigazione è rendere
a prova di “utente” un sito web.
-qui sei in homepage-la pagina principle
-l’indice-la prima pagina che vedi appena atterri sul web site
-qui sei nell’ecommerce-qui puoi comprare un
sacco di cose-qui spenderai soldi
-se vuoi puoi vedere chi siamo
-qui puoi vedere chi siamo-grazie a questa sezione puoi innamorarti di noi
-vuoi sapere la nostra storia?-ma è il sito giusto?
principioIl principio base della navigazione è:
Non fare perdere l’utente negli abissi più profondi di un sito web.
Ovvero:
Ovunque vado posso tornare Ovunque....e se mi dovessi perdere ho la possibilità di tornare indietro.
albero di navigazione
http://www.usabile.it/392009.htm
differenze
HP
multipage onepage
pag 1 pag 2 pag 3 pag 4
sezione 1
sezione 2
sezione 3
sezione 4
sezione 4.1
sezione 4.2pag 4.1 pag 4.2 pag4.3
differenze
HPHP
alberatura piatta alberatura profonda
pag 1
pag 1
pag 2.1 pag 2.3
pag 2
pag 2
pag 2.2 pag 2.4
pag 2.1.1 pag 2.1.2 pag 2.4.1
pag 3
pag 3
pag 4
come iniziareHP
about contact blogservice
service 1
ordine di progettazione e disegno
layout “mastro”
service 2 dettaglioarticolo
service 3 archivioarticoli
1
3
2
4
5 8
6 7
A
B B C D
E E E F D
principioIl principio base della navigazione è:
Non fare perdere l’utente negli abissi più profondi di un sito web.
Ovvero:
Ovunque vado posso tornare Ovunque....e se mi dovessi perdere ho la possibilità di tornare indietro.
livelli di profonditàEsistono diverse tipologie di menu, ognuna di queste avrà la sua importanza
e in base a questa avranno uno stile e una posizione diversa.
Livello 1
Livello 2Livello 3
Livello 4
livelli di importanzamenu di navigazione istituzionale
menu di navigazione informazioni
menu di navigazione principale
contenuto
Briciole di paneutili per siti web con tanti contenuti (blog, ecommerce)
sottomenuhome work contact
home work contact
work1 work2 work3
work1 work2work3
home work contact
work 1work 2work 3work 4
work 2.1work 2.2work 2.3work 2.4
Hamburger
solo per
MOBILE
fissoavete mai visto questo tipo di navigazione?
tanti contenuti 1
tanti contenuti 2
tendina fullpage
errori
da ricordare...Il menu di navigazione:
deve essere visibile;
deve essere riconoscibile;
deve essere omogeno per tutte le pagine,un unica eccezione potrebbe essere splash page o in rari casi home page;
deve avere sempre i 3 stati: normal, hover, current.Nella navigazione mobile anche active;
da ricordare...Le voci del menu:
devono essere identificative;
devono essere capibili;
NON devono avere immagini (icone si);
NON devono avere simboli strani ∏{}ØŒØÙ◊∞ǡ˛˝—· Ú»”’¢‰›⁄ ‚◊}
devono essere monolingua;
se monoparola meglio.
call to actionhttps://sketchapp.com
https://www.invisionapp.com
https://www.volkswagen.it/it.html#
Pulsante d’azione
Lo si trova nel “fold” e/o a fine pagina
Serve a collegare pagine non per forza inserite nel menu
Spesso propone la finalità/scopo del web site
journey map
https://www.nngroup.com/articles/customer-journey-mapping/
https://designers.italia.it/assets/downloads/Designers_UserJourney_Esercizio.pdf
esercizio
Iniziare a definire una sitemap,se necessario anche una customer journey.
disegnare simboli utili alla mappa con Sketch o Adobe XD
progetto personale
styleguide [1]- mappa
Metodologia1 - Scegliere un sito web proposto https://www.naba.ithttps://www.mcdonalds.it
2 - studiare l’architettura e scrivere un indice(Es. capitolo 1 > sottocapitolo, capitolo 2...)
3 - riportare l’indice nel layout in sketch/XD,disegnando l’alberatura
Obiettivoricavare da una pagina web la struttura utilizzata (macro - mappa)
- pagine di primo livello - pagine di secondo livello
- modali e popup
progetto design_styleguide
Elementi di una pagina
Tipologie di siti web
one-page
CMSCMS-onlineinfrastruttura
anatomia
tipologia
landing-page
nativi
informazioneblog
portali
motori diricerca
web app
social networkforum
vetrinaportfolio
ecommercemarket-place
multi-page
statici
composizione
index.html
stili.css
sfondo.jpg
video.mov
cartella principale “root”
about.html
contact.html
struttura dimensioniLa grandezza di un sito web può variare in base alle esigenze,
tendenzialmente si parla di misure orizzontali in quanto la misurain verticale è commisurata ai contenuti come immagini e testi.
Possiamo dividere 2 categorie di siti web:
Siti Web a tutta pagina (siti responsive)misure in % relative alla grandezza dei display
Siti Web con un contenitore centrale
la misura più utilizzata è 960px
struttura dimensioni
perchè 960px?Una misura media tra risoluzioni basse (800x600 VS 1920x1080).
La visualizzazione è corretta anche con schermi 1024x768.http://www.w3schools.com/browsers/browsers_display.asp
Numero divisibile per 2, 3, 4, 5, 6, 8più numeri = più colonne a disposizione
più colonne = più possibilità di creare layout “personalizzati”
struttura elementi base
wrapperheader
nav/menucontentsidebarfooter
Tutti questi elementi devono essere presenti in un sito web e in tutte le pagine
struttura elementi base
wrappercontenitore generale,
grandezza 960px,quasi sempre centrato
http://www.corriere.it
struttura elementi base
headertesta del sito,spesso contiene:
-logo-payoff-lingua
-menu istituzionali-barra di ricerca
struttura elementi base
nav/menumenu di navigazione principale
il più importante.Può essere composto anche
da immagini e icone
http://it.beatsbydre.com
struttura elementi base
nav/menu 2menu di navigazione principale
laterale
struttura elementi base
nav/menuposizionamento
si
si
no
no
struttura elementi base
contentparte centrale del sito, dove
saranno presenti le in-formazioni più importanti.
È di fatto la parte adibita ai contenuti: testi, immagini e altri media. Questi sono gli elementi che varieranno da
pagina a pagina.
struttura elementi base
sidebarelemento non obbligatorio,serve per inserie un menu
secondario ho dei contenuti meno rilevanti.
Molto spesso usato nei blog.
struttura elementi base
footerpiede/chiusura del sito web,indica la fine della pagina,
spesso contiene:-informazioni aziendali
-contatti “veloci”-riproposta dei menu e
sottomenu
struttura visualizzazioneviewportarea visibile di una
finestra del browser.
foldparte visualizzata del sito visualizzata al momento
dell’atterraggio.
struttura visualizzazione
fold~ 750px
effetto matrioskaun elemento può contenere altri elementi
wrapper > content > sidebar
ESEMPIO: dentro la sidebar potrebbe esisteresidebar > articolo > paragrafo > alcune parole in bold
Visione 3d di un sito web
atomic design
http://bradfrost.com/blog/post/atomic-web-design/
Esercizio 1completare il form di iscrizione
Esercizio 2Suddividere in blocchi uno di questi siti web:
iniziare dai macro fino ai micro blocchi
Esercizio 3Finalizzare la site map.
Se finita, inizare a disegnare un wireframe
disegnare simboli utili al wireframe:struttura base della pagina, immagini,
box, icone finte, bottoni
progetto personale
Layout &Box Model
introduzioneLa gabbia o griglia è la struttura invisibile che compone gli elementi della pagina.
Questa struttura è composta da linee orizzontali e verticali che definiscono la disposizione del testo e delle immagini, il confine dei contenuti e i limiti della pagina stessa.
L’uso delle griglie determina un ritmo costante, che facilità il percorso di lettura, la memorizzazione e la mappatura mnemonica dei contenuti.
https://www.romeuracademy.it/regole-impaginazione-grafica/
stampa e web
terminologiagabbia grafica
griglia
unit gutter colums field{
gabbia graficacontenitore della griglia
è possibile determinare i margini top bottom left right
grigliacomposizione di elementi(trasparenti) utili per l’impaginazione
unitnumero di elementi che compongono la griglia
in questo caso: 6
gutterspazio tra le unit
determinano la dis-tanza tra i box
columsnumero di colonne ricavate dalle unit
è possibile creare molte combinazioni
fieldspazio orizzontale che definisce i con-tenuti dividendoli in righe
possono avere mis-ure (altezze) diverse in base alla loro im-portanza
scegliere colonne
simmetrica asimmetrica
spazio e margini verticaliImportante perdefinire le sezioni,dividere gli argomenti“pacchettizare” testi e immaginicreare una narrazione funzionale
dimensione da usarequalunque, affinché si segua quello precedentemente descritto
fare attenzione al “FOLD” grande circa 750px
marginidevono essere omogeneine possono esistere diversi ma con-viene gestire massimo 3 tipologie
scegliere colonneposizioneordine di letturagrandezza verticalegrandezza orizzontalelook and feelDeterminano che tipo di importanza deve avere un contenuto.
Grazie alle griglie è possibile prestabilire:ordine gerarchicobilanciamento tra gli elementiarmonia della paginaallineamenti precisi e consistenti
sezione aurea
https://webdesign.tutsplus.com/articles/making-your-web-designs-more-effective-with-the-golden-ratio--cms-23459
per approfondiregriglie e gabbiehttp://www.designersinsights.com/designer-resources/using-layout-grids-effectively/
Libro sulle grigliehttps://www.amazon.it/gp/product/3721201450/ref=as_li_ss_tl?ie=UTF8&camp=3370&creative=24114&creativeASIN=3721201450&linkCode=as2&tag=ciroespo-21
Esempihttps://www.awwwards.com/30-grid-based-websites.html
Box Model
content
paddingbordermargin
right
top
bottom
left
paddingUt quost et, iditiae con pere nulpa conse-quae cum sam, venditatur? Poraest fac-cus quatur moloreped quaero intio. Ossi-met aturisto doluptatur, omnis pratiorero iunt debitiae nonseniet ilitatibus volup-tatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero in-tio. Ossimet aturisto doluptatur, omnis pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta-qui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
padding:10px padding-top:10px
padding: 0px
MarginUt quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero in-tio. Ossimet aturisto doluptatur, omnis pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta-qui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero intio. Ossimet aturisto doluptatur, omnis pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta
margin:0px margin-top:20px
margin: 20px
borderUt quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur moloreped quaero in-tio. Ossimet aturisto doluptatur, omnis pra-tiorero iunt debitiae nonseniet ilitatibus voluptatem dolupta-qui dem cone offici niet restiasitem rem volorempor autet as pa doluptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
border:0px border-top:2pxsolidblue
border:2pxsolidblue
Box model
Ut quost et, iditiae con pere nulpa consequae cum sam, venditatur? Poraest faccus quatur mo-loreped quaero intio. Ossimet aturisto dolup-tatur, omnis pratiorero iunt debitiae nonseniet ilitatibus voluptatem doluptaqui dem cone offici niet restiasitem rem volorempor autet as pa do-luptibus acimpor iaeribeaquo eum inis inctis eaquiat odi verio odiciendis ess
Titolo Pagina
EsercizioVietato non toccare è una mostra-gioco interattiva per bambini dai 2 ai 6 anni alla scoperta del lavoro di Bruno Munari. Realizzata da MUBA e Associazione Bruno Munari con la collaborazione di Corraini Edizioni.
Biglietti acquistabili onlineo in cassa sino a esaurimento posti.
Bruno Munari (Milano, 24 ottobre 1907 – Milano, 29 settembre 1998) è stato un artista, designer e scritto-
re italiano.
È stato “uno dei massimi protagonisti dell’ar-te, del design e della grafica del XX secolo”, dando contributi fondamentali in diversi cam-pi dell’espressione visiva (pittura, scultura, ci-nematografia, disegno industriale, grafica) e non visiva (scrittura, poesia, didattica) con una ricerca poliedrica sul tema del movimen-to, della luce e dello sviluppo della creatività e della fantasia nell’infanzia attraverso il gioco.Bruno Munari è figura leonardesca tra le più
importanti del novecento ita-liano. Assieme allo spa-
ziale Lucio Fontana, Bruno Munari il
perfettissimo domina la scena mila-
nese degli anni ‘50/‘60; sono gli anni del boom economico in cui nasce la figura dell’artista operatore-visivo che diventa consulente azien-dale e che contribuisce attivamente alla rina-scita industriale italiana del dopoguerra.
“Il sogno dell’artista è comunque quello di ar-rivare al museo, mentre il sogno del designer è quello di arrivare ai mercati rionali”.
Munari partecipa giovanissimo al futuri-smo, dal quale si distacca con senso di levi-tà ed umorismo, inventando la macchina ae-rea (1930), primo mobile nella storia dell’arte, e le macchine inutili (1933). Nel 1948 fonda il MAC (Movimento Arte Concreta) assieme a Gillo Dorfles, Gianni Monnet e Atanasio Sol-dati. Questo movimento funge da coalizzatore delle istanze astrattiste italiane prospettando una sintesi delle arti, in grado di affiancare alla pittura tradizionale nuovi strumenti di comu-nicazione ed in grado di dimostrare agli indu-striali e agli artisti-artisti la possibilità di una convergenza tra arte e tecnica. Nel 1947 realiz-za Concavo-convesso, una delle prime instal-lazioni nella storia dell’arte, quasi coeva, ben-ché precedente, all’ambiente nero che Lucio Fontana presenta nel 1949 alla Galleria Navi-glio di Milano…
(fonte Wikipedia)
B R U N O M U N A R I
Esercizio
styleguide [2] - wireframe
Metodologia1 - Utilizzare il sito web scelto la precedente lezione
2 - studiare l’architettura disegnare un wire-frame delle pagine: -Home Page -1° livello -2° livello
3 - ricostruire gli oggetti del wireframe come simboli e riutilizzarli. (prendere come linea gui-da la pagina sucessiva --> )
Obiettivoricavare da una pagina web la struttura utilizzata (micro - wireframe)
-griglia
-box model
progetto design_styleguide
[2_ui_kit/design_styleguide]
EsercizioTitolosottotitoloLorem ipsum dolor sit amet, consectetuer adipi-scing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu-lus mus. Donec quam felis, ultricies nec, pellen-tesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
bottone
Link
box di testo
video
immagine
form (Es: inserisci il tuo nome)
icone
Esercizio
Proseguire con i wireframe, adattandoli alle griglie.Definire in più dettagliatamente margini, padding e bordi
progetto personale
Responsivedesign
resposive designResponsive web design è un approcio volto ai siti per fornire una visione ottimale e un esperienza di facile lettura su qualsiasi
dispositivo e finestra del browser.
resposive designSi basa su layout fluidi con griglie proporzionali al contenuto,
immagini flessibili e diversi comandi media query.
griglie resposiveschermi larghipiù colonnepiù contenutimenu “aperti”meno scroll
schermi piccolimeno colonnesolo contenuti principalimenu hamburgerpiù scroll e gesturelayout diviso in field (righe)
griglie resposive
schermi larghi(desktop, smartTV)
Dividere le unità andando a scalare per dispositivo
12
6
3
schermi medi(tablet, phablet)
schermi piccoli(smartphone)
griglie resposive
schermi larghi(desktop, smartTV)
Mantenere lo stesso numero di unità per tutti i dispositivi
12
12
12
schermi medi(tablet, phablet)
schermi piccoli(smartphone)
fluida
100%
25%
50% 50%
25%25% 25%
da px a %La conversione da pixel a percentuale si effettua grazie alle proporzioni,
per fare questo si ha bisogno di sapere 2 valori fondamentali:La grandezza della gabbia grafica (Es. 960px/1024px)
La grandezza del singolo blocco (Es. 300px)
300px 960px
da px a %Per avere il valore in % dobbiamo rifarci ad alcune regole di matematica:
(misura iniziale / misura contenitore )* 100 = valore atteso
nel nostro esempio:
(300/960)*100 = 31.25%
media query
stili_desktop.css
colore font: rossocorpo font: 14
stili_960.css
colore font: rossocorpo font: 18
stili_420.css
colore font: nerocorpo font: 24
@media screen and (max-width: 960px) { .header { color: red; font-size: 18pt; }}
media query
html
stili desktopstili tabletstili mobile
html CSS
html
I contenuti sono sempre presenti nelle pagine,cambiano solo gli stili, in base al tipo di visualizzazione
2 approci progettuali
schermi larghi(desktop, smartTV)
schermi larghi(desktop, smartTV)
Mobile First Desktop First
schermi medi(tablet, phablet)
schermi medi(tablet, phablet)
schermi piccoli(smartphone)
schermi piccoli(smartphone)
contenutistruttura della paginaGrigle fluide (%)Cambia layout con media query
testiPiù schermo piccolo, più deve essere visibile (più gros-so, più interlinea, più spaziature tra le lettere).Testo scalabile proporzionalmente tra diversi device.
immaginiDiverse inquadrature di immagini (proporzioni) per di-versi device.Immagini per device retina
per approfondireDimensione degli schermihttp://mydevice.io/devices/
Mobile Firsthttps://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/
https://www.1and1.it/digitalguide/siti-web/web-design/mobile-first-un-nuovo-approccio-del-web-design/
esercizio
Finalizzare i wireframe, adattandoli alle griglie.Declinare da layout desktop a tablet e mobile.
progetto personale
Lookand
Feel
Introduzione
In informatica, l’espressione inglese look and feel viene usata per descrivere le caratteristiche percepite dall’utente di una interfaccia grafica,
sia in termini di apparenza visiva (il look) che di modalità di interazione (il feel).
wikipedia
studiare il lookcolor palette
immagini scelta del carattere
layout
immaginariobrand identitytone of voice
scelta grigliagrandezzaresposive
max 2/3iconografichefotograficheillustrativenessuna
max 4/5
studiare il lookDefinire dei ruoli (grandezze, caratteri, stili)
Testuali: - Titolo 1 - Titolo 2 - Sottotitolo 1 - Sottotitolo 2 - Paragrafo - Parole sottolineate - Parole in corsivo
Bottoni: - Principale 1 - Principale 2 - Secondario - Parole link - Immagini link
Colori: - Sfondo - Testuali - Interazione (bottoni) - Elementi grafici
Immagini: - Principali - Secondarie - Piccole - Supporto grafico
studiare il feel
azione
informazione
obiettivodel sito
dove deve trovare le informazioniprincipali e quelle secondarie?
cosa farà l’utente?quali passi dovrà compiere persoddisfare le sue esigenze?
che metodo colori?HEX#FF530D
RGBr: 255g: 83b:13
RGBAr: 255g: 83b: 13a: 0.5
HSLAh: 17s: 95b: 100a: 0.5
.testo { color: orange; color: #FF530D; color: rgb(255,83,13); color: hsl(17,95%,100%);}
.testo { color: rgba(255,83,13,0.5); color: hsla(17,95%,100%,0.5);}
HSLh: 17s: 95b: 100
HSL?
Da leggerehttps://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
https://medium.com/samsung-internet-dev/human-friendly-colours-using-hsl-4944bcdb6e27
coloriDefinire una palette colorihttps://coolors.cohttps://color.adobe.com/create/color-wheel/
Numeri di colori da utilizzare in un sitowebmassimo 4 colori, con l’aggiunta dei livelli di opacità
100%
60%
40%
dominant e accent
differenze
pastello accesi
TitoloDolest, voloribus, sa sequi conserum harum sitia nis ea cus.Hicilles expliquam accus dent remquid enderit, oc-caboris re cus et que eture remquiae ipsandi pienien ihilibus sinctur a corent veles volut dolorectia.
TitoloDolest, voloribus, sa sequi conserum harum sitia nis ea cus.Hicilles expliquam accus dent remquid enderit, occaboris re cus et que eture remquiae ipsandi pi-enien ihilibus sinctur a corent veles volut dolorectia.
Click
Click
differenze
bianco e nero
bianco e nero (2)
gradienticreare gradient sethttps://webgradients.comhttps://mycolor.spacehttps://webkul.github.io/coolhue/
Numeri di gradienti da utilizzare in un sito webmassimo 4 gradienti. Da non utilizzare nella tipografia (eccetto logotipi)
per approfondirecome usare colori e gradientihttps://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/
https://uxplanet.org/why-gradients-are-back-to-rule-in-2018-8b36711c335f
esempi di colori sui siti webhttps://www.canva.com/learn/website-color-schemes/https://www.webfx.com/blog/web-design/30-beautiful-gray-web-designs-for-inspiration/https://designmodo.com/gradients/
teoria colorihttps://webflow.com/blog/web-design-101-color-theory
esercizio
Look and feel 1Studiare il look and feel scegliendo uno dei temi dati dal docente.
Duplicare il wireframe;Scegliere una palette colori e applicarla;Sostituire i contenuti testuali.
progetto look_and_feel
[3_look_and_feel/LF_layout]
styleguide [3] - colori
Metodologia1 - Utilizzare il sito web scelto la precedente lezione
2 - campionare tutti i colori utilizzati
3 - ordinare i campioni con le tecniche viste in classe
Obiettivoricavare da una pagina web tutti gli stili utilizzati
-colori
progetto design_styleguide
[2_ui_kit/design_styleguide]
Esercizio
Creare una moodboard che contenga un idea di stile,colori e immagini per comunicare l’immagine del proprio lavoro
progetto personale
Tipografiaper il web
che font usare?Dreamweaver offre una piccola gamma di font standard, si chiamano:
Font Web SafeEssendo una gamma limitata si ha la possibilità di utilizzare una libreria di google chiamata “google font”. Con essa è possibilie scaricare ma anche implementare un font all’interno di dreamweaver.
https://www.google.com/fonts
Grazie a questo sistema si ha una buona compatibilità con tutti i browser.
NB tutti i font di google sono open e possono essere installati sul pro-prio computer.
che font usare?
Graziatoo
Bastoni?
che font usare?TITOLOLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venena-tis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vi-tae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Ae-nean imperdiet. Etiam ultricies nisi vel augue.
TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Viva-mus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Eti-am ultricies nisi vel augue.
che colori usare?TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Viva-mus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Eti-am ultricies nisi vel augue.
TITOLOLorem ipsum dolor sit amet, consectetuer adip-iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penati-bus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla con-sequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Viva-mus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Eti-am ultricies nisi vel augue.
stili disponibili font
rientro sinistroallineamento
rientro sinistro prima riga
stile fontcorpo
crenaturascala verticale
spostamento linea base
interlinea
rientro destroallinea lato dorso
avvicinamentoscala orizzontalecorsivo simulatodizionario
software: indesing
stili disponibili software: dreamweaver
numero di stili
h1 ph2h3h4h5h6
titoli in HTML paragrafiinHTML
è possibile aggiungere diver-si stili di paragrafo, senza però una dicitura standard
spaziatureUdam dolupta quost, od quiat.Evel maionsed esequia sperios dol-lorem facit et, ius magnis saperunt.
Es ipitat dit, se eum ratemporatem
id moluptaqui sust quae ipsanima
nonsequat vercient, consequ isin-
vero od quatumquos ma nulland.
Ipiento doluptas modita cumquibus sit aut lique ad est faciati uritatius ide pe nonsedi tempor suntis autae volorum ratur?
Udam dolupta quost, od quiat.Evel maionsed esequia sperios dollorem facit et, ius magnis saperunt.
E s i p i t a t d i t , s e e u m r a t e m p o r a t e m i d m o l u p t a q u i s u s t q u a e i p s a n i m a n o n -s e q u a t v e r c i e n t , c o n s e q u i s i n v e r o o d q u a t u m q u o s m a n u l l a n d .
Ipiento doluptas modita cumquibus sit aut lique ad est faciati uritatius ide pe nonsedi
interlinea letter spacing
grandezza
Dai 30px in su è conside-rato testo grande
usare solo PX
Dai 12px in giù è considerato testo piccolo
16px è lo standard di inizio
allineamentono giustificato
Os experi consero el exerio intur, que pora vellicient vo-luptassim et ra imus.At officatum apitin pliciis doles as aut volum que co-nectet liquia quae vel il ipit in pro ommoluptae perro qui-dusci officie nitam.
Os experi consero el exerio intur, que pora vellicient vo-
luptassim et ra imus.At officatum apitin pliciis
doles as aut volum que co-nectet liquia quae vel il ipit in
pro ommoluptae perro qui-dusci officie nitam.
Os experi consero el exerio intur, que pora vellicient vo-
luptassim et ra imus.At officatum apitin pliciis
doles as aut volum que co-nectet liquia quae vel il ipit in pro ommoluptae perro qui-
dusci officie nitam.
Os experi consero el exe-rio intur, que pora vellicient voluptassim et ra imus.At officatum apitin pliciis doles as aut volum que co-nectet liquia quae vel il ipit in pro ommoluptae per-ro quidusci officie nitam.
tipografia web - 1
grandezza del corpostile del fontcolore del carattereDeterminano che tipo di importanza deve avere un paragrafo o una parola.
tipografia web - 2
se con tanto testo conviene dividere il discorso in tanti piccoli paragrafi
tipografia web - 3
-se affiancato ad un immagine ci deve essere un adeguato margine
-se sopra un’immagine assicurarsi la leggibilità
tipografia web - 4
I box di testo devono avere:-larghezza divisa in colonne
-se una colonna allora non troppo larga
-margini e spazi adeguati che definiscono il titolo dal paragrafo
Immagininel Web Design
immaginiOttimizzare le immagini da photoshop per il web è molto importante.
Il risultato finale dovrà essere il rapporto tra la qualità e il peso dell’immagine stessa.
Qualità
Peso
MotivazioniPerchè salvare le immagini leggere?
1-I siti web navigano sulla rete ed essa si basa sullo scambio di bit e byte. Più il sito è composto da immagini “pesanti”, quindi con più byte, più il mo-
tore di rendering farà fatica a gestirle (ovvero scaricarle).
2-Il “peso” di un sito web è la somma di tutte le informazioni testuali e im-magini. Più informazioni ci sono più il sito “pesa”.
3- Quando si renderizza una pagina di fatto si genera un download.
4-Attenti agli smarphone e al traffico dati!
Quali prendereimmagini non
riproducibili in HTMLimmagini
riproducibili in HTML
Fotografie, icone, loghi, grafiche di ogni genere colori pieni, contorni (non troppo sfarzosi),gradienti (lineari e radiali)
filtri e overlayfiltri non
supportati al 100% in HTML
filtririproducibili in HTML
Metodi di fusione, in questo caso: multiply e softlight Possibilità di opacizzare un colore o un immagine
filtri e overlay
possibilità di inserire più overlay per caratterizzare meglio uno stile grafico
TextureImmagini che garantiscono una
ottima resa con poco peso.
1-sono immagini modulari che affian-cate orizzontalmente e verticalmente generano una superficie omogenea.
2-pesano pochissimo perchèvengono salvate da:
2x2px a 50x50px (più o meno).
3-La regola moltiplicatrice sull’asse x e y è presente in HTML con la propri-
età Background-repeat.
texture
dove trovare texture web:http://subtlepatterns.com/
PS. se mettete la foto del vostro gatto come sfondo non va bene!
http://www.stevenlim.net/http://jimvarney.org/index.html
selezioneslice tool
Tool utile per selezion-are diverse immagini e salvarle tutte assieme.
Le sezioni possono es-sere selezionate,
modificate e eliminate.
formati weble possibilità sono multiple poichè si può decidere la qualità dell’immagine in
base a colori e sfumature
http://www.gifparanoia.org/http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/
png156 kb
jpg33 kb
gif20 kb
formati web JPGJoint Photographic (Experts) Group
compressione di tipo “lossy” cioè con perdita di informazione;
Uso: fotografie
Screen e text by Wikipedia
formati web PNGPortable Network Graphics
compressione di tipo “lossless” cioè senza perdere alcuna informazione, per questo pesa di più del jpg.
Simile e successo del formato GIF può memorizzare immagini a 24 bit (men-tre il GIF era limitato agli 8 bit, 256 colori)
Uso: Immagini con trasparenza
Screen e text by Wikipedia
formati web GIFGraphics Interchange Format
Il numero massimo di colori visualizzabili è 256 ma tra i punti di forza di questo formato vi sono la possibilità di creare immagini animate; molto spes-
so viene usato per le animazioni e in secondo piano per le immagini fisse.
compressione di tipo “lossless” cioè senza perdere alcuna informazione
Uso: Immagini monocolore o bicolore oppure immagini animate
https://it.wikipedia.org/wiki/Graphics_Interchange_Format#/me-dia/File:Rotating_earth_(large).gif
http://www.gifparanoia.org/http://www.ilpost.it/2012/11/26/gif-animate-ipnotiche/2/
Screen e text by Wikipedia
Alcune impostazioniDithering
per formati GIF e PNG8È una tecnica che permette di mischiare i colori per simularne
degli altri.Ovviamente il peso
dell’immagine aumenterà se questa opzione è attiva.
Differenza tra PNG8 e PNG24Entrambi hanno il canale alfa ovvero supportano la
trasparenza.
PNG 2424 bit + 8 bit di alfa
=16,7 milioni di colori distinti
PNG 8 8 bit + 8 bit di alfa
= 256 colori distinti,
simile al formato GIFScreen by adobe.com
retinaLa visualizzazione di immagini per schermi retina è semplice e veloce: basta salvare la propria immagine con il doppio o triplo della risoluzione.
mare.jpg(200x200px)
mare2x.jpg(400x400px)
mare3x.jpg(800x800px)
salvataggio
mai a 300dpima sempre a
72dpi/ppi
Esercizio 1Ricreare il layout gestendo le immagini con simboli “annidati”
Esercizio 2
cercare e salvare immagini adeguate alle proprie pagine.Se necessario declinatele per i vari dispositivi
progetto personale
esercizio
Look and feel 2Riprendere il layout scelto la scorsa lezi-one.
Scegliere il font più adeguato alla comuni-cazione (google font);Inserire le immagini e se necessario trat-tarle con uno stile grafico coerente.
progetto look_and_feel
styleguide [4] - typo e img
Metodologia1 - Utilizzare il sito web scelto la precedente lezione
2 - studiare le tipologie di immagini e di stili gra-fici
3 - riportarli all’interno del file, con ordine e pre-cisione
Obiettivoricavare da una pagina web tutti gli stili utilizzati
-immagini, grandezze e tipologie
-tipografici: -font family -line-height (interlinea) -font style -font size -text align
progetto design_styleguide
Interface Design
GUI
GUI
Graphical User Interface quei componenti di grafica che fanno interagire
l’utente con la piattaforma digitale
http://www.teehanlax.com/tools/iphone/
https://docs.microsoft.com/en-us/windows/uwp/design/downloads/
https://developer.apple.com/design/resources/
da cosa è composta?Testi
Stili Grafici
Colori
Form
Icone
Bottoni/Link
tipi di form
input typelabel
selectradio button
checkbox
tipi di form
textarea
esempi form :(
esempi form :)
icon designAlcune volte ci capitano dei siti web con una quantità alta di contenuti, come facciamo a organizzare i pesi delle informazioni principali delle informazioni meno importanti, di quelle che hanno bisogno di più ril-ievo, quelle che servono per la nav-igazione, quelle da inserire perchè istituzionali, quelle che fanno rifer-imento all’autore, quelle che fan-no riferimento ai tag e quelle cheservono per rendere il design accattivante?
icon designin aiuto a questo problema abbiamo:
icon designQuando e perché usare le icone:
-in sostituzione del testo quando c’è poco spazio
-in box piccoli di un sito web (es. in un menu a tendina)
-servono a rafforzare o rendere capibile una voce o un argomento (es. icona del telefono + numero di telefono)
-cercare di evitare la creazione di dascalie troppo evidenti(es. icona del telefono + voce con scritto “telefono”)
disegnare icone
immagini prese da:https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
griglia icone circolari
disegnare icone
immagini prese da:https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
situazione in cui ci sono icone quadrate e icone circolariper mantere una coerenza visiva le icone quadrate devono allinearsi a una griglia più interna di 2 px (arancione)
disegnare icone
immagini prese da:https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
icone senza proporzione quadrata
icone oblique
disegnare icone
immagini prese da:https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
pixel perfection particolariper un adeguato ridimensionamento è meglio
usare una larghezza del tratto con una cifra pariper rendere un set di icone uniche e coerenti è
consigliato l’uso di qualche dettaglio
icone - consigli
tratto non fineRicordarsi che le icone devono essere visibili su tutti gli schermi con differenti risoluzioni.
Nell’esempio l’icona numero 3 una volta ridimensionata al 100% scompare, quindi è errata.
allineamento
titolo
titolo titolo titolo
titoloparagrafo
paragrafo As pres del magnim cu-sapient unt doluptam voles et endistibea nis everum rem nonsero ea sent.
As pres del magnim cu-sapient unt doluptam voles et endistibea nis everum rem nonsero ea sent.paragrafo
Salvataggio
SVGScalable Vector Graphics
esempi di animazioni con svg https://www.hongkiat.com/blog/svg-animations/
<svg> <circle fill=”blue” cx=”36.039” cy=”36.039” r=”36.039”/></svg>
link - tipologie
Click
Click
Click
Ihitibus. Os ea volo molup-tiatio berspis ut velique eni-menis sinum in con pa cus, optame porepro eatures trup-tatius, am hariorerit, veritas ut qui dolecus, clicca qui corep-tatum quatis cum, sitatibus aut omnihitas et volupta con eliqui vero et vel istiis num ullo eribus, eumquam.
Home About Contact
Titolo
menu
cta 1°
link testuale
cta 2°
cta 3°
link - tipologieristoranti bartag
icone
immaginiCALABRIA
CALABRIA
bottoni
click click
normal
esiste una voce del menu
hover
la voce del menu è cliccabile
current
mi trovo nella pagina che si chiama “click”
active
sono sicuro che ho cliccato la voce
click click
stili grafici
https://dribbble.com/shots/1898320-Material-Design-Button
material flat
nextskeuomorph (Scheumorfismo)
?
evoluzione
iOs
evoluzione
android
evoluzione
windows
per approfondirelinee guida per icon designwhttps://www.creativebloq.com/graphic-design/how-design-top-quality-icon-10135092
linee guida per app icon design https://www.creativebloq.com/web-design/how-design-app-icons-61515174https://designshack.net/articles/graphics/10-tips-for-designing-icons-that-dont-suck/
risorse per iconehttps://www.flaticon.comhttp://www.entypo.comhttps://thenounproject.comhttps://www.iconfinder.com
esercizioricreare le icone seguendo la griglia studiata in classe
esercizio
Look and feel 3Riprendere il layout scelto la scorsa lezi-one.
Definire e disegnare le icone e gli elementi di interazione.
progetto look_and_feel
styleguide [5] - ui design
Metodologia1 - Utilizzare il sito web scelto la precedente lezione
2 - cercare tutti gli elementi e ridisegnarli (tranne le icone)
3 - riportarli all’interno del file, sempre sotto-forma di simboli. Ricordarsi di inserire i vari stati degli elementi di interazione (normali e hover, compilati....)
Obiettivoricavare da una pagina web tutti gli stili utilizzati
-bottoni -primari -secondari -altri-link -testuali -immagini-form -input type -chekbox -radio button -select .text area-icone (screenshot)
progetto design_styleguide
esercizio
Disegnare delle icone utili al proprio progetto
progetto personale
Eserciziocreare una guideline seguendo il look and felldel vostro progetto
Testuali: - Titolo 1 - Titolo 2 - Sottotitolo 1 - Sottotitolo 2 - Paragrafo - Parole sottolineate - Parole in corsivo
Esempi:http://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/
Bottoni: - Principale 1 - Principale 2 - Secondario - Parole link - Immagini link - hover - inattivi/disable
Colori: - Sfondo - Testuali - Interazione (bottoni) - Elementi grafici
Immagini: - Principali - Secondarie - Piccole - Supporto grafico
Recommended