introduction to wireframing ux and design

Download Introduction to wireframing ux and design

Post on 27-Jan-2015

111 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. Wireframing, UX and design Kevin Picalausa Kevin.Picalausa@hubkaho.be 1

2. Topics I. Who am I II. Design III. User Experience IV. Responsive webdesign V. Wireframing 2 3. Hello, my name is Kevin! 3 4. I live in: GHENT 4 http://www.ghentinmotion.com/ 5. My job Teacher Webprogramming Design and usability Databasing Webtechnology 5 6. HUBKAHO Technology campus 6 7. Belgium, the heart of Europe 7 8. Belgium, the heart of Europe 8 9. KAHOs brewery 9 10. Design 10 11. This crossed you mind? 11 12. Or this 12 13. But why? 13 14. What is design? Design has no exact definition. Design is everywhere. Design is the translation of an idea. Design has impact on nearly every part of our lives. Richard Seymour: making things better for people 14 15. Design always evolves 15 16. User Experience Good design begins with the needs of users 16 17. User (U) Experience (X) UX can be defined as the overall experience you have when you are using or interacting with something and that something could literally be almost anything in the world! 17 18. The good 18 19. The bad 19 20. The ugly 20 21. Its all about UX Source: http://usabilitygeek.com 21 22. Stepping out of our own shoes; putting our own priorities aside. Trying to get inside the minds of our future users. 22 The power of empathy 23. Most visitors decide within a matter of seconds whether to stay on your site or hit the back button to look for something better Source: http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ 23 24. User Experience - Influence 24 25. Ignore or adore? 25 26. Responsive webdesign 26 27. Responsive webdesign 27 28. Responsive webdesign 28 29. Responsive webdesign 29 30. Responsive webdesign 30 31. Why? 31 32. The problem Same information Different: Content User Behaviour User Experience 32 33. Mobile first? 33 34. Wireframing 34 35. A lot is happening At times the design process can seem very complicated, a lot of things are happening at the same time. Many people from different disciplines are all working together (and often simultaneously) on the same project. 35 36. Elements of user experience Surface: brings all together visually: finished product. Skeleton: makes structure concrete. What component will enable people to use the site. Structure: gives shape to the scope: how will the pieces fit together? Scope: transforms strategy into requirements: what feature will the site need. Strategy: is where it all begins. What do our users want? Jesse James Garret 36 37. Interaction design? Surface: brings all together visually: finished product. Skeleton: makes structure concrete. What component will enable people to use the site. Structure: gives shape to the scope: how will the pieces fit together? Scope: transforms strategy into requirements: what feature will the site need. Strategy: is where it all begins. What do our users want? Jesse James Garret 37 38. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface. 38 Source: slideshare: CMD Rotterdam - wireframes 39. Why use wireframes? To communicate your idea. It is some kind of blueprint for design. To get everyone on the same page. Easier to change a wireframe than a design! 39 40. Communication between client and team 40 41. Questions to ask when Structure: How will the pieces of this site be put together? Content: What will be displayed on this site? Information Hierarchy: How is this information organized and displayed? Functionality: How will this interface work? Behavior: How does it interact with the user? How does it behave? Wireframing 41 42. Types of wireframes 42 43. Sketches 43Source: roqo.net 44. Low-fidelity 44 45. High-fidelity 45 46. 46 47. Getting started Sketches next > Low-fidelity (next > High-fidelity) Hints: Use a grid Dont use colors Add comments Use predefined components Start with the bigger blocks Keep an eye on white space 47 48. Start by drawing boxes 48 49. Fine-tuning with grayscale Using the full spectrum of grayscale can help you determine the visual strength of your elements. Dont pick other colors! 49 50. Pick your tools Paper Software: Axure - http://www.axure.com/ Balsamique - http://balsamiq.com/ Lucidchart https://www.lucidchart.com/ Adobe: Fireworks Illustrator 50 51. Axure 51 Sitemap Widgets Properties Annotations Formatting Master elements Page interactions Guides and GRID 52. Lab-exercise - Topic for each group - You choose: mobile, website, tablet? Step 1. Brainstorming (techniques: this morning) Step 2. Getting to the core idea Step 3. Giving priorities (navigation) Step 4. Wireframing 52 53. 53

Recommended

View more >