Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology...
-
Upload
mireya-burcham -
Category
Documents
-
view
220 -
download
0
Transcript of Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology...
![Page 1: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/1.jpg)
Webinar
December 2012
Presentation by Ulul IlmiComputer Education and Instructional
Technology 100312047
Fatih University
Wireframing
& Prototyping
UX (User Experience) Design
![Page 2: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/2.jpg)
UsereXperience
Design
![Page 3: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/3.jpg)
What is UXD?First of all,
![Page 4: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/4.jpg)
The big picture
![Page 5: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/5.jpg)
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).
![Page 6: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/6.jpg)
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:
![Page 7: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/7.jpg)
What we see..
Visual Design
![Page 8: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/8.jpg)
Elevator Panel
![Page 9: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/9.jpg)
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 %
![Page 10: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/10.jpg)
Behind Elevator Panel
![Page 11: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/11.jpg)
User Technology
Business
UX
User-centered design (UCD)
![Page 12: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/12.jpg)
Student Technology
Education
UX
Student-centered design (UCD)
![Page 13: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/13.jpg)
User-centered design Process Phases
User
Analysis Design
DevelopmentImplementation
Evalu
ati
on
AD
DIE
![Page 14: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/14.jpg)
Student-centered design Process Phases
Student
Analysis Design
DevelopmentImplementation
Evalu
ati
on
AD
DIE
![Page 15: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/15.jpg)
“Design is not just what it looks like and feel like. Design is how it works”
Steve Jobs
![Page 16: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/16.jpg)
How does UXD work?
Well,
![Page 17: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/17.jpg)
Here comes our helpers!Wireframing &
Prototyping
![Page 18: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/18.jpg)
Wireframing
![Page 19: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/19.jpg)
What is Wireframing?
![Page 20: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/20.jpg)
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)
![Page 21: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/21.jpg)
(Low fidelity) (High fidelity) (Storyboard)
![Page 22: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/22.jpg)
Where does wireframes stands?
![Page 23: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/23.jpg)
Where does wireframe stands?
Skeleton
Structure
Interface DesignNavigation DesignInterface Design
Interaction DesignInformation Design
Component and shapes of interface
Connecting shaping flows together
![Page 24: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/24.jpg)
Why Wireframing?
![Page 25: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/25.jpg)
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
![Page 26: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/26.jpg)
“Good design is problem solving”
Jeff Veen
![Page 27: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/27.jpg)
Prototyping
![Page 28: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/28.jpg)
What is Prototyping?
![Page 29: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/29.jpg)
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.
![Page 30: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/30.jpg)
Wireframing vs Prototyping
![Page 31: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/31.jpg)
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
![Page 32: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/32.jpg)
Webinar
![Page 33: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/33.jpg)
What is Webinar?
![Page 34: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/34.jpg)
This is Webinar!
![Page 35: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/35.jpg)
![Page 36: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/36.jpg)
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
![Page 37: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/37.jpg)
Q&A
![Page 38: Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX.](https://reader038.fdocuments.net/reader038/viewer/2022102923/551b9f47550346a10a8b6069/html5/thumbnails/38.jpg)
Thank You