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 networking
• incoraggiare il “give back” alla community
• divertirsi, tutti assieme

DI COSA PARLEREMO?
• SKETCH
• MOCKUP *
• WIREFRAME
• MOODBOARD
• COMPS
• VISUALS

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

SKETCH

SKETCH

SKETCH

SKETCH

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

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

Wireframe

Wireframe

Wireframe

WIREFRAME

WIREFRAME

Wireframe

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”.

MOODBOARD

MOODBOARD

MOODBOARD

MOODBOARD

COMPS
A 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

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

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

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 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.

UnA ultima cosa...
Filippo Labacco, Antonio da Sangallo, Filippo Brunelleschi, ecc.

THANKS.