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
When it should look like this:
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).
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.
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.
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:
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.
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:
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.
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.
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.
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.
Your canvas size is restricted
design allows you to design for any style format you desire. A4, A3 or a massive banner.
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!
the use of subtle gray hairline thin copy is often seen as clean and minimal design.
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.
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.
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.
The fold intensifies hierarchy
Whether it is a poster or a page in a book, usually the whole page can be viewed at once.
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.
Colour treatment (solid colour backgrounds and transparencies)
block colour, difficulties can arise with colour banding and colour bleeding into non colour filled spaces.
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.
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.