Wireframe, mockup e visual: quali strumenti per le prime fasi di un design?
20
-
Upload
eugenio-minardi -
Category
Technology
-
view
1.112 -
download
2
description
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.
Transcript of Wireframe, mockup e visual: quali strumenti per le prime fasi di un design?
Caso di studio: Restyle e Architettura dell’Informzione
di wellnet.it
Il punto di partenza è l’individuazione dei tipi di
contenuto in gioco
> on Create alert All Users> on Comment alert All Users
- titolo- abstract- descrizione- immagine- video (youtube embed)- documenti- free tagging (taxo)- visibility- canale (faceb., twitter)- in evidenza (no/si)- commenti
Articoli/news
- nome azienda- descrizione- logo- sito web- industry
Aziende
- titolo- abstract- descrizione- anno- url- lingue- galleria screenshots
Portfolio
Le tassonomie hanno una pagina di atterraggio con una descrizione (foto eventualmente) in testata
- nome- cognome- professione- foto- abstract- firma
Profilo utente
- titolo- descrizione- immagine- colore- url
area consulenzaVoc
Terms:- IT--- CMS--- BI e Reportistica--- SOA--- Mobile--- Public Admin--- Formazione--- Ricerca e sviluppo
- Communication--- Creative design--- UX--- SEO / SEM--- Direct Marketing--- Web Social Marketing
- titolo- descrizione- immagine- colore- url
ambito progetto Voc
Terms:- content design- business strategy- portale istituzionale- sito web- ecommerce- web community- booking online- software analysis and design- consulenza java / j2ee- consulenza drupal- mobile apps- software integration- art direction- creative direction- visual design- information architecture- interaction design- interface design- sms marketing- email marketing
- ruolo- tipologia contratto- descrizione- numero posti- sede lavoro- requisiti minimi- requisiti desiderati- info addizionali
JobsDalla rappresentazione dei contenuti possiamo ricavare le relazioni tra gli stessi e le tassonomie collegate.
Siamo passati ad una rappresentazione
volumetrica dei contenuti basata su rettangoli
Area di consulenza
Content type: ArticoliTipo di relazione: Taxonomy- ambito progetto- area di consulenza
Content type: PortfolioTipo di relazione: Taxonomy- ambito progetto- area di consulenza
Content type: TeamTipo di relazione: Taxonomy- ambito progetto- area di consulenza
Content type: JobsTipo di relazione: Taxonomy- ambito progetto- area di consulenza
- titolo- descrizione- immagine- colore- url
area consulenzaVoc
Terms:- IT--- CMS--- BI e Reportistica--- SOA--- Mobile--- Public Admin--- Formazione--- Ricerca e sviluppo
- Communication--- Creative design--- UX--- SEO / SEM--- Direct Marketing--- Web Social Marketing
Al centro il contenuto principale, sui lati i contenuti collegati ad esso.La dimensione dei rettangoli ne rappresenta l’importanza ed il peso nella pagina.Sarà chi si occupa della parte visiva a capire in che modo dare risalto.
Team member
Content type: ArticoliTipo di relazione: user reference
Content type: PortfolioTipo di relazione: user reference
> on Create alert All Users> on Comment alert All Users
- titolo- abstract- descrizione- immagine- video (youtube embed)- documenti- free tagging (taxo)- visibility- canale (faceb., twitter)- in evidenza (no/si)- commenti
Articoli/news
- titolo- abstract- descrizione- anno- url- lingue- galleria screenshots
Portfolio
- nome- cognome- professione- foto- abstract- firma
Profilo utente
Client
Content type: ArticoliTipo di relazione: Taxonomy- ambito progetto- area di consulenzaTipo di relazione: Node Reference- Portfolio
Content type: PortfolioTipo di relazione: Node Reference- ambito progetto- area di consulenza
Content type: TeamTipo di relazione: Taxonomy- ambito progetto- area di consulenzaTipo di relazione: Node Reference- Portfolio
- nome azienda- descrizione- logo- sito web- industry
Aziende
- titolo- abstract- descrizione- anno- url- lingue- galleria screenshots
Portfolio
Una volta che i contenuti ed i loro pesi in pagina sono
definiti si passa alla realizzazione dei mockup
interattivi
Utilizzando Balsamiq abbiamo una rappresentazione intuitiva della composizione della pagina e possiamo già simulare la navigazione tra diverse sezioni.
Riassumendo gli strumenti che abbiamo utilizzato nel processo di progettazione
