What are wireframes?
Before reading the rest of this blog post, I think it’d be best to explain what wireframes are.
Wireframes serve as a skeleton in the form of images that display the functional elements of an app or website. The designs take a creative effort to conceptualize the product and put it into a digestible form. Wireframes do the job of addressing key components such as: navigation, user interface, and experience.
Here are examples of wireframes:
Value of wireframes
Wireframes provide an overall site map to get a visual representation of all the components and the interconnectivity of the system as a whole. This is important for the user to utilize the application with no pain points or dead ends.
From a client standpoint, before you spend the larger portion of your investment on design and development, wireframes let you know exactly how your product is going to be built. One would never build a house without the blueprint, the same should go for software.
The following tips are great for product managers and UX designers putting wireframes together in order to come up with great concepts that will one day be a live product. If you are the person behind the business, these are also great tips to look out for when in the wireframe phase.
Put yourself in a user’s shoes
The goal of a UX designer is to get the user to take a desired action with the least confusion possible. Driving the user’s desired action should be seamless even your grandmother can use it!
Do industry research
There are two things that you should look out for when doing research. Trends and competitors.
When it comes to industry research, it’s always great to look out for trends in the hottest products. Be aware of trends users are familiarizing themselves with. There are always ways to improve on trends and take the best bits and pieces of the best products.
Additionally, research always involves seeing what your competitors are doing. What are competitors not doing that you can capitalize on? It’s the Product Manager’s job to understand what other businesses are doing and how to separate those looking to make a dent in a market.
Keep it minimal
Remember these are not designs. Don’t confuse a client by allowing him to make design decisions rather than UX ones. This means to stay away from using images, colors, fonts, and custom icons.
Once you start putting concepts together, trim and consolidate as many areas as possible. Make sure the user doesn’t have too many options to distract them from the desired goal.
Also, keep copy minimal. People tend to read only headlines and small sections of text. You are only going to see a user in a matter of a few seconds so make a good impression with your value prop in as letter words as possible. I wouldn’t be surprised if many of you that opened this post just read the titles on the page and missed out on this sentence.
Keep the client, design, and development involved early
Other than the product manager, there should be an additional 3 parties involved in the wireframe process: The client, the designer, and developer.
Make sure everyone is on the same page. Some things may not be feasible from a design, development, or business standpoint so having all parties give feedback and approve the wireframe are key.
This is an iterative process which means there is a lot of hammering out to be done to get the level of approval.
…
Key points I would take away from this blog post would be to put as much value and attention into the wireframe process. People tend to rush getting a product to market without taking the proper steps to getting there. By properly constructing wireframes, your business will thank you for not having to create a “Frankenstein” product by not adding or removing things that could have been thought of beforehand.
