Why Website Design Isn’t The Same As Traditional Design

August 03, 2014

Most businesses pay for some form of traditional design work when they start up, usually business cards and leaflets. When it comes to needing a website, it can be tempting to reuse exactly what you have on your leaflet; after all, the designer did a fantastic job and it really does look great printed on A5 glossy paper. However, it doesn’t really look very well thought out if you leave in the text ‘for more information visit our website’. Similarly a website design shouldn’t necessarily be printed onto a leaflet, especially if the text being printed contains ‘click here for more info’. OK, these are extreme examples of why the two are different, but there are many more subtle differences in the skills needed by a website designer rather than someone who designs for printed media.

Websites are not shown on a fixed medium

Leaflets, business cards and other printed media are always designed for the size at which it is intended to be printed. It’s a fixed canvas size, so is made to look perfect at that size, but only that size. We all know that a website can be viewed on a computer, a laptop, a tablet or a phone, so a web designer needs to make sure that it looks good on all these different screen sizes. As well as contending with different sized screens, there are different aspect ratios too. A widescreen display could show a web page differently to a standard 4:3 monitor. Plus, don’t forget that phones and tablets can be rotated into wide-view which changes the screen ratio too. Then there is retina display vs standard resolution and not forgetting that there are differences in how things can look in different browsers and operating systems.

Websites are interactive

Animations, mouse-over effects and pull down menus all give the website visitor instant feedback as they interact with it. None of these concepts exist on printed media, but they all need to be designed to be beneficial to the visitor and improve their experience on the website. Let’s look at the most basic type of interaction on a website, clicking a button. Firstly it should be designed in a way that it looks like it can be clicked on, this will guide the visitor to clicking on it. Then when it is clicked, some sort of feedback should be provided so that they know they have indeed clicked it and don’t keep trying!

Navigation design

When a leaflet is designed, the designer will think carefully about where your eyes are drawn to and how they move around the page, and the same considerations can be applied to designing a web page. However, when I talk about navigation design, I mean how the pages are organised and how they link to each other. To get this right you need to understand the habits of your audience and how they move through a website. Remember that website visitors can start from any page and move around the website jumping from page to page in any order. Each page must be standalone and not assume that another page has been read previously.

Technical restrictions

Typography is far more limited in web design than in print design. When fonts are chosen for displaying text on a web page, the font needs to be compatible with the browser and operating system of everyone who views the website. There are only certain fonts that are optimised for web compatibility, so using any that are outside of this range will result in a less than optimal design for everyone. Web fonts have come a long way over the past few years and we aren’t restricted to the likes of Arial, Georgia and Times New Roman any more but we still have little control over things like spacing out individual letters for optimal design.

Bandwidth is another technical restriction in web design. Images on a website are often reduced in quality in order to ensure that the web page downloads fast. With faster broadband speeds now available, this is becoming less of a problem, but professionally printed media is always going to be far superior for image quality.

Space is unlimited

Two sides of an A5 leaflet has a limited amount of space, so text has to be kept to the point. On a website, you can have a lot of information and allow the design to dictate how much is seen at one time to prevent overwhelming the visitor. A printed page can all be seen at once, but when viewing a web page, it’s likely that you’ll have to scroll to see what is further down. This needs to be considered when planning where everything should be positioned on the page.

Web sites evolve over time

Once a print design has been printed it is considered to be finished. A website is never complete and is likely to change over time and have pages added. The design of a website needs to allow room for growth. If text is added or removed from a page, will the design break? Does the design only allow room for a category name to have so many characters? Pages need to be designed so that they will look nice with any number of items, not just when there are exactly 8 because that’s how many were used in the design concept. Typically a web page layout will be designed show items in rows of 3 or 4 and once there are so many, there will be a second page. This concept is called pagination and requires design too; is there room to list all pages once there are 50+ pages?

Which is more important?

Printed media is designed to be looked at instantly and usually read quickly, it needs to make an impact. Funny as it may sound, the web is not always available. If you give somebody your website address, they won’t look at it until later on. This has the advantage that they will probably have more time to have a proper look, however you won’t be there with them so they can’t ask you questions. A visitor to a website needs to be able to find what they want from it on their own.

The bottom line is that the goals of printed designs and website designs are different and they shouldn’t be duplicates of each other. They should be used to supplement each other.