SlideShare a Scribd company logo
Wireframes
Communication & Multimedia Design
Rotterdam University of Applied Sciences


Joel Laumans




CMD Rotterdam | Interaction Design - Wireframes

                                                  1
Today’s agenda
What are wireframes?

Why use them?

Examples




CMD Rotterdam | Interaction Design - Wireframes

                                                  2
A lot is happening
At times the design process can
seem very complicated, a lot of
things are happening at the same
time. Many people from different
disciplines are all working together
(and often simultaneously) on the
same project.

Everyone has their own role, and to
make a truly good product, the
communication between the
different parties involved has to be
good.




CMD Rotterdam | Interaction Design - Wireframes

                                                  3
CMD Rotterdam | Interaction Design - Wireframes

                                                  4
Jesse James Garret | The Elements of User Experience




CMD Rotterdam | Interaction Design - Wireframes

                                                                                                         5
Interaction design?
The task of an interaction designer
will be to primarily focus on the
structure and skeleton of an
interface.

There are many tools that can be
used in this part of the design
process, one of the most important
being wireframes.




                                                  Jesse James Garret | The Elements of User Experience




CMD Rotterdam | Interaction Design - Wireframes

                                                                                                         6
Wireframes are:


                    A visual representation of an interface; used
                       to communicate the structure, content,
                      information hierarchy, functionality, and
                              behavior of an interface.




CMD Rotterdam | Interaction Design - Wireframes

                                                                    7
Wireframes are:


                    A visual representation of an interface; used
                       to communicate the structure, content,
                      information hierarchy, functionality, and
                              behavior of an interface.




CMD Rotterdam | Interaction Design - Wireframes

                                                                    8
Why use wireframes?

Before making the visual design, you
first make decisions about the
structure, content, layout, etc.
Wireframes are a tool to communicate
these ideas.

“Blueprint for design”

Get everyone on the same page

Prototype for usability tests

Easier to change a wireframe, than a
design!




CMD Rotterdam | Interaction Design - Wireframes

                                                  9
Before the design...

you need wireframes




CMD Rotterdam | Interaction Design - Wireframes

                                                  10
Structure
How will the pieces of this site be put
together?

Content
What will be displayed on this site?

Information Hierarchy
How is this information organized and
displayed?

Functionality
How will this interface work?

Behavior
How does it interact with the user? How
does it behave?




CMD Rotterdam | Interaction Design - Wireframes

                                                  11
Types of wireframes




CMD Rotterdam | Interaction Design - Wireframes

                                                  12
Types of wireframes

Sketches
Quick / experiment
Good for feedback




CMD Rotterdam | Interaction Design - Wireframes

                                                  13
Types of wireframes

Sketches
Quick / experiment
Good for feedback

Lo-fidelity
Block diagrams
Good for testing flows




CMD Rotterdam | Interaction Design - Wireframes

                                                  14
Types of wireframes

Sketches
Quick / experiment
Good for feedback

Lo-fi / Content only
Block diagrams
Good for testing flows

Hi-fidelity
Detailed wireframes
Including comments
Describe content & behavior
“Blueprint for final design”
Should be understood without
explanation




CMD Rotterdam | Interaction Design - Wireframes

                                                  15
Wireframes do not:
represent the visual design

contact graphic elements

convey the brand or identity




CMD Rotterdam | Interaction Design - Wireframes

                                                  16
This is a bad wireframe!

Forget visual design

Avoid using color / gradients




Adding unnecessary elements
makes the wireframe less
powerful, remember:

Wireframes focus only on the
content and interaction of the
interface!




CMD Rotterdam | Interaction Design - Wireframes

                                                  17
Looks good, right?




CMD Rotterdam | Interaction Design - Wireframes

                                                  18
Yes, but:

Don’t use “Lorem ipsum!”


Be realistic as possible, think about
the content that will really be in the
interface.

Many clients don’t know what
“lorem ipsum” is. Try and add
content that will best represent
content that will be placed in the
final interface. Fake text can be
very distracting.




CMD Rotterdam | Interaction Design - Wireframes

                                                  19
Example 1:

This is an example of a hi-fidelity
wireframe for an NOS.nl concept.

On the left site of the page is the
wireframe. The blue circles are
numbered to refer to the comments on
the right half of the page.

Note: The comments can also be
placed below the wireframe, it is up to
you.




CMD Rotterdam | Interaction Design - Wireframes

                                                  20
Example 2:

