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