Wireframes
Give a basic structure to the product, focusing more on content, structure, and functionality.
Wireframes are the bare bones of your future design. They help in communicating the content, structure, and functionality of the design elements in the entire system. Wireframes primarily focus on the functionality, behaviour, and priority of the content.
Wireframes help to explore and communicate the concepts that came out of sketch ideation effectively. You may be wondering “Why can’t we directly do visuals after sketching?” and “Why do we need wireframes in between?”. Here is the reason:
Wireframes focus more on functionality, structure, and behaviour than product branding, look and feel, etc. This allows the stakeholders (and other team members) to provide feedback before the content, structure, and functionality earlier in the design process.
On the other hand, sketches focus more on forming the idea of how to solve the problem. Once there is an idea/concept of how to solve the problem, it’s important to see how the idea plays out on the user interface. That’s where wireframes come into play by letting the designer think about:
- How an individual screen looks with the content;
- What elements exist on individual screens; and
- How different elements should interact with a user.
Free & Discounted Udemy Courses — Explore Now
Let’s learn how to do the wireframes:
Step 1: Decide on a Wireframing tool.
It’s important to choose a Wireframing tool that requires less effort to create wireframes and concentrate more on every small detail on the screen.
Step 2: Setup the appropriate Grid System.
Start the Wireframes by setting the grids. The grid system chosen should be based on the content density and the ratios of the sections by referring to the sketches you made.
Grids act as the outlines that create the base structure for the design. They help to arrange elements such as text, design patterns, icons, etc. and manage the proportions between UI elements, such as spacing and margins.
Step 3: Define & Create Components.
Design components are the interactive building blocks of the interface. Once the grid is set up, refer to the sketches and analyze the functionality and intent of the design. Based on that understanding, choose the appropriate Design Patterns which will help you solve the problem more effectively by using the real estate on the screen efficiently. Some of the components are as follows:
- Inputs: Checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date fields, etc.
- Navigational Components: Breadcrumb, slider, search field, pagination, tabs, slider, tags, icons.
- Informational Components: Icons, modal windows, progress bar, notifications, message boxes, tooltips.
- Containers: Accordion, Data Tables, etc.
Take an example of design components that use less real estate on the screen:
Suppose you have to use a design component in your screen that shows multiple (too many) options available and the user can select only one option from the given list. For that purpose, you can use two types of components;
- Radio Button
- Dropdown
In the case of real estate constraints on the screen, you can go with dropdown as it takes less space when compared to radio buttons as shown below.
Step 4: Arrange elements & Create states.
Once the components are ready, refer to the sketches, place them on the screen, and align them properly according to the grid defined. Alignments & Spacing play a major role here as they ensure that proper hierarchy and relatability have been communicated to provide a united and harmonic appearance. The hierarchy between the components can be achieved by properly grouping and sectioning the data.
Thereafter, arrange all the screens according to the scenario and the workflow. Then think about different states for each component that take you from one step of the scenario to the next as documented in your workflows.
In general, there are nine states in design that apply to the screens & design components. The states are:
- Nothing — The initial state of the element when the user sees it for the first time. The element exists but is not yet activated/started.
The image above shows the nothing state of a Documents List for a new user.
2. Loading — The state where there is a content loading and the user has to wait until it is populated.
The loading state of LinkedIn is shown in the image above.
3. None — The state where there is an element but no data. No items are available at that time, e.g. No search results.
The None state for search is shown above.
4. One — In this state, you have only one item available, e.g. having only one item on the whole list.
The image above shows a Google Drive with only one folder in it.
5. Some — This state is usually what we think about while designing the component. Your component is loaded with data, you have inputs, and the user is familiar with it.
A table with some rows is shown in the example above
6. Too Many — Having too many results/ information in the same component, e.g. Too many search results (You might use pagination for it).
The example above has too many rows in the table such that it uses pagination to accommodate all in less real estate.
7. Incorrect — Error state, such that something is wrong with the component and an error occurred.
An incorrect state of the card number is shown in the payment portal screen above.
8. Correct — The right information the component needs are added and it’s now good to proceed.
A correct state of the input field is shown in the image above.
9. Done — Success state showing that the application received what it needs and users don’t have to worry about it anymore.
The success state of the invitation sent is shown in the example above.
Step 5: Create Interactive Prototype.
As presented earlier, prototypes can be created for rough sketches too. But the interactive prototype for the wireframes helps to accurately test most of the interactive elements. A well-designed prototype acts as a mockup or demo for the actual website when it goes live. The interactive prototype reveals how each element in the screen functions when the user interacts with it. Every interaction will have:
- Trigger (An action that a user needs to perform to start an interaction) — Click, Double Click, Mouse Hover, Swipe left/right/up/down, etc.
- Action (The result that is shown after the interaction is triggered) — Go to page, Hide, Show, Toggle, etc.
- Feedback (The UI’s response to the user’s interaction).
Create interactive prototypes by providing necessary interactions between the screens and within different components of the screens. At this point, take note of consistency in both elements and their functionality, i.e similar elements should have similar behaviors defined across the application as consistency plays a major role in usability.
Step 6: Document All Interactions.
Make sure all interactions are properly documented in a way that is easy for others to understand. This documentation will be useful when handing off or presenting to various stakeholders, including product managers and engineers.
For example, an interaction for an Action button can be documented as -Intent: Document when the user will click the button and where he will go after clicking it, e.g. the user will click the button after entering the login credentials and go to the dashboard.
Trigger: Document what triggers are given to the button, e.g.
- On hover — Color change (background and text change);
- On click — Go to the next page (2.0 Dashboard).
An Example
Tips / Best Practices
- Pick the right Wireframing tool that works best for you and your team. We recommend Figma as it satisfies most of the wireframing needs intuitively.
- Always define the grids before starting the components and screens.
- Be aware of common design conventions and patterns.
- Maintain a component library and reuse them whenever necessary.
- Start designing unique screens first so that you can reuse them for sub-screens.
- Add realistic content on the screen. Avoid putting Lorem Ipsum (dummy text) as the content is an important element to discuss and finalize early.
- Cross-check the workflow description, sketch concepts, and the problems defined to make sure every feature is built.
- Name and order your screens as defined in the workflows.
- Provide relevant interactions on the screen according to the scenario.
- Check all the screens against the heuristic principles to avoid common usability issues.
- Have discussions with stakeholders focusing more on structure, functionality, and content.
Checklist
- Define the grid to use consistently across the application.
- Create elements for each screen.
- Create all the necessary states for each screen.
- Create an interactive prototype according to the scenarios.
- Document the interaction notes for all the elements.
- Review the problems whether they are solved and the screen is meeting the end goal.
- Check whether the wireframes are consistent and aligned to the workflows defined.
- Take peer reviews from more than two (2) people to make sure all the interactions are working.
- Have discussions with stakeholders focusing more on structure, functionality, and content.
Related Topics
Quick Question
The image below represents the “No results” state of a search result page. Select other states that may be applicable when designing this page.
- ‘Some’ State.
- Too many results.
- One State.
- Zero results.
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
