In the last issue we looked at the use of white space in creating a web page
that was visually appealing. We are often asked to review doula and CBE websites
in order to provide feedback on how they look.
When scrolling through a website it is important to have a sense of consistency,
where every page feels like part of a whole. Imagine a book where each page had
a different typeface, different sized fonts or different colors. It would only
take one or two pages before your eyes became tired and you were unable to focus
on what you were reading.
One of the most common areas that we comment on is the use of font and color in
a website. Generally people use too many fonts on one website. As a general
guideline 2-3 fonts is enough for one website. One font for the headings,
another for navigation buttons, and a third for the text itself. Every page of
the site should use the same fonts and font sizes to ensure a feeling of
consistency. Look at the example below. There are five different fonts being
used.
We can begin to sharpen up this page by making some minor changes. First we make
the fonts consistent, using one font for the heading, one for the navigation
links, and one for the text. In this example we have used the same font for the
heading and the navigation buttons, but made them different sizes.
Next we look at the images. The grey background on the picture is distracting
and adds another unnecessary color to the page. We can remove the grey
background in a few seconds on a photo editor program like Photoshop. There are
other less expensive photo editors available if cost is an issue for you. We
have also cropped the picture tighter so the image is focused on the pregnant
woman and not the background.
Next look at the direction the picture is facing. It is a good idea to have
pictures looking into the center of the page. When a picture is looking outwards
it looks as they the subject of the photo is looking into nothingness.
Finally, we can play around with the colors on the page. Pick up a color in the
photos and use that as the color scheme. In this case we have enhanced the pink
in the picture of the pregnant woman to make it match the single flower picture,
and have then used the hot pink of the flower for the links, changing the rest
of the background to a paler shade of pink. Take a look at the edited web page below and see which one you prefer.
Want to
print this article?
Go to the print friendly page
