MOCKUP    VS.WIREFRAME    VS.  VISUAL          Brescia, 22 giugno 2012
Chi siamo        www.webdebs.org
COSA VOGLIAMO•   creare una community (non solo locale)•   elevare lo standard qualitativo•   favorire l’aggregazione e il...
DI COSA PARLEREMO?• SKETCH• MOCKUP *• WIREFRAME• MOODBOARD• COMPS• VISUALS
SKETCHA sketch is a rapidly executed freehand drawing thatis not usually intended as a finished work.It might record or de...
SKETCH
SKETCH
SKETCH
SKETCH
WireframeA wireframe is a visual guide that represents theskeletal framework of a website/interface.It depicts the page la...
WireframeA wireframe is a schematic or other low-fidelityrendering of a computer interface, intended toprimarily demonstra...
Wireframe
Wireframe
Wireframe
WIREFRAME
WIREFRAME
Wireframe
MOODBOARDA mood board is a collage of ideas and inspirationfor any design work, whether it be web or print, inthe form of ...
MOODBOARD
MOODBOARD
MOODBOARD
MOODBOARD
COMPSA preliminary design or sketch is named as “comp”,that is a “composite” or “comprehensive artwork”.                   ?
VISUAL         ?
VISUAL    “Il file di Photoshop” *           * o di Fireworks, se preferite…
VISUAL
VISUAL
VISUAL
VISUAL
MOCKUPIn manufacturing and design, a mockup, or mock-up,is a scale or full-size model of a design or device,used for teach...
MOCKUPA usually full-sized scale model of a structure, usedfor demonstration, study or testingA full-sized structural mode...
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
MOCKUP
UX Design
UX Design
UX Design
UX Design       http://viljamis.com/blog/2012/responsive-workflow/
UX Design       http://viljamis.com/blog/2012/responsive-workflow/
Le domande• Quali strumenti/tool usare per i diversi “output”?• Quali decisioni/scelte dietro i diversi tool?• Quali passi...
UnA ultima cosa...       Filippo Labacco, Antonio da Sangallo, Filippo Brunelleschi, ecc.
THANKS.
Upcoming SlideShare
Loading in...5
×

Mockup, wireframe e visual: una breve introduzione

2,750

Published on

Una breve introduzione alle diverse definizioni di sketch, mockup, wireframe, comp, visual in occasione del brainpirlo ad essi dedicati.

Published in: Design, Business, Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,750
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
111
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Mockup, wireframe e visual: una breve introduzione

  1. 1. MOCKUP VS.WIREFRAME VS. VISUAL Brescia, 22 giugno 2012
  2. 2. Chi siamo www.webdebs.org
  3. 3. COSA VOGLIAMO• creare una community (non solo locale)• elevare lo standard qualitativo• favorire l’aggregazione e il networking• incoraggiare il “give back” alla community• divertirsi, tutti assieme
  4. 4. DI COSA PARLEREMO?• SKETCH• MOCKUP *• WIREFRAME• MOODBOARD• COMPS• VISUALS
  5. 5. SKETCHA sketch is a rapidly executed freehand drawing thatis not usually intended as a finished work.It might record or develop an idea for later use or itmight be used as a quick way of graphicallydemonstrating an image, idea or principal.Sketching is rapid, freehand drawing that we do withno intention of its becoming a finished product. Wikipedia + UXMatters
  6. 6. SKETCH
  7. 7. SKETCH
  8. 8. SKETCH
  9. 9. SKETCH
  10. 10. WireframeA wireframe is a visual guide that represents theskeletal framework of a website/interface.It depicts the page layout or arrangement of thewebsite’s content, including interface elements andnavigational systemsIt usually lacks typographic style, color or graphics,since the main focus lies in functionality & behavior. Wikipedia
  11. 11. WireframeA wireframe is a schematic or other low-fidelityrendering of a computer interface, intended toprimarily demonstrate functionality, features,content, and user flow without explicitly specifyingthe visual design of a product.Wireframes may function as interface specificationfor products requiring some form of interaction. Konigi
  12. 12. Wireframe
  13. 13. Wireframe
  14. 14. Wireframe
  15. 15. WIREFRAME
  16. 16. WIREFRAME
  17. 17. Wireframe
  18. 18. MOODBOARDA mood board is a collage of ideas and inspirationfor any design work, whether it be web or print, inthe form of visual representations.It’s like brainstorming, but solely for thedevelopment of a design’s aesthetics and feel,rather than its content and other plans as well.Mood boards represent an “emotion”.
  19. 19. MOODBOARD
  20. 20. MOODBOARD
  21. 21. MOODBOARD
  22. 22. MOODBOARD
  23. 23. COMPSA preliminary design or sketch is named as “comp”,that is a “composite” or “comprehensive artwork”. ?
  24. 24. VISUAL ?
  25. 25. VISUAL “Il file di Photoshop” * * o di Fireworks, se preferite…
  26. 26. VISUAL
  27. 27. VISUAL
  28. 28. VISUAL
  29. 29. VISUAL
  30. 30. MOCKUPIn manufacturing and design, a mockup, or mock-up,is a scale or full-size model of a design or device,used for teaching, demonstration, design evaluation,promotion, and other purposes.It’s a prototype if it provides at least part of thefunctionality of a system and enables testing of adesign. Wikipedia
  31. 31. MOCKUPA usually full-sized scale model of a structure, usedfor demonstration, study or testingA full-sized structural model built to scale chieflyfor study, testing or displayA working sample (as of a magazine) for reviewingformat, layout or content. Free Dictionary + Merriam-Webster
  32. 32. MOCKUP
  33. 33. MOCKUP
  34. 34. MOCKUP
  35. 35. MOCKUP
  36. 36. MOCKUP
  37. 37. MOCKUP
  38. 38. MOCKUP
  39. 39. MOCKUP
  40. 40. MOCKUP
  41. 41. MOCKUP
  42. 42. MOCKUP
  43. 43. MOCKUP
  44. 44. MOCKUP
  45. 45. UX Design
  46. 46. UX Design
  47. 47. UX Design
  48. 48. UX Design http://viljamis.com/blog/2012/responsive-workflow/
  49. 49. UX Design http://viljamis.com/blog/2012/responsive-workflow/
  50. 50. Le domande• Quali strumenti/tool usare per i diversi “output”?• Quali decisioni/scelte dietro i diversi tool?• Quali passi intermedi fare, per passare da un foglio bianco all’interfaccia/grafica definitiva?• Non solo il “come”, ma soprattutto il “perché”!• La nostra e la vostra esperienza.
  51. 51. UnA ultima cosa... Filippo Labacco, Antonio da Sangallo, Filippo Brunelleschi, ecc.
  52. 52. THANKS.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×