You are currently viewing How to create wireframes in 5 steps
Photo by on

How to create wireframes in 5 steps

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-

  1. Content Hierarchy
  2. Major features and functionalities
  3. Navigation

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-

  1. You can edit your wireframes again and again without messing it up.
  2. It looks presentable when you need to show the wireframes to client.
  3. Tools provide you features with which you can build wireframes within minutes.

Few good tools are

  • Balsamiq
  • InDesign
  • Photoshop
  • Adobe XD
  • Pencil Project
  • UXPin

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!

This Post Has 9 Comments

  1. Yi Thibideau

    Hi, i feel that i noticed you visited my site thus i came to go back the choose?.I’m trying to to find things to improve my site!I guess its ok to make use of some of your concepts!!|

    1. Ritika Singh

      Sure as long as you’re providing credits 😉

  2. Loyd Sween

    Howdy, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam feedback? If so how do you prevent it, any plugin or anything you can advise? I get so much lately it’s driving me crazy so any assistance is very much appreciated.|

  3. Why viewers still make use of to read news papers when in this technological globe the whole thing is presented on net?|

  4. Tiffiny Lacsamana

    Wonderful site. Plenty of useful info here. I am sending it to a few pals ans additionally sharing in delicious. And certainly, thank you to your effort!|

  5. Emerson Fan

    Hi would you mind letting me know which webhost you’re utilizing? I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot faster then most. Can you suggest a good hosting provider at a reasonable price? Thank you, I appreciate it!|

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.