This document discusses wireframing as an important step in the screen design process. It defines wireframing as a way to plan the layout and interaction of an interface without focusing on visual design elements. The document outlines a 7-step process for wireframing, including picking tools, setting a grid, determining layout with boxes, defining information hierarchy, fine-tuning with grayscale, creating high-definition wireframes, and translating wireframes into visual designs. It also discusses the importance of annotating wireframes to explain the user experience and providing mood boards with examples of design elements.

1. Wireframe Design
POP 517: User Experience

2. What do we do now?
Creating a narrative-based
platform to further develop
our project.

3. Surface
Skeleton
Structure
Scope
Strategy

4. Pages
Images
Text
Clickable
Functional
Informational
Visible

5. Step #1
How do we do this?

6. &Wireframes
Annotations

7. What is wireframing?

8. Important step in screen design process
Defines information hierarchy
Plans layout according to how user
should process information

9. Why is it important?

10. It is like a blueprint
Determines how the user interacts
with the interface
Can contain various states of button
or menu behaviors

11. Allows the designer to plan the layout
and interaction of an interface
without being distracted by colors,
typeface choices or even copy

12. Is there a process?

14. Step #1

15. Pick your tools

16. Step #2

17. Set a grid

19. Step #3

20. Determine layout with boxes

22. Step #4

23. Define information hierarchy with typography

26. Step #5

27. Fine-tuning with grayscale

29. Step #6

30. Hi-definition wireframe

32. Step #7

33. Translating a wireframe into a visual

36. What about annotation?

37. Offer annotations
that explain why
your design is
effective

39. Finally, a word about
moodboards

40. Moodboards combine examples of color
palette, imagery and typography. They often
contain design elements grabbed from other
websites that illustrate possible approaches.

41. Homework Assignment
1. Revise your journeys, if necessary, and select at least five templates for
wireframe execution.
2. Your Homepage template, which includes the site’s global navigation,
must be included.
3. Then annotate your wirefames, focusing on the behavior of key features.
4. Create a mood board that reflects the type of imagery and style elements
you recommend for your site.
5. You are not expected to develop visual designs, but you are welcome to
for extra credit.
DELIVERY FORMAT:
Formal presentation, collected for final grading.
Note: this is group assignment. This will be the final presentation for this
assignment. A new assignment, and new groups, will be assigned for the
remainder of the quarter.

42. Credits to:
Winnie Lim
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
Anthony
http://uxmovement.com/wireframes/why-its-important-to-annotate-your-wireframes/