Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process.
-
Upload
harvey-cody-mosley -
Category
Documents
-
view
236 -
download
5
Transcript of Wireframing Basics - UX and the Design Process.
![Page 1: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/1.jpg)
Wireframing Basics- UX and the Design Process
![Page 2: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/2.jpg)
![Page 3: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/3.jpg)
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
![Page 4: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/4.jpg)
Wireframes are blueprints for a site or app
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
![Page 5: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/5.jpg)
#1 - They force you and your client to think about the basic interactions your user will have with your product
![Page 6: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/6.jpg)
#2 - Easier to design with a wireframe in hand
![Page 7: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/7.jpg)
#3 - You will save time by getting client sign off on wireframes before the design stage.
VS.
![Page 8: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/8.jpg)
#4 - Once there is sign off on wireframes the developers can start - without waiting for your design
![Page 9: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/9.jpg)
Version #2
Version #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
![Page 10: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/10.jpg)
An amazing analogy!
Think of your website or app like a house:
• 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
![Page 11: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/11.jpg)
Your first wireframe- Let’s get started!
![Page 12: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/12.jpg)
What kind of wireframe do YOU need?Some questions to ask before you begin:
• 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?
![Page 13: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/13.jpg)
Different strokes for different folks.
Low Fidelity
High Fidelity
![Page 14: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/14.jpg)
What program should you use?Pick your poison:
• Paper sketches
• Illustrator
• Photoshop
• Keynote or Powerpoint
• InDesign
• Fireworks
• Balsamiq
• Omnigraffle
![Page 15: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/15.jpg)
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!
![Page 16: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/16.jpg)
Pattern Tap - great for fast sorting of types
![Page 17: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/17.jpg)
pttrns - great for iOS patterns
![Page 18: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/18.jpg)
Different projects require different workflows
Sketch > Wireframe > Visual Design
>Code
Wireframe > Hi-Def Wireframe > Visual Design> Code
Wireframe > Interactive Prototype > Visual
Design > Code Sketch > Wireframe >
Hi-Def Wireframe > Visual Design > Code
Sketch >Code
![Page 19: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/19.jpg)
Let’s build a wireframe!
![Page 20: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/20.jpg)
The basics - the frame of the house
![Page 21: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/21.jpg)
Symbol libraries are your friend
![Page 22: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/22.jpg)
Build your wireframes on a 12 grid format - this will
make the transition easier from wireframes to design
to code.
Juicy Tidbit!
![Page 23: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/23.jpg)
It needs to accomplish 3 things:
• Search for local Narwhals
• Buy Narwhal merchandise
• Adopt a Narwhal
Wireframe a site for Narwhal Adoption
![Page 24: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/24.jpg)
Wireframing in the Wild
![Page 25: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/25.jpg)
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.
![Page 26: Wireframing Basics - UX and the Design Process.](https://reader035.fdocuments.net/reader035/viewer/2022062309/5697c02c1a28abf838cd93ef/html5/thumbnails/26.jpg)
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.