Wireframing is a quick and effective way to identify usability issues early on in your design process. If you are a web designer, I am sure you are familiar with wireframing and if you are a user experience (UX) designer, You probably spend a large percentage of your time creating wireframes either by hand with paper and pencil or using a digital tool like Adobe XD.
This Post is for those of you who have heard the term and would like to learn more about why wireframes should play an important role in your design process.
what is wireframe?
I like thinking about a wireframe like a skeleton of the page. This skeleton is a two-dimensional depiction of a page’s interface that shows the spacing of elements on the page, how content is prioritized, what functionalities are available, and how users will interact with the site. Wireframes are intentionally void of color, graphics and stylized fonts.
If we don’t have a strong skeleton to start, then all the stuff we put on top of it, like the functionalities or style, really don’t stand a chance.
Think about the process of building a new house. If you focus all your energy on the interior design, like the colors of the walls and the fabric for the couches, rather than the blueprint of the structure of the house, do you think it will serve its purpose? Probably not. Starting with the interior design, rather than the foundational structure of the home, is counterintuitive.’
What should not be included in a wireframe?
It is really important to keep your wireframes simple. This is because the point of wireframing, as stated above, is to show how elements are laid out on the page and how the site navigation should work. Too many colors or images can distract the reader from focusing on the layout and navigational elements. Make sure to eliminate or reduce the use of color, images, graphics, and stylized fonts to achieve your goal of depicting a simple visual representation of the skeleton.
- Keep your colors to grays, whites, and blacks.
- Use a generic font. This helps prevent the user from being distracted by the style of the typography. Showing the hierarchy of information through font is still important, though, and can be shown through simply changing the size of the font and whether it is “regular,” “italic,” or “bold.”
- Avoid highly stylized graphics and images. Instead, I suggest using rectangles and squares as placeholders, adding an “x” through the middle of the box to show where the image will be placed. You can also do the same thing to show where videos will be positioned with a triangle as a play button at the center of the box.
Wireframes push usability to the forefront and using them is a strong way to illustrate the layout of pages and the functionality of the elements on the page.
Using wireframes early on in the design process forces you and your clients to look objectively at ease of use, conversion paths, element placement and helps point out flaws early. These are all things that lead to intuitive, functional and delightful products.