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?

7 comments:

  1. 30 January 2007 Christopher Shaw commented

    Tip #8: Where possible, use reduced palette size and medium to high compression in final images. Not every user has a high speed connection, in fact it’s only about 70% in the USA, and nothing invites the “back” button faster than a page which takes 3 minutes to load.

  2. 30 January 2007 Craig commented

    That’s a great tip, thanks. Even with broadband, the smaller the total page size, the quicker the download, and the cheaper your hosting costs will be!

  3. 31 January 2007 Andrey commented

    What is your attitude to implementing 3d solutions into online store web sites? What impact can these technologies have on online buyers?

  4. 31 January 2007 Craig commented

    3D has it’s place - especially in online shops. Your website handles it the right way: it’s an option rather than being the only way to view a product.

    The only problem is that you need a browser plug-in, and that will put some people off. Perhaps you could consider using Flash - most users already have it installed.

  5. 7 February 2007 Andrey commented

    Comparing 3D product view presentation with Flash it should be pointed out that 3D models are considered to be more realistic! The point is that they allow users to rotate, zoom, move, flip and see each aspect of a product from any angle in real time! In addition the latest technologies allow creating 3D technologies with a small source-file size with excellent quality. These models are downloaded within a seconds!!!
    3DProf4online
    from TouchBubble.com

  6. 7 February 2007 Craig commented

    I meant that it would be ideal if the 3D viewing system had been implemented in Flash, then no additional plug-in would be required.

    Whether Flash could do it is another matter…

  7. 9 February 2007 Andrey commented

    Ok, Craig! Thanks a lot for useful advices. We will take them into account in the nearest future! Our software development department will pay attention to this problem! Thanks!
    3DProf4online
    from TouchBubble.com

add your comments
please enter your name
please enter your email address - it will not be published anywhere
please enter your website address
please enter your comments (all are moderated and checked for spam)