The presentation by Amber Vasquez covers the fundamentals of wireframing in UX design, emphasizing its role in enhancing user interaction and streamlining the design process. It highlights the different types of wireframes, tools for creating them, and how to structure a wireframe project effectively. The discussion also includes practical examples and tips for using wireframes to gain client approval before moving to design and development stages.

1. a presentation by
May 21, 2014
Amber Vasquez
@ambersiscoe
Wireframing Basics
- UX and the
Design Process

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
!

4. 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

5. 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

6. #1 - They force you and your client to think
about the basic interactions your user will have
with your product

7. #2 - Easier to design with a
wireframe in hand

8. #3 - You will save time by getting client sign off
on wireframes before the design stage.
VS.

9. #4 - Once there is sign off on wireframes the
developers can start - without waiting for your design

10. 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

11. 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:

12. a presentation by
Your first wireframe
- Let’s get started!

13. 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:

14. Different strokes for different folks.
Low Fidelity High Fidelity

15. What program should you use?
• Paper sketches
• Illustrator
• Photoshop
• Keynote or Powerpoint
• InDesign
• Fireworks
• Balsamiq
• Omnigraffle
Pick your poison:

16. 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!

17. Pattern Tap - great for fast sorting of types

18. pttrns - great for iOS patterns

19. 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

20. a presentation by
Let’s build a
wireframe!

21. The basics - the frame of the house

22. Symbol libraries are your friend

23. Build your wireframes on a 12 grid format - this will make
the transition easier from wireframes to design to code.
Juicy Tidbit!

24. It needs to accomplish 3 things:
Wireframe a site for Narwhal Adoption
• Search for local Narwhals
• Buy Narwhal merchandise
• Adopt a Narwhal

25. a presentation by
Wireframing in
the Wild

26. 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.

27. 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.

28. a presentation by
Q&A

29. a presentation by
May 21, 2014
Amber Vasquez
@ambersiscoe
&
Thank you!
linkedin.com/in/ambersiscoe