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.