Quantcast
Channel: Mockup Builder Blog » Wireframe
Viewing all articles
Browse latest Browse all 36

Things You Need to Do Before You Start Wireframing

$
0
0

First idea - Collect requirements

Even before you start the design process itself you can do much 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 for starting wireframing is putting 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 photo 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 important for the user and which less. This will help you to build a hierarchy of them in the future and to put them on the correct position on the web page.

 

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

Before start wireframing, check do you understand who is your audience 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 does in the best way this web site must be built ?
  5. Wireframe creator – why does these elements must be included? Are they important?

 

Fourth idea - Gather all information that you need

Your wireframe should include three types of the 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 annotation that explain 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 a fun exercise. Create even most simple wireframe will highly help to make communication inside the design team and with the customer more clearly. In spite of that it also can help you to test your assumption about the importance of the information that you want to provide on the page.

Create your wireframe right NOW!


Viewing all articles
Browse latest Browse all 36

Trending Articles