Choose the Right Frame

It is important to keep in mind that the website is just a frame for the content it contains. The frame should support and extend the content without overwhelming it.

Whether a site is simple or complex, whether it is primarily about sharing information, selling products, telling a story or displaying artwork, the frame should complement the content and amplify the message.  How do you do that?  Decide on a thematic idea that is appropriate for your content, and then incorporate the basic principles and elements of good graphic design to reinforce that theme.

Through composition and layout, you arrange such elements as color, white space, balance, variation and harmony (to name but a few) to lead the eye through the space of the site, and lead the viewer to the most important points of your message and then on to supporting and peripheral information. Additionally, plan well for user-friendly navigation in which to enclose your content. That way, you ensure that your viewers will easily find the appropriate information.

White Space is Your Friend

There are many websites that could benefit from the services of a graphic designer. One of the things I notice most often in poorly designed sites is a lack of white space—not just the understanding of white space, but of any white space at all. When a site is crammed to the edges with text and uncoordinated graphics, my first impulse is to run away…to move on to a site whose text I can read without getting a headache!

White space is the space between elements in a composition.  It adds a kind of “breathing room” to the page, allowing the content to be seen and appreciated  It is the space between letters, around words, between lines of text, between blocks of text and images and the borders of a site. In the case of text, the copy will be more legible and easier to read when it is not overly dense.  White space adds elegance and visual balance, and helps to position the content advantageously.  In both of the following cases, it serves a key design element that leads the viewer through the content and adds emphasis where called for.

image of Pre-Stretched Websites.comOn Pre-Stretched Websites, the color palette is a simple tan and white with a punch of burgandy used for emphasis and balance. The site begins with a graphic slideshow followed by the site’s mission, and then uses balanced text regions to direct the viewer to one of two important sections of the site.  Each area of the site builds upon the previous area, using graphics to enhance and balance the text.  The design continually reinforces the site’s “pre-stretched canvas” metaphor, and the whole site is kept very clean, simple and uncluttered.

image of Southwest Energy Services websiteFor the business site Southwest Energy Services, strong color in the header graphic emphasizes the company name and logo, and the swoop of color and white draws the eye to the content area of the site. Then the use of typography, color, and white space brings focus to the message and makes it easy to read. Strong color and balanced graphics in the three large buttons lead the viewer to a decision area for their next action. Simple and consistent navigation throughout the site makes it easy to find out more.

Websites for Artists and Photographers

image of painter William Wahlgren's websiteThe best design style to show off an artist’s or photographer’s work is usually the simplest one.  That doesn’t mean the site should be devoid of style, but the style needs to be well considered. In this design for painter William Wahlgren, the design is clean, simple and minimal, allowing the quiet beauty of his paintings to be fully appreciated.

image of painter Cheryl McClure's websiteFor contemporary abstract painter Cheryl McClure, a little color in the header and menu bar complements the color in her work while not distracting from it.

My own art site’s design has always been more colorful than these examples, as my artwork is pretty strong in color, and a colorful site can support the work.

Keeping Your Design Fresh

Fashions in website design come and go at almost the speed of light, it seems. New technological advances make what you thought was finished and cutting edge yesterday already behind the times by the time you’re ready to announce your new site! Well, I am exaggerating a bit, but it does sometimes feel that way. So how do you plan for a website that will still seem fresh after one or two or three years from the date that you launch?

One solution is to just plan to refresh or redesign your visual theme every six months or year or so, while making a point to have technical improvements implemented on a frequent basis. Depending on your business, this may be desirable or even necessary OR it may be unnecessary or beyond your budget.

image of 1001 Nights Orchestra websiteAnother approach is to attempt to create a visual design that will stand the test of time. Aim for a design that is classical, tasteful, relatively simple, and completely appropriate. In 2002, as part of a team competing in that years’s AIR for Austin Music Accessibility Internet Rally, I created a site design for Austin Middle Eastern band 1001 Nights Orchestra. We won an award for our design at SXSW, and I’m pleased to say that the band is still using our site design 9 years later!

image of Cherrywood Art Fair websiteThe following year, I created a fifties themed site for a local art fair, the Cherrywood Art Fair. It was a very fun design, and delighted the Cherrywood Art Fair organizers, artists and fair-goers. In 2004, I won a Texas Interactive Media Achievement Award at SXSW for that design. My theme design was used from 2003 until I stepped down from the job of webmaster in 2006. I loved that design, but if I had stayed on, I probably would have changed at least the underlying structure for that site by now, as the technology became outdated.

image of Marilyn Fenn Design website, v2The previous version of the site you’re on now, my design site, was built to fit an 800 pixel wide screen.  I loved the design I created, and the site served its purpose quite well for several years.  As the standard for monitor resolutions increased, I decided to redesign it to allow for larger image portfolio views, and to use a white background to display my portfolio images.  At the same time, I wanted to learn about WordPress and was thinking about starting a design blog, and so this site was born.

If you are about to design a website or have one designed for you, please keep in mind the importance of good visual design on your website: it can help your viewers find what they are looking for, it can guide them to discover what you want them to find, and if your site is lovely and has good content, it may help keep them on your site longer, as well as keep them coming back for more.

Categories
Archives