Chapter 10. The Art of Website Design

Click on a section title to jump down the web-page:

A.         “Art” has two meanings

B.         Five elements of Website Design

C.         The first element: Whitespace

D.         The second element: Balance

E.          The third element: Colors

F.          The fourth element: Images

G.         The fifth element: Fonts

H.         Animated Text and GIF

I.          Is there life “below the fold”?


A. “Art” has two meanings

1. An art is a craft, technique, or skill.

2. A work of art is something that is created with creativity, skill, and imagination.

3. We might call this chapter: “The technique of making a website a work of art springing from your imagination.”

B. Five elements of Website Design

1. You need whitespace.

2. Your website should be balanced.

3. Choose colors carefully.

4. Images are powerful.

5. Choose fonts wisely.

Return to top...

C. The first element: Whitespace

1. Whitespace refers to areas on a web page with no content - no text, no image.

2. Good use of whitespace helps the website visitor to focus on the content.

3. Good use of whitespace helps make the purpose of a web page clear.

4. Good use of whitespace helps the visitor to scan the page quickly and decide if it is important to him or not.

5. Good use of whitespace helps to increase readability.

6. Bad use of whitespace can make the visitor leave the page without engaging.

27. Bad use of whitespace - content is crowded

28. Better use of whitespace - content stands out more

7. Whitespace

29. Good use of whitespace

8. Whitespace that is not white.

a) Whitespace does not need to be white to achieve the goal.

b) On this web page, the whitespace is tones of grey.

30. Grey whitespace

c) On this web page, the whitespace is black.

    1.  

31. Black whitespace

9. Well-known whitespace

a) Everyone recognizes this whitespace!

32. Google uses lots of whitespace

b) Google.com has many things to offer including email, news, calendar, maps, drive, translate, photos, Google+, shopping goodies, etc.

c) They put almost nothing on their home page. This leaves plenty of whitespace.

d) To focus attention on something the best thing you can do is to put “nothing” around it.

10. Poor use of whitespace – there is no whitespace.

a) This website has many problems.

33. No whitespace

b) The first one is no whitespace (other problems will be discussed later).

11. Poor use of whitespace – it is in the wrong place.

34. Poor use of whitespace

a) The whitespace is not where it should be: around titles, images, line-spacing, etc.

12. Good use of whitespace

a) Example of a Wildfire page which uses whitespace effectively (theme: Clarity):

35. Effective use of whitespace

Return to top...

D. The second element: Balance

1. Balance on a webpage is important for a positive user experience.

a) Every element on a page has a visual weight.

b) These elements should be in balance.

c) The red ball is smaller than the white ball, but the visual weight of the red makes up for its smaller size.

36. Balance

2. Make your visitors happy by keeping a balance.

3. The following examples, though different, represent effective balance.

37. This is balanced

 

38. This is balanced

4. The following screens show the same website with bad and good examples of balance.

a) This is unbalanced because the images are too small and there is too much text.

39. Unbalanced

b) This is balanced because the images are larger and the text is sized correctly underneath the image.

40. Balanced

5. The breadcrumbs, title, text, and button on the left in balance with the image on the right.

41. Balanced

Return to top...

E. The third element: Colors

1. Colors should be carefully coordinated.

2. This example uses too many bright colors.

42. Too many colors

a) Nobody will read this (and not only because of the colors…).

3. This example has too many font colors.

43. Too many colors

4. Rules for colors

a) Colors are NOT UNIVERSAL from region to region

b) Colors are NOT UNIVERSAL from language to language!

c) Colors always have a message and carry emotions.

d) Red carries negative emotion in West Africa, positive in China.

e) Green stands for God, Religion, Authority in many Muslim societies, but is associated with death in South American cultures.

f) If you do not understand the cultural context, you must study it!

g) Never choose your personal favorite color! It may be wrong for a website.

h) There are some helpful insights at this website:

www.informationisbeautiful.net/visualizations/colours-in-cultures/

5. Choosing color

a) All Website Managers have access to preselected color schemes.

b) Be careful: A few wrong color selections can ruin your website.

Return to top...

F. The fourth element: Images

1. Use images to attract the interest of a website visitor.

2. The website visitor will “see” things in this order of interest/recognition (especially on small screens like telephones -- swipe, swipe, swipe!):

a) Image

b) Image caption

c) Page title

d) Text

3. Some rules for images in the content of your webpage.

a) Use large images

(1) Unless the Internet connection speed is very limited.

(2) Unless the Internet connection data is expensive.

b) Use meaningful images which highlight the main message of the page.

c) Use image captions to restate the main message of the page.

d) Place images in a balanced way, use the multi-column feature of Wildfire.

4. Banner Images

a) Some themes support a banner image. The same image will appear at the top of each page of the website.

b) Rules:

(1) Image size: 1200 pixels wide X 400 pixels high (lower part will be cut off on some screen sizes!)

(2) Use a meaningful image which highlights the purpose of the website and captures interest.

5. Background Image

a) Some themes support a background image. The same image will appear behind and/or beside the main content on each page of the website.

b) Rules:

(1) Sometimes it is better NOT to use a background image, since it can make the website look too “busy”.

(2) Image size: 1200 pixels wide X 1000 pixels high for a full-screen image.

(3) Use an image with low contrast. Never use a high-contrast image for the background!

(4) Consider using a small image (pattern) that is repeated to fill the screen. (This will be taught later.)

c) Example background images

44. Poor background image - too bright, high contrast

 

45. Poor background image - high contrast, very busy

 

46. Good background image - blends in, pleasing color tones

 

47. Good background image - blends nicely with color scheme

 

48. Good background image - very subtle, hardly noticeable, matches color tones

 

49. Good background image - repeated small image gives pleasing pattern without distracting

Return to top...

G. The fifth element: Fonts

1. There are some good reasons to use a special font other than the standard font.

a) To properly display your language, you may need a font with special characters

b) To properly display your language, there may be a need for a regional font.

c) A special font may distinguish your website from others.

d) A special font may add another dimension to the unique design of your website.

2. With font libraries, typography (fonts) has become an important factor to style your website.

3. Wildfire allows access to thousands of fonts from the Google font library (To access these you can consult your Digital Publishing Manager).

4. Guidelines for the use of fonts:

a) You should use one or two different fonts on your website - one for headings and one for all other text.

b) You should be sure the font is easy to read on a computer screen and on a smart phone screen. (Some fonts are difficult to read in smaller screens.)

c) There is a trend to a bigger font size, less text, and bigger images. You should follow that trend.

d) Prefer a sans-serif font for body text. It does not have any projections at the end of each stroke. It is more readable on electronic screens.

50. Fonts

Return to top...

H. Animated Text and GIF

1. Rule of thumb:

a) DO NOT USE!

Return to top...

I. Is there life “below the fold”?

1. In the early 1990’s, the concept of “above the fold” was applied to websites. It is a graphic design concept of print publications that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.

2. This principle was applied to websites and killed hundreds of thousands of them. The idea was to “Squeeze as much as you can into the top of the screen.” This caused any sense of whitespace, readability, and pleasant appearance to vanish!

3. Today we have overcome this principle for websites. People have learned to scroll. Facebook is one example of what appears to be a single page website! You scroll up and down to find what you need.

4. Still, the upper part of a page is important. It should contain images or stories that inspire the interest of a visitor and make him want to scroll down to see more.

5. More information is available at these two websites:

uxmyths.com/post/654047943/myth-people-dont-scroll

www.iampaddy.com/lifebelow600 ​​​​

 


This video for the module above is taken from the Wildfire Tutorial Video series.

03 The Art of Website Design

 


Return to top...