Wireframe, mockup e visual: quali strumenti per le prime fasi di un design? Metodo di sviluppo sperimentale, alternativo alla classica navigazione gerarchica e processo di progettazione di un portale aziendale.

3. Caso di studio: Restyle e
Architettura dell’Informzione
di wellnet.it

4. Sito attualmente online

5. Il punto di partenza è
l’individuazione dei tipi di
contenuto in gioco

6. Jobs
Articoli/news - ruolo Dalla rappresentazione
- titolo - tipologia contratto
- abstract - descrizione dei contenuti possiamo
- descrizione
- immagine
- numero posti ricavare le relazioni tra
- sede lavoro
- video (youtube embed) - requisiti minimi gli stessi e le
- documenti - requisiti desiderati
- free tagging (taxo) - info addizionali
tassonomie collegate.
- visibility
- canale (faceb., twitter) Voc
ambito progetto
- in evidenza (no/si)
- titolo
- commenti Profilo utente - descrizione
> on Create alert All Users - nome Terms:
- immagine
> on Comment alert All Users - cognome - content design
- colore
- professione - url - business strategy
- foto - portale istituzionale
- abstract - sito web
- firma - ecommerce
- web community
- booking online
Voc
area consulenza - software analysis and design
- titolo - consulenza java / j2ee
- descrizione - consulenza drupal
Portfolio Terms: - mobile apps
- immagine
- titolo - IT - software integration
- colore
- abstract --- CMS - art direction
- url
- descrizione --- BI e Reportistica - creative direction
- anno --- SOA - visual design
- url --- Mobile - information architecture
- lingue --- Public Admin - interaction design
- galleria screenshots --- Formazione - interface design
Le tassonomie hanno --- Ricerca e sviluppo - sms marketing
una pagina di
- email marketing
atterraggio con una - Communication
descrizione (foto --- Creative design
Aziende eventualmente) in --- UX
- nome azienda testata --- SEO / SEM
- descrizione --- Direct Marketing
- logo --- Web Social Marketing
- sito web
- industry

7. Siamo passati ad una
rappresentazione
volumetrica dei contenuti
basata su rettangoli

8. Voc
area consulenza
- titolo
- descrizione
Terms:
- immagine
- IT
- colore
--- CMS
- url
--- BI e Reportistica
--- SOA
--- Mobile
--- Public Admin
Content type: Articoli Content type: Portfolio --- Formazione
Tipo di relazione: Taxonomy Tipo di relazione: Taxonomy --- Ricerca e sviluppo
- ambito progetto - ambito progetto
- area di consulenza - area di consulenza - Communication
--- Creative design
--- UX
--- SEO / SEM
--- Direct Marketing
--- Web Social Marketing
Area di consulenza
Al centro il contenuto principale, sui
lati i contenuti collegati ad esso.
Content type: Jobs Content type: Team
La dimensione dei rettangoli ne
Tipo di relazione: Taxonomy
- ambito progetto
Tipo di relazione: Taxonomy
- ambito progetto
rappresenta l’importanza ed il peso
- area di consulenza - area di consulenza nella pagina.
Sarà chi si occupa della parte visiva
a capire in che modo dare risalto.

9. Articoli/news
- titolo
- abstract
- descrizione
- immagine
- video (youtube embed)
- documenti
Content type: Articoli Content type: Portfolio - free tagging (taxo)
Tipo di relazione: user reference Tipo di relazione: user reference - visibility
- canale (faceb., twitter)
- in evidenza (no/si)
- commenti Profilo utente
> on Create alert All Users - nome
> on Comment alert All Users - cognome
- professione
- foto
- abstract
- firma
Team member
Portfolio
- titolo
- abstract
- descrizione
- anno
- url
- lingue
- galleria screenshots

10. Portfolio
- titolo
- abstract
- descrizione
- anno
- url
- lingue
Content type: Articoli - galleria screenshots
Tipo di relazione: Taxonomy
- ambito progetto
- area di consulenza Content type: Portfolio
Tipo di relazione: Node Tipo di relazione: Node Reference
Reference - ambito progetto
Aziende
- Portfolio - area di consulenza
- nome azienda
- descrizione
- logo
- sito web
- industry
Client
Content type: Team
Tipo di relazione: Taxonomy
- ambito progetto
- area di consulenza
Tipo di relazione: Node Reference
- Portfolio

11. Una volta che i contenuti ed
i loro pesi in pagina sono
definiti si passa alla
realizzazione dei mockup
interattivi

12. Utilizzando Balsamiq
abbiamo una
rappresentazione
intuitiva della
composizione della
pagina e possiamo già
simulare la navigazione
tra diverse sezioni.

14. In fine otteniamo la grafica
del sito

18. Riassumendo gli strumenti
che abbiamo utilizzato nel
processo di progettazione

19. Carta e Penna
OmniGraffle
Balsamiq
Photoshop