Dynamic Graphics+Create Magazine
HOME   |   SUBSCRIBE  |   ABOUT  |   CONTACT US  |   NEWSLETTERS  |   CALL FOR ENTRIES  |   ADVERTISE  |   SUBSCRIBER SERVICES  |   WEBCASTS  |   JOBS
Topics
Webcasts
Newsletter
Subscribe/Renew
 
Purchase past issues to complete your library or to find the essential tips and techniques you've been searching for.
 
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Downloads
Free high-quality high resolution photos.
JUPITERIMAGES SEARCH
Jupiterimages offers millions of quality photos, fonts, clipart images and animations!

 
Jupiterimages.com
Clipart.com
Photos.com
Animation Factory
internet.commerce
Join Partner Program
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


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES