Wireframe, mockup e visual: quali strumenti per le prime fasi di un design?

Caso di studio: Restyle eArchitettura dell’Informzione di wellnet.it

Sito attualmente online

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

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

Siamo passati ad una rappresentazionevolumetrica dei contenuti basata su rettangoli

Voc area consulenza - titolo - descrizione Terms: - immagine - IT - colore --- CMS - url --- BI e Reportistica --- SOA --- Mobile --- Public AdminContent type: Articoli Content type: Portfolio --- FormazioneTipo 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.

Articoli/news - titolo - abstract - descrizione - immagine - video (youtube embed) - documentiContent 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

Portfolio - titolo - abstract - descrizione - anno - url - lingueContent type: Articoli - galleria screenshotsTipo di relazione: Taxonomy- ambito progetto- area di consulenza Content type: PortfolioTipo di relazione: Node Tipo di relazione: Node ReferenceReference - 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

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

Utilizzando Balsamiqabbiamo unarappresentazioneintuitiva dellacomposizione dellapagina e possiamo giàsimulare la navigazionetra diverse sezioni.

In fine otteniamo la grafica del sito

Riassumendo gli strumentiche abbiamo utilizzato nelprocesso di progettazione

Carta e PennaOmniGraffleBalsamiqPhotoshop

Wireframe, mockup e visual: quali strumenti per le prime fasi di un design?

by Eugenio Minardi on Jun 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Wireframe, mockup e visual: quali strumenti per le prime fasi di un design? Presentation Transcript