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

13,041 views

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
  • If u need a hand in making your writing assignments - visit ⇒ www.HelpWriting.net ⇐ for more detailed information.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'd advise you to use this service: ⇒ www.HelpWriting.net ⇐ The price of your order will depend on the deadline and type of paper (e.g. bachelor, undergraduate etc). The more time you have before the deadline - the less price of the order you will have. Thus, this service offers high-quality essays at the optimal price.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Have you ever used the help of ⇒ www.WritePaper.info ⇐? They can help you with any type of writing - from personal statement to research paper. Due to this service you'll save your time and get an essay without plagiarism.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • PumaToto | Agen Togel Terpercaya PumaToto merupakan Togel Online | Togel Terpercaya dengan Prediksi Togel Akurat | Prediksi Angka Jitu Bagi kalian yang suka bermain Togel Singapore | Togel HK bisa untuk bergabung dengan PumaToto Cara Main Togel | Cara Pasang Togel | Pasang Togel Online di PumaToto, dengan Discount dan Hadiah Menarik Tentunya Daftarkan diri Anda bersama PumaToto https://caramaintogel.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×