Week4 : Wireframes and Sketching
•Download as PPT, PDF•
2 likes•962 views
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 sketches loose.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to Week4 : Wireframes and Sketching
Similar to Week4 : Wireframes and Sketching (20)
Recently uploaded
Recently uploaded (20)
Week4 : Wireframes and Sketching
- 1. UX Week 4 Sketching & Wireframes
- 2. Site Diagram & Sketching Lots of thumbnails Work on Site Flow
- 3. 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
- 5. 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
- 7. 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)
- 8. 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
- 9. Twitters Original Sketch https://www.flickr.com/photos/jackdorsey/18261 3360/
- 10. 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/
- 11. 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/
- 12. Tools
- 13. OmniGraffle Illustrator Fireworks InDesign Tools
- 14. Omnigraphle Quick templates Multiple developers making frameworks and symbols Easy annotation
- 15. Fireworks Quick steps to Photoshop Showing interactive elements Export to Web
- 16. Illustrator Symbols make working quick Clean lines Export to Photoshop layers
- 17. InDesign Text styles Master Templates Interaction modeling
- 18. 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.
- 22. 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.
- 23. 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
Editor's Notes
- Wireframes Should exemplify the Goals
- What to look for. Assessing the completed wireframe