Upload
mireya-burcham
View
219
Download
0
Embed Size (px)
Citation preview
Webinar
December 2012
Presentation by Ulul IlmiComputer Education and Instructional
Technology 100312047
Fatih University
Wireframing
& Prototyping
UX (User Experience) Design
UsereXperience
Design
What is UXD?First of all,
The big picture
UX Design – Defi nition
Four UX Designers in a room, eight different definitions.
Designing anything with enhancement and simplification of technology by evaluating
user’s experience. Aspects of a person’s experience with the
system, product or a service. Aspects of experience: Interface, graphics,
industrial design, physical interaction. UXD describes what's been designed, (the
experience).
During
After
Before
Emot
ion
s Belief
s Perc
eptio
n
s Psyc
hologi
cal
Respo
ns
es
Using a product of UX Design
User’s:
What we see..
Visual Design
Elevator Panel
What we don’t see..
SurfaceSkeleton
Structure
Scope
Strategy
Interface DesignNavigation Design
Visual Design
Interface Design
Interaction DesignInformation Design
Functional SpecsContent
Requirement
User NeedsSite Objectives
90 %
10 %
Behind Elevator Panel
User Technology
Business
UX
User-centered design (UCD)
Student Technology
Education
UX
Student-centered design (UCD)
User-centered design Process Phases
User
Analysis Design
DevelopmentImplementation
Evalu
ati
on
AD
DIE
Student-centered design Process Phases
Student
Analysis Design
DevelopmentImplementation
Evalu
ati
on
AD
DIE
“Design is not just what it looks like and feel like. Design is how it works”
Steve Jobs
How does UXD work?
Well,
Here comes our helpers!Wireframing &
Prototyping
Wireframing
What is Wireframing?
Wireframing – Defi nition
Wireframing a.k.a mockup a.k.a blueprint Visual representation of interface. Instruction & hints for separate teams to
approach interface design in a project. Type of wireframings:
1. Low fidelity (Sketches)2. High fidelity (Developer function details)3. Storyboards (Use of flowchart)
(Low fidelity) (High fidelity) (Storyboard)
Where does wireframes stands?
Where does wireframe stands?
Skeleton
Structure
Interface DesignNavigation DesignInterface Design
Interaction DesignInformation Design
Component and shapes of interface
Connecting shaping flows together
Why Wireframing?
Wireframe – Functions
Faster in gethering assessment needs Improve of communication between
people/groups Design and introduce simplicity in a short
timespan “Wireframing acts as a form of ‘Thinking
device’ for setting and exploration of a given problem space”
Faster in solving problem
“Good design is problem solving”
Jeff Veen
Prototyping
What is Prototyping?
Prototyping – Defi nition
Creating a demo of a new system A method used by designers to acquire
feedback from users about future designs. An early sample or model built to test a
concept or process or to act as a thing to be replicated or learned from.
Prototyping serves to provide specifications for a real, working system rather than a theoretical one.
Wireframing vs Prototyping
Wireframing | Prototyping
• 'How does it look?’(not visually)
• 'What information and features are presented?’
• Lower resolution• Function is
important
• 'How do I interact with this?'
• 'How will it be used?’
• Higher resolution• Visual is
important
Webinar
What is Webinar?
This is Webinar!
Webinar – Defi nition
Web-based seminars or a seminar that’s conducted over the Internet.
A service that allows conferencing events to be shared with remote locations.
New technology
Q&A
Thank You