SlideShare a Scribd company logo
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.

More Related Content

What's hot

Wireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by CreatelyWireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by Creately
Creately
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
Framebench
 
chisnell wireframing workshop
chisnell wireframing workshopchisnell wireframing workshop
chisnell wireframing workshop
Jenny Chisnell
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
Oscar Gonzalez Garza
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyond
Luke Perman
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
Amir Khella
 
Prototyping Axure
Prototyping AxurePrototyping Axure
Prototyping Axure
kkostuch
 
Wire Framing Presentation
Wire Framing PresentationWire Framing Presentation
Wire Framing Presentation
Matt Galloway
 
Using Bootstrap to Create a Common UI Across Products
Using Bootstrap to Create a Common UI Across ProductsUsing Bootstrap to Create a Common UI Across Products
Using Bootstrap to Create a Common UI Across Products
All Things Open
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
Introduction to Figma
Introduction to FigmaIntroduction to Figma
Introduction to Figma
Edoardo Sportelli
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
cxpartners
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Tuấn Anh
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without Documentation
Comrade
 
Wireframing: How a Napkin Can Save You a Million Bucks
Wireframing: How a Napkin Can Save You a Million BucksWireframing: How a Napkin Can Save You a Million Bucks
Wireframing: How a Napkin Can Save You a Million Bucks
Kristine Howard
 
10 Ways to Improve Your UX Now
10 Ways to Improve Your UX Now10 Ways to Improve Your UX Now
10 Ways to Improve Your UX Now
Comrade
 
Campus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a DeveloperCampus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a Developer
Rui Barroca
 
High Fidelity Prototyping
High Fidelity PrototypingHigh Fidelity Prototyping
High Fidelity Prototyping
Hans Põldoja
 
Axure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast BriefingAxure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast Briefing
Stephen Denning
 

What's hot (20)

Wireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by CreatelyWireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by Creately
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
chisnell wireframing workshop
chisnell wireframing workshopchisnell wireframing workshop
chisnell wireframing workshop
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyond
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
 
Prototyping Axure
Prototyping AxurePrototyping Axure
Prototyping Axure
 
Wire Framing Presentation
Wire Framing PresentationWire Framing Presentation
Wire Framing Presentation
 
Using Bootstrap to Create a Common UI Across Products
Using Bootstrap to Create a Common UI Across ProductsUsing Bootstrap to Create a Common UI Across Products
Using Bootstrap to Create a Common UI Across Products
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Introduction to Figma
Introduction to FigmaIntroduction to Figma
Introduction to Figma
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without Documentation
 
Wireframing: How a Napkin Can Save You a Million Bucks
Wireframing: How a Napkin Can Save You a Million BucksWireframing: How a Napkin Can Save You a Million Bucks
Wireframing: How a Napkin Can Save You a Million Bucks
 
10 Ways to Improve Your UX Now
10 Ways to Improve Your UX Now10 Ways to Improve Your UX Now
10 Ways to Improve Your UX Now
 
Campus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a DeveloperCampus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a Developer
 
High Fidelity Prototyping
High Fidelity PrototypingHigh Fidelity Prototyping
High Fidelity Prototyping
 
Axure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast BriefingAxure 8 User Vision Breakfast Briefing
Axure 8 User Vision Breakfast Briefing
 

Viewers also liked

Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?
Vojtech Outulny
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Travis Isaacs
 
Prototyping
PrototypingPrototyping
Prototyping
Eman Abed AlWahhab
 
Good design faster slides failcon 2010
Good design faster slides   failcon 2010Good design faster slides   failcon 2010
Good design faster slides failcon 2010
Cass Phillipps
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 
Le Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash CourseLe Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash Course
Boris Paillard
 
Le Wagon - UI components design
Le Wagon - UI components designLe Wagon - UI components design
Le Wagon - UI components design
Boris Paillard
 
Lyn6
Lyn6Lyn6
Cone of experiences by Elsa Ervas
Cone of experiences by Elsa ErvasCone of experiences by Elsa Ervas
Cone of experiences by Elsa Ervas
ervas5
 
Contrived Experiences Presentation
Contrived Experiences PresentationContrived Experiences Presentation
Contrived Experiences Presentation
erica mae de vera
 
Contrive experiences-prepared-by-anna-pamela.pptx new
Contrive experiences-prepared-by-anna-pamela.pptx newContrive experiences-prepared-by-anna-pamela.pptx new
Contrive experiences-prepared-by-anna-pamela.pptx new
pompoms29
 
teaching with contrive experiences
teaching with contrive experiencesteaching with contrive experiences
teaching with contrive experiences
Irene Tero
 
