Making a Content Web Site

Site Map

Artistic Concerns
Why are they important

Click to Artistic Concerns- How to do them

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

OK, I can hear you now - some of you think you are not artistically inclined and others feel you are too artistic and need to tone it down. Then there are the rest of you that need to get past the black and white of the flat page and use web pages to a higher potential. And the rest of you are asking why should you care? Oh, you should care. Web pages are a visual medium. The more appealing the more people will find your site and stay around to learn what you are trying to convey. The less appealing, the faster they will run to someone who does appeal.

Let's talk about Geometry and Symmetry first.

Using some well known art pieces, let's look at geometry and symmetry. This isn't going to be the start of an art class. This is both a way to illustrate these two points and to a larger extent, illustrate why web pages can be phenomenally better than research papers for some subjects For instance, I'm showing you the painting The Scream by Munch to show symmetry and geometry in design. I'm able to insert those images right here with the text to illustrate the point.

Teh Scream by Munch

 

To the left is The Scream without my markings. If you stare at it long enough, you will see how the lines draw your attention to the center of the painting. The face is the most important thing and it is in the center of the painting. To the right, you will see my markings to show how the lines draw you toward the center. When considering designing your page, think carefully about where you will place the most important information for your audience. You want to draw attention to that text or image by placement in the overall page. You may choose to center it or place it at the top or anywhere you feel brings the most attention. You still have all the skills of emphasis from the text, image, and table pages for emphasis as well.

The Scream by Munch

 

Leonardo's Mona Lisa is symmetrical. She's positioned equally to the right and left. One side of the painting is not "heavier" with objects than the other. She's balanced. To the right, you will see how "geometrically" she is proportioned for balance. I've placed lines over the painting to help. For your web pages, consider looking at how symmetrical your page seems to your audience. People like balance. However, do not dismiss having non-symmetrical designs if those designs enhance the content. And everything centered down the middle is also boring.

This is why the next artistic concern is important: white space.

White Space - is vital. What you don't put on the page is just as important as what you do. Clutter leads to boredom which leads to people leaving your web site for someone who does it better and what's the point of building a web site if no one comes. White space allows the reader's eyes to gravitate to the important information - not having the information bombarding toward them all at once.

Let's look at the table I used with Mona Lisa above:

 

This paragraph in the middle is easily read because it doesn't smack against the sides of the two Mona Lisas. In the example below, the white space has been removed. The table no longer has the balance and ease of read that this table does. Yes, the text and images here have been positioned in a table with a zero border.

 

This paragraph in the middle is not so easily read because it smacks against the sides of the two Mona Lisas. In the example above, the white space allows our eyes to comprehend the text and see the separate images without strain. The table above has balance, because the sense of white space (space between text and image) has been modified appropriately.

Let's look at color:

You can add color a variety of ways to your web pages. You can change text color, use colorful images, change the border color of tables and you can add background color and even add background color to individual cells in a table. You can see an example of that in every menu at the top of every page in this web site.

Color is more than changing something from black and white to red and green. Look again at the navigation menu for this page. Let's deconstruct it for a second.

Making a Content Web Site

Site Map

Artistic Concerns
Why are they important

Click to Artistic Concerns- How to do them

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

This color scheme is subtle. I made a conscious decision to go for soft colors not bold and each idea in this web site has its own color scheme. The borders and the backgrounds for the Text pages have red tones. Artistic Concerns have blue tones. Additionally, you may have noticed the Roy G. Biv color theme. I had to add three color to complete the set, but otherwise, you can see the color spectrum repeated in the backgrounds of the cells in the bottom table. I happened across the horizontal bars that complement the color scheme by pure chance and sometimes, web design is like that unless you create and design your graphics along with the web pages. But for content based web sites, the designer needs to concentrate on the content, not the graphics. We are more concerned with simple web creation to illustrate the content rather than concentrating on learning web page design skills.

So, let's take one more look at my favorite painting, The Scream, since the color scheme is pretty easy to discern using its example.

Teh Scream by Munch The color scheme is mostly orange, red, and yellows, with some black and gray thrown in for good measure. Most of these colors, in Western culture, are not subtle and soothing. They betray a sense of anger, maybe uneasiness. They are the antithesis of blues and greens which can be very calming. They are not pastels either and therefore are not easy on the eye. They are not meant to be - look at the subject to the painting. What does this have to do with your web site? Color schemes influence how your audience sees your web site. Non-complementary colors can chase your audience away - on the other hand, garish colors can subtly tell the audience about the subject you are trying to give them information about. The painting depicts a traumatic scene and the colors reflect this. They are not soft baby blues and pinks. In Western culture, colors have their own superimposed meaning. White is innocence, red is passion, blue is calm, and purple is royal for the most part. Think carefully about colors in your web site. The same goes for the accent graphics like bullets or other minor graphics. Perhaps you are creating a movie web site. You may consider using colors that reflect the inner theater and using other graphics that look like seats or film or even a popcorn box to add variety and enjoyment to your web site.

A tool that is very important for many people is the color wheel. Some colors just don't go together. The Color Wheel provides people with a good starting place to determine what backgrounds go with what text and what colors complement each other and what colors should never be used on a web site. Here's a site with a color wheel that helps in design since it details what color complement each other and also visually shows how to use a color wheel. There are many more out there.

Rule of 3 - this is a general rule of thumb for many things, color, graphics, text changes, animated graphics or multimedia. The more bells and whistles - the less noticeable they are. It's like instantaneous tolerance. You are no longer surprised to intrigued by the commonplace. A link to examples is here.

Then there is the ultimate choice: thematic planning (CSS and all that). How do you know if you have a theme? What is a theme? A theme could be an overall color scheme. You could decide that every page will be in red tones. Some people change color with subject points. Some change color with the "tier" effect. Then there are the other subject based themes - for example, a web site discussing murder mysteries may use knives for the bullets in their bulleted lists and a blood-dripping font for the main headers and even tombstone icons to navigate the web site. Although these images are not exactly illustrating some main points, they do enhance the web site's design overall and raise the appeal and attention grabbing nature for the audience. Several links to examples appear here.

Next, Content.

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

Making a Content Web Site

Site Map

Artistic Concerns
Why are they important

Click to Artistic Concerns- How to do them