I’ve figured out the site organization, including how many pages we have and what goes on each page, now it’s time to start designing the actual pages. In this stage, I create the page layout in Photoshop (I’ll be putting up a post about the tools I use during this whole process later) and it’s the first time that the clients sees an actual page.
Basically, I want to show the client where the navigation will go, what I’m going to use for site branding (usually in the banner across the top), and what colors and fonts I’ll be using.
To Wireframe or not to Wireframe
I’ve read a lot about wireframes, which are pictures of web pages showing what goes on the page (navigation, content, etc), but not the graphic design (colors, photos, fonts, etc). See the Design page on usability.gov for more info. I don’t currently show wireframes to my clients, though I may make one up for myself with I start my page layout, to make sure I have everything I need on the page before I start playing with different buttons and different colors.
My experience with sharing wireframes with clients is that they don’t get what they are, so I used to go straight to a jpeg of a my Photoshop layout that looks like a finished page. I found one problem with that process, which may be due to this finished looking page layout: my clients sometimes come back just before site launch with changes to the navigation.
I suppose that shows that they ignore the navigation on thee page layout, just as most users ignore the navigation on a web page. After all, the content is what I want them to see, not the page frame, but at this point in the design process, I need the client to sign off on the page frame (the banner across the top and the navigation). So, I’ve changed to a hybrid wireframe/page layout which shows the page frame in great detail and leaves the content and some other parts as colored blocks (see the first example).
How Many Different Layouts?
If I have a good idea of what the client wants, I create several different layouts. If I don’t have a very good handle on what the client wants, I put a page together and use that as a starting point for figuring out what the client wants.
Example 1: 3 Choices
Here are the wireframes from a project where I had a pretty good idea of what the client wanted in graphic design, so I gave them three variations on a theme:
Version 1
Version 2
Version 3
The only difference here is in the look of the page, not the navigation or site branding. You can see where all the parts of the page go and I’m paying particular attention to the page frame: the header and navigation.
Example 2: Starting Point
On this project, we didn’t have much of a starting point for the page layout, so I put the first one together, then through discussion with the client, wound up with the second one as the final layout:
Version 1
Version 2
Note in this version that the photoshop document extends beyond the web page edges. That’s because this site is a fixed width site (the main area doesn’t change with the size of the browser window) and I want the client to get an idea of how it will look in a larger browser.
{ 0 comments… add one now }