際際滷

際際滷Share a Scribd company logo
Wireframe Design
POP 517: User Experience
What do we do now?
Creating a narrative-based
platform to further develop
our project.
Surface
Skeleton
Structure
Scope
Strategy
Pages

Images

Text

Clickable 

Functional

Informational

Visible
Step #1

How do we do this?
&Wireframes 

Annotations
What is wireframing?
Important step in screen design process

Defines information hierarchy 

Plans layout according to how user
should process information
Why is it important?
It is like a blueprint 

Determines how the user interacts
with the interface 

Can contain various states of button
or menu behaviors
Allows the designer to plan the layout
and interaction of an interface
without being distracted by colors,
typeface choices or even copy
Is there a process?
Ux6
Step #1
Pick your tools
Step #2
Set a grid
Ux6
Step #3
Determine layout with boxes
Ux6
Step #4
Define information hierarchy with typography
Ux6
Ux6
Step #5
Fine-tuning with grayscale
Ux6
Step #6
Hi-definition wireframe
Ux6
Step #7
Translating a wireframe into a visual
Ux6
Ux6
What about annotation?
Offer annotations
that explain why
your design is
effective
Ux6
Finally, a word about
moodboards
Moodboards combine examples of color
palette, imagery and typography. They often
contain design elements grabbed from other
websites that illustrate possible approaches.
Homework Assignment
1. Revise your journeys, if necessary, and select at least five templates for
wireframe execution. 

2. Your Homepage template, which includes the sites global navigation,
must be included. 

3. Then annotate your wirefames, focusing on the behavior of key features.

4. Create a mood board that reflects the type of imagery and style elements
you recommend for your site. 

5. You are not expected to develop visual designs, but you are welcome to
for extra credit.

DELIVERY FORMAT:
Formal presentation, collected for final grading.

Note: this is group assignment. This will be the final presentation for this
assignment. A new assignment, and new groups, will be assigned for the
remainder of the quarter.
Credits to:

Winnie Lim

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399

Anthony

http://uxmovement.com/wireframes/why-its-important-to-annotate-your-wireframes/
Ad

Recommended

YMC Season 4 - Day3
YMC Season 4 - Day3
theymc
Game Design 2 (2010): Lecture 2 - Menu Flow
Game Design 2 (2010): Lecture 2 - Menu Flow
David Farrell
Understanding Value
Understanding Value
Marius Ursache
MULTI-DIMENSIONAL UX: REALITY IS YOUR CANVAS
MULTI-DIMENSIONAL UX: REALITY IS YOUR CANVAS
Preston McCauley
Wireframes
Wireframes
Peter Kaleta
Designing UI for VR - VRTGO Dev Day 2016
Designing UI for VR - VRTGO Dev Day 2016
Dan Gilmore
UX5
UX5
John Delacruz
Ux5
Ux5
John Delacruz
Wireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
Introduction to building wireframes
Introduction to building wireframes
Hong Qu
Why wireframing?
Why wireframing?
Joakim Olander
Introduction to wireframing ux and design
Introduction to wireframing ux and design
Kevin Picalausa
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
Web Design basic wireframing introduction.pptx
Web Design basic wireframing introduction.pptx
changepass
UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
Crash Course in Wireframing
Crash Course in Wireframing
Marcel
Wireframing
Wireframing
Ramjee Ganti
WRA 210 March 29, 2011
WRA 210 March 29, 2011
Miami University
Wireframe and MVP
Wireframe and MVP
Lian Xun
Wireframing and design short course
Wireframing and design short course
carishurd
Ux4
Ux4
John Delacruz
UX4
UX4
John Delacruz
Wireframing The Key to Successful Web and App Development.pdf
Wireframing The Key to Successful Web and App Development.pdf
JohnParker598570
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
Dee Sadler
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
Darren Ng
Why should you Develop Mockups? - Techtic Solutions
Why should you Develop Mockups? - Techtic Solutions
Techtic Solutions
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
David Farrell
User Experience12894005842043884849.pptx
User Experience12894005842043884849.pptx
ElisaHaxhillazi1
Addys event presentation
Addys event presentation
John Delacruz
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
John Delacruz

