What makes designing for the web different to designing for Print?

Design for the web is considerably different to designing for print. This post discusses ten ways they differ and explains how we at Distilled design for the web.

As a web designer, I’m constrained by the build. Not all designers and developers follow the constraints that I’m used to, but Search Engine Optimisation (SEO), Accessibility and Usability are key features which dictate the conventions we use.

Firstly, for those of you who don’t know let me explain what these terms mean:

SEO – All our websites are designed and built with SEO in mind. SEO is the process of increasing the amount of traffic a website receives by improving its ranking within Search Engines. This optimisation primarily involves finding and using key words and building links.

Accessibility – We build with accessibility in mind to ensure that people of all abilities and disabilities can use our websites. This covers visual impairments, mobility and auditory problems.

example the Nike website
This website has especially poor accessibility, and people who use screen readers are likely to have javascript disabled so would consequently view this web page like this:

nike-2 Nike website with javascript disabled

When it should look like this:

nike-1 Nike website with javascript enabled

Usability – This involves making websites easy for visitors, without requiring them to need specialised training. Any visitor to the site should be able to use the website’s features and understand the functionality in seconds; a website should be self explanatory. Following certain widely used conventions will aid this process.

So, getting back on track, if Accessibility, SEO and Usability are high on your agenda take note of our Top 10 tips for Web Design (and how it differs to print).

1. Fonts
In print any font can be used, but on the web specific fonts have been chosen to ensure the font is likely to be present on a wide range of computer systems. If a non-web-safe font is used then it is likely that it will just be substituted anyway. There is very little control over this so it is wise to choose from the limited choice that is available. Web safe fonts only apply to copy that is editable. If your copy is an image then it will not be visible in search engines which is a bit of a no-go when it comes to SEO.

2. Keep an eye on image size
On the web using lots of very large high quality images especially background images will cause excessively long loading. People get bored very quickly on the web so this increases the likeliness of a high bounce rate. There are still limitations for print design, but these concern different issues.

3. All images are squares or rectangles
When images are prepared for the web they are all either squares or rectangles even if an image is visually an obscure shape it will be prepared as a square or rectangle. A perfect example of where this hinders a design is: Silvercube

The original design had copy coming up to the diagonal slant on the imagery, however, diagonal copy is very hard to reproduce within the build; each line would have to be in a separate box to create the diagonal affect. This is especially hard when working with content manager systems.

bad-example A separate text field would have been required for each line.

The design had to be changed so that the copy was in a straight column, this has left quite a strange gap, where there is no content:

block-copy-example

If you think of website design in a building block fashion it really helps to make everything a little clearer. In print design images can easily have copy floating over them.

4. Pixels cause distortion
Diagonal lines on the web generally cause distortion because of the square format of pixels. Lines can often look jagged and appear to have notches within them as opposed to being smooth.

line-example

Notches created when the lines cross over pixels.

Below is an enlarged section of line ‘2’, enabling us to see where the line is distorted as it crosses over pixels.

staggered-line


Close up of pixels in example ‘2’

This is not always the case but it is something to consider when preparing the images for web that they are at a high enough resolution. Print isn’t concerned with pixels but instead dpi (dots per inch). Higher resolutions of 300dpi are used as apposed to 72dpi (for web); this ensures imagery is clear.

5. Your canvas size is restricted
Print design allows you to design for any style format you desire. A4, A3 or a massive banner. Web design on the other hand has limitations regarding the width of the website this is usually between 800 and 1024px wide. Confusingly this width is ever increasing as the majority of the general publics monitors become larger with larger resolutions. The height of a website however is limitless but peoples patience with scrolling may be less so!

6. Font size and colour
With print the use of subtle gray hairline thin copy is often seen as clean and minimal design. The web has been built as a user friendly environment catering for everyone even people with visual impairments. Some browsers have minimum text sizes to ensure copy is legible for everyone; this could alter your design significantly once it is live. Below is an example of how tabbing up enables people who are visually impaired to see a website in various sizes.

bbc1 Original size


bbc2 Larger


bbc-3 Much larger


7. Browser output will distort your design (pixel perfect designs)
When sending files to print you will have a relatively good idea of how the output will look and large print runs are proofed to ensure a high quality finish every time. The web on the other hand has limited control on how the user sees the final website. The design you see can differ considerably in different browsers, much cross browser testing has to be done prior to the launch to ensure websites can be viewed as consistently as possible.

8. The fold intensifies hierarchy
Print. Whether it is a poster or a page in a book, usually the whole page can be viewed at once. Web pages differ. The fold limits what can be viewed at once. Everything above the fold can be viewed without having to scroll. The fold consequently means that all the most important elements on a website need to be positioned above this point, so considering the hierarchy of elements is even more important.

9. Colour treatment (solid colour backgrounds and transparencies)
When printing block colour, difficulties can arise with colour banding and colour bleeding into non colour filled spaces. Web block colour backgrounds can hinder legibility. Why are there still websites out there that use bright red as a background colour! White text on a dark background creates an optical illusion making it seem bolder than black copy on a white background. This can be particularly confusing for people with learning difficulties, letters get jumbled and long blocks of text can become confusing.

