week4 : wireframes and sketching

23
UX Week 4 Sketching & Wireframes

Upload: mark-zelis

Post on 13-Aug-2015

109 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Week4 : Wireframes and Sketching

UX Week 4

Sketching & Wireframes

Page 2: Week4 : Wireframes and Sketching

Site Diagram & Sketching

Lots of thumbnails

Work on Site Flow

Page 3: Week4 : Wireframes and Sketching

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

Page 4: Week4 : Wireframes and Sketching

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

Page 5: Week4 : Wireframes and Sketching

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

Page 6: Week4 : Wireframes and Sketching

Vimeo

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

Page 7: Week4 : Wireframes and Sketching

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)

Page 8: Week4 : Wireframes and Sketching

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

Page 9: Week4 : Wireframes and Sketching

Twitters Original Sketch

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

Page 10: Week4 : Wireframes and Sketching

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/

Page 11: Week4 : Wireframes and Sketching

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/

Page 12: Week4 : Wireframes and Sketching

Tools

Page 13: Week4 : Wireframes and Sketching

OmniGraffle

Illustrator

Fireworks

InDesign

Tools

Page 14: Week4 : Wireframes and Sketching

Omnigraphle

Quick templates

Multiple developers making frameworks and symbols

Easy annotation

Page 15: Week4 : Wireframes and Sketching

Fireworks

Quick steps to Photoshop

Showing interactive elements

Export to Web

Page 16: Week4 : Wireframes and Sketching

Illustrator

Symbols make working quick

Clean lines

Export to Photoshop layers

Page 17: Week4 : Wireframes and Sketching

InDesign

Text styles

Master Templates

Interaction modeling

Page 18: Week4 : Wireframes and Sketching

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.

Page 19: Week4 : Wireframes and Sketching

Annotation on Sketch

Page 20: Week4 : Wireframes and Sketching

Formal Annotated Wireframe

Page 21: Week4 : Wireframes and Sketching
Page 22: Week4 : Wireframes and Sketching

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.

Page 23: Week4 : Wireframes and Sketching

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