The document discusses the differences between sketches, wireframes, moodboards, comps, and mockups in the design process. It emphasizes the purpose and methodology behind each tool, highlighting their roles in functionality, aesthetics, and overall design development. The text encourages community engagement in elevating quality standards and sharing experiences in UX design.

1. MOCKUP
VS.
WIREFRAME
VS.
VISUAL
Brescia, 22 giugno 2012

2. Chi siamo
www.webdebs.org

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. DI COSA PARLEREMO?
• SKETCH
• MOCKUP *
• WIREFRAME
• MOODBOARD
• COMPS
• VISUALS

5. SKETCH
A sketch is a rapidly executed freehand drawing that
is not usually intended as a finished work.
It might record or develop an idea for later use or it
might be used as a quick way of graphically
demonstrating an image, idea or principal.
Sketching is rapid, freehand drawing that we do with
no intention of its becoming a finished product.
Wikipedia + UXMatters

6. SKETCH

7. SKETCH

8. SKETCH

9. SKETCH

10. Wireframe
A wireframe is a visual guide that represents the
skeletal framework of a website/interface.
It depicts the page layout or arrangement of the
website’s content, including interface elements and
navigational systems
It usually lacks typographic style, color or graphics,
since the main focus lies in functionality & behavior.
Wikipedia

11. Wireframe
A wireframe is a schematic or other low-fidelity
rendering of a computer interface, intended to
primarily demonstrate functionality, features,
content, and user flow without explicitly specifying
the visual design of a product.
Wireframes may function as interface specification
for products requiring some form of interaction.
Konigi

12. Wireframe

13. Wireframe

14. Wireframe

15. WIREFRAME

16. WIREFRAME

17. Wireframe

18. MOODBOARD
A mood board is a collage of ideas and inspiration
for any design work, whether it be web or print, in
the form of visual representations.
It’s like brainstorming, but solely for the
development of a design’s aesthetics and feel,
rather than its content and other plans as well.
Mood boards represent an “emotion”.

19. MOODBOARD

20. MOODBOARD

21. MOODBOARD

22. MOODBOARD

23. COMPS
A preliminary design or sketch is named as “comp”,
that is a “composite” or “comprehensive artwork”.
?

24. VISUAL
?

25. VISUAL
“Il file di Photoshop” *
* o di Fireworks, se preferite…

26. VISUAL

27. VISUAL

28. VISUAL

29. VISUAL

30. MOCKUP
In 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 the
functionality of a system and enables testing of a
design.
Wikipedia

31. MOCKUP
A usually full-sized scale model of a structure, used
for demonstration, study or testing
A full-sized structural model built to scale chiefly
for study, testing or display
A working sample (as of a magazine) for reviewing
format, layout or content.
Free Dictionary + Merriam-Webster

32. MOCKUP

33. MOCKUP

34. MOCKUP

35. MOCKUP

36. MOCKUP

37. MOCKUP

38. MOCKUP

39. MOCKUP

40. MOCKUP

41. MOCKUP

42. MOCKUP

43. MOCKUP

44. MOCKUP

45. UX Design

46. UX Design

47. UX Design

48. UX Design
http://viljamis.com/blog/2012/responsive-workflow/

49. UX Design
http://viljamis.com/blog/2012/responsive-workflow/

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. UnA ultima cosa...
Filippo Labacco, Antonio da Sangallo, Filippo Brunelleschi, ecc.

52. THANKS.