Slide lezione introduttiva web design - 13/01/2012

1. Introduzione
Web design: tecnologie, workflow,
professioni, problematiche

2. Tecnologia web
• Internet = web?

3. Tecnologia web
• Internet (contrazione della locuzione inglese
Interconnected Networks, ovvero Reti
Interconnesse) è una rete di computer mondiale
ad accesso pubblico, attualmente rappresentante
il principale mezzo di comunicazione di massa, e
che offre all'utente tutta una vasta serie di
possibili contenuti e servizi.
(http://it.wikipedia.org/wiki/Internet)
• Web: uno dei servizi fruibili tramite Internet
(altri servizi: email, telefonia IP, canali chat IRC)

4. Tecnologia web
• Architettura client - server
File system
Internet
Database (DB)
client server

5. Linguaggi web
• Linguaggi
File system
Internet
Database (DB)
client server

6. Linguaggi web
• HTML (HyperText Markup Language):
standard per la creazione di pagine web
• Creato e mantenuto dal W3C
• XHTML 1.1 e HTML 5
• CSS (Cascading Style sheets): linguaggio per
elaborare gli stili degli elementi HTML

7. Linguaggi web
• Javascript: linguaggio di scripting lato client
• Jquery: libreria javascript per semplificare la
creazione di script
• Linguaggi di programmazione server-side: PHP,
ASP e .NET, CGI, JSP…
• AJAX: uno script javascript interroga uno script
PHP

8. Dispositivi client
Browser: programma per «sfogliare» il web
http://www.w3schools.com/browsers/browsers_stats.asp

9. Accessibilità
• WAI: Web Accessibility Initiative

10. Tecnologia web
• Importanza degli standard
• Cross-browser: refers to the ability for a
website, web application, HTML construct or
client-side script to support all the web
browsers.

11. Media
• Inclusi da fonti esterne
• Immagini: JPG, GIF, PNG
• Video: Mpeg4, FLV…

12. Workflow
• Web ReDesign. Strumenti e metodi per la
riprogettazione di un sito Web
Kelly Goto, Emily Cotler
Apogeo Editore, 2002

13. Workflow
1.Definire il progetto
2. Sviluppare la struttura del sito
3. Visual design e testing
4. Produzione e controllo qualità
5. Lancio e manutenzione

14. Workflow
1. Definire il progetto
Esplorazione
• Raccolta informazioni Esplorazione
• Comprensione dell’audience
• Identificazione dei requisiti di programmazione/backend
• Analisi competitiva Pianificazione
Pianificazione
• Definizione del budget Chiarificazione
• Tempistica e scheduling
• Selezione del team di progetto
• Aree e strumenti di collab.
• Strategie di user testing Avvio del progetto
• Documentazione del progetto
Chiarificazione
• Individuazione degli obiettivi strategici
• Briefing creativo
Avvio del progetto

15. Workflow
1. Definire il progetto
Raccolta informazioni
• Distribuzione, raccolta e Esplorazione
analisi di questionari Pianificazione
• Raccolta di materiali e
Chiarificazione
documenti presso il cliente
Comprensione dell’audience
Avvio del progetto
• Identificazione delle
competenze tecnologiche
dell’audience

16. Workflow
Client survey

17. Workflow
Client survey

18. Workflow
Comprensione dell’audience
• Chi è l’utente?
Elaborare uno o più profili dell’utente-tipo
• Dove trovare informazioni:
– Client survey
– Analisi dati di traffico dell’attuale sito web
– Informazioni demografiche generali

19. Workflow
Analisi competitiva (informale)
• Costruire un piano per l’analisi
• Definire e categorizzare il competitive set
• Creare una lista delle funzionalità
• Effettuate analisi individuali e test di usabilità
informali
• Creare una griglia delle funzionalità
• Effettuare valutazioni complessive
• Creare un report finale

20. Workflow
Requisiti tecnologici
• Funzionalità da includere:
– Motore di ricerca
– Login/registrazione
– Personalizzazione contenuti
– Sicurezza
– Questionari/sondaggi/votazioni
– Newsletter
– E-commerce
– CMS (Content Management System)
• Il sito deve integrarsi con un database pre-esistente?
• Contatto con i responsabili tecnici/fornitori esterni

21. Workflow
Obiettivi strategici
• Qual è lo scopo del sito?
– Aumentare il traffico
– Incrementare le vendite
– Promuovere un nuovo prodotto
– Fornire nuovi contenuti agli utenti
– Alleggerire il carico del customer service
– Rendere più intuitiva e semplice la navigazione del sito
– Facilitare la consultazione e l’effettuazione degli acquisti
– Impostare una struttura scalabile in vista di una crescita
futura
• Come misurare gli obiettivi per determinare il
successo del progetto?

22. Workflow
Brefing creativo
Sintesi del progetto
• Panoramica
• Scopo
• Obiettivi secondari e a lungo termine
Profilo dell’audience
• Profilo degli utenti tipo
• Tipici task che eseguono
Percezione, tono, linee guida
• Cosa pensa l’audience del sito attuale
• Cosa si vorrebbe pensasse/provasse, come ottenere questo effetto
• Aggettivi che descrivano il modo in cui il sito e l’azienda dovrebbero essere percepiti
• Aspetti chiave da veicolare sul piano visuale

23. Workflow
Brefing creativo
Strategia di comunicazione
• Messaggio globale da trasmettere all’audience
• Come veicolare questo messaggio
• Stadi di sviluppo attraverso i quali conseguire questi obiettivi
• Come misurare il successo del nuovo sito
Posizionamento competitivo
• In cosa l’azienda si differenzia rispetto ai competitor?
• Quali sono le caratteristiche peculiari che distinguono l’azienda?
• Quali sono le aree di maggior successo del sito attuale e perché?
Messaggio di fondo

24. Workflow
Scheduling

25. Workflow
Definizione del budget
• 2 dimensioni
– Stima per ruolo
– Stima per attività
• Contabilizzazione modifiche extra indotte dal
cliente

26. Workflow
User testing
• Questionari online
• Focus Group
• Test di usabilità

27. Workflow
2. Sviluppare la struttura del sito
Contenuti
• Organizzazione
Contenuti
• Analisi dell’esistente
• Schematizzazione gerarchica
• Pianificazione del content delivery Sito
Sito
• Mappatura
• Analisi dell’esistente
• Convenzioni Pagina
Pagina
• Gabbia concettuale
• Navigazione
• Nomenclatura e titolazioni
• Analisi dei task e percorsi interattivi

28. Workflow
Contenuti

29. Workflow
Mappa del sito

30. Workflow
Gabbia concettuale (mockup)

31. Workflow
Percorsi di interazione
• Ordinare una consegna di fiori per la festa della
mamma
• Effettuare una transazione finanziaria online,
come una compravendita di azioni
• Cercare e ordinare una batteria di ricambio per il
vostro cellulare
• Comprare una cuccia per il vostro cane
• Scenari utente

32. Workflow
3. Visual design e testing
Creazione
• Revisione degli obiettivi e del briefing Creazione
• Brainstorming concettuale
• Proposte di layout e verifica del
feedback
Convalida
Convalida
• Realizzazione del «protoito»
• Testing funzionale
Applicazione
Applicazione
• Creazione dei template grafici
• Stesura di una guida di stile per il design

33. Workflow
4. Produzione e controllo qualità
Revisione
• Linee-guida e specifiche
• Stato e condizioni di avanzamento Revisione
• Architettura di file e cartelle
Costruzione
• Ottimizzazione della grafica
• Template e pagine master in HTML Costruzione
• Realizzazione di script «leggeri»
• Riempimento delle pagine
• Sviluppo del back-end (se necessario)
Testing Testing
• Pianificazione del CQ
• Monitoraggio della qualità
• Priorità ed esecuzione del debugging
• Verifica finale

34. Workflow
5. Lancio e manutenzione
Consegna
• Guida di stile per produzione/aggiornamento
• Documentazione del progetto Consegna
• Archiviazione
• Meeting retrospettivo
• Training per il team di manutenzione
Lancio Lancio
• Pianificazione dei comunicati
• Registrazione presso i motori di ricerca
• Lancio ufficiale (upload)
Manutenzione Manutenzione
• Team di manutenzione
• Piano di manutenzione
• Misurazione dei risultati (successo)
• Verifica della sucurezza

35. Un redesign di successo
in 10 mosse
Pensate prima di agire
Identificate i punti chiave e gli obiettivi del redesign
Analizzate i vostri competitor
Coinvolgete il vostro target
Progettate per gli utenti, non per gli investitori
Attenzione da subito al lato tecnologico
Curate e verificate l’utilizzo
Non sottovalutate i contenuti
Comunicate con chiarezza gli obiettivi
Pensate a lungo termine, agite a breve termine

36. Professioni
Web designer Graphic designer Web developer
•Information architect •UI designer •Front-end developer
•Interaction designer / User experience •Illustratore •Back-end developer
designer •Fotografo/Videomaker
•Media buyer/planner
•Media producer
•Art director
•Visual designer
Web content editor Web marketing specialist Project manager
•Copywriter •Marketing director •Responsabile del controllo qualità
•Web analyst
•SEM specialist
•SEO manager
•Customer marketing manager
•Device strategy manager
Social media specialist
•Community manager