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

1,363 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,363
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Caso di studio: Restyle eArchitettura dell’Informzione di wellnet.it
  2. 2. Sito attualmente online
  3. 3. Il punto di partenza èl’individuazione dei tipi di contenuto in gioco
  4. 4. 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
  5. 5. Siamo passati ad una rappresentazionevolumetrica dei contenuti basata su rettangoli
  6. 6. 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.
  7. 7. 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
  8. 8. 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
  9. 9. Una volta che i contenuti ed i loro pesi in pagina sono definiti si passa alla realizzazione dei mockup interattivi
  10. 10. Utilizzando Balsamiqabbiamo unarappresentazioneintuitiva dellacomposizione dellapagina e possiamo giàsimulare la navigazionetra diverse sezioni.
  11. 11. In fine otteniamo la grafica del sito
  12. 12. Riassumendo gli strumentiche abbiamo utilizzato nelprocesso di progettazione
  13. 13. Carta e PennaOmniGraffleBalsamiqPhotoshop

×