Web Design Process: A Focus On Wireframes & Layout

wireframe iconOver the last 2 years I have become more of a supporter of layout then design.  Yes, layout is an element of design, but in the web design process they have their own areas and purposes.  This post takes a peak at the use of wireframes to help determine a websites layout and also the factors we consider in a web design layout.  It’s a great step for the web designer, production team and the client.

Web Design Layout
Simply put, layout is where things go.  When I start looking at layout needs and options I consider the following in this order:

1. The user.  What do they need to see, read and do.  Usability is a big factor in good layout for me.

2. The target market as a whole.  There are certain expectations a user might have of a small business website compared to a social media website.  These differences determine the navigation, placement and number of “areas” or aspects in the layout.

3. The website owner/company.  In building CMS integrated websites for 8 years, we consider the types of information, the amount of information and the placement of that information.  The areas of the layout will offer up some static areas of content or functions and others will be dynamic or manageable with the CMS. You must give your client the right tools to offer up their message, communication or features.

Wireframes: The blueprint of the layout
Instead of just jumping to a full blown web design, taking the time to create a wireframe to plan the sites layout, usability and features is a great starting point to your visual design process.  It also allows you to worth with your client on these aspects and start understanding the users possible experience.  Q & A about CMS features, user needs and structure all can be determined with a wireframe.

In writing this post and doing a bit of research I also ran across these helpful posts on wireframes:

The wireframe serves as a great plan, where the design elements are the polish and can include colors, graphics, gradients, photos, buttons, icons and more.  As a designer, it also provides a great in between step for getting your design approved and embraced. You have outlined and provide some foundation to the client, so the first design concept is less of a surprise and of a continuation and enhancement of the wireframe.

A Wireframe Example
Here is a project we are starting work on and shows our wireframe concept and then the first design mock version of the website.  Many web designers will just start adding their design elements right over the exact grid and wireframe once that has been approved.  Some prefer to start on paper sketching as well.  There is no right or wrong way.

web design wireframe

As you can see we also provided some notation on the areas.  This is up to you to provide this detail or just keep it to content blocks and usability features.

Next is the web design concept.  Keep in mind that this is a rough version one, the finished product will take on more polish and elements.  But it serves the purpose for a visual example.

web design mock

I hope this helps you understand the web design process a bit better and the value of wireframes in the layout and design steps.  Feel free to either comment as a client or web designer on how a wireframe has helped your process or maybe you realize it’s time to start using one.

11 thoughts on “Web Design Process: A Focus On Wireframes & Layout”

  1. What do you use for your wireframing? Most web devs I met use Visio but I just tried that and found it very limited. I’m working with a free trial version of Axure for the next 30 days, which is okay so far.


  2. Hey Anna- Photoshop is our design tool of choice, but I know other use Fireworks and other programs. In writing this post I did come across some other paid, web based & downloadable services like what you’re talking about. Thanks for the comment.

  3. Thanks flashcat – The poor user, so often forgotten. I’m a visual guy for learning and love examples so I try to put that into my posts as well. Thanks for weighing in!

  4. Great post! And blog! I was wondering why you don’t do the strategy and concepting before the wireframes and the interface design? Or do you?

  5. Thanks for the compliments Kim. The strategy takes place during the initial meetings, discovery and proposal phases. Once the scope is agreed upon in the proposal, then we hit the wireframe step. Maybe I should have pointed out where this falls in the process better. It’s not first!

  6. Cool post with some interesting step by step insight. It also illustrates well the difference between a wireframe and a concept.

    Regarding tools for initial wireframing I personally find Fireworks an absolute breeze to use. The interface is super-easy and it’s great for getting those caffeine-fuelled info structures visualised without fuss 🙂

  7. Thanks Stuart and glad to see ya stopping by again. I’ve had a few other people tell me how much they like fireworks. I hear you on the caffeine, Diet Coke is our office currency!

  8. Yeah good concise article about wireframes. We have a similar process – using Fireworks… in fact I only just made the switch from Photoshop. It is much better to use Fireworks for wireframing, and for page compositions. This works well with clients too. I mean, Photoshop is fantastic for lots of things, but I think not the best for Wireframing.

    @Anna Ullrich: Axure is a great prototyping tool, maybe a bit clunky, and best used on larger budgets, when the clients want to see more paperwork and documentation of the various processes and decisions made by the developers/designers.

Leave a Reply

Your email address will not be published. Required fields are marked *