1. A Practical Look
1.1. A Practical Look
1.1.1. Who Uses Wireframes?
1.1.1.1. Anyone involved in the product – in any capacity.
1.1.1.1.1. designers
1.1.1.1.2. developers
1.1.1.1.3. product managers
1.1.2. Why Should Anyone Use Wireframes?
1.1.2.1. Following details
1.1.2.1.1. Wireframes are the “blueprint for design.”
1.1.2.1.2. Structure – How will the pieces of this site be put together?
1.1.2.1.3. Content – What will be displayed on the site?
1.1.2.1.4. Informational hierarchy – How is this information organized and displayed?
1.1.2.1.5. Functionality – How will this interface work?
1.1.2.1.6. Behavior – How does it interact with the user? And how does it behave?
1.1.3. Why Should I Use Wireframes?
1.1.3.1. Interaction & UX Designers and Information Architects
1.1.3.1.1. Use wireframes to show user flows between views or pages.
1.1.3.2. Graphic Designers
1.1.3.2.1. Use wireframes to push the user interface (UI) development process
1.1.3.3. Developers
1.1.3.3.1. Use wireframes to get a more tangible grasp of the site’s functionality.
1.1.3.4. Business Analysts
1.1.3.4.1. Use wireframes to visually support the business rules and interaction requirements for a screen.
1.1.3.5. Internal Business Stakeholders (ex: Product Managers, Project Managers and Executives)
1.1.3.5.1. Review wireframes to ensure that requirements and objectives are met through the design.
1.1.3.6. External Business Stakeholders (ex: Partners and Clients)
1.1.3.6.1. Review wireframes to ensure that requirements and objectives are met through the design
2. Tools & Medium
2.1. Sketching
2.1.1. Pens
2.1.2. Pencils
2.1.3. Markers
2.1.4. Crayons
2.1.5. Paper app
2.2. Paper Cutouts
2.3. Stenciling
2.4. Wireframing Software
2.4.1. UXPin
2.4.2. Balsamiq
2.4.3. Axure
2.4.4. Proto.io
2.5. Graphic Design Software
2.5.1. Adobe Illustrator
2.5.2. Photoshop
2.5.3. Sketch
2.5.4. Adobe XD
2.5.5. Figma
2.6. Presentation Software
2.6.1. PowerPoint
2.6.2. Keynote
3. Fidelity Levels
3.1. Block Diagrams
3.1.1. Layout
3.1.2. Type of content
3.2. “Grey Boxes”
3.2.1. Use the full grayscale spectrum to emphasize
3.2.1.1. Layout
3.2.1.2. Particular element
3.3. High-Fidelity Text
3.3.1. High-Fidelity Text is one of several ways you can make a wireframe more realistic without going too granular into the graphical details
3.3.2. Level of detail
3.3.2.1. Actual copy
3.3.2.2. The copy length
3.3.2.3. Ideal font
3.3.2.4. Sizing
3.3.2.5. Weights
3.4. High-Fidelity Color
3.4.1. Level of detail
3.4.1.1. Very specific background
3.4.1.2. Button
3.4.1.3. Text
3.4.1.4. Other colors
3.5. High-Fidelity Media
3.5.1. Level of detail
3.5.1.1. Picture
3.5.1.2. Video
3.5.1.3. Thumbnail
3.5.1.4. Avatar
3.5.1.5. Background image
3.6. High-Fidelity Interactions
3.6.1. This type of wireframe is more about visually showing interactions on a static wireframe
3.6.2. Level of detail
3.6.2.1. Pop-up windows
3.6.2.2. Expanding
3.6.2.3. Zooming in on content
3.6.2.4. Broadly showing swiping
3.6.2.5. Scrolling
3.6.2.6. Tapping
3.6.2.7. Clicking interactions
4. Type
4.1. Basic Wireframes
4.2. Annotated Wireframes
4.2.1. Functionality: clicks, taps, swipes, zoom, pop-ups, data inputs and outputs, etc.
4.2.2. Content: text, fonts, layout, sizing, linking, graphics, multimedia, dimensions, resolution, etc.
4.2.3. Behavior: animation styles, speed, and positioning, interactions, link destinations, etc.
4.2.4. Key constraints: hardware, software, browser, data, etc.
4.3. Wireframes With User Flows
4.4. Interactive & “Click-through”
5. 4 non-digital wire-framing weapons
5.1. Sketching
5.1.1. Pros
5.1.1.1. Speed
5.1.1.2. Flexibility
5.1.1.3. Limited Distractions
5.1.1.3.1. Focus on the product structure
5.1.1.3.2. Content
5.1.1.3.3. Information hierarchy
5.1.1.3.4. Behavior
5.1.2. Cons
5.1.2.1. Duplicate Work
5.1.2.2. Low-Fidelity
5.1.2.3. Non-Interactive
5.1.2.4. No Version Control
5.1.2.5. Limited Collaboration
5.1.2.6. No Standardization
5.1.2.7. Ugly
5.2. Black & White-boarding
5.2.1. Pros
5.2.1.1. Similar to sketching
5.2.1.2. Scale
5.2.1.3. Prominence
5.2.2. Cons
5.2.2.1. Similar to sketching
5.2.2.2. Fixed Orientation
5.2.2.3. Limited Details
5.3. Paper Cutouts
5.3.1. Pros
5.3.1.1. Fidelity
5.3.1.2. Standardization
5.3.1.3. Interactivity
5.3.2. Cons
5.3.2.1. Similar to sketching or digital wireframing
5.3.2.2. Speed
5.4. Stenciling
5.4.1. Pros
5.4.1.1. Similar to Sketching
5.4.1.2. Speed
5.4.1.3. Standardization
5.4.1.4. Structure
5.4.1.5. Cleaner
5.4.2. Cons
5.4.2.1. Similar to Sketching
5.4.2.2. Element Constraints
5.4.2.3. Outdated Elements
5.4.2.4. Focus on a Tool
5.4.2.5. Multiple Styles
6. 4 digital wire-framing weapons
6.1. Word Processing Software
6.1.1. Pros
6.1.1.1. Familiarity
6.1.2. Cons
6.1.2.1. Basic Elements
6.1.2.2. Difficult to Layout
6.2. Graphics Editing Software
6.2.1. Pros
6.2.1.1. Familiarity
6.2.1.2. Wireframing Element Libraries
6.2.1.3. Fidelity
6.2.2. Cons
6.2.2.1. Feature Bloat
6.2.2.2. Non-Stock Element Libraries
6.2.2.3. No Collaboration
6.2.2.4. No Presentation
6.2.2.5. No Flowcharting or User Flows
6.2.2.6. Non-Interactive
6.3. Presentation Software
6.3.1. Pros
6.3.1.1. Familiarity
6.3.1.2. Wireframing Element Libraries
6.3.1.3. User Flows
6.3.1.4. Interactivity
6.3.2. Cons
6.3.2.1. Non-Stock Element Libraries
6.3.2.2. Limited Collaboration
6.3.2.3. Limited Flow Charting & User Flows
6.3.2.4. Limited Interactivity
6.4. Wireframing and Prototyping Software
6.4.1. Pros
6.4.1.1. Built for Wireframing
6.4.1.2. Speed
6.4.1.3. Element Libraries
6.4.1.4. Advanced Flowcharting & User Flows
6.4.1.5. Advanced Interactions
6.4.1.6. Collaboration
6.4.1.7. Presentation
6.4.2. Cons
6.4.2.1. Lack of Familiarity
6.4.2.2. Limited Functionality
6.4.2.3. Limited Fidelity
7. Design principles for wireframing
7.1. Plan a little – do the rest
7.1.1. Who are the core users?
7.1.2. What are the user needs and goals?
7.1.3. What are the business needs and goals?
7.1.4. What existing product or design patterns work for your users and business?
7.1.5. What are the gaps in what’s currently out there?
7.1.6. What are some product requirements you have given your users needs and goals
7.1.7. What are some product requirements you have given your users needs and goals as well as those of your business?
7.1.8. What are your constraints (i.e. time, resources, money, skills)?
7.2. Set expectations – not just goals
7.3. Start with users – and their needs
7.4. Think how, not what
7.4.1. Your product isn’t just a bunch of features – so stop focusing on them.
7.4.1.1. What is needed for your product to function well?
7.4.1.2. How much can you take away from it without sacrificing the core product?
7.4.1.3. Why will people be excited about it?