Esame Web Design Biennio 4 Anno PRE-ESAME GIOVEDÌ 7 GIUGNO AULA A33 ORE 9:00

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Esame Web Design Biennio 4 Anno PRE-ESAME GIOVEDÌ 7 GIUGNO AULA A33 ORE 9:00"

Celia Bini
5 anni fa
Visualizzazioni

1 Esame Web Design Biennio 4 Anno PRE-ESAME GIOVEDÌ 7 GIUGNO AULA A33 ORE 9:00

2 Pre esame Giovedì 7 Giugno dalle ore 9:00 alle 11:30 aula A 33 ( ex 54 ) Consegna di tutti gli esercizi più i due richiesti per l esame. Elaborato per l esame: Creazione di 2 siti web con relativa tesi scrittografica

3 Sito Web 1: Tema e Layout a scelta Layout creato da voi Minimo tre voci nel menu di navigazione Struttura in Html5 e css3 Tesi scrittografica che analizzi tutte le parti tecniche e di design. Home page con almeno tre section differenti che riassumano l intero sito web. Footer a piacere.

4 Le 3 Fasi per poter sostenere il Pre - esame. Scelta del Tema Ricerca nel web di layout come esempi fase 1 fase 2 Impostazione del sito web nelle sue parti fondamentali richieste Inizio stesura della tesi scrittografica nella sua parte tecnica Ultimare il sito web nelle sue parti Ultimare la tesi fase 3

5 Modalità di consegna Giovedì 24 Maggio Consegna ed approvazione della fase 1 Schizzi e bozze del layout Idea del Tema scelto ed il perché e come lo si intende elaborare Esempi/ricerca dei layout dal web

6 Giovedì 31 Maggio Consegna ed approvazione della fase 2 Revisione del sito web semi completato Revisione della tesi scrittografica

7 Giovedì 7 Giugno Consegna definitiva della fase 3 Approvazione del progetto nella sua totalità Discussione del lavoro svolto e delle scelte effettuate Valutazione

8 Sito web 2: Layout Minimal Layout minimal creato da voi Tema e contenuto a scelta Struttura Html 5 e Css 3 Almeno tre voci nel menù di navigazione Tesi scrittografica che analizza tutti le parti tecniche e di design

9 Le 3 Fasi per poter sostenere il Pre - esame. Scelta del Tema Ricerca nel web di layout come esempi Minimal fase 1 fase 2 Impostazione del sito web nelle sue parti fondamentali richieste Inizio stesura della tesi scrittografica nella sua parte tecnica Ultimare il sito web nelle sue parti Ultimare la tesi fase 3

10 Modalità di consegna Giovedì 24 Maggio Consegna ed approvazione della fase 1 Schizzi e bozze del layout Idea del Tema scelto ed il perché e come lo si intende elaborare Esempi/ricerca dei layout dal web

11 Giovedì 31 Maggio Consegna ed approvazione della fase 2 Revisione del sito web semi completato Revisione della tesi scrittografica

12 Giovedì 7 Giugno Consegna definitiva della fase 3 Approvazione del progetto nella sua totalità Discussione del lavoro svolto e delle scelte effettuate Valutazione

13 Creare un sito web Minimal ESEMPI

Il Layout Minimal Secondo Web designer ledger è uno dei design più trend, secondo altri è uno stile destinato a rimanere ormai intramontabile, segno del buongusto e della raffinatezza.

14 Il Layout Minimal Secondo Web designer ledger è uno dei design più trend, secondo altri è uno stile destinato a rimanere ormai intramontabile, segno del buongusto e della raffinatezza. La parola d ordine è Less is more, ovvero: Meno è meglio. Bianco, nero, al massimo un solo colore. Grafica praticamente inesistente, immagini ridotte al minimo essenziale. I layout minimal, messi nell ombra dagli stili vintage/grung/ doodles di turno, vivono adesso il loro principale momento di splendore e fanno bella mostra di sé nelle gallery e nelle showcases.

15 Quali sono i dettagli che fanno il successo di un sito minimalista? Background bianco, un menù di navigazione in genere tre paragrafi. Un layout minimal richiede molta cura dei dettagli, l assenza di grafica e l uso di pochi colori impedisce la mimetizzazione delle eventuali imprecisioni e accentua ancora di più le problematiche relative alla tipografia e agli spazi bianchi.

sé, soprattutto se è l unica nota di colore all interno del sito, rappresenta il

Non a caso molti siti minimal style devono il loro impatto estetico efficace al

16 1. Un buon logo Se in un sito ricco di grafica è possibile nascondere in qualche modo il logo amatoriale di turno, in un layout minimal il logo fa bella mostra di sé, soprattutto se è l unica nota di colore all interno del sito, rappresenta il primo elemento su cui si poserà lo sguardo dell utente. Non a caso molti siti minimal style devono il loro impatto estetico efficace al logo che, anche se semplice o in bianco e nero, rappresenta l unica nota dinamica e vivace dell intero layout.

2. Un font corposo e originale In un sito che riduce al minimo la grafica è praticamente ovvio che la tipografia ricopre un ruolo primario nell estetica del layout.

17 2. Un font corposo e originale In un sito che riduce al minimo la grafica è praticamente ovvio che la tipografia ricopre un ruolo primario nell estetica del layout. Una nota originale è inserire del contenuto testuale uno slogan, un messaggio di benvenuto, o anche il nome del sito utilizzando un font più versatile, come ad esempio un calligrafico. In questo modo si tende a sdrammatizzare un po il sito, che altrimenti rischia di apparire troppo snob, austero.

3. UN colore Questa non è una regola, ma è

18 3. UN colore Questa non è una regola, ma è comunque il cult del momento. Normalmente il layout è realizzato in scala di grigio con in contrasto un colore a ravvivare l insieme. Va bene qualsiasi tonalità, ma i migliori sono il rosso, l arancione, i colori accesi e vibranti in genere, utilizzati perlopiù per i dettagli quali bottoni e link.

19 4. Tipografia, regina del layout Concetto chiave, una buona tipografia può fare il successo di un sito. Ancora di più se il sito è quasi totalmente concentrato sui contenuti testuali rispetto alla componente grafica. Le parole d ordine? Leggibilità, Armonia e Estetica. interlinea, titoli ( più grandi sono, meglio è) non utilizzare troppi font, magari anche di famiglie diverse. Il layout deve rimanere semplice e ordinato e che vezzi e fronzoli non appartengono completamente a questo stile. In generale, le tendenze tipografiche di questo stile possono essere così riassunte:

20 Titoli e link in grassetto, in maiuscolo, in stampatello. Più sono evidenziati, meglio è.

21 Anche per i titoli, il contrasto tra grigio (o nero) e un colore acceso.

22 5. Icone, adesivi, balloon

23 Baloons, di ogni forma e colore, come complementi del logo o per attirare l attenzione su determinati dettagli.

Documenti analoghi

Partiamo con un primo esempio www.media.inaf.it. Analizziamo la homepage. L Header. Livia Giacomini (livia.giacomini@iaps.inaf.

Partiamo con un primo esempio www.media.inaf.it i it Lezione : realizzare un sito web con Wordpress Livia Giacomini (livia.giacomini@iaps.inaf.it) Analizziamo la homepage L Header Header Posts o News Social