0
a presentation by
May 21, 2014
Amber Vasquez
@ambersiscoe
Wireframing Basics
- UX and the
Design Process
About Mightybytes
We solve problems by:
• UX research and strategy
• Responsive web design and
development
• Content strat...
What you will learn today
• What a wireframe is & why you should start using them now
• What you need to start your wirefr...
Wireframes show:
• Page layout
• Information priority
• A bridge between ideas and prototype
!
Wireframes do not show:
• L...
#1 - They force you and your client to think
about the basic interactions your user will have
with your product
#2 - Easier to design with a
wireframe in hand
#3 - You will save time by getting client sign off
on wireframes before the design stage.
VS.
#4 - Once there is sign off on wireframes the
developers can start - without waiting for your design
Version #2Version #1
#5 - You can workout new ideas about user interaction you might
have before you spend time in the des...
An amazing analogy!
• Wireframes are the architectural blueprint of the house
• HTML/CSS are the bones of the house - the ...
a presentation by
Your first wireframe
- Let’s get started!
What kind of wireframe do YOU need?
• What is the budget?
• What is the timeframe?
• What do you need to get sign off to m...
Different strokes for different folks.
Low Fidelity High Fidelity
What program should you use?
• Paper sketches
• Illustrator
• Photoshop
• Keynote or Powerpoint
• InDesign
• Fireworks
• B...
Pattern libraries recommend solutions to common
design problems so you don’t have to burn your time
re-inventing the wheel...
Pattern Tap - great for fast sorting of types
pttrns - great for iOS patterns
Different projects require different workflows
Sketch > Wireframe > Visual Design > Code
Sketch > Wireframe > Hi-Def Wirefr...
a presentation by
Let’s build a
wireframe!
The basics - the frame of the house
Symbol libraries are your friend
Build your wireframes on a 12 grid format - this will make
the transition easier from wireframes to design to code.
Juicy ...
It needs to accomplish 3 things:
Wireframe a site for Narwhal Adoption
• Search for local Narwhals
• Buy Narwhal merchandi...
a presentation by
Wireframing in
the Wild
Wireframes in the wild: Rails-to-Trails
This site is a great example of
very little change from the
wireframes to the desi...
Wireframes in the wild: Elevate Energy
This site is a great example of
some changes from the
wireframes to the design
phas...
a presentation by
Q&A
a presentation by
May 21, 2014
Amber Vasquez
@ambersiscoe
&
Thank you!
linkedin.com/in/ambersiscoe
Wireframing Basics - UX and the Design Process by Amber Vasquez
Upcoming SlideShare
Loading in...5
×

Wireframing Basics - UX and the Design Process by Amber Vasquez

1,757

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
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,757
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
139
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×