By now you may have come to realize that the title “Web Designer” is a bit of a misnomer, as you can see all the work that goes into developing a site before we get to the really fun part, the visual design.

In this example, we had been tasked to redesign a website originally built in 2005. Along with needing to update the backend to leverage advances in web technologies and social media, the client’s business had shifted and the complex information architecture was no longer relevant. She also wanted the visual appeal to be fresher and more contemporary.

The original site worked well enough for a while, but it was time for an update:

Ann Brooke Original Site

At this point in the process, we’d already ironed out any wrinkles in the client’s brand. In this case, she wanted to update her logo so that it was more usable, the text more prominent, and the look of it brighter. The name of the business also had changed, so this was an important consideration. We call that an “update” because she felt that the association of the font and topiary used in the original logo was worth keeping in the new iteration, rather than starting from scratch.

Before we tackled the website, we briefly outlined her brand, redesigned her logo, and chose a fresh color palette.

Ann Brooke Logo

Armed with a refined corporate identity and creative structure from the brand, we develop three initial design directions for the web home page, based on the wireframes we’d developed from the workshop outputs.


Ann Brooke Redesign r1v1


Ann Brooke Redesign r1v2


Ann Brooke Redesign r1v3

We also showed how the hover states would look when the user moused over buttons and other interactive areas.

r1v3 with blog feed hover

Ann Brooke r1v3 Hover States

Having presented these three initial options, we wait for the client to review and provide feedback on which direction she feels is working best. More on that next time!

Next Up: Website Redesign VI: Page Template Design
All posts about Website Redesign »