WEB DESIGN I1. Jeffry Zeldman Progettare Siti Web Standard – tecniche per il design con XHTML e...

WEB DESIGN Idocente: Gabriele Ruscelli

dispense: www.gabrieleruscelli.comemail: [email protected]

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


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



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


L’utente chiede e internet risponde

utenteinternet


Il computer chiede e il server risponde

computerserver


server

richiesta

ricerca/esecuzionerisposta

rendering

LATO CLIENT

LATO SERVER

computer

browser

Richiesta e risposta di un file nel web

file


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


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


wrappercontenitore generale,

grandezza 960px,quasi sempre centrato

http://www.corriere.it


headertesta del sito,spesso contiene:

-logo-payoff-lingua

-menu istituzionali-barra di ricerca


nav/menumenu di navigazione principale

il più importante.Può essere composto anche

da immagini e icone

http://it.beatsbydre.com


nav/menu 2menu di navigazione principale

laterale


nav/menuposizionamento

si

si

no

no


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.


sidebarelemento non obbligatorio,serve per inserie un menu

secondario ho dei contenuti meno rilevanti.

Molto spesso usato nei blog.


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



border:0px border-top:2pxsolidblue

border:2pxsolidblue

Box model


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


[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


Mantenere lo stesso numero di unità per tutti i dispositivi

12

12

12



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



Mobile First Desktop First





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.


[3_look_and_feel/LF_layout]

styleguide [3] - colori


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


[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


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/


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.


styleguide [4] - typo e img


2 - studiare le tipologie di immagini e di stili gra-fici

3 - riportarli all’interno del file, con ordine e pre-cisione


-immagini, grandezze e tipologie

-tipografici: -font family -line-height (interlinea) -font style -font size -text align


Interface Design

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


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


icone senza proporzione quadrata

icone oblique

disegnare icone


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.


styleguide [5] - ui design


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


-bottoni -primari -secondari -altri-link -testuali -immagini-form -input type -chekbox -radio button -select .text area-icone (screenshot)


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

WEB DESIGN I1. Jeffry Zeldman Progettare Siti Web Standard – tecniche per il design con XHTML e...

Documents

Transcript of WEB DESIGN I1. Jeffry Zeldman Progettare Siti Web Standard – tecniche per il design con XHTML e...