Before you can begin wireframing you may want to have some meetings and brainstorming sessions to discuss business requirements and user needs. Your team should come armed with research: analytics data, surveys, and perhaps even focus group results.
You'll want to create a sitemap of the existing website or design a new information architecture, discuss content strategy, and build personas.
Make sure you understand what the goal of each page should be.
Wireframes will help visualize and provide a structure for these ideas.
Once you begin creating your wireframe don't use any distracting colors or images. You want the wireframe to focus on layout and behavior. Even the font you use should be generic. Images should be represented with a box with an X through them.
Copy on the page can be placeholder copy (Lorem Ipsum) or canned copy like generic calls to action such as "sign up" or "buy." As you iterate your way to a final wireframe, you may find that generic copy doesn't do your vision justice. You can replace your initial placeholders with more detailed copy, especially if that copy takes up more space. That will affect the layout and other elements on the page.
Detailed copy will also help answer the question: is the page fulfilling its intended goal adequately? Given where the copy is placed, how much space it takes up, and how much attention it will get, is it communicating what you want?
Read SmartDraw's detailed wireframing tutorial on how to create wireframes.
Back to top
