In the last post in this series, I wrote about how we present three to five design directions for the client at this point in the process. The client will usually choose one design and maybe ask us for a revision or two, which we can turn around pretty quick.

Then we move on to the nitty gritty details of the site: designing the page templates. The more content we have at this point in the process, the smoother the web build goes, so we typically will ask for the content to mostly be completed at this point. If not, we fill in with “greek”, as you can see on the designs below. We try to visually describe all sorts of scenarios at this point — what the hover states look like (ie., when you mouse over a hyperlink or image), how an image appears if horizontal or vertical, etc. This way the client knows what to expect, and the website developer knows exactly how we want it to look.

The following are what we presented to Ann Brooke when it was time for her to sign off the site design.

1 ANN-Web-HP-FINAL-13-0408
Home page design, with blog news feed at right.
Home page with hover states described.
3 ANN-Web-Landing-Page-13-0405
Landing page with horizontal image example.
5 ANN-Web-Landing-Page-13-0405-2
Landing page with vertical image example.
7 ANN-Web-Blog-13-0408
Blog landing page design.
8 ANN-Web-Ask-Ann-13-0408
Contact page design.

Once Ann is happy with the page layouts (which she was!), we clean up the layered Photoshop files and hand them off to the developer with the information architecture documentation so he can begin to build. The beta site is on its way!

Next Up: Website Redesign VII: Finalizing and Launching the New Site!
All posts about Website Redesign »