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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
244
On Slideshare
244
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
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