Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.

  • Login to see the comments

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

×