Instead of using dots to refer to the
comments, another option is to use
arrows to link the interface elements to
the comments.




CMD Rotterdam | Interaction Design - Wireframes

                                                  21
How to start?

Start big! Start with the largest parts of
the interface, the frame, header, footer,
etc. Then work you way through the
smaller elements of the interface. The
following slides will show a quick
wireframe build-up.

Final tip!
Remember, your wireframe will be
used by lots of different people for
different purposes:

Designers
Developers
Project leaders
Usability testers
Clients

So be as clear as you can!




CMD Rotterdam | Interaction Design - Wireframes

                                                  22
CMD Rotterdam | Interaction Design - Wireframes

                                                  23
CMD Rotterdam | Interaction Design - Wireframes

                                                  24
CMD Rotterdam | Interaction Design - Wireframes

                                                  25
CMD Rotterdam | Interaction Design - Wireframes

                                                  26
CMD Rotterdam | Interaction Design - Wireframes

                                                  27
CMD Rotterdam | Interaction Design - Wireframes

                                                  28
CMD Rotterdam | Interaction Design - Wireframes

                                                  29
CMD Rotterdam | Interaction Design - Wireframes

                                                  30
Questions?




CMD Rotterdam | Interaction Design - Wireframes

                                                  31
Further Reading...                                      Recommended tools

Wireframes                                              Crossplatform
http://userpathways.com/2008/06/26/the-what-when-and-   Adobe InDesign
why-of-wireframes/
                                                        How to wireframe using InDesign
(PDF) Wireframes - The how and the why                  http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/      2008/12/wireframing_using_indesign.zip
2008/12/wireframes_thehowandthewhy_v10.pdf
                                                        Mac OSX
Designing for Interaction by Dan Saffer                 Omnigraffle
pgs 109 - 113
                                                        Windows
About Face 3.0 by Alan Cooper                           Microsoft Visio
chapter 7
                                                        Other possibilities
                                                        Adobe Fireworks
                                                        Axure

                                                        Whichever tool you choose, look online for some
                                                        tutorials or resources to help you out!




CMD Rotterdam | Interaction Design - Wireframes

                                                                                                             32

More Related Content

What's hot

UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
Matin Maleki
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
sumit singh
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
Babajide Aroyewun
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
Ravi Bhadauria
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
eggcellent
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
aayush_jain_87
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
Design process
Design processDesign process
Design process
Leandro Puca
 
User interface design
User interface designUser interface design
User interface design
Naveen Sagayaselvaraj
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
Muhammad Ishfaq Ch ✔
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
Dignitas Digital Pvt. Ltd.
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
Adobe XD
Adobe XD Adobe XD
Adobe XD
rapidbounce
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
User interface-design
User interface-designUser interface-design
User interface-design
DarkHorse Technologies Pvt Ltd
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
namnso ukpanah
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 

What's hot (20)

UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Design process
Design processDesign process
Design process
 
User interface design
User interface designUser interface design
User interface design
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
Adobe XD
Adobe XD Adobe XD
Adobe XD
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
User interface-design
User interface-designUser interface-design
User interface-design
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 

Similar to Introduction to wireframes

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
Lewis Lin 🦊
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
 
What is Rapid Application Development
What is Rapid Application DevelopmentWhat is Rapid Application Development
What is Rapid Application Development
OutSystems
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
Markus Jönsson
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basu
NASSCOM
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
uxpa-dc
 
CAD
CADCAD
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
tec
 
ASAS 2014 - Simon Brown
ASAS 2014 - Simon BrownASAS 2014 - Simon Brown
ASAS 2014 - Simon Brown
Avisi B.V.
 
2020 Adding value as a technical communicator STC IDL SIG
2020 Adding value as a technical communicator STC IDL SIG2020 Adding value as a technical communicator STC IDL SIG
2020 Adding value as a technical communicator STC IDL SIG
Ed Marsh
 
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
siouxhotornot
 
Explicit architecture
Explicit architectureExplicit architecture
Explicit architecture
Herberto Graça
 
Intro to Wireframes
Intro to WireframesIntro to Wireframes
Intro to Wireframes
Deborah MacKenzie
 
6 weeks software training report
6 weeks software training report    6 weeks software training report
6 weeks software training report
sucha soorma designs
 
