Sulla progettazione del WEB

Lezione n.1 Prof. Silvano Natalizi, classe VA liceo tecnico

Come progettare un sito web Jane ama la cultura

giapponese, per questo ha acquistato una compagnia

Il cui sito attuale è quello in figura

Che cosa non vi piace ?

Che cosa vi piace ? Vedete qualche

problema ? Prendete appunti

Problemi del sito

Da dove si parte ? Occorre seguire un

processo di progettazione Per prima cosa disegnare

un blueprint (modello) (stampino)

Costruire un sito web è un po’ come costruire una casa

Si parte da un disegno Information Architecture

(IA) è il processo che consente di spezzare il contenuto

del sito in parti e di organizzarle

gerarchicamente con relazioni logiche

Information Architecture Ogni pezzo di informazione è un contenuto

(testo, immagini, …) che vive su di una singola pagina.

IA è strettamente collegata anche alla costruzione del sistema di navigazione del sito

Se fate male la progettazione di IA, c’è anche la possibilità di progettare in maniera pessima il sistema di navigazione

Se il vostro sito non ha una solida IA, sarà disorganizzato e disorientante per i vostri utenti, che andranno da qualche altra parte a cercare quello che gli interessa

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 Occorre pensare alla navigazione, due volte nel

processo di disegno Primo: quando pensate agli elementi di

navigazione, come bottoni, barre di nav, mentre lavorate nel layout globale del sito

Secondo: quando cominciate a scrivere il codice e a costruire gli elementi di layout che hanno a che fare con gli utenti che cercano la strada nel sito e con il collegare le pagine insieme

Occorre iniziare con l’organizzare una navigazione al livello top

IA è importante non solo per organizzare il contenuto del sito, ma anche la navigazione

Determina il top level navigation La navigazione al livello top è l’elemento di

navigazione preminente Spesso questa top navigazione collega la home

pagina alle sezioni sottostanti del disegno IA

Stile di navigazione

Cominciare a pensare quale tipo di menù meglio si adatta al nostro sito

Mostrate a Jane alcuni disegni iniziali I primi disegno devono essere in bianco e nero

e su carta In questo modo l’attenzione di Jane sarà

focalizzata esclusivamente sui più importanti aspetti funzionali del layout (invece che sul colore dello sfondo, etc…)

I disegni devono porre a Jane questioni del tipo: Voglio una grande immagine all’inizio della pagina

? Quante colonne devono trovarsi nella pagina ? Dove deve andare il menù di navigazione ?

Il primo disegno mostrato a Jane Jane non gradisce

questa soluzione perché è simile al sito esistente, con la sola differenza della sezione del contenuto divisa in due colonne

In questo stadio del disegno non occorrono molti dettagli

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 Costruire un prototipo con il codice html/css ha

qualche vantaggio Anche se il vostro disegno può sembrare buono

sulla carta, non potrebbe funzionare tecnicamente quando il vostro codice è pronto

Il prototipo dà l’opportunità di correggere rapidamente eventuale errori prima di investire troppo tempo nel costruire un prodotto finale raffinato

Inoltre, se dovete lavorare con i clienti, un prototipo vi dà qualcosa da mostrargli.

Così da ottenere un utile feedback e poter fare iterativamente delle variazioni e correzioni

Codice HTML del sito web

Css prima parte

Css seconda parte

Css terza parte

Ed ecco il nuovo sito ristritturato

bibliografia Titolo: Head First Web

Design Publisher: Oreilly Author: Elthan Watrall – Jeff

Siardo