Things You Need to Do Before You Start Wireframing

Things You Need to Do Before You Start Wireframing

First idea - Collect the information

Even before you start the design process itself, you can do a lot for future website success. First of all, you need to collect information that includes:

  • Design pattern requirements
  • Content requirements
  • Technical requirements
  • Business requirements (user stories)
  • User insight (e.g. mental models, personas etc.)


Second idea - Arrange the information

The best way to start wireframing is to put your information in groups in which it will be used. Think about this as about shelves in the real store. For example, page in the online music store that is dedicated to the some band or artist would include different elements and information about them: quotes, tours photos, etc. On this stage, a great idea is also to think about prioritization of the information. Make a decision, which elements of the design are more or less important for the user. This will help you build a hierarchy of them in the future and to put them in the correct position on the web page.


Third idea - Be sure that everyone understand what you are creating

Before you start wireframing, check if you understand who your audience is and what are their main needs. In the design process, a few people are involved. Be sure that they can provide clear answers for the next questions:

  1. Stakeholders – how it could help them to achieve their business goals?
  2. Designers – what elements must be on the page?
  3. Copywriters – what need to be written?
  4. Developers – how should this web site be built in the best way?
  5. Wireframe creator – why should these elements be included? Are they important?


Fourth idea - Gather all information that you need

Your wireframe should include three types of information:

1. Content – graphics, logos, articles, product descriptions, podcasts, forms, page headings, etc.

2. Layout – content prioritization and places for the web page elements (for example, branding, footer, header, and content area)

3. Behavior – be sure to add the annotation that explains functionality of the elements that is hard to understand in 2D format: pop-up forms, error messaging, default settings.


Wireframing is important in the UX process, and at the same time it is fun. Creating even the simplest wireframe will largely help you make communication inside the design team and with customers clearer. In addition, it can also help you test your assumption about the importance of the information that you want to provide on the page.

Create your wireframe right NOW!