Presentation on theme: "Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX."— Presentation transcript:
Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology Fatih University Wireframing & Prototyping UX (User Experience) Design
User eXperience Desig n
What is UXD? First of all,
The big picture
UX Design – Definition 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).
Durin g AfterBefor e Emotions Beliefs Perceptions Psychologic al Response s Using a product of UX Design User’ s:
What we see.. Visual Design
What we don’t see.. Surface Skeleton Structure Scope Strategy Interface Design Navigation Design Visual Design Interface Design Interaction Design Information Design Functional Specs Content Requirement User Needs Site Objectives 90 % 10 %
Behind Elevator Panel
User Technology Busines s UX User-centered design (UCD)
User-centered design Process Phases User Analysis Design Development Implementation Evaluation ADDIE
Student-centered design Process Phases Student Analysis Design Development Implementation Evaluation ADDIE
“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
What is Wireframing?
Wireframing – Definition 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 Design Navigation Design Interface Design Interaction Design Information Design
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
What is Prototyping?
Prototyping – Definition 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
What is Webinar?
This is Webinar!
Webinar – Definition 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