Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Makeovers
2007 Makeovers Issue: Web
DG's Makeovers issue is always the most popular of the year. Our designers revamped five websites, taking each one in a new, colorful direction. 
June/July 2007
AUTHOR ANDREA CAMPBELL
A web redesign calls for a simplified plotline for easy reading.

Designer: Larry Kozial and Molly Wells

While a devious plot full of twists can entertain and compel print readers, for a website, straightforward, simple navigation is best. Like an interesting plot, author Andrea Campbell takes many paths: columnist, contributing editor, forensic artist, educator and foster mom to a Helping Hands monkey. But her website must showcase and promote all these talents in a direct, easily navigated fashion.

Regarding her current website, Campbell says, “It’s a large site at about 34 pages or more. It’s rather old-fashioned looking, and since it’s dense and diverse, the navigation is always a challenge.” Campbell must also be able to regularly update the content on the site herself. She adds, “I have to create all my own stuff. I also have another site, and I am working on three more. It’s insane for me.” With a limited budget and little extra time, she’s seeking a new look that’s “more hip, modern, with more interactivity and easy, efficient navigation.”

In their redesign, designers Larry Kozial and Molly Wells created a totally new navigation system using tabs at the top of pages. “The biggest problem was the overwhelming amount of information on the site, organized in such a way that much of it was not easily accessible,” Kozial says. “Beyond the navigational issues, the original site felt sterile. It did not communicate the warm and welcoming attitude that the author seems to possess. I felt that a traditional typographic approach and a warm color palette would better suit her interests.”

Kozial chose a soft and inviting palette for the makeover. To complement the buttons, he selected a warm, neutral background that works well with rich brown text. “Small caps and italics were used to create hierarchy in the text,” says Kozial. “To keep things HTML compliant, I used Georgia, a system font, for as much text as possible. Caslon was also used, but sparingly, for the header and introduction to the home page. On pages with more copy, an interior scroll bar was added to accommodate the text without sacrificing the accessibility of the layout.” With improved navigation and organization, the new site should provide Campbell with better exposure to her wide-ranging audiences.


1. Original site
Author Andrea Campbell is seeking an updated look and simplified navigation for her website.

2. Logo
Designer Larry Kozial created a distinct look for the author to use as branding on each page.

3. Fonts
Kozial selected common system fonts, Georgia and Caslon, for legibility and compatibility on screen.

4. Color
The designer wanted an inviting color palette for the redesign. “One color was given to each of the six main navigational buttons,” says Kozial. “These colors needed to be strong enough to stand on their own, yet able to work with the five other colors.”


5. Tab navigation
Since author Andrea Campbell has many careers and interests that she shares with her fans and readers online, her website contains lots of information that requires clear organization. Kozial simplified his design by using colorcoded tabs for painless navigation.


6. Side menu
Secondary links were placed consistently on the left-hand side of the pages.

7. Hierarchy
Kozial used small caps and italics to create hierarchy within the pages, and consistently used system fonts throughout.

8. Online purchasing
Kozial makes it easy for Campbell’s fans to learn about her with simplified navigation, but he also makes it easy for Campbell to promote and sell her books and more, taking advantage of large thumbnail covers and a pay-online service.

| 1 | 2 | 3 | 4 | 5 »|
Events & Courses

WebMediaBrands
mediabistro learnnetwork freelanceconnect SemanticWeb
Jobs | Events | News
Copyright 2009 WebMediaBrands Inc. All rights reserved.
Advertise | Terms of Use | Privacy Policy