Argomenti del corso
•
•
•
•
•
•
•
Il funzionamento del web, gli ipertesti ed linguaggio del web
Cenni di usabilità e accessibilità: il web per esseri umani
Progettazione: Colori, sfondi, caratteri, simboli e metafore visive
Progettazione: Wireframe e utilizzo di Balsamiq
Architettura del sito: strutturazione dei contenuti, categorie e menù di navigazione
Il linguaggio XHTML
Lavorare con Adobe Dreamweaver: area di lavoro e impostazione del sito e stesura del
codice
• Fogli di stile 1: i layout di pagina con i CSS, la compatibilità con i browser, la validazione
• La creazione dell’interfaccia: Integrazione fra XHTML, CSS e grafica
• Revisioni progettuali ed esercitazioni pratiche in laboratorio
Argomenti di laboratorio
• Progettazione: Colori, sfondi, caratteri, simboli e metafore visive
• Lavorare con Adobe Photoshop: progettazione del layout
• Utilizzo di Adobe Photoshop per il web:
•
•
•
•
•
uso dei livelli
grafica per il web
strumenti di taglio
ottimizzazione delle immagini
formati immagine.
• Strutturazione dell’interfaccia
• Revisioni progettuali ed esercitazioni pratiche in laboratorio
Modalità d’esame
Per accertare le conoscenze acquisite, al termine del corso è prevista la
consegna di un elaborato progettuale composto da:
• Relazione progettuale, in cui saranno descritte in maniera esaustiva
le fasi di design e sviluppo del progetto
• Wireframe del sito
• Mokup e file PSD
• Sito web navigabile realizzato in XHTML + CSS
(NO Javascript/Flash/PHP o altri linguaggi)
• Il progetto verrà realizzato e presentato in gruppi di lavoro di al
massimo 2 persone.
Revisioni progettuali
Durante la durata del corso sono previste 2 sessioni di revisione
progettuali, per guidare lo studente nel percorso di progettazione e
sviluppo che rientreranno nella valutazione complessiva dell’elaborato
finale.
Revisione 1 : 14.30/16.30
mercoledi 30-ott
16.30/18.30
giovedi
31-ott
Revisione 2 : 14.30/16.30
16.30/18.30
12.30/14.30
mercoledi
giovedi
Venerdi
11-dic
12-dic
13-dic
Brief di progetto
L’azienda ACME inc. ha richiesto lo sviluppo di un sito web di
presentazione che consenta di presentare la società, descrivendone la
storia e le attività principali.
Inoltre dovrà essere possibile contattare direttamente
l’amministrazione della ACME inc, attraverso un form di contatto o
l’invio di una mail.
Il sito dovrà avere contenuti testuali strutturati secondo la gerarchi di
tag che vedremo a lezione (H1, H2, P) e dovra contenere immagini
consone allo stile comunicativo scelto.
Brief di progetto 2
Infine la ACME inc. ha sottolineato un esigenza comunicativa
particolare, che merita la ricerca di una soluzione a livello di
interfaccia che sia vincente e di immediata comprensione.
La ACME inc. produce due tipi di prodotti complementari: i prodotti
bianchi e i prodotti neri. Gia dalla home page dovrà essere possibile
intuire a prima vista che i prodotti bianchi e neri sono due linee
prodotte da una stessa azienda, e che la complementarieta dei prodotti
bianchi e neri descrive la totalità delle attività di ACME inc.
Brief di progetto 3
Per essere sufficiente, il sito web dovra essere composto almeno dalle
seguenti pagine:
• Il sito dovra pertanto presentare le seguenti pagine:
• home page
• chi siamo
• sede o gallery
• contatti
• prodotti
• eventuali pagine accessorie (non obbligatorie)
Brief di progetto: obiettivi
I prodotti bianchi e neri sono chiaramente due etichette che potete
interpretare liberamente, ad esempio immaginando che ACME inc.
produca alimenti per gatti e per cani, oppure abbigliamenti per donna e
per uomo. La ACME inc. puo rappresentare anche un ristorante che ad
esempio offre due menu differenti per il pranzo o per la sera.
L’obiettivo è ridurre questa dicotomia comunicativa in una unica pagina
(tendenzialmente la home page) che faccia comprendere al navigatore
che la ACME non è solo bianco o solo nero, ma entrambe le realtà. Da
questa duplicità dovrebbe scaturire il sistema di navigazione del sito e
tutta l’architettura comunicativa e visiva.
Sito del corso: www.liralab.com/igw