Graphic Design for the WEB

Principles and Practice

Graphic design is an important part of our work. There are certain issues to consider even before we get to the screen as medium.

Chris Jennings - PageToScreen

Design IS:

• utilitarian
  • Design has to 'function', that is it needs to do a job. If the idea is to communicate something then this is one of the goals of the design.

• informational
  • The goal of graphic design is to convey information.
• visual
  • Design is a visual language. Elements may be described in terms of relationships to one another, such as 'tall', 'thin', 'stretched', 'rough', 'smooth' etc.
• style
  • The look and feel of the design can be determined by references to style which may be 'fashion'. One objective may be a 'retro' look or referral to a style used in the past.
• aesthetics
  • If something is 'pleasing' then users will find it easier to use. A positive attitude will ensue from something that gives pleasure.
    

Layout

• reading order
  • Clearly an important issue will be the order in which the user will view the contents. Emphasis will need to be given to right components of the page.
• alignment
  • If elements are not aligned then the eye will experience discomfort. I don't say this with a medical sense but if you mean for things to look aligned then be sure to achieve this accurately.
  • Alignment will give a sense of unity and cohesion.
• grids
  • It is very commonplace to achieve balance in a layout by aligning elements to a grid.
• Golden ratio
  • pay attention to accepted methods of establishing proportion.
    

Typography

• system fonts
  • For the majority of the text the looks is limited by the system fonts on the 'client' computer. Text can be made into graphics or even Flash but this restricts accessibility.
• styles
  • Style is often related to hierarchy - headings, subheads etc. Where possible use standard tags like h1, h2, h3 but make your own style rules for those tags.
• spacing
  • character spacing, alignment and leading can be controlled through CSS although browser suport is not consistent.
• encoding
  • Web page header tags should define what character set is being used.
    

Colour

• combinations
  • A major objective of the designer is to achieve a look and feel based on harmony or contrast using colour.
• consistency
  • Once colour families have been established then they should be used consistenty across the site. Sometimes you may be tempted to used different colours for different pages and then refer those back to the links. Sometimes this may help users identify where they are in the the site. Experience often shows that this is less useful because the colour is unlikely to help identify particular regions or topics.
• contrast
  • For the information to be readable, the contrast between foreground and backgound is very important. Does the text read well against dark or light background?
    

Screen size

Mostly we are designing for the 8x6 proportion (800x600,  1024x768 pixels) but we may need to achieve technical compatibility with smaller portable devices like PDAs.

• proportion
  • The landscape format is much the same as television, but we shouldn't presume this to always be the case. In cinema, for example we may see 'wide screen' presentations.
• fluidity
  • It is very possible for us to provide 'fluid' designs that will automatically adjust to fit the screen proportionally.
    

Dynamic or fixed?

• fixing the viewport
  • With CSS it is possible to fix some parts of the screen so that they do NOT scroll. With styles set as 'position: fixed' then that element will stay in the position relative to the window. Browser support for this is not consistent.
• scrolling control
  • see my article on scrolling
• above the fold
  • Accepting that the screen will scroll and that the content will (often) be longer than the user's browser window, then the designer needs to addres the space 'above the fold'. This term comes from broadsheet newspaper design where the paper is always folded and displayed in half.
    

Dependencies

Much of this theory may need to be abandoned if the client has particular requirements. Often, other designers have been involved in some rebranding exercise, and it is often the case the web sites are last to be considered for this rebranding.

• Client brief
• corporate ID
  • The corporate ID will have some kind of brand manifesto and (sometimes unfortunately) you need to follow rules like minimum size of logo or typeface.
    

Consistency

• user experience improved when
  
  • elements of design are repeated across the site
    
• learning how to use the system
  
  • is easier when users are familiar with functionality throught the site
    
• repeated elements
  • Typically, some elements (like logos and menus) will appear on all pages. be sure to make them appear IN THE same place. There is nothing worse that elements of a page jumping around as the user navigates the site.

Methods

• sketching
  • Many designers keep clear of the computer in the first instance.
• wireframe
  • Rather than populate the paper design with actual content, it is worth creating a skeleton or wireframe drawing which just indicates the location of the elements.
• templates
  • maybe the site will have particular features like a news area or a person profile area. These pages may need a variation on the basic design, so a range of templates could be created to accomodate different types of content.
• prototypes
  • Your client may want to see something working rather than just 'mock ups'. Host it on a server somewhere and possibly produce a few sample variations on the theme.

Thank You and Links

Whatever you come up with, remember, your medium is NOT JUST the computer on which you built your site.

Test on other computers!

• For a few articles on design on my site go to pageToScreen here
• The article on scrolling is here