There are four main focuses of a wireframe. One purpose is to see the range of functions that are available through the site. Another is to assess how
the information and functions are prioritized. A third goal is to work through the rules designating what types of information is shown when. Finally,
wireframes allow you to view the different display effects and how they will show up for.
In order to make the most of the wireframing stage of your website, follow these simple tips:
- Don’t bring color into the equation quite yet. By keeping your wireframe monochrome, you allow yourself to stay focused on position, size, and contrast,
each is an important feature of the design that can be made unclear by the distraction of color. - Use layers to your advantage. Behaviors, labels, gestures, and visuals can all have their own layer allowing easy maneuvering between them when needed.
- Take any objects that you will be reusing and turn them into symbols. As symbols, the objects can all be adjusted at once and easily adjusted throughout
the entire wireframe. - Unify the sizing and spacing of features by snapping them to the grid within your wireframing program. By connecting the pieces of your wireframe to
a single unit, you can further minimize the distraction of what you see in order to focus on the site as a whole. - Use graphic styles for the buttons you are using rather than objects to allow for flexibility.
- In order to speed up the wireframing process (always a goal!), try using pre-made art boards that you can commonly refer back to.
- Stay organized by naming your completed files in a logical manner for ease of reference. With so many stages in the process, you must maintain your
files in a rational and systematic manner.
Putting all these tips to use, you’ll create a wireframe for your website that leads to an excellent final product.