Wireframe a page to test

Contributors

@ali-al-difaie


Business Benefits

Create a better test page without wasting resources and communicating the effects of you tests easily with your team members.


Sketch your test page on a piece of paper, digital notepad apps or use Balsamiq Mockups, or similar alternatives to digitally mockup your test page.

Try using fat markers or pen styles to naturally reduce the level of detail

Draw multiple versions of your test page, discard the versions you don’t want to use, and pick your winning layout to turn into a wireframe.

Place the key elements of your page in the exact order you want them to appear in the web format to inform the designer and your team members about each element’s placement.

  • Don’t focus your attention on details such as fonts, colors, and size
  • Use colors only to inform the designer of the visual hierarchy of your elements.
  • For example, if you want your form to stand out, use a different color when creating the final digital wireframe.

Use the wireframe to communicate to your stakeholders, clients, or teammates how your hypothesis test page will look like.

Remind people that the wireframe will not be the final design, and serves only as a guideline for the designer and your team members.

Inform people immediately that the wireframe is not designing the test page, but only the communication process of how it should be laid out.

The wireframe tells the designer who has better design abilities how key elements should be visually structured.

Discuss the wireframe layout with your team members or clients and make updates to the wireframe using their feedback.

Updating wireframes is faster than updating a fully designed page and saves a lot of time and money.