Wednesday, January 28, 2004

Graphic Design for the WEB

Graphic design is an important part of our work and our primary goal is make something that ‘works’ on the screen. But what exactly is design? What does HyperDictionary say? Design represents a plan to create something new. It gives form to an idea. It presents a scheme to be implemented.

furthermore...

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. [

Design is 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. Screen size Mostly we are designing for the 4x3 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

In CDROM development, generally, the screen is fixed. That is, the design is targetted at a specific proportion but may automatically resize to fill the screen. Web pages will scroll and the designer can NOT control the vertical dimension unless Flash is used. Even then, there is a danger that the user will reduce the size of their browser window. 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 posion 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.

Layout

Layout is determined by a consideration of what you are trying to achieve in the 'look and feel of the page and site. On the other hand there are established methods of making things look right and you may wish to lead the user's eye around the page in a particular way. 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. grids It is very commonplace to achieve balance in a layout by aligning elements to a grid. 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.

Typography

In spite of the great graphics that we can achieve on our computer screens, the web is still used mostly to display words. 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 accessability.

Styles

Style is often related to hierarchy in the document - 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

Colour expresses. Atmosphere and even emotion can be conveyed with colour. Rather than what colour, the question would be which colour combinations? combinations A major objective of the designer is to achieve a look and feel based on harmony or contrast using colour. Good designs often use a resticted number of colours. Create a 'swatch' that consists of a main colour and then various tints of that colour. I no longer believe that it is neccasary to use 'web safe' colours. Check out this article on the Pantone site. consistency Once colour families have been established then they should be used consistently across the site. Sometimes you may be tempted to used different colours for different pages and then refer those back to the links. Sometime 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. The BBC site is interesting because they now change the colour combinations on the home page every day. The colours harmonize with the main picture. contrast For the information to be readable, the contrast between forground and backgound is very important. Does the text read well against dark or light background? 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 Get one in writing! 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. platform This has more to do with the technology than the design but you may find that the specification from the client includes "must work on Windows 95", This may restrict your design. Methods Graphics designers who have NO web experience will simply design as if this were to be a paper product (brochure or book cover). Of course, web designers understand the medium that they have chosen to work with. Don't they? sketching Many designer 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. testing Whatever you come up with, remember, your chosen medium is NOT JUST the computer on which you built your site. Your medium is the millions of computers out there in the world so check it out on as many platforms and browsers that you think would be relevant to your target market.