1. Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology 100312047 Fatih University Wireframing & Prototyping UX (User Experience) Design

2. User eXperience Desig n

3. What is UXD? First of all,

4. The big picture

5. 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).

6. Durin g AfterBefor e Emotions Beliefs Perceptions Psychologic al Response s Using a product of UX Design User’ s:

7. What we see.. Visual Design

8. Elevator Panel

9. 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 %

10. Behind Elevator Panel

11. User Technology Busines s UX User-centered design (UCD)

12. Student Technology Education UX Student-centered design (UCD)

13. User-centered design Process Phases User Analysis Design Development Implementation Evaluation ADDIE

14. Student-centered design Process Phases Student Analysis Design Development Implementation Evaluation ADDIE

15. “Design is not just what it looks like and feel like. Design is how it works” Steve Jobs

16. How does UXD work? Well,

17. Here comes our helpers! Wireframing & Prototyping

18. Wireframing

19. What is Wireframing?

20. 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)

21. (Low fidelity) (High fidelity) (Storyboard)

22. Where does wireframes stands?

23. Where does wireframe stands? Skeleton Structure Interface Design Navigation Design Interface Design Interaction Design Information Design

24. Why Wireframing?

25. 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

26. “Good design is problem solving” Jeff Veen

27. Prototyping

28. What is Prototyping?

29. 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.

30. Wireframing vs Prototyping

31. 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

32. Webinar

33. What is Webinar?

34. This is Webinar!

36. 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

37. Q&A

38. Thank You