7 tips for web graphic designers
written by craig, 30 January 2007
Good web graphic designers are a rare breed. Few artists have the technical ability to understand web development and the design ability to create a great-looking, usable, website.
Many designers also move to web design after learning their craft in printed media. Whilst some design ‘rules’ still apply, many others do not.
So, here are my 7 top tips:
1. Designs do not end at browser edge
Many designers produce webpage mock ups within a browser window to help clients understand how it will look on-screen. However, you should always consider what happens when that browser window changes size:
- Is the design fluid? Will it fill the space available? Is there a minimum or maximum width?
- Is the design fixed? Is it left-aligned, right-aligned, or centred?
- If there will be empty space, what background should be used?
2. Fixed height and width is a myth!
The majority of designers produce fixed-width sites; they are easier to comprehend and mock up in a graphics package that uses fixed dimensions.
However, unlike print, you need to accept that the user has control over your design. They can change their screen resolution, browser size, typeface, text size, or colours. Designing a page that will work under these conditions is not easy.
Personally, I favour fluid sites: they allow the user to have that control and can work at any window size. If your design must be a fixed width, ensure it can resize gracefully if the user has a different font or change their text size.
3. Keep text as text!
Creating lovely-looking titles with unusual fonts is very tempting, but it’s not without problems:
- The text is no longer readable by search-engine spiders (there are ways of getting around this, but no solution is totally perfect). Your page rank may therefore be lower.
- The text cannot generally be enlarged, reduced, or read by a screen reader. According to accessibility guidelines, you must provide an alternative: that could mean creating a second, text-only, page.
- If the title needs to be changed, or a new page is required, then you must update or create the new graphic. This may not be a problem for a 5-page site, but few sites stay that small for long.
Ultimately, this creates more work for you. Discuss CSS with your developer; you can get great effects without resorting to graphics.
4. Produce your final images using a bitmap editor
Unless you are planning to use SVG graphics, it’s best to produce your final images in Photoshop or another bitmap editor. Vector-based packages such as Freehand or Illustrator are fine for early mock ups, but they introduce problems later, e.g.
- Elements are not quite the right size. On many occasions, I’ve been passed a series of icons or graphics that differ by a pixel or two. This can make coding more awkward.
- Anti-aliasing can be quirky: one edge may be hard, whilst another is semi-transparent.
- Resizing the design and exporting to a bitmap can make your lovely images look awful!
5. Consider dynamic effects
Few webpages are static: most have some form of animation even if it’s just roll-over colours on links. Always consider how the user will interact with your design. This is especially important now that AJAX and DOM scripting allow far greater client-side functionality.
6. Remember accessibility
Small fonts and bad contrast may be permissible in printed documents, but web page accessibility is a legal requirement in the UK and US. Your design may be stunning but, if it’s awkward to use, few people will visit.
7. Work with your web developers
Many designers choose to work in isolation, but this can lead to technical problems later on. My suggestions:
- Switch off your PC and get some rough ideas down on paper first.
- Discuss the design with your developers. Assess the cost of each element to determine whether it’s worth doing the way you envisage. This knowledge is invaluable; some complex designs may be easier than you think (animation, transparency, etc.), whereas some are much harder (equal height columns, styled form controls, etc).
- Code prototypes in HTML. A good coder will be able to change most aspects of your design quicker than you can produce a mock up! This prototype will be invaluable to assess what works and what doesn’t. Your client will also get a far better impression of their site.
Does anyone have any further advice?