Good Web Design is Not Guesswork

I’m currently advising a client and helping get a project off the ground.  It’s not a FreshBooks project, and it does not take much of my time, but I am excited about it.

The project is currently in the “design” phase…and really that means we are laying out the pages.  Now laying out the pages intelligently is a VITAL part of good web design.  Most business owners, nor developers, want to spend the time or money to do it right…that’s because they undervalue the process…or in many more cases, the web designer has no process.

I want to tell you about a process you can use to design your pages.  Your users will benefit from the time you invest in page layout, and so will you because it will reduce the number of changes you need to make later to get a page right.  Also, your site will be more successful so your client will want to invest in additions and that means more revenue for you.

The first thing you need to know is that every page is unique.  Each page should aim to meet it’s own set of goals.  The most important part of doing excellent page layout and design is correctly identifying those goals.  Those goals are to achieve subject to context.  For example, on the home page a visitor wants to learn about you generally (”Why am I here?”) and understand the unique benefit of your company (”What’s in it for me?”).  On your contact page your visitor ought to be able to reach you by phone, email, mail and/or fax easily.

So…commonly designers will wireframe a page before designing it.  Excellent.  This wireframe stage is the time to identify the goals of each page, and the  context of each page.  Look at this graphic to see how I do it:

The work starts on the right hand side of the page.  First you identify the mental context your users will be in.  This is important.  Take a second and make believe you are a site visitor and try to imagine the experience.  It is not an easy thing to do the first time, but it gets easier.  Given the psychological context of the visitor, list your priorities for the page GIVEN that context. Then RANK ORDER those priorities.  Once you have a rank ordered list of the things the page has to do, drop everything but the top three or four priorities because YOU CAN’T DO EVERYTHING on one page.  Now you have a clear set of things that need to be on the page, and the priority each one requires.  NOW start making boxes to place things in your wireframe.  With that in hand, graphic design gets a whole lot easier and your visitors wind up a whole lot happier.

Here is a great article about home pages from a truly excellent design resource for web designers - A List Apart.