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.

Wireframing Basics - UX and the Design Process by Amber Vasquez

4,758 views

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

×