Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Wireframes - a brief overview

11 918 vues

Publié le

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

Publié dans : Design
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ●●● http://ishbv.com/unlockher/pdf
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Wireframes - a brief overview

  1. 1. A brief overview Wireframes! photo via http://speckyboy.com/ Jenni.Leder@gmail.com @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