Designing Interfaces (and Wireframes)

10,988 views

Published on

In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.

Published in: Design

Designing Interfaces (and Wireframes)

  1. 1. Designing Interfaces (and wireframes) General Assembly 11/14/12
  2. 2. SKETCHING
  3. 3. Understanding ComicsScott McCloud
  4. 4. First to ourselves, then to othersWE DRAW TO COMMUNICATE
  5. 5. DRAW LINES
  6. 6. DRAW SHAPES
  7. 7. From the Notebooks of Michel BrasUSED BY: EVERYBODY
  8. 8. How sketch for attention and understandingTOOLS FOR EXPRSSION
  9. 9. Line thickness
  10. 10. Size
  11. 11. Shading
  12. 12. Selective detail
  13. 13. Isolation
  14. 14. Depth
  15. 15. Notation
  16. 16. Make a sketchof this pageUse:• Line weight• Size• Shading• Selective detail• Isolation• Notation
  17. 17. Making pages out of boxes and arrowsTRANSFORM YOUR FLOWS
  18. 18. A task analysisFrom Information Architecture: Blueprints for the Web, this is a taskanalysis for a website for Sundance film festival, featuring a scheduleplanner
  19. 19. Each task could have a page
  20. 20. Remind you of something? 1995: first graphic logoFirst Yahoo 1994
  21. 21. Including the schedule creator tool…
  22. 22. Wizards: Many boxes, many pages
  23. 23. Use Wizards:• When users want to • The audience is not technically accomplish a goal that has savvy and is likely to be many steps. Wizards are good confused by a page with a lot at making sure you don’t miss of choices on it. A Web site a step. can have novice users, and a• When the steps must be wizard makes complex tasks completed in order. Wizards seem easy. are linear, so it’s impossible to • Bandwidth is low and complete them any other way. downloading a single big page• When the task is seldom could take forever, or the tasks performed. Wizards can seem require several server calls, slow and plodding, so they are which would also slow the best used in tasks you do only page’s load. once in a while, like setting up • The task has several steps in it, a printer. performed only once a visit, such as checkout.
  24. 24. Task:DESIGN A WIZARD
  25. 25. You can group tasks together
  26. 26. Control Panel
  27. 27. You seethem onsoftware inpreferences,setoccasionally,by experts
  28. 28. On the web, they are often account settings
  29. 29. DESIGN A CONTROL PANEL
  30. 30. Bring the settings and the thing modified togetherTOOLBARS
  31. 31. What if we put the tasks with the thing they were modifying?
  32. 32. It’s a toolbarTools here Item affected here
  33. 33. And hereTools here Toolbars Item affected And here here Photoshop: toolbars on steroids
  34. 34. The web uses toolbars more sparingly
  35. 35. Tools here Toolbars Item affected here A simpler design is better for infrequent use.
  36. 36. Location, paletteGROUP LIKE ITEMS
  37. 37. An Interface is like a table setting, the tools you need are nextto the food you eat. Content is the meal.
  38. 38. Two videos sites.The “meal” is the video, and the toolsto consume (or play with) it arearrayed around the main meal.(P.S. There are toolbars too)
  39. 39. Why is the response so far from the invitation?
  40. 40. ZONE YOUR PAGE
  41. 41. When designing the page, groupitems by similarity and similarity oftask (navigation items together,editing items together)Give them visual importance basedon user number, usage frequencyand importance to business.
  42. 42. • Create “zones” for functionality groups.• You can group them by putting white space around them, or use lines• Remember to keep tools close to the thing your working on
  43. 43. Zone this page
  44. 44. ZONE YOUR HOMEPAGE
  45. 45. HOW TO MAKE A WIREFRAME IN30 SECONDS
  46. 46. Draw a rectangle
  47. 47. Add global elements
  48. 48. • Next, add the key zones• Start with a list of elements, perhaps written on post its. Group them, then find them homes on your page.• The fill in the actual elements
  49. 49. FINALLY, ANNOTATE
  50. 50. Consider• Where does the content come from? If you have a list of related articles, specify how they’re related. Are they the most viewed? Most viewed from that section?• What is the nature of the content? Does it vary greatly in length, size, language,and type?• Is the element required or optional? What happens if the element doesn’t appear on that page? Does the layout change?• Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn’t have an associated image? What if it does?• What’s the default or expected state? Ideally, what’s supposed to happen on the page.• What are the alternate or error states? How does the design change when things don’t go right?
  51. 51. Homework• Pick a website to sketch out• Pick a Website to Zone• Try a page form your project

×