By not accounting for the unique characteristics of the medium, many accomplished designers are struggling to apply their talent to the Web and in doing so, create problems which ripple all the way down through the development process.

This can have a negative impact on project time-scales, costs and user experience. It can also compromise the design when problems which could have been avoided need to be corrected further down the line.

The term ‘design’ is often misused and misunderstood; in this context, I’m talking about the agency-style creative and graphic design stage which is all too often annexed from the peculiarities of the medium and the complexities of the development process.

Here are some ways to avoid the top six problems we encounter with non-Web designs:

  1. Design for screen resolution
    Printed output has the benefit of significantly higher resolution than the screens Web sites are viewed on. As a result, designs created at higher resolution, and proofed/approved on printed hardcopy usually do not translate to a 72dpi screen. Text usually suffers first, becoming unreadably small once the layout has been scaled down to fit within a 1024x page width, or worse if you are constrained to 800x. Other design elements suffer too and the whole balance of the layout can get seriously compromised once the design has been shoe-horned into a medium for which it was not originally designed.

    Recommendation: for non-Flash page designs, create mockups or visuals in pixels at 72dpi. Don’t use a vector-based design application; Adobe Illustrator and QuarkXPress are the wrong tools for this job. Use something like FireWorks or PhotoShop, work with a browser viewport template at 100% size and use browser fonts.

  2. Account for variable content
    Most successful Web sites are content rich, growing rapidly and organically with contributions from numerous sources. Problems arise when a design assumes that content doesn’t vary in length and is always displayed in a fixed size text box. This never happens. Even in cases where content won’t change, different browsers on different platforms will render text differently no matter how well your CSS reset tries to level the cross-browser playing field.

    Recommendation: expect content to change, particularly in length. Make sure your design gives it room to grow and contract. Don’t expect text to fit snugly within a fixed-height box – it won’t.

  3. Don’t treat navigation as a visual design element
    Navigation design is an incredibly important part of the whole Web design process. Information architecture, content classification and user interaction must all be taken into account when designing navigation.

    Visual styling obviously needs to compliment the rest of the site design but it is essential to get the navigation working first.

    Recommendation: fully map out the site’s content first and get a handle on the big picture. From the user’s point of view, navigation needs to be understood and interacted with, not just looked at!

  4. Providing a style guide
    It is not practical to expect visuals for every page on a Web site. Because there can be so many different layout variations, particularly with dynamic pages, developers need a style guide to help them get the aesthetics right where no specific visual exists.

    Recommendation: supplement design visuals with a style guide covering design elements and specific details which can be applied in situations where no page visual exists. Also describe how user interactions should look and work – for example, rollovers and ’selected’ states; developers will happily improvise, but designers will always have something in mind, so they should share it!

  5. Work with – rather than just provide assets for – the development team
    Projects where concept and design are determined, then handed over to the dev team to build, will have problems unless the designers have a thorough understanding of content, technical and user interaction issues, such as navigation.
    Recommendation: It’s a team effort – people working on concept, design and build all need to communicate, work together and respect what each other is contributing.
  6. Don’t sell clients non-workable visuals
    This is often where the problems start. All of the mistakes described above are rolled into a set of print-friendly visuals which clients buy into. When the time comes to start making the design work on-screen and on-line, changes have to be made to get a workable result. “Can you make it look like the visual we approved?”

    Recommendation: if you have to sell a visual concept to a client, make it very clear that it is not an accurate design and is likely to change. If you need to get accurate Web visuals approved, take these important issues into account and present something workable. There is no need to see costs escalate or to fall out with a client over the difference between what is expected and what was delivered.