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

on

  • 908 views

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

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.

Statistics

Views

Total Views
908
Views on SlideShare
821
Embed Views
87

Actions

Likes
9
Downloads
78
Comments
0

3 Embeds 87

https://twitter.com 85
https://www.linkedin.com 1
http://dschool.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wireframing Basics - UX and the Design Process by Amber Vasquez Wireframing Basics - UX and the Design Process by Amber Vasquez Presentation Transcript

    • 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 strategy • Digital marketing and SEO • Motion graphics • Product development • Drupal, Wordpress, Expression Engine !
    • 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
    • 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
    • #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 design phase — without being distracted by design components
    • 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:
    • 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 move forward in the process with your client? Some questions to ask before you begin:
    • Different strokes for different folks. Low Fidelity High Fidelity
    • What program should you use? • Paper sketches • Illustrator • Photoshop • Keynote or Powerpoint • InDesign • Fireworks • Balsamiq • Omnigraffle Pick your poison:
    • 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!
    • 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 Wireframe > Visual Design > Code Wireframe > Hi-Def Wireframe > Visual Design > Code Sketch > Code Wireframe > Interactive Prototype > Visual Design > Code
    • 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 Tidbit!
    • It needs to accomplish 3 things: Wireframe a site for Narwhal Adoption • Search for local Narwhals • Buy Narwhal merchandise • Adopt a Narwhal
    • 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 design phase. ! We spent 70% of our time wireframing, 30% designing.
    • 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.
    • a presentation by Q&A
    • a presentation by May 21, 2014 Amber Vasquez @ambersiscoe & Thank you! linkedin.com/in/ambersiscoe