Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wireframes - a brief overview


Published on

A good beginners overview of wireframes.
• Why wireframe?
• Types of wireframes
• Where do you start?
• Interactive wireframes/ Prototyping
• Tools
• Wireframe workshop

Published in: Design
  • Typical Example Of A Winning Week! [£746 Profit On DAY 1], ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • Could you use an extra $1750 a week? I'm guessing you could right? If you would like to see how you could make this type of money, right from the comfort of your own home, you absolutely need to check out this short free video. ♣♣♣
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • You can get paid up to $25 per hour to be on Facebook? ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here

Wireframes - a brief overview

  1. 1. A brief overview Wireframes! photo via @thoughtbrain
  2. 2. - Extracts the idea from your brain - Generates dialog about a product - Provides guidance for everyone building the product - Keeps the idea loose enough to allow for revisions + low risk Why Wireframe?
  3. 3. Types of wireframes - Low Fi: Sketching with paper/pencil, whiteboarding
  4. 4. sketches by Anthony Armendariz
  5. 5. When to use Lo-Fi - Brainstorming stage - To provide quick general guidance internally Bad for: - Exact Details
  6. 6. Work broadly and iterate often Tip:
  7. 7. Types of wireframes - Low Fi: Sketching with paper/pencil - Hi Fi: Using software and creating user- flows and/or interactive prototypes
  8. 8. wireframe by Neway Lau
  9. 9. When to use Hi-Fi - Good for clients, stakeholders - Explains each part throughly Bad for: - Iteration - Keeping things up to date
  10. 10. Wireframes DO NOT replace spec documentation!
  11. 11. Keep the wireframes black/white/grey and don’t use images. Tip:
  12. 12. Where do you start? Break everything into tasks
  13. 13. Mind Map
  14. 14. Example: How does a new user create an account? - welcome screen - walkthrough - Sign up/ FB - email address/password Requirements:
  15. 15. logo email password FB Sign up Create Account Welcome Walkthrough Sign Up Email/ Password (Lo-Fi Example)
  16. 16. Dialog this creates: - Can we make sign up faster? - What are the key points for the walkthrough? - Do we need a welcome screen?
  17. 17. logo email password FBSign up Create Account
  18. 18. Interactive Wireframes/ Prototyping: - Good for making the static wireframe feel real - Quickly gives you a good idea on if the flow feels right - Can hand it to other people to test
  19. 19. Ideas are disposable, you can always make more. Prototyping Tip:
  20. 20. Paper & pencil + POP app - free! Wireframe tools Apple Keynote - free! OmniGraffle - $100 Balsamiq - $89 Adobe Illustrator - starts $20/mo Invision - free & Pro options Sketch - $99 Gliffy - free & Pro options
  21. 21. “Sequential art” If you want to learn more about drawing and telling stories with your wireframes ALSO Scott McCloud, "Understanding Comics"
  22. 22. Now let’s Workshop!
  23. 23. Download POP app
  24. 24. The Task: Wireframe of one flow of your choice and use the POP app to create a prototype
  25. 25. Remember: These don’t need to be perfect!
  26. 26. Ideas: Photo-sharing social networkTo-Do App - create a new list - add an item - mark off item off list - share your list - organize list - add notes - shared task list with another person - Choose a photo (or more than one) from your camera roll - take a new photo - like/comment/share - create a new account - filters