STEP 2

left arrow
To Step 1
Home page >> Step 2 >> Character
Palette

Website Character

What I mean by character is the whole feeling that a visitor receives when coming to your site. It mainly has to do with two things. Your content and the look-and-feel of your pages.

Content

As I have said previously and will continuously repeat it as much as I can, content is king. Regarding the character of your site, your site goals and target audience will essentially direct your content writing, tone setting, guidelines. For instance, if you want to make a website for a government organization, the content you are going to create is going to be more "serious" in its tone and voice than the one you are going to be using for an entertainment site targeting ages 16-25 for instance. We will be talking more on content later on...

Look-and-feel

Content is king, but presenting it in a nice package and a nice environment makes the entire user experience much more pleasant which means that your visitor will return to your site. As we will see, visitor retention is very important for the success of your site.

We have gone a loooong way in the area of website graphics and website look-and-feel. The trends of our times have drastically changed from the early years of the internet in the '90s. No more neon colors, no more flashing and moving objects, no more "site is currently under construction" with a little construction guy drilling up and down, no more ugly graphics.

The trend of our times hears to the word simplicity. Simple colors, simple lines, simple design. This, although for some of you might seem "dull", allows the user to fulfill his most commonly placed goal. Remember that this goal is to communicate and extract information. The more busy and clobbered your site it, the more difficult you make it for your visitor to achieve his goal. Other benefits for the simple designs are that they:

  • Load faster
  • Require less disk space at your web hosting provider
  • Are quicker to design and build, therefore quicker to go live
  • Easier to make them to work on different browsers

The best site in my opinion regarding style, use of colors and Web 2.0 trends (Web 2.0 is the "next generation internet" and describes the changing trends in the use of World Wide Web technology and web design that aim to enhance creativity, communications, secure information sharing, collaboration and functionality) is Apple's site (at www.apple.com).

The general guidelines which are being followed by Web 2.0 and which I suggest you follow for the look-and-feel of your site are:

  • Colors
    • Pick a color scheme for your site. If you already have a logo for your site or business, these colors must follow your logo color scheme. If on the other hand you do not have a logo yet, then pick a color scheme you think will match with your sites character and use those colors for designing your logo. Do not use too many colors for your color scheme (two to three is recommended)! Remember that your color scheme must be consistently used throughout your entire site (i.e. all paragraph titles should have the same color).
    • Do not use too much (tiring to the eye) or too little (dull) color. Use just enough color. I know that some of you might be scratching your heads wondering "how much is enough?". If you are not sure how enough is enough, then create a few samples using different portions of color on your design and by looking at them at the end (and also by showing them to some friends of yours) trust me that you will figure out the enough part.
    • Use strong colors but use them sensibly. Only apply strong colors to areas of your site which you want to highlight.
    • Prefer white for the background of your main content sections. White background makes your content easy to read and to stick out (text show always best on white). It is also a convention to search content with your eye on a white background
    • Avoid using fonts with colors similar to the background color. This will produce a hard to read text and your visitors will not like that.
    • Use soft colors for the outer background of your pages. A popular color being used is light grey.

  • Fonts and paragraphs
    • Always use easily readable fonts for your site! My favorites fonts are Verdana, Tahoma and Trebuchet. Avoid serif type fonts (e.g. Times New Roman) because they are not as readable. As far as size is concerned avoid using too small fonts for your main text. I would recommend sizes 12-15 (depending also on the font family). For headers and titles use larger fonts. Smaller fonts should be use for fine print and not main type of content.

      This is written in Verdana size 10px
      This is written in Tahoma size 11px
      This is written in Trebuchet size 12px
      This is written in Arial size 13px
    • Stick to using one or at most two different types of fonts. Each font has its own "character". By mixing a lot of different font types, your site will eventually become character-less.
    • In order to emphasize words or sentences, avoid underline (because the convention is that underline words correspond to links, therefore your visitor might think it is a link) and use bold or italics instead. Avoid emphasizing too often in a paragraph.
    • As we said before, for the main content section you should favor using white background. On white background use black (in hexadecimal code, black is #00000000) fonts or dark shades of gray (like #33333333).
    • For paragraph alignment, I would suggest using left aligned for narrow sections of text and full justification for wider sections of text. As you have seen, makemyownsite.com has full justification on its pages. That is due to the fact that the pages are quite wide.

  • Page layout and graphics
    • Give your website a central layout. I prefer central layouts than left aligned layouts, because when your visitor is going to open a browser and maximize it, then your website sits in the middle of his screen. It is right there, in front of him! makemyownsite.com pages are also centrally placed
    • Have a distinct top section which will contain your logo, possibly a search section and your main navigation. By having a separate, easily recognizable top section, the visitor feels comforted to know where the page starts. The top section calls out to the visitors "Here is where the page starts" as well as "This is a page for ".
    • Concrete and easy to recognize "web page real estate". Your visitors are by nature impatient. They look for information by scanning your pages. If they spend too much time without finding something, they will leave! Having concrete sections on your page, helps them understand your website and therefore how to seek the information they need and ultimately how to achieve their goals.
    • Use two to three (at most) columns). Lesser content offers lesser information but this information is presented clearer to the visitor.
    • Website layout
    • Use gradients, shades and mirror effects to make graphics nicer, give them a 3D look and a sense of depth, but use them sensibly. One idea also is to apply a gradient color (white to gray for instance) to your main background for your site. Examples for gradients and mirror effects are the following:

      apple site  sun site  mozilla site  apple site 

      In order to produce such effects you can use a graphics software package such as Photoshop or the open source favorite Gimp. We will not dig deep into how to produce such graphics.

Now that you have all the look-and-feel issues in mind, it is time to proceed to designing the "blueprints" and structure for your site.

left arrow Back to the goals

RELEVANT LINKS

Lunatrix Graphic Design - Lunatrix is a Bath based Graphic Design Company specializing in Logo Design, Brochure Design, Flyer Design, Packaging Design, Advertising Graphics, Exhibition Displays and Website Design.