Best Practices For Creating Wireframes

There can be no doubt that once you reach the wireframing stage in your website design process that you have already made some tremendous steps to getting your page up and running. However, there are still plenty of things that you need to be able to present a new website that is highly marketable. Having a full understanding of the wireframing process can go a long way in improving your website and its design. Of course, the one thing you need to understand is that at the beginning of the wireframing process all of your ideas for your website are raw and unfiltered. Thus, what are some of the best practices for creating wireframes? Here are some ideas to consider:

Make Sure You Always Have Clear Expectations

If you are working with a team that is a bit “wet behind the ears” when it comes to this stage of web design, then it might be time to educate them on the wireframing process. Additionally, you need to educate a bit on the fidelity levels and help them understand which level you want them to be at. The key is not just to give them clear expectations but to also make sure that your feedback is productive as well.

Take a Serious Look at Your Device Support

When creating wireframes you not only should look at the free wireframe tools at your disposal, but you also should strongly keep in mind the system you are working with. Simply put, you should be aware of the dimensions of the system. Such things as optimizing mobile usability yet at the same time allowing for a highly functional system on the desktop is a good start. You should start by keeping the various sizes in mind: first of all, your desktop should be at the lowest size of 1024 x 768; you should have a tablet size of 768 x 1024, and your mobile should be sitting at 320 x 480.

Begin all of your designs in low fidelity.

Keep all of your wireframing endeavors totally barebones to start. You should do this to keep the focus on high level concepts because it will allow you to make faster iterations. Low fidelity has several components, including a Grayscale color palette consisting of black, dark gray, white and light gray; a Sparse and generic font with only a few variations; and a group of gray blocks that will represent all of the content such as the copy, images, charts and videos. One well-known example of this would be your Facebook page. If it was in low-fidelity, it would be all grayed out, and all of the blocks would simply appear totally white.

Design some solid navigation patterns.

The next step in the wireframing process would be to determine how a user is going to navigate throughout the product. This step can either help or hurt the UX of your product, thus it is important to do it correctly. Before you can move on to your higher wireframing tasks, you need to determine how many steps it takes the user to accomplish various tasks. Additionally, you should consider just when the user will need this information and how easy it would be to find it. Finally, you should have steps in place to allow the user to return to a previous state or screen.

If you follow these steps, you will be well on your way to having a solid wireframing process for all of your website design endeavors.

Leave a Reply