Wireframing Basics - UX and the Design Process by Amber Vasquez


Published on

Join Mightybytes Experience Director Amber Vasquez for a workshop explaining the basics of wireframing. You'll gain a basic understanding of the tools and techniques you'll need to incorporate wireframing into your everyday design work. And you'll get a complimentary UX sketchbook to work with!

This workshop is recommended for design professionals looking to integrate wireframing into their process, or anyone strengthening their full-stack design skills.

Published in: Design, Business, Technology
  • Be the first to comment

Wireframing Basics - UX and the Design Process by Amber Vasquez

  1. 1. a presentation by May 21, 2014 Amber Vasquez @ambersiscoe Wireframing Basics - UX and the Design Process
  2. 2. About Mightybytes We solve problems by: • UX research and strategy • Responsive web design and development • Content strategy • Digital marketing and SEO • Motion graphics • Product development • Drupal, Wordpress, Expression Engine !
  3. 3. What you will learn today • What a wireframe is & why you should start using them now • What you need to start your wireframe • What’s your process? • Let’s build a wireframe! • Wireframes in the wild • Q&A • Conclusion
  4. 4. Wireframes show: • Page layout • Information priority • A bridge between ideas and prototype ! Wireframes do not show: • Look and Feel • Treatment of buttons and/or graphic elements • Exact copy or verbiage Wireframes: Functionality, not visual design Wireframes are blueprints for a site or app
  5. 5. #1 - They force you and your client to think about the basic interactions your user will have with your product
  6. 6. #2 - Easier to design with a wireframe in hand
  7. 7. #3 - You will save time by getting client sign off on wireframes before the design stage. VS.
  8. 8. #4 - Once there is sign off on wireframes the developers can start - without waiting for your design
  9. 9. Version #2Version #1 #5 - You can workout new ideas about user interaction you might have before you spend time in the design phase — without being distracted by design components
  10. 10. An amazing analogy! • Wireframes are the architectural blueprint of the house • HTML/CSS are the bones of the house - the frame, the doors, the roof • Backend Development (i.e. a Drupal install, Wordpress setup, ect.) is the plumbing and heating - you don’t see it, but it’s an integral part of how the house operates • Visual Design is how you decorate the house - it’s curtains, carpet, paint or wallpaper & furniture Think of your website or app like a house:
  11. 11. a presentation by Your first wireframe - Let’s get started!
  12. 12. What kind of wireframe do YOU need? • What is the budget? • What is the timeframe? • What do you need to get sign off to move forward in the process with your client? Some questions to ask before you begin:
  13. 13. Different strokes for different folks. Low Fidelity High Fidelity
  14. 14. What program should you use? • Paper sketches • Illustrator • Photoshop • Keynote or Powerpoint • InDesign • Fireworks • Balsamiq • Omnigraffle Pick your poison:
  15. 15. Pattern libraries recommend solutions to common design problems so you don’t have to burn your time re-inventing the wheel. ! Some of my favorites include: • Welie.com • Patterny.com • Patterntap.com • Pttrns.com Juicy Tidbit!
  16. 16. Pattern Tap - great for fast sorting of types
  17. 17. pttrns - great for iOS patterns
  18. 18. Different projects require different workflows Sketch > Wireframe > Visual Design > Code Sketch > Wireframe > Hi-Def Wireframe > Visual Design > Code Wireframe > Hi-Def Wireframe > Visual Design > Code Sketch > Code Wireframe > Interactive Prototype > Visual Design > Code
  19. 19. a presentation by Let’s build a wireframe!
  20. 20. The basics - the frame of the house
  21. 21. Symbol libraries are your friend
  22. 22. Build your wireframes on a 12 grid format - this will make the transition easier from wireframes to design to code. Juicy Tidbit!
  23. 23. It needs to accomplish 3 things: Wireframe a site for Narwhal Adoption • Search for local Narwhals • Buy Narwhal merchandise • Adopt a Narwhal
  24. 24. a presentation by Wireframing in the Wild
  25. 25. Wireframes in the wild: Rails-to-Trails This site is a great example of very little change from the wireframes to the design phase. ! We spent 70% of our time wireframing, 30% designing.
  26. 26. Wireframes in the wild: Elevate Energy This site is a great example of some changes from the wireframes to the design phase. ! Entering in more specific content in the design & coding phase made the client realize they wanted some content to shift.
  27. 27. a presentation by Q&A
  28. 28. a presentation by May 21, 2014 Amber Vasquez @ambersiscoe & Thank you! linkedin.com/in/ambersiscoe