Your SlideShare is downloading. ×
Introduction to wireframing ux and design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to wireframing ux and design

157
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
157
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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. KAHO’s 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. It’s 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 • “Don’t” 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. Don’t 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