Whether you work for yourself or for a design firm, it’s tempting to skip steps to save time. However, when developing a website, it’s crucial to not overlook the website wireframing process. Jumping right into the design and aesthetic of the site can be a huge waste of time for yourself and your client especially if you’re off the mark. Spending a little time on the front end can save you frustration and possibly help solidify the relationship of you and your client or developer. Here are some tips to ensure you’re making the most of this wireframing process.

Getting Started

Image 1
It’s really important to keep it loose in this part of the process. If you’re more comfortable using a pencil and paper or even crayon, then go for it. The main objective here is to figure out the needs of the client and rough out ideas of navigation, content and the flow of the site. You may have noticed that it’s hard to change up a design scheme that you’ve spent a lot of time on. You might think that if you just keep tweaking on it, then maybe it will all fall into place.

The beauty of wireframing is that you shouldn’t spend much time creating them. You can allude to text and imagery by blocking them out. Focus on things like where the logo and navigation will live and not what they will look like. Don’t think of a wireframe as a prototype or a mockup of the site. You should really be working on the big picture at this point.

Moving from Low Fidelity


Once you’re happy with the rough wireframe then it’s time to prepare something to show the client. I wouldn’t suggest showing the client something you sketched on a cocktail napkin unless that’s what they specifically asked for. It’s a matter of professionalism. You don’t want them to get the idea that their website is going to be sloppy and unstructured.

At the same time, you don’t want your client to think that what you’re showing them is how their site is really going to appear. It’s also smart to stick with grayscale instead of choosing colors. That’s why it’s a good idea not to use real text or photos that may confuse or distract them from paying attention to the ideas you’re trying to convey.

Pick a Process

There are plenty of different methods to use when moving on to a medium fidelity wireframe. Some prefer to use web apps that have tools that allow you to drag and drop prebuilt objects such as text boxes, photo placeholders and navigation. What’s great about some of these sites is that you can build a wireframe that is actually interactive. You can also send a link to your client that allows them to click through your proposed idea for their site.

You may also have the ability to save a PDF and print directly from the site. Some drawbacks you may find in using web apps are that the tools may limit creation of shapes, the lack of ability for multipage layouts and sluggish responsiveness when working with complex layouts. That is why some web designers prefer to use the same software they would use to design the site. The great benefit to this is that they can easily transition their wireframes to the aesthetic design when it’s time. Also, if you plan to use a grid system, implementing it in the wireframing stage can speed up your workflow.

The Gridsystem

Using a grid system may be up for debate, but it can certainly make it easier for making your layouts and also for adaptation by the developer. One of the arguments regarding the 960 gridsystem specifically is that it may make a site look dated. However, website responsiveness will resolve any issues of a site fitting the viewport as desired. The 960 grid system typically uses a 12 or 16 column grid. Each column has a 10 pixel margin on each side which creates a 20 pixel gutter.

The 12 column layout uses columns that are 60 pixels wide and the 16 column layouts contain columns that are 42 pixels wide. If you decide to wireframe with a grid system in place, using a program like Illustrator will make it easy to create shapes that lock to the grid and give you dimensions that are nice and even instead of arbitrary measurements.

Don’t Forget

So whichever way you choose to wireframe, don’t forget that the whole purpose is to simplify the process and allow you to give your client what they want. If you can nail down the architecture of the site before you move to color schemes and graphic treatments, then your revisions will be more aesthetic changes instead of complete overhauls.