SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Downloaden Sie, um offline zu lesen
Sulla progettazione del WEB Lezione n.1 Prof. Silvano Natalizi, classe VA liceo tecnico
Come progettare un sito web  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Problemi del sito
Da dove si parte ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Information Architecture ,[object Object],[object Object],[object Object],[object Object]
Esempio di Information Architecture
Il processo IA inizia chiedendo a Jane quale contenuto desidera avere per il sito web
Modello di Information Architecture
Ricaviamo dal testo di Jane le sezioni per IA
Il diagramma IA per il sito web Red Lantern
La navigazione ,[object Object],[object Object],[object Object],[object Object],[object Object]
Determina il top level navigation ,[object Object],[object Object]
Stile di navigazione
Cominciare a pensare  quale tipo di menù meglio si adatta al nostro sito
Mostrate a Jane alcuni disegni iniziali ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Il primo disegno mostrato a Jane ,[object Object],[object Object]
Secondo disegno
Terzo disegno
Quarto disegno
Quinto disegno
Jane sceglie il terzo disegno
Creare una storyboard
A Jane piace la storyboard
Fare un prototipo della storyboard ,[object Object],[object Object],[object Object],[object Object],[object Object]
Codice HTML del sito web
Css prima parte
Css seconda parte
Css terza parte
Ed ecco il nuovo sito ristritturato
bibliografia ,[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Ähnlich wie Web Design

15 - Web designer vs Web developer
15 - Web designer vs Web developer15 - Web designer vs Web developer
15 - Web designer vs Web developerGiuseppe Vizzari
 
Voci Di Marketing: Come Realizzare Un Sito Web Di Successo
Voci Di Marketing: Come Realizzare Un Sito Web Di SuccessoVoci Di Marketing: Come Realizzare Un Sito Web Di Successo
Voci Di Marketing: Come Realizzare Un Sito Web Di SuccessoActive121 s.r.l.
 
Laboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneLaboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneRoberto Polillo
 
Web designer vs Web developer
Web designer vs Web developerWeb designer vs Web developer
Web designer vs Web developerGiuseppe Vizzari
 
Come creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepCome creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepBTF Traduzioni SEO Sviluppo Web
 
14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... 14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... Giuseppe Vizzari
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giustoGioacchino Cipriano
 
Mob04 best practices for windows phone ui design
Mob04   best practices for windows phone ui designMob04   best practices for windows phone ui design
Mob04 best practices for windows phone ui designDotNetCampus
 
Perche creare un sito internet
Perche creare un sito internetPerche creare un sito internet
Perche creare un sito internetictadmin
 
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)Scegliere il tema giusto per un blog multiautore e multilingue (un case study)
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)Dana Donato
 
1 - Introduzione al corso 17/18
1 - Introduzione al corso 17/181 - Introduzione al corso 17/18
1 - Introduzione al corso 17/18Giuseppe Vizzari
 
9 - WordPress e il vostro blog - 16/17
9 - WordPress e il vostro blog - 16/179 - WordPress e il vostro blog - 16/17
9 - WordPress e il vostro blog - 16/17Giuseppe Vizzari
 
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...Unione Parmense degli Industriali
 
08 - WordPress e il vostro blog
08 - WordPress e il vostro blog08 - WordPress e il vostro blog
08 - WordPress e il vostro blogGiuseppe Vizzari
 
Laboratorio Web Oriented
Laboratorio Web Oriented Laboratorio Web Oriented
Laboratorio Web Oriented Matteo Ziviani
 

Ähnlich wie Web Design (20)

15 - Web designer vs Web developer
15 - Web designer vs Web developer15 - Web designer vs Web developer
15 - Web designer vs Web developer
 
Voci Di Marketing: Come Realizzare Un Sito Web Di Successo
Voci Di Marketing: Come Realizzare Un Sito Web Di SuccessoVoci Di Marketing: Come Realizzare Un Sito Web Di Successo
Voci Di Marketing: Come Realizzare Un Sito Web Di Successo
 
Laboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. IntroduzioneLaboratorio Internet: 1. Introduzione
Laboratorio Internet: 1. Introduzione
 
Web designer vs Web developer
Web designer vs Web developerWeb designer vs Web developer
Web designer vs Web developer
 
Come creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepCome creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 step
 
Approccio al Web
Approccio al WebApproccio al Web
Approccio al Web
 