More Related Content

Similar to Ux6 (20)

Wireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
Introduction to building wireframes
Introduction to building wireframes
Hong Qu
Why wireframing?
Why wireframing?
Joakim Olander
Introduction to wireframing ux and design
Introduction to wireframing ux and design
Kevin Picalausa
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
Web Design basic wireframing introduction.pptx
Web Design basic wireframing introduction.pptx
changepass
UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
Crash Course in Wireframing
Crash Course in Wireframing
Marcel
Wireframing
Wireframing
Ramjee Ganti
WRA 210 March 29, 2011
WRA 210 March 29, 2011
Miami University
Wireframe and MVP
Wireframe and MVP
Lian Xun
Wireframing and design short course
Wireframing and design short course
carishurd
Ux4
Ux4
John Delacruz
UX4
UX4
John Delacruz
Wireframing The Key to Successful Web and App Development.pdf
Wireframing The Key to Successful Web and App Development.pdf
JohnParker598570
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
Dee Sadler
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
Darren Ng
Why should you Develop Mockups? - Techtic Solutions
Why should you Develop Mockups? - Techtic Solutions
Techtic Solutions
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
David Farrell
User Experience12894005842043884849.pptx
User Experience12894005842043884849.pptx
ElisaHaxhillazi1
Wireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
Introduction to building wireframes
Introduction to building wireframes
Hong Qu
Introduction to wireframing ux and design
Introduction to wireframing ux and design
Kevin Picalausa
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
Mightybytes
Web Design basic wireframing introduction.pptx
Web Design basic wireframing introduction.pptx
changepass
UX Pres MIni version!
UX Pres MIni version!
Jessi Baker
Crash Course in Wireframing
Crash Course in Wireframing
Marcel
Wireframe and MVP
Wireframe and MVP
Lian Xun
Wireframing and design short course
Wireframing and design short course
carishurd
Wireframing The Key to Successful Web and App Development.pdf
Wireframing The Key to Successful Web and App Development.pdf
JohnParker598570
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
Dee Sadler
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
Darren Ng
Why should you Develop Mockups? - Techtic Solutions
Why should you Develop Mockups? - Techtic Solutions
Techtic Solutions
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
David Farrell
User Experience12894005842043884849.pptx
User Experience12894005842043884849.pptx
ElisaHaxhillazi1

More from John Delacruz (11)

Addys event presentation
Addys event presentation
John Delacruz
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
John Delacruz
E learning conference, portland, or, 10:14 copy 2
E learning conference, portland, or, 10:14 copy 2
John Delacruz
Ux7
Ux7
John Delacruz
UX6
UX6
John Delacruz
Ux3
Ux3
John Delacruz
Ux2
Ux2
John Delacruz
Ux1
Ux1
John Delacruz
Coyote creek howl presentation april 2015
Coyote creek howl presentation april 2015
John Delacruz
91:s15:10b
91:s15:10b
John Delacruz
91:s15:10
91:s15:10
John Delacruz
Addys event presentation
Addys event presentation
John Delacruz
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
John Delacruz
E learning conference, portland, or, 10:14 copy 2
E learning conference, portland, or, 10:14 copy 2
John Delacruz
Coyote creek howl presentation april 2015
Coyote creek howl presentation april 2015
John Delacruz
Ad

Recently uploaded (20)

