mockup, wireframe e visual: una breve introduzione
Post on 21-Oct-2014
2.436 Views
Preview:
DESCRIPTION
TRANSCRIPT
MOCKUP
Brescia, 22 giugno 2012
WIREFRAME
VISUAL
VS.
VS.
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
SKETCHA 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
WireframeA 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
WireframeA 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
MOODBOARDA 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
COMPSA preliminary design or sketch is named as “comp”, that is a “composite” or “comprehensive artwork”.
?
VISUAL
?
VISUAL
* o di Fireworks, se preferite…
“Il file di Photoshop” *
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 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
MOCKUPA 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 displayA 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.
top related