14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ... 14 - Web designer vs Web developer ...
14 - Web designer vs Web developer ...
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
 
Mob04 best practices for windows phone ui design
Mob04   best practices for windows phone ui designMob04   best practices for windows phone ui design
Mob04 best practices for windows phone ui design
 
Perche creare un sito internet
Perche creare un sito internetPerche creare un sito internet
Perche creare un sito internet
 
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)Scegliere il tema giusto per un blog multiautore e multilingue (un case study)
Scegliere il tema giusto per un blog multiautore e multilingue (un case study)
 
Mio sito
Mio sitoMio sito
Mio sito
 
1 - Introduzione al corso 17/18
1 - Introduzione al corso 17/181 - Introduzione al corso 17/18
1 - Introduzione al corso 17/18
 
9 - WordPress e il vostro blog - 16/17
9 - WordPress e il vostro blog - 16/179 - WordPress e il vostro blog - 16/17
9 - WordPress e il vostro blog - 16/17
 
Socialtools
SocialtoolsSocialtools
Socialtools
 
Crear Un Weblog Gratuito
Crear Un Weblog Gratuito
Crear Un Weblog Gratuito
Crear Un Weblog Gratuito
 
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
PRESIDIARE IL MERCATO SU INTERNET - Le fasi realizzative di un progetto web -...
 
Primo step cyber bullismo
Primo step cyber bullismoPrimo step cyber bullismo
Primo step cyber bullismo
 
08 - WordPress e il vostro blog
08 - WordPress e il vostro blog08 - WordPress e il vostro blog
08 - WordPress e il vostro blog
 
Laboratorio Web Oriented
Laboratorio Web Oriented Laboratorio Web Oriented
Laboratorio Web Oriented
 

Mehr von Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Mehr von Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA (20)

Il moto circolare
Il moto circolareIl moto circolare
Il moto circolare
 
Interferenza dueonde
Interferenza dueondeInterferenza dueonde
Interferenza dueonde
 
Procedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelleProcedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelle
 
Proc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassexProc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassex
 
Lezionematematicadel250213
Lezionematematicadel250213Lezionematematicadel250213
Lezionematematicadel250213
 
Problema fisica compito in classe
Problema fisica compito in classeProblema fisica compito in classe
Problema fisica compito in classe
 
Esercizi sulla energia meccanica
Esercizi sulla energia meccanicaEsercizi sulla energia meccanica
Esercizi sulla energia meccanica
 
Problemi di trigonometria
Problemi di trigonometriaProblemi di trigonometria
Problemi di trigonometria
 
Energiaconservazione
EnergiaconservazioneEnergiaconservazione
Energiaconservazione
 
Lezione Blog Didattici 27 4 2010
Lezione Blog Didattici 27 4 2010Lezione Blog Didattici 27 4 2010
Lezione Blog Didattici 27 4 2010
 
Portale libreria online
Portale libreria onlinePortale libreria online
Portale libreria online
 
Lezione dappubblicaresulblogvale
Lezione dappubblicaresulblogvaleLezione dappubblicaresulblogvale
Lezione dappubblicaresulblogvale
 
Lezione android esercizi
Lezione android esercizi Lezione android esercizi
Lezione android esercizi
 
Lezione programmazione database con java Servlet - quarta parte
Lezione programmazione database con java Servlet - quarta parteLezione programmazione database con java Servlet - quarta parte
Lezione programmazione database con java Servlet - quarta parte
 
Lezione jsp su come gestire una tabella relazionale con chiave esterna
Lezione jsp su come gestire una tabella relazionale con chiave esternaLezione jsp su come gestire una tabella relazionale con chiave esterna
Lezione jsp su come gestire una tabella relazionale con chiave esterna
 
Sesta lezione android
Sesta lezione androidSesta lezione android
Sesta lezione android
 
Quinta lezione android
Quinta lezione androidQuinta lezione android
Quinta lezione android
 
Quarta lezioneandroid
Quarta lezioneandroidQuarta lezioneandroid
Quarta lezioneandroid
 
Lezione jsp pdatabase crud quintaparte
Lezione jsp pdatabase crud quintaparteLezione jsp pdatabase crud quintaparte
Lezione jsp pdatabase crud quintaparte
 
Lezione js pdatabasecrudterzaparte
Lezione js pdatabasecrudterzaparteLezione js pdatabasecrudterzaparte
Lezione js pdatabasecrudterzaparte
 

Web Design