Here is a list of five things or decisions to consider before starting a wire frame. These are important questions that should be asked at the beginning of a project and will smooth your wire frame process.
1. Hardware support
Usually, stakeholders tell you what devices are supported, but sometimes you find that it’s cross-cutting or responsive by researching product goals. Or you may have to choose the best equipment for your product.
Examples of devices are as follows:
- Desktops and mobile browsers
- Original mobile application 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 for devices that are expected to be supported.
Usually you get a list of supported devices at the beginning of the project, but sometimes you find that the customer asks for responsive mobile wire frames later in the process. It’s happening; we need to be prepared for it from the beginning. Make sure you have the written approval of the client so that the design cannot be modified enormously.
Always consider the user connection and adjust the features accordingly.
Things are not the same when done with a mobile phone or desktop browser. Evaluate your features and decide if users will add value to the products from the devices you choose. If you find that a feature does not meet the user’s goals on a particular device, change it to more device-specific or delete it completely for that device.
Keep in mind that the design differs across devices.
When you plan to use the component in both desktop browsers and mobile devices, discuss these with your team and your customer:
- Is the look completely different or responsive?
- Are there subsets or features that are shared for all experiences?
- What operating systems does your product support? For example, Android and iOS apps have different design patterns.
Document any differences in layout and features; it will help you to design them later easily in your wire frames.
Always pay attention to the screen orientation of portable devices.
Models may appear differently vertically and horizontally when used on a mobile phone or tablet.
By default, the horizontal design looks like a portrait version, but the width is stretched and the landscape is horizontal.
Consider the product’s operating environment, product goals, and make them exclusive to portrait or landscape mode. You can always lock the screens in that direction, however; be careful before making this decision, as you may be forcing some users to change their normal behavior. Try to perform a usability test before finalizing the decision.
2. Design scaling
Layouts and their interface elements scale in several ways depending on the changing window size. Below are the scaling templates we can apply to our layouts:
- Fixed or static: The layout remains the same at a fixed width regardless.
- Liquid or liquid: This layout shrinks or stretches per pixel; when the user resizes the window.
- Adaptable: The layout adjusts to different screen sizes by changing certain cutouts across the width of the window.
- Reactive: This type of scaling is a mixture of smooth and adaptive behavior in which it shrinks or stretches per pixel and changes structure at certain cut points.
Discuss and finalize the layout with your team.
Because making adjustments to these layouts after starting a thread frame is time consuming, you should talk to developers and visual designers for the best approach. Users today expect both desktop and mobile versions of all websites. However, the features may vary in different screen sizes; they don’t always have to share the same.
Get yourself in line with front-end developers.
Share plans with UI developers and discuss any breakpoints. They can guide you with elements and layouts you aren’t sure about.
Be prepared to design many sets of wire frames for responsiveness.
You need to design multiple monitors for responsive and adaptive layouts. Convey the same to your supervisors that you need extra time. Additional layouts usually require 60% of the total time you spend on the original layout.
3. The default screen size starts
Before you start designing a wire frame, you need to choose the default resolution / screen size for your product. This sets expectations for your team; what they plan to design and develop. It is time consuming and painful for UX designers to realize that they have started too big, and then shrink it down by rearranging all the elements.
Start with a lower screen resolution and gradually prepare for large size.
You can start with 1024 × 768 pixels for your desktop / tablet and 320 × 480 pixels for mobile devices, which are usually safe resolutions when you work. You can risk time if you choose something bigger.
Many UX designers start with low resolution and then gradually expand. It makes sense and makes the design suitable when the window is larger.
You may also think that many users do not maximize their browser window, resulting in an even smaller layout.
Use analytics to guide your decision.
Before you begin, familiarize yourself with the analysis of the screen resolutions used in your target audience. It can reveal an interesting tendency to any particular screen size, which can help you make an informed decision. Distribute your research findings to the client and reassure them of getting written approval.
Get to know the target users and the operating environment.
Although the most common desktop resolution is 1366 × 768 pixels, other scenarios, such as the operating environment, must also be considered. For example, 1024 × 768 pixels are still used by users with an old computer and business environments where people use ancient machines.
4. Level of loyalty
Clear your confusion about definitions of loyalty because it can mean different things to different people. For the most part, there are 3 types of loyalty (low, high, and medium) and their definitions are as follows:
- Gives meaning to layout and high-level interactions and concepts.
- The elements and contents of the user interface can be presented as boxes or lines, with or without label descriptions.
- No color, grayscale.
- May be a draft paper.
- Emphasize visual aesthetics and branding such as hue, colors, graphics, and font style.
- May contain realistic images and actual copy.
- With realistic UI elements, and sometimes they contain aesthetic details like textures and shadows.
- Sometimes known as a model.
- The wire frames are between low and high precision.
- More realistic user interface elements without design.
- Realistic copy and image placeholders.
- Some visual plans (such as hierarchical typography).
- This level of loyalty uses a mixture of grayscale values to convey visual pregnancy without the use of color.
Get to know the customer’s expectations and delight your stakeholders.
To choose any loyalty, make sure your team and stakeholders are aware of the same. Give examples to make sure they understand the level of loyalty. Many times I have seen people refer to medium loyalty as low precision wire frames and their expectations are very high.
So consider your customer’s expectations, talk to them, and try to figure out what makes them happy. This will help you determine what level of loyalty you need to go for.
Medium loyalty is undoubtedly always a sure bet, even if it takes a little more time. If they are expecting something flashy, choose a high quality option. One of the best practices is to start with low loyalty and gradually add elements to become medium to high. It gets approved quickly and saves valuable time.
5. Lattice systems and alignment
To give your polished frames a polished and sophisticated look, use the grid system to align the elements of the interface with the click grid properties. This will make your wire frames look professional and set you apart from other designers. It also helps maintain consistency of layout and balance the design hierarchy.
Learn the alignment and transmission properties of wire frame tools.
Make wire frames a pixel perfect with alignment and space sharing features. Use keyboard shortcuts such as center, space sharing, grouping, and ungrouping.
Strive for perfection, but always keep in mind that most real-life projects don’t have enough schedules; so Outline your priorities and use sensible guidelines.