John Mark Urquiola Contrived Experiences
John Mark Urquiola Contrived ExperiencesJohn Mark Urquiola Contrived Experiences
John Mark Urquiola Contrived Experiences
JohnMark0611
 
Contrive experience
Contrive experienceContrive experience
Contrive experience
dennis_beltran
 
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3AContrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
Bernadette Mendoza
 
The contrived experience
The contrived experienceThe contrived experience
The contrived experience
Reychelle Maglasang
 
Mock ups
Mock ups Mock ups
Mock ups
taylamatthews
 
Marlon B. Salas
Marlon B. SalasMarlon B. Salas
Marlon B. Salas
marlonbumanlagsalas
 
Varada Maresias
Varada MaresiasVarada Maresias
Varada Maresias
Nitesh Ranjan
 
contrived experiences
contrived experiencescontrived experiences
contrived experiences
PrincessMiraOrdonez
 

Viewers also liked (20)

Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
 
Prototyping
PrototypingPrototyping
Prototyping
 
Good design faster slides failcon 2010
Good design faster slides   failcon 2010Good design faster slides   failcon 2010
Good design faster slides failcon 2010
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Le Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash CourseLe Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash Course
 
Le Wagon - UI components design
Le Wagon - UI components designLe Wagon - UI components design
Le Wagon - UI components design
 
Lyn6
Lyn6Lyn6
Lyn6
 
Cone of experiences by Elsa Ervas
Cone of experiences by Elsa ErvasCone of experiences by Elsa Ervas
Cone of experiences by Elsa Ervas
 
Contrived Experiences Presentation
Contrived Experiences PresentationContrived Experiences Presentation
Contrived Experiences Presentation
 
Contrive experiences-prepared-by-anna-pamela.pptx new
Contrive experiences-prepared-by-anna-pamela.pptx newContrive experiences-prepared-by-anna-pamela.pptx new
Contrive experiences-prepared-by-anna-pamela.pptx new
 
teaching with contrive experiences
teaching with contrive experiencesteaching with contrive experiences
teaching with contrive experiences
 
John Mark Urquiola Contrived Experiences
John Mark Urquiola Contrived ExperiencesJohn Mark Urquiola Contrived Experiences
John Mark Urquiola Contrived Experiences
 
Contrive experience
Contrive experienceContrive experience
Contrive experience
 
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3AContrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
Contrived experiences of cone of experience - Bernadette P. Mendoza 2BEED - 3A
 
The contrived experience
The contrived experienceThe contrived experience
The contrived experience
 
Mock ups
Mock ups Mock ups
Mock ups
 
Marlon B. Salas
Marlon B. SalasMarlon B. Salas
Marlon B. Salas
 
Varada Maresias
Varada MaresiasVarada Maresias
Varada Maresias
 
contrived experiences
contrived experiencescontrived experiences
contrived experiences
 

Similar to Mockup, wireframe e visual: una breve introduzione

Your Brain on Responsive Design
Your Brain on Responsive DesignYour Brain on Responsive Design
Your Brain on Responsive Design
Sophia Voychehovski
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
William Millar
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience Design
Dana Giuliana
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
Reza Budi Prabowo
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
Andres Baravalle
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
Mark Billinghurst
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
mrscammels
 
Design handoff document
Design handoff documentDesign handoff document
Design handoff document
Rizki mardita
 
6 Great Steps to Know to Create Successful Web GUI
6 Great Steps to Know to Create Successful Web GUI6 Great Steps to Know to Create Successful Web GUI
6 Great Steps to Know to Create Successful Web GUI
Ravi Bhadauria
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
lomalogue
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
Jessi Baker
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
Andrii Rusakov
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
Jenica Welch
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panacea
Michael Meikson
 
Best Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersBest Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX Designers
YellowSlice1
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX Process
Blair Stewart
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
Razvan Rosu
 
Case Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVUCase Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVU
Mar High
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
tec
 

Similar to Mockup, wireframe e visual: una breve introduzione (20)

Your Brain on Responsive Design
Your Brain on Responsive DesignYour Brain on Responsive Design
Your Brain on Responsive Design
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience Design
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Design handoff document
Design handoff documentDesign handoff document
Design handoff document
 
6 Great Steps to Know to Create Successful Web GUI
6 Great Steps to Know to Create Successful Web GUI6 Great Steps to Know to Create Successful Web GUI
6 Great Steps to Know to Create Successful Web GUI
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panacea
 
Best Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersBest Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX Designers
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX Process
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Case Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVUCase Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVU
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 

More from WEBdeBS

Legal Pirlo
Legal PirloLegal Pirlo
Legal Pirlo
WEBdeBS
 
Nodejsconf 2012
Nodejsconf 2012Nodejsconf 2012
Nodejsconf 2012
WEBdeBS
 
