Every building begins with a blueprint. Trying to build without a plan will almost certainly lead to disaster. The same can be said for wireframes being the first important step with any new website.
Blueprints are well thought out and highly technical drafts of the structure’s design. They come in all shapes and sizes in the architectural world and are not lost in graphic design. Similarly, wireframes are our “blueprint” for website design.
Wireframes are a two-dimensional illustration of a webpage’s interface. It generally focuses on space allocation, the hierarchy of content, and typically doesn’t include any styling, color, images, or graphics. These will only detract from the task (plan) at hand.
Wireframes can vary in form, from paper sketches to white-boarding, to computer-generated images. Low and high-fidelity are terms used to describe the level of detail.
- Low-fidelity – Generally sketched out on paper to develop quick realizations of content.
- High-fidelity – Work best for development. It includes more detail and information regarding dimensions, behavior, and interactivity.
Standard elements to include and look for on each wireframe include: logo and navigation placement, search field(s), breadcrumbs, headers, images, body content, social icons, footer organization, contact info, and important CTAs (calls to action).
Beginning any web process by strategically planning where all of these elements exist and how best to lay out content through wireframes ensures space allocation, image dimensions, text sizing, and overall user experience is consistent and most effective.
Wireframing also helps you ideate and get the “bad” ideas out of the way. Good practice in wireframing typically involves organizing the content in several different ways, which leads to the most effective final solution.
Whether, you’re a speedster who prefers pen and paper, or more meticulous in your wireframes, they’re there to help, and a critical early step in the web design process.