Tawkon Lecture At Carmel Ventures
Tawkon Lecture At Carmel VenturesTawkon Lecture At Carmel Ventures
Tawkon Lecture At Carmel Ventures
Amit Lubovsky
 
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing WorkshopMock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
Darren Ng
 
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
Jad DELLEL
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?
Dikonia
 
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java UniverseJavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
FestGroup
 

Similar to Introduction to wireframes (20)

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
What is Rapid Application Development
What is Rapid Application DevelopmentWhat is Rapid Application Development
What is Rapid Application Development
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basu
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
CAD
CADCAD
CAD
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
ASAS 2014 - Simon Brown
ASAS 2014 - Simon BrownASAS 2014 - Simon Brown
ASAS 2014 - Simon Brown
 
2020 Adding value as a technical communicator STC IDL SIG
2020 Adding value as a technical communicator STC IDL SIG2020 Adding value as a technical communicator STC IDL SIG
2020 Adding value as a technical communicator STC IDL SIG
 
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
Sioux Hot-or-Not: Model Driven Software Development (Markus Voelter)
 
Explicit architecture
Explicit architectureExplicit architecture
Explicit architecture
 
Intro to Wireframes
Intro to WireframesIntro to Wireframes
Intro to Wireframes
 
6 weeks software training report
6 weeks software training report    6 weeks software training report
6 weeks software training report
 
Tawkon Lecture At Carmel Ventures
Tawkon Lecture At Carmel VenturesTawkon Lecture At Carmel Ventures
Tawkon Lecture At Carmel Ventures
 
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing WorkshopMock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
 
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
Generative Design 101 for Architecture, Engineering & Construction by Jad Del...
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?
 
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java UniverseJavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
JavaFest. Антон Лемешко. Model-Driven Development in the Open Java Universe
 

More from piksels

Soundtagger
SoundtaggerSoundtagger
Soundtagger
piksels
 
Introduction to Data Visualizations
Introduction to Data VisualizationsIntroduction to Data Visualizations
Introduction to Data Visualizations
piksels
 
Identity and Communities
Identity and CommunitiesIdentity and Communities
Identity and Communities
piksels
 
Wireframes
WireframesWireframes
Wireframes
piksels
 
Fitness - Deelopdracht 2
Fitness - Deelopdracht 2Fitness - Deelopdracht 2
Fitness - Deelopdracht 2piksels
 
Shazam Demo
Shazam DemoShazam Demo
Shazam Demo
piksels
 

More from piksels (6)

Soundtagger
SoundtaggerSoundtagger
Soundtagger
 
Introduction to Data Visualizations
Introduction to Data VisualizationsIntroduction to Data Visualizations
Introduction to Data Visualizations
 
Identity and Communities
Identity and CommunitiesIdentity and Communities
Identity and Communities
 
Wireframes
WireframesWireframes
Wireframes
 
Fitness - Deelopdracht 2
Fitness - Deelopdracht 2Fitness - Deelopdracht 2
Fitness - Deelopdracht 2
 
Shazam Demo
Shazam DemoShazam Demo
Shazam Demo
 

Recently uploaded

Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
Pixlogix Infotech
 

Recently uploaded (20)

Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
 

