Get Started. It's Free
or sign up with your email address
Wireframe by Mind Map: Wireframe

1. A Practical Look

1.1. A Practical Look

1.1.1. Who Uses Wireframes? Anyone involved in the product – in any capacity. designers developers product managers

1.1.2. Why Should Anyone Use Wireframes? Following details Wireframes are the “blueprint for design.” Structure – How will the pieces of this site be put together? Content – What will be displayed on the site? Informational hierarchy – How is this information organized and displayed? Functionality – How will this interface work? Behavior – How does it interact with the user? And how does it behave?

1.1.3. Why Should I Use Wireframes? Interaction & UX Designers and Information Architects Use wireframes to show user flows between views or pages. Graphic Designers Use wireframes to push the user interface (UI) development process Developers Use wireframes to get a more tangible grasp of the site’s functionality. Business Analysts Use wireframes to visually support the business rules and interaction requirements for a screen. Internal Business Stakeholders (ex: Product Managers, Project Managers and Executives) Review wireframes to ensure that requirements and objectives are met through the design. External Business Stakeholders (ex: Partners and Clients) 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.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 Layout 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 Actual copy The copy length Ideal font Sizing Weights

3.4. High-Fidelity Color

3.4.1. Level of detail Very specific background Button Text Other colors

3.5. High-Fidelity Media

3.5.1. Level of detail Picture Video Thumbnail Avatar 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 Pop-up windows Expanding Zooming in on content Broadly showing swiping Scrolling Tapping 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 Speed Flexibility Limited Distractions Focus on the product structure Content Information hierarchy Behavior

5.1.2. Cons Duplicate Work Low-Fidelity Non-Interactive No Version Control Limited Collaboration No Standardization Ugly

5.2. Black & White-boarding

5.2.1. Pros Similar to sketching Scale Prominence

5.2.2. Cons Similar to sketching Fixed Orientation Limited Details

5.3. Paper Cutouts

5.3.1. Pros Fidelity Standardization Interactivity

5.3.2. Cons Similar to sketching or digital wireframing Speed

5.4. Stenciling

5.4.1. Pros Similar to Sketching Speed Standardization Structure Cleaner

5.4.2. Cons Similar to Sketching Element Constraints Outdated Elements Focus on a Tool Multiple Styles

6. 4 digital wire-framing weapons

6.1. Word Processing Software

6.1.1. Pros Familiarity

6.1.2. Cons Basic Elements Difficult to Layout

6.2. Graphics Editing Software

6.2.1. Pros Familiarity Wireframing Element Libraries Fidelity

6.2.2. Cons Feature Bloat Non-Stock Element Libraries No Collaboration No Presentation No Flowcharting or User Flows Non-Interactive

6.3. Presentation Software

6.3.1. Pros Familiarity Wireframing Element Libraries User Flows Interactivity

6.3.2. Cons Non-Stock Element Libraries Limited Collaboration Limited Flow Charting & User Flows Limited Interactivity

6.4. Wireframing and Prototyping Software

6.4.1. Pros Built for Wireframing Speed Element Libraries Advanced Flowcharting & User Flows Advanced Interactions Collaboration Presentation

6.4.2. Cons Lack of Familiarity Limited Functionality 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. What is needed for your product to function well? How much can you take away from it without sacrificing the core product? Why will people be excited about it?

7.5. Start simple, stay simple

7.6. Everything has a meaning

7.7. Be consistent, not uniform

7.8. Low-fidelity doesn’t mean unrealistic

7.9. Experiment & collaborate quickly

7.10. Your designs will get built

7.11. Shipped is better than perfect