How to create the best wireframes

1,289
-1

Published on

How to create the best wireframes

Published in: Design
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,289
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

How to create the best wireframes

  1. 1. PRODUCT WIREFRAMING
  2. 2. ONE JOB MANY TITLES PRODUCT MANAGER, PROJECT MANAGER, UX DESIGNER, UX ARCHITECT, UI DESIGNER, GUI DESIGNER, UX SPECIALIST, PRODUCT UX, USABILITY EXPERT, …
  3. 3. PRODUCT RESPONSIBILITY At what stage do I operate? What skills do I need to possess? What is my final product to deliver? What tools do I have?
  4. 4. SKILL SET VISUAL DESIGN TECHNOLOGY PSYCOLOGY BUSINESS
  5. 5. USER EXPERIENCE? Research and Wireframing Visual Design Front End Development Content Testing & Usability
  6. 6. THE WIREFRAME DOCUMENT
  7. 7. THE WIREFRAME MUST DEFINE CONTENT | HIERARCHY | BEHAVIOR
  8. 8. WIREFRAME & DESIGN
  9. 9. WIREFRAME & DESIGN
  10. 10. WIREFRAME & DESIGN
  11. 11. THE DESIGNER CAN MAKE A DIFFERENCE
  12. 12. KEY TERMS IN WIREFRAME CREATION
  13. 13. ALIGNMENT & SPACING יישור, ריווח
  14. 14. NEVER SAY “ITS OK, WE WILL FIX IT IN THE DESIGN”
  15. 15. DON’T ABUSE THE DESIGNER He will get back at you
  16. 16. PERCEIVED AFFORDANCE HOME PAGE HOME PAGE
  17. 17. The shape and color of elements need to suggest something about their behavior.
  18. 18. DON’T DESIGN
  19. 19. BEHAVIORS & CONDITIONS What happens when you press on each button? Users status: register, guest, logged in Error masseges Forgot password?
  20. 20. NEVER USE A DEMO TEXT You won’t understand the experience You will ignore possible problems The designer will have to work hard Your team won’t understand the experience
  21. 21. IS IT THE RIGHT SOLUTION?
  22. 22. DO I REALLY HAVE ENOUGH SPACE?
  23. 23. PASSING THE TOURCH WIREFRAMES FOR DEVELOPERS
  24. 24. QUICK & EASY WIREFRAMES EXPLANATIONS
  25. 25. EXAMPLE : PRODUCT PAGE
  26. 26. WIREFRAMING TOOLS
  27. 27. MANY TOOLS AVAILBLE
  28. 28. WHAT DO I NEED? 1 TO WORK FAST. 2 RAPID CHANGES COMPATIBILITY. 3 DESIGN FIDELITY SENSITIVE. 4 VISUAL FLEXIBILITY. 5 GET SMART FEEDBACK. 6 BUILD PROTOTYPES.
  29. 29. AXURE
  30. 30. OUR MOST IMPORTANT TOOLS CAMERA PENCIL NOTEBOOK
  31. 31. LETS GET TO WORK OPEN AXURE
  32. 32. THANK YOU :)

×