5 Things You Should Consider Before Wireframing
In this article, we have some of the crucial questions that should be asked at the early stage of your project and to smoothen your wireframing process.
Join the DZone community and get the full member experience.Join For Free
Here is the list of 5 things or decisions you should consider before starting a wireframe. These are the crucial questions that should be asked at the early stage of your project and it’ll smoothen your wireframing process.
1. Device Support
Usually, the stakeholders will tell you which devices to support, but sometimes you will realize that it will be cross-platform or responsive by studying the goals of the product. Or, you might have to select the best devices for the product.
The device examples are as follows:
- Desktop and mobile browsers
- Native mobile app platforms: Android, iOS, Windows
- Tablets and kiosks
- Smartwatches: Android Wear, Watch OS (iOS), WebOS, Band (Microsoft)
- Smart TVs: Android TV, Tizen OS (Samsung), Firefox OS (Panasonic), WebOS (LG)
- And much more.
Get confirmation on the devices expected to be supported.
Usually, you’ll get the list of devices to be supported at the beginning of the project but, sometimes you’ll find that responsive mobile wireframes are requested later in the process by the client. It happens; we have to be prepared for this from the very beginning. To prevent immense design reworking, make sure you have written approval from the client.
Always consider the context of use and match features accordingly.
Things are not similar when it’s being done on a mobile phone or a desktop browser. Evaluate your features and decide whether your users will get added value from the devices you have selected for the product. If you find that a feature is not matching the user’s goals on a specific device, either change it to be more device-specific or remove it completely for that particular device.
Keep in mind that design differs on multiple devices.
When you are planning to use a component on both desktop browsers and mobile devices, discuss these with your team and client:
- Will the layout be completely different or responsive?
- Will there be subsets or features that will be shared across all experiences?
- Which operating systems your product is going to support? For example, android and iOS apps have different design patterns.
Document each and every difference in layouts and features; it’ll help you to design them later in your wireframes easily.
Always consider the screen orientation for the handheld devices.
Designs can appear differently in portrait and landscape modes when being used on a mobile or a tablet.
By default, a landscape design will appear like the portrait version but with the width stretched out and less horizontal viewing space.
Consider the context of use, goals of the product, and make them exclusive to portrait or landscape mode. You can always lock screens to an orientation but; be careful before taking this decision because maybe you are forcing some users to change their usual behavior. Try to perform a usability test before finalizing the decision.
2. Scaling the Design
Layouts along with their UI elements scale in a range of ways depending on the changing window size. Below are the scaling patterns that we can adopt for our layouts:
- Fixed or static: Layout remains the same with a fixed width no matter what.
- Liquid or fluid: This layout shrinks or stretches per pixel; when the user changes the window size.
- Adaptive: Layout adapts different screen sizes by changing at certain breakpoints in the window’s width.
- Responsive: This type of scaling is a mix of fluid and adaptive behavior where it shrinks or stretches per pixel and changes the structure at certain breakpoints.
Discuss and finalize the layout with your team.
Since making adjustments for these layouts after starting the wireframe is time-consuming, you should discuss with your team of developers and visual designers for the best approach. Users expect both desktop and mobile versions of all the websites these days. Features can vary on those different screen sizes, though; they don’t always have to share the same.
Get yourself aligned with front-end developers.
Share your plans with the front-end developers and discuss all the breakpoints. They can guide you with the elements and layouts you are unsure of.
Be ready to design many sets of wireframes for responsiveness.
You need to design many sets of screens for responsive and adaptive layouts. Convey the same to your managers that you need extra time. Additional layouts usually require 60% of the total time you will spend on the initial layout.
3. Default Screen Size To Start
Before you start designing the wireframe, you should choose a default resolution/screen size for your product. This will set the expectations for your team; what they are going to design and develop. It’s time-consuming and painful for the UX designers to realize that they have started too large and then shrink it down by rearranging all the elements.
Start with a smaller screen resolution and gradually prepare for a large size.
You can start with 1024 × 768 pixels for desktop/tablet and 320 × 480 pixels for mobile, which are normally secure resolutions to work with. You may risk your time if you select anything larger.
Many UX designers start with a low resolution and then gradually scale up. It is sensible and makes the design look adequate when the window is larger.
You can also consider that many users do not maximize their browser window, resulting in a layout that is even smaller than usual.
Take the help of analytics to guide your decision.
Before the start, take a look at the analytics for screen resolutions being used among your target demographic. It can expose interesting inclination towards any particular screen size, which can help you make an informed decision. Share your research findings with the client and convince them to get written approval.
Know your target users and usage environment.
Although 1366 × 768 pixels is the most common resolution for the desktop, you have to think about other scenarios like the context of use as well. For example, 1024 × 768 pixels is still being used by the users who have an old computer and corporate environments where people are using ancient machines.
4. Level of Fidelity
Clear your confusion about the definitions of fidelity because it can mean different things to different people. Largely, there are 3 types of fidelity (low, high, and medium) and their definitions are as follows:
- Gives importance to layout and high-level interactions and concepts.
- UI elements and content can be represented as boxes or lines, with or without label descriptions.
- No color, grayscale.
- Can be a paper sketch.
- Highlight visual aesthetics and branding, such as tone, colors, graphics, and font style.
- Can include realistic images and actual copy.
- With realistic UI elements, and sometimes include aesthetic touches such as textures and shadows.
- Sometimes known as a mockup.
- Wireframes are in between low and high fidelity.
- More realistic UI elements without styling.
- Realistic copy and image placeholders.
- With some visual design (such as hierarchical typography).
- This level of fidelity uses a mixture of gray-scale values to convey visual heaviness, without actually using color.
Be acquainted with client’s expectations and delight your stakeholders.
Whichever fidelity you choose, make sure your team and stakeholders are aware of the same. Give examples to be sure that they have understood the level of fidelity. Many times I have seen that people are referring to medium-fidelity as low fidelity wireframes and their expectations are very high.
So, get a hold of your client’s expectations, discuss with them, and try to figure out what makes them happy. This will help you to determine which fidelity level you need to go with.
Without any doubt, medium-fidelity is always a secure bet, even though it takes a little more time. In case they are expecting something flashy, go with the high-fidelity option. One of the best practices is to start with a low fidelity one and gradually add elements to make them medium or high fidelity. It’ll get the approval quickly and save your precious time.
5. Grid Systems and Alignment
To give a polished and refined look to your wireframes use a grid system to align your UI elements through snap-to-grid features. This will make your wireframes look professional and will set you apart from the other designers. It will also help you to maintain consistency in the layout and balance the design’s hierarchy.
Learn the alignment and spacing features of the wireframing tools.
Make your wireframes pixel perfect by using the alignment and space distribution features. Use keyboard shortcuts, such as centering, space distribution, grouping, and ungrouping.
Strive for perfection but always keep the fact in mind that most real-world projects don’t have sufficient timelines; so outline your priorities, and use the guidelines that make sense.
Opinions expressed by DZone contributors are their own.