10. Patience is limited
It has been proven that people have a shorter attention span when searching for something on the web than they do when trying to locate something in print. This is really where usability come into play. Ensure you really organise information well and present users with choices in an obvious way (conventions can really come into their own here). Remember if people don’t find what they are looking for easily they will get tired and navigate away from your site very quickly.

Keeping these ten points in mind will help when designing a website, especially if you are looking at a career change from print to web. These points should minimise the difficulties often experienced when turning designs into a working website.

Leonie Wharton

Leonie Wharton

Leonie is one of the longest standing members at Distilled and was here when the company was just 5 members. Her time is split evenly over client and internal work. Client work focuses on linkbait projects for our clients, working closely with the...   read more

Get blog posts via email

19 Comments

  1. Stephen T

    A great summary Leonie thanks!

    Another element that of design that is different on the web is the use of layers and transparency. It can be tremendously difficult to create nice layered pages that have elements of transparency that are cross-browser compatible.

    Also, for the web, there is the iteractivity of the design with the user to consider (e.g. should things change as you rollover them?).

    reply >
  2. Hi Stephen,

    Yes layers and transparencies can be troublesome, the developer here is never very happy when I include transparencies within my designs because of the cross browser problems especially with IE6.

    reply >
  3. Great round-up, Leonie. You're dead right on every point.

    reply >
  4. Hi David, thanks for your appreciation I will endeavour to write more soon

    reply >
  5. Great post....

    You covered alot of ground here, I cant wait to print this and add it to our "WALL"

    Regards
    J

    reply >
  6. I think another thing print designers need to be wary off is the siren call of animation. There is a lot of excitement about leaving the static realm of print that leads to overly animated sites done all in Flash.

    Remember that you are designing a user interface, a UI that has to help the visitor achieve their goal as quickly and efficiently as possible.

    With the exception of entertainment focused properties, no one is visiting with the goal of being amazed by movement, sound, or a unique navigation metaphor.

    reply >
  7. Hi Chris,

    Thank you for your comment, and I couldn't agree more; usability is one of the key factors we consider when designing a website, it is always the users experience that is considered first and foremost above a complex design. If the user cant find what he or she is looking for quickly then the website has failed to be a useful tool, regardless of how beautiful it is. Also in a similar way to laying out print based designs we always begin a project by creating wire frames which help us to consider how a user should use the website in its simplest form. So this really is a case of function before form.

    reply >
  8. I couldn't agree more with the last comment. There's a reason we moved away from every website having a splash page with intro animation to what we have today, where every home page is the calling card for the site.

    reply >
  9. One other difference - you can carry on fixing it once it's live on the web. You never hear about phase-one of a poster or magazine print run - once it's printed, it's for ever.

    reply >
  10. Hi Malcolm,

    Thanks for the comment. You are of course absolutely right. However, sometimes it feels as though during the final stages of checking a website in test before it is launched people are less careful than they would be when proofing a book before print for example. The attitude of 'oh it can easily be changed' can lead to a lot more mistakes than necessary.

    reply >
  11. That is true! I was more thinking of the situation where everything is running late, and you're wondering whether to push something live, or wait while you fix lots of small-ish problems (many of which only becme apparent when you pour real content into templates etc just before go-live).

    reply >
  12. Hi - For number 3, there is an elegant solution to wrap the text that doesn't involve breaking the content into different lines: use Sandbagging Divs link to good tutorial here. That way you can keep your CMS happy and keep your design.

    reply >
  13. @Malcolm - Although I agree with you that the web gives you more flexibility as to changing and fixing things, clients generally like to have a bug free site on launch.

    Also with print, especially with books, publishers tend to do several different print runs, which is a similar approach to publishing a site, then fixing the bugs and publishing the relatively bug free version.

    @Gareth - Looks like an interesting technique for getting content managed text to wrap around an image, however I still prefer designing away from the problem instead of placing a lot of unnecessary div elements within the page.

    reply >
  14. 800 and 1024px wide is rule that i put at the top! i have used sites or should i say tried to use site who blow the screen way out. They don't get my attention for long.

    reply >
  15. I think it’s much easier to switch from print design to web rather than the other way around. print-oriented jobs require some knowledge (and info) about the processes in the printing house. ignoring it may produce something you wouldn’t like to show in your portfolio because it looked nice on the screen display but it doesn’t anymore on the paper.

    reply >
  16. I think it’s much easier to switch from print design to web rather than the other way around. print-oriented jobs require some knowledge (and info) about the processes in the printing house. ignoring it may produce something you wouldn’t like to show in your portfolio because it looked nice on the screen display but it doesn’t anymore on the paper.

    reply >
  17. Thanks for the comment. You are of course absolutely right. However, sometimes it feels as though during the final stages of checking a website in test before it is launched people are less careful than they would be when proofing a book before print for example. The attitude of ‘oh it can easily be changed’ can lead to a lot more mistakes than necessary.

    reply >
  18. Great work! This is the type of information that are meant to be shared around the net. Disgrace on Google for now not positioning this put up upper! Come on over and talk over with my site . Thank you =)

    reply >
  19. This design is steller! You obviously know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost.
    ..HaHa!) Excellent job. I really enjoyed what you had to say, and more than that,
    how you presented it. Too cool!

    reply >

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>