List View Components in Odoo 18 - Odoo 際際滷s
List View Components in Odoo 18 - Odoo 際際滷s
Celine George
ECONOMICS, DISASTER MANAGEMENT, ROAD SAFETY - STUDY MATERIAL [10TH]
ECONOMICS, DISASTER MANAGEMENT, ROAD SAFETY - STUDY MATERIAL [10TH]
SHERAZ AHMAD LONE
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
Mayvel Nadal
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
NSUMD_M1 Library Orientation_June 11, 2025.pptx
NSUMD_M1 Library Orientation_June 11, 2025.pptx
Julie Sarpy
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
IIT Kharagpur Quiz Club
Peer Teaching Observations During School Internship
Peer Teaching Observations During School Internship
AjayaMohanty7
How to Customize Quotation Layouts in Odoo 18
How to Customize Quotation Layouts in Odoo 18
Celine George
OBSESSIVE COMPULSIVE DISORDER.pptx IN 5TH SEMESTER B.SC NURSING, 2ND YEAR GNM...
OBSESSIVE COMPULSIVE DISORDER.pptx IN 5TH SEMESTER B.SC NURSING, 2ND YEAR GNM...
parmarjuli1412
Q1_TLE 8_Week 1- Day 1 tools and equipment
Q1_TLE 8_Week 1- Day 1 tools and equipment
clairenotado3
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
nabilahk908
Filipino 9 Maikling Kwento Ang Ama Panitikang Asiyano
Filipino 9 Maikling Kwento Ang Ama Panitikang Asiyano
sumadsadjelly121997
Aprendendo Arquitetura Framework Salesforce - Dia 02
Aprendendo Arquitetura Framework Salesforce - Dia 02
Mauricio Alexandre Silva
Wage and Salary Computation.ppt.......,x
Wage and Salary Computation.ppt.......,x
JosalitoPalacio
Tanja Vujicic - PISA for Schools contact Info
Tanja Vujicic - PISA for Schools contact Info
EduSkills OECD
How to Add New Item in CogMenu in Odoo 18
How to Add New Item in CogMenu in Odoo 18
Celine George
K12 Tableau User Group virtual event June 18, 2025
K12 Tableau User Group virtual event June 18, 2025
dogden2
LDMMIA Yoga S10 Free Workshop Grad Level
LDMMIA Yoga S10 Free Workshop Grad Level
LDM & Mia eStudios
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
Ultimatewinner0342
List View Components in Odoo 18 - Odoo 際際滷s
List View Components in Odoo 18 - Odoo 際際滷s
Celine George
ECONOMICS, DISASTER MANAGEMENT, ROAD SAFETY - STUDY MATERIAL [10TH]
ECONOMICS, DISASTER MANAGEMENT, ROAD SAFETY - STUDY MATERIAL [10TH]
SHERAZ AHMAD LONE
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
Mayvel Nadal
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
NSUMD_M1 Library Orientation_June 11, 2025.pptx
NSUMD_M1 Library Orientation_June 11, 2025.pptx
Julie Sarpy
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
IIT Kharagpur Quiz Club
Peer Teaching Observations During School Internship
Peer Teaching Observations During School Internship
AjayaMohanty7
How to Customize Quotation Layouts in Odoo 18
How to Customize Quotation Layouts in Odoo 18
Celine George
OBSESSIVE COMPULSIVE DISORDER.pptx IN 5TH SEMESTER B.SC NURSING, 2ND YEAR GNM...
OBSESSIVE COMPULSIVE DISORDER.pptx IN 5TH SEMESTER B.SC NURSING, 2ND YEAR GNM...
parmarjuli1412
Q1_TLE 8_Week 1- Day 1 tools and equipment
Q1_TLE 8_Week 1- Day 1 tools and equipment
clairenotado3
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
nabilahk908
Filipino 9 Maikling Kwento Ang Ama Panitikang Asiyano
Filipino 9 Maikling Kwento Ang Ama Panitikang Asiyano
sumadsadjelly121997
Aprendendo Arquitetura Framework Salesforce - Dia 02
Aprendendo Arquitetura Framework Salesforce - Dia 02
Mauricio Alexandre Silva
Wage and Salary Computation.ppt.......,x
Wage and Salary Computation.ppt.......,x
JosalitoPalacio
Tanja Vujicic - PISA for Schools contact Info
Tanja Vujicic - PISA for Schools contact Info
EduSkills OECD
How to Add New Item in CogMenu in Odoo 18
How to Add New Item in CogMenu in Odoo 18
Celine George
K12 Tableau User Group virtual event June 18, 2025
K12 Tableau User Group virtual event June 18, 2025
dogden2
LDMMIA Yoga S10 Free Workshop Grad Level
LDMMIA Yoga S10 Free Workshop Grad Level
LDM & Mia eStudios
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
Ultimatewinner0342
Ad

Ux6