The document discusses product wireframing and the role of a wireframing designer. It notes that wireframing involves researching user needs, creating basic page layouts and interaction flows, and defining content, hierarchy, and behavior without visual design elements. The key responsibilities of a wireframing designer are to create framework documents that effectively communicate the intended user experience and gather feedback before development begins. Wireframing tools should allow for fast iteration and changes as well as building interactive prototypes.

1. PRODUCT
WIREFRAMING

2. ONE JOB MANY TITLES
PRODUCT MANAGER, PROJECT
MANAGER, UX DESIGNER, UX
ARCHITECT, UI DESIGNER, GUI
DESIGNER, UX SPECIALIST,
PRODUCT UX, USABILITY EXPERT,
…

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. SKILL SET
VISUAL
DESIGN
TECHNOLOGY
PSYCOLOGY
BUSINESS

5. USER EXPERIENCE?
Research and
Wireframing
Visual Design
Front End
Development
Content
Testing &
Usability

6. THE WIREFRAME
DOCUMENT

7. THE WIREFRAME MUST DEFINE
CONTENT | HIERARCHY | BEHAVIOR

10. WIREFRAME & DESIGN

11. WIREFRAME & DESIGN

12. WIREFRAME & DESIGN

13. THE DESIGNER
CAN MAKE A DIFFERENCE

14. KEY TERMS
IN WIREFRAME CREATION

15. ALIGNMENT & SPACING
יישור, ריווח

16. NEVER SAY
“ITS OK,
WE WILL FIX IT IN
THE DESIGN”

17. DON’T ABUSE THE DESIGNER
He will get back at you

18. PERCEIVED AFFORDANCE
HOME PAGE
HOME PAGE

19. The shape and color of elements need to
suggest something about their behavior.

20. DON’T DESIGN

21. BEHAVIORS & CONDITIONS
What happens when you press on each button?
Users status: register, guest, logged in
Error masseges
Forgot password?

22. 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

23. IS IT THE RIGHT SOLUTION?

24. DO I REALLY HAVE ENOUGH SPACE?

25. PASSING THE TOURCH
WIREFRAMES FOR
DEVELOPERS

26. QUICK & EASY
WIREFRAMES
EXPLANATIONS

27. EXAMPLE : PRODUCT PAGE

28. WIREFRAMING
TOOLS

29. MANY TOOLS AVAILBLE

30. 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.

31. AXURE

34. OUR MOST IMPORTANT TOOLS
CAMERA
PENCIL
NOTEBOOK

35. LETS GET TO WORK
OPEN AXURE

36. THANK YOU :)