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).
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.
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.
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.