1 / 38

Webinar

UX (User Experience) Design. Wireframing. &. Prototyping. Webinar. December 2012. Presentation by Ulul Ilmi. Fatih University. Computer Education and Instructional Technology 100312047. U ser. e X perience. Design. First of all,. What is UX D?. The big picture.

elsie
Télécharger la présentation

Webinar

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UX (User Experience) Design Wireframing & Prototyping Webinar December 2012 Presentation by UlulIlmi FatihUniversity Computer Education and Instructional Technology 100312047

  2. User eXperience Design

  3. First of all, What is UXD?

  4. The big picture

  5. 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). UX Design – Definition

  6. User’s: Psychological Responses Emotions Perceptions Beliefs During Before After Using a product of UX Design

  7. Visual Design What we see..

  8. Elevator Panel

  9. Surface 10 % Visual Design Skeleton 90 % Interface Design Navigation Design Interface Design Structure Scope Interaction Design Functional Specs Information Design Content Requirement Strategy User Needs Site Objectives What we don’t see..

  10. Behind Elevator Panel

  11. User-centered design (UCD) User Technology UX Business

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

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

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

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

  16. Well, How does UXD work?

  17. Here comes our helpers! Wireframing& Prototyping

  18. Wireframing

  19. What is Wireframing?

  20. Wireframinga.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: • Low fidelity (Sketches) • High fidelity (Developer function details) • Storyboards (Use of flowchart) Wireframing – Definition

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

  22. Wheredoeswireframesstands?

  23. Skeleton Interface Design Component and shapes of interface Navigation Design Interface Design Structure Interaction Design Connecting shaping flows together Information Design Wheredoeswireframestands?

  24. Why Wireframing?

  25. Faster in getheringassessment 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 Wireframe – Functions

  26. “Good design is problem solving” Jeff Veen

  27. Prototyping

  28. What is Prototyping?

  29. 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. Prototyping – Definition

  30. WireframingvsPrototyping

  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!

  35. 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 Webinar – Definition

  36. Q&A

  37. Thank You

More Related