Week4 : Wireframes and Sketching

UX Week 4

Sketching & Wireframes

Site Diagram & Sketching

Lots of thumbnails

Work on Site Flow

Site Diagram & Sketching

Ignore style and look

Use shades of grey; color will confuse If there is preexisting material(eg. Logo) attempt

to make it gray-scale.

Shows page hierarchy

It’s a macro view of the site functions and how elements relate to each other

Shows main views of the product

https://www.flickr.com/photos/43868681@N02/4066039551/

Wireframe Shows Objectives

What are the user goals

Show an example use case

Show the intent of the page

Show the content organization and hierarchy

Vimeo

http://www.flickr.com/photos/soxiam/2182204230

Creating the Wireframe

What content is going to be on the view

How is the content organized

What is the most important information

What is the goal of this page

How does a user navigate

Where is the user(context)

Audit the Wireframe

The most important content is the first thing you notice

Everything contributes to the section objective

Navigation is easy to find and use

Labels are consistent and easily understood by the user

Twitters Original Sketch

https://www.flickr.com/photos/jackdorsey/182613360/

Getting Ideas

http://useyourinterface.com/ Library of transitional interface and interaction

design patterns

http://archive.hi-res.net/ Old Flash Sites (Donnie Darko, Night at the

Museum)

http://wireframes.tumblr.com/

Ideation

Work from a focused list to be solved

Improv doctrine

http://blogs.kqed.org/mindshift/2015/01/how-improv-can-open-up-the-mind-to-learning-in-the-classroom-and-beyond/

Tools

OmniGraffle

Illustrator

Fireworks

InDesign

Tools

Omnigraphle

Quick templates

Multiple developers making frameworks and symbols

Easy annotation

Fireworks

Quick steps to Photoshop

Showing interactive elements

Export to Web

Illustrator

Symbols make working quick

Clean lines

Export to Photoshop layers

InDesign

Text styles

Master Templates

Interaction modeling

Annotation

Not all aspects of functionality can be displayed visually

In the sketch phase, making notes will help you organize and remember your concepts

Team communication

Client buy-in. Don’t rely on your clients imagination.

Annotation on Sketch

Formal Annotated Wireframe

Homework

Wireframes are a critical starting point to your design. Wireframes help a designers workout complex interactions and cheaply identify challenges. There are holes in the interaction and UI. Keep the sketched loose.

Draw wireframes for at least 5 sections of your project. Show the primary landing page for your project and 4 other pages, interaction or user feedback. Please use paper and pencil. Post images to canvas.

Homework

Submit sketches

Submit digital wireframes with annotation as PDF

Use shades of grey, no color

Convert logos to Black and White(if existing)

Focus on Hierarchy and goals

WHITESPACE is not WASTED SPACE:

http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space