Wireframe DesignPOP 517: User Experience

What do we do now?

Creating a narrative-based platform to further develop our project.

Surface Skeleton Structure Scope

Strategy

PagesImages

TextClickable

Functional Informational

Visible

Step #1How do we do this?

& Wireframes Annotations

What is wireframing?

Important step in screen design processDefines information hierarchy

Plans layout according to how user should process information

Why is it important?

It is like a blueprint Determines how the user interacts

with the interface Can contain various states of button

or menu behaviors

Allows the designer to plan the layout and interaction of an interface

without being distracted by colors, typeface choices or even copy

Is there a process?

Step #1

Pick your tools

Step #2

Set a grid

Step #3

Determine layout with boxes

Step #4

Define information hierarchy with typography

Step #5

Fine-tuning with grayscale

Step #6

Hi-definition wireframe

Step #7

Translating a wireframe into a visual

What about annotation?

Offer annotations that explain why

your design is effective

Finally, a word about moodboards

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

Homework Assignment1. 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.

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