Djangoday lt 20120420
Djangoday lt 20120420Djangoday lt 20120420
Djangoday lt 20120420
WEBdeBS
 
Unbit djangoday 20120419
Unbit djangoday 20120419Unbit djangoday 20120419
Unbit djangoday 20120419
WEBdeBS
 
Geodjango
GeodjangoGeodjango
Geodjango
WEBdeBS
 
Django mongodb -djangoday_
Django mongodb -djangoday_Django mongodb -djangoday_
Django mongodb -djangoday_
WEBdeBS
 
Virtualenv
VirtualenvVirtualenv
Virtualenv
WEBdeBS
 
Fagungis
FagungisFagungis
Fagungis
WEBdeBS
 
Django e il Rap Elia Contini
Django e il Rap Elia ContiniDjango e il Rap Elia Contini
Django e il Rap Elia Contini
WEBdeBS
 
Iga workflow
Iga workflowIga workflow
Iga workflow
WEBdeBS
 
PepperTweet - Project presentation Startup Weekend Brescia
PepperTweet - Project presentation Startup Weekend BresciaPepperTweet - Project presentation Startup Weekend Brescia
PepperTweet - Project presentation Startup Weekend Brescia
WEBdeBS
 
Peppertweet - Presentazione Startup Weekend Brescia
Peppertweet - Presentazione Startup Weekend BresciaPeppertweet - Presentazione Startup Weekend Brescia
Peppertweet - Presentazione Startup Weekend Brescia
WEBdeBS
 
NoSql Day - Chiusura
NoSql Day - ChiusuraNoSql Day - Chiusura
NoSql Day - Chiusura
WEBdeBS
 
NoSql Day - Apertura
NoSql Day - AperturaNoSql Day - Apertura
NoSql Day - Apertura
WEBdeBS
 

More from WEBdeBS (14)

Legal Pirlo
Legal PirloLegal Pirlo
Legal Pirlo
 
Nodejsconf 2012
Nodejsconf 2012Nodejsconf 2012
Nodejsconf 2012
 
Djangoday lt 20120420
Djangoday lt 20120420Djangoday lt 20120420
Djangoday lt 20120420
 
Unbit djangoday 20120419
Unbit djangoday 20120419Unbit djangoday 20120419
Unbit djangoday 20120419
 
Geodjango
GeodjangoGeodjango
Geodjango
 
Django mongodb -djangoday_
Django mongodb -djangoday_Django mongodb -djangoday_
Django mongodb -djangoday_
 
Virtualenv
VirtualenvVirtualenv
Virtualenv
 
Fagungis
FagungisFagungis
Fagungis
 
Django e il Rap Elia Contini
Django e il Rap Elia ContiniDjango e il Rap Elia Contini
Django e il Rap Elia Contini
 
Iga workflow
Iga workflowIga workflow
Iga workflow
 
PepperTweet - Project presentation Startup Weekend Brescia
PepperTweet - Project presentation Startup Weekend BresciaPepperTweet - Project presentation Startup Weekend Brescia
PepperTweet - Project presentation Startup Weekend Brescia
 
Peppertweet - Presentazione Startup Weekend Brescia
Peppertweet - Presentazione Startup Weekend BresciaPeppertweet - Presentazione Startup Weekend Brescia
Peppertweet - Presentazione Startup Weekend Brescia
 
NoSql Day - Chiusura
NoSql Day - ChiusuraNoSql Day - Chiusura
NoSql Day - Chiusura
 
NoSql Day - Apertura
NoSql Day - AperturaNoSql Day - Apertura
NoSql Day - Apertura
 

Recently uploaded

Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
Mostafa Abd Elrahman
 
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
revolutionary575
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
AidanOKeefe2
 
The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
Kal-el Shows
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Mostafa Abd Elrahman
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
monikaservice00
 
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's HubOwokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
ifeoluwaowokoya
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
alifia97
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
DanielNacorda4
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
Mixer design with example is given in this ppt
Mixer design with example is given in this pptMixer design with example is given in this ppt
Mixer design with example is given in this ppt
ssuserbaba88
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
Kal-el Shows
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Mostafa Abd Elrahman
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
drmarathore
 

Recently uploaded (20)

Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
 
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
High Profile Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Gir...
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Enemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts LegacyEnemy Encounter Standards for Hogwarts Legacy
Enemy Encounter Standards for Hogwarts Legacy
 
The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
Topup Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's HubOwokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
Mixer design with example is given in this ppt
Mixer design with example is given in this pptMixer design with example is given in this ppt
Mixer design with example is given in this ppt
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
 

Mockup, wireframe e visual: una breve introduzione

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