A website wireframe is a grayscale structural version of the future website, also known as the backbone of a website, that plays the role of a guideline for creating the actual website design.
Although the debate of whether a website project needs a wireframe doesn’t have a clear conclusion yet, the benefits of having a website wireframe certainly outnumber the drawbacks.
The wireframe will help you get on the same page with your client, clear up you concept, and eliminate all unnecessary elements before much design work is put into the website. Some may argue that a previously set website wireframe limits their creativity. However, website’s functionality is the priority for most website designs, and a well-structured website which is achieved by wireframing certainly works in favor of functionality.
Creating a website wireframe is an essential process that puts the foundation of the web design, so it undoubtedly deserves special attention. If you are not sure you are wireframing effectively, check out these steps that cover everything important about the process. Let’s start!
1. Get inspired.
Many designers rush into creating the wireframe as soon as possible and miss out the important and sense-opening part of the process – getting inspired. It is essential to take the time and let the ideas pop up in your head. A web design without a vision, along with the website wireframe, might be doomed from the very beginning. So, take the time to let your vision grow. Browse different websites and examine their structure. Analyze what might work for you and what wouldn’t. To grasp the structure of any website more easily, you can use a tool like Wirify that helps you see the wireframe version of the design.
Involve your client throughout the way. Ask them to show their favorite web designs and highlight what exactly they love about these designs. After examining enough material and forming some concepts in your head, you can move on to sketching.
2. Grab a pencil and sketch.
Sketching is often mistaken with the actual wireframing but the only thing that is similar between both processes is that they are black-and-white versions of the website-to-be. The role of sketching is to help you get the ideas out of your head. It doesn’t need to contain aligned, perfectly sized elements, nor to be used as a strict guideline for the web design. It simply puts your ideas on paper (or a digital screen) and helps you see the picture before you roll your sleeves for the actual work. Sketching is something your client can also do in order to express their vision for the website. It’s perfectly normal to have a few sketches before you decide which one you will wireframe.
3. Choose your tools.
The process of wireframing requires the use of digital tools that will help you create a pixel-perfect website wireframe. The opportunities here are a lot. Some of the most famous tools on the market for creating website wireframes are Adobe Illustrator, Indesign, Balsamiq, Omnigraffle, Axure, Flairbuilder. If you prefer using an online tool to craft your wireframes, you can use Mockingbird, Mockflow, HotGloo.
All of these tools allow you to create a website wireframe easily and fast. They offer various features that will let you recreate your concepts and even collaborate with your team. You probably have a favorite tool already but if you don’t, throw an eye at those suggestions. You will surely be impressed with the features these handy tools provide.
4. Use a grid to start wireframing.
This step is where the actual wireframing begins. The grid will help you distribute the site content in a well-structured way with elements arranged and aligned, appearing in their actual sizes. Usually, designers would start with laying boxes on the grid from top to bottom and from left to right. These boxes play the role of the future images, text boxes, navigation and all other web design elements. Follow the concept that you’ve established during the sketching phase. Put the bigger elements first like header, footer, text sections, image sections, and then smaller details like call-to-action buttons, social media buttons, search field, a logo, etc. Carefully determine the element sizes as these would be the actual sizes you will be using for the design later. At this stage your website wireframe is known as a low-fidelity wireframe, i.e. it only outlines the placeholders of images, texts, etc. as boxes.
5. Play with the font sizes.
For the purpose of the website wireframe, you will not need to use different fonts. However, fonts can help out to determine which sections of the design will be more prominent, which sections should grasp the attention right away, and which are simply additional information. This visual importance can be achieved by using different font sizes for the wireframe sections. The bigger the font size, the more essential the section is. This will help you distribute your attention later between the key design sections and the secondary sections.
6. Leverage the grayscale.
Your website wireframe doesn’t necessarily have to consists of empty outline boxes. You can use the whole grayscale spectrum to fill the different elements. This way you will create a greater visual hierarchy and importance. The darker an element is, the more significant role it plays for the website design. For example, highlight your key converting elements by using black, e.g. the call-to-action buttons. Other elements can be filled with different grayscale shades according to their importance. Later, when you start designing, you’ll have a clear picture of what should, as clients love to say – pop. At this point, your wireframe is already a mid-fidelity website wireframe.
7. Going hi-fidelity.
As you add more detail to the wireframe, it becomes a hi-fidelity wireframe. This type of website wireframe contains styling, menus and it even could contain actual text and images. At this point your website wireframe would look like the design-to-be the most. However, this step is optional. Since the website wireframe plays the role of a structural guide, you can add all those little details at the designing stage. It’s your call, pretty much.
That’s it. All that’s left is take your website wireframe to your favorite designing tool and start the fun. We hope we’ve been helpful with this step-by-step guidance of how to do your website wireframe right.