Wireframes are the low-fidelity prototypes of a product which are build by UX designers before they proceed for the high-fidelity prototype. In this article, we are going to help you create a wireframe step-by-step. There are no strict rules for making wireframes.
If you are new to wireframing and facing difficulty, you can follow these steps till you develop your own wireframing style.
1) Revisit Research and Strategy
Before starting with the wireframes, you would have already done the user and market research for your product. You should know who your target audience is going to be and what will be their requirements. Also, keep a check on the market trends and your competitors.
You would also have made sitemaps or flow diagrams which strategize the page hierarchy and navigation of your product. Know more about these steps ->
For moving on to wireframe, you should recollect the following important information-
- Content Hierarchy
- Major features and functionalities
2) Choose your tool
Wireframing is so flexible that you can even begin it with paper and pencil. But as you proceed, it is more convenient to use a tool. The advantages of using a tool are-
- You can edit your wireframes again and again without messing it up.
- It looks presentable when you need to show the wireframes to client.
- Tools provide you features with which you can build wireframes within minutes.
Few good tools are
- Adobe XD
- Pencil Project
You can do your research and choose the tool which suits your needs the best.
3) Prioritize navigation
We are taking navigation first, as it needs to be crystal clear. If you have great content but the navigation is poor, it is going to affect the usability of the product. You must already have decided the major navigation during sitemapping of your product. Now, you need to decide which navigation element is content specific and which is common.
The common elements are going to get repeated across pages. You can place the common elements like menus, scroll bars, breadcrumbs, etc.
Content specific elements include CTA buttons, links, etc. If possible, you can place them right away. If not, you should plan about their placement in advance and put them while filling in content later.
4) Divide into broad sections
In this step we are going to define the sections or frames in which we will place the content later. You can think of a section as a box with a heading or any sign to remind us of what it represents. Here, we are just drawing the outlines which can be removed later. Divide all the content you are going to have on the page into a few sections.
Each section should have related content or should consist of similar functionality. For example-
If you have an image, a description and CTA buttons for that image, you can make one section for it.
Place the sections on the page according to their importance or functionalities.
5) Fill in the sections
You can now start filling your sections one-by-one. You really don’t have to put the actual content which you are going to have in the final product. Put the major headings to clarify hierarchy.
For regular text you can draw empty lines. For media you can put a crossed box. You can make your own rules or styles but make sure it is understandable.
I would suggest to write relatable text on the CTA buttons. Remember that right now you don’t have to worry about the typography, colors or aesthetics. We are only concerned about how the content will be placed and how the tasks will be achieved.
Your wireframes are ready after you have completed all these steps. You can go ahead and share it with others. Get their feedbacks and make changes if required.
You must have now got a decent idea about making wireframes. After your wireframes are finalized, you need to design the mockups for your product. After mockups, you need to do the prototyping. These design steps are iterative so you keep going back and forth. But everything is worth when it comes to design a good product!