Introduction to wireframes

  • 1. Wireframes Communication & Multimedia Design Rotterdam University of Applied Sciences Joel Laumans CMD Rotterdam | Interaction Design - Wireframes 1
  • 2. Today’s agenda What are wireframes? Why use them? Examples CMD Rotterdam | Interaction Design - Wireframes 2
  • 3. A lot is happening At times the design process can seem very complicated, a lot of things are happening at the same time. Many people from different disciplines are all working together (and often simultaneously) on the same project. Everyone has their own role, and to make a truly good product, the communication between the different parties involved has to be good. CMD Rotterdam | Interaction Design - Wireframes 3
  • 4. CMD Rotterdam | Interaction Design - Wireframes 4
  • 5. Jesse James Garret | The Elements of User Experience CMD Rotterdam | Interaction Design - Wireframes 5
  • 6. Interaction design? The task of an interaction designer will be to primarily focus on the structure and skeleton of an interface. There are many tools that can be used in this part of the design process, one of the most important being wireframes. Jesse James Garret | The Elements of User Experience CMD Rotterdam | Interaction Design - Wireframes 6
  • 7. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface. CMD Rotterdam | Interaction Design - Wireframes 7
  • 8. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface. CMD Rotterdam | Interaction Design - Wireframes 8
  • 9. Why use wireframes? Before making the visual design, you first make decisions about the structure, content, layout, etc. Wireframes are a tool to communicate these ideas. “Blueprint for design” Get everyone on the same page Prototype for usability tests Easier to change a wireframe, than a design! CMD Rotterdam | Interaction Design - Wireframes 9
  • 10. Before the design... you need wireframes CMD Rotterdam | Interaction Design - Wireframes 10
  • 11. Structure How will the pieces of this site be put together? Content What will be displayed on this site? Information Hierarchy How is this information organized and displayed? Functionality How will this interface work? Behavior How does it interact with the user? How does it behave? CMD Rotterdam | Interaction Design - Wireframes 11
  • 12. Types of wireframes CMD Rotterdam | Interaction Design - Wireframes 12
  • 13. Types of wireframes Sketches Quick / experiment Good for feedback CMD Rotterdam | Interaction Design - Wireframes 13
  • 14. Types of wireframes Sketches Quick / experiment Good for feedback Lo-fidelity Block diagrams Good for testing flows CMD Rotterdam | Interaction Design - Wireframes 14
  • 15. Types of wireframes Sketches Quick / experiment Good for feedback Lo-fi / Content only Block diagrams Good for testing flows Hi-fidelity Detailed wireframes Including comments Describe content & behavior “Blueprint for final design” Should be understood without explanation CMD Rotterdam | Interaction Design - Wireframes 15
  • 16. Wireframes do not: represent the visual design contact graphic elements convey the brand or identity CMD Rotterdam | Interaction Design - Wireframes 16
  • 17. This is a bad wireframe! Forget visual design Avoid using color / gradients Adding unnecessary elements makes the wireframe less powerful, remember: Wireframes focus only on the content and interaction of the interface! CMD Rotterdam | Interaction Design - Wireframes 17
  • 18. Looks good, right? CMD Rotterdam | Interaction Design - Wireframes 18
  • 19. Yes, but: Don’t use “Lorem ipsum!” Be realistic as possible, think about the content that will really be in the interface. Many clients don’t know what “lorem ipsum” is. Try and add content that will best represent content that will be placed in the final interface. Fake text can be very distracting. CMD Rotterdam | Interaction Design - Wireframes 19
  • 20. Example 1: This is an example of a hi-fidelity wireframe for an NOS.nl concept. On the left site of the page is the wireframe. The blue circles are numbered to refer to the comments on the right half of the page. Note: The comments can also be placed below the wireframe, it is up to you. CMD Rotterdam | Interaction Design - Wireframes 20
  • 21. Example 2: Instead of using dots to refer to the comments, another option is to use arrows to link the interface elements to the comments. CMD Rotterdam | Interaction Design - Wireframes 21
  • 22. How to start? Start big! Start with the largest parts of the interface, the frame, header, footer, etc. Then work you way through the smaller elements of the interface. The following slides will show a quick wireframe build-up. Final tip! Remember, your wireframe will be used by lots of different people for different purposes: Designers Developers Project leaders Usability testers Clients So be as clear as you can! CMD Rotterdam | Interaction Design - Wireframes 22
  • 23. CMD Rotterdam | Interaction Design - Wireframes 23
  • 24. CMD Rotterdam | Interaction Design - Wireframes 24
  • 25. CMD Rotterdam | Interaction Design - Wireframes 25
  • 26. CMD Rotterdam | Interaction Design - Wireframes 26
  • 27. CMD Rotterdam | Interaction Design - Wireframes 27
  • 28. CMD Rotterdam | Interaction Design - Wireframes 28
  • 29. CMD Rotterdam | Interaction Design - Wireframes 29
  • 30. CMD Rotterdam | Interaction Design - Wireframes 30
  • 31. Questions? CMD Rotterdam | Interaction Design - Wireframes 31
  • 32. Further Reading... Recommended tools Wireframes Crossplatform http://userpathways.com/2008/06/26/the-what-when-and- Adobe InDesign why-of-wireframes/ How to wireframe using InDesign (PDF) Wireframes - The how and the why http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/ http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/ 2008/12/wireframing_using_indesign.zip 2008/12/wireframes_thehowandthewhy_v10.pdf Mac OSX Designing for Interaction by Dan Saffer Omnigraffle pgs 109 - 113 Windows About Face 3.0 by Alan Cooper Microsoft Visio chapter 7 Other possibilities Adobe Fireworks Axure Whichever tool you choose, look online for some tutorials or resources to help you out! CMD Rotterdam | Interaction Design - Wireframes 32