Print Design vs Web Design 

The internet has presented businesses with probably the most lucrative and effective sales tool ever, if used right. However, many web designers are still creating sites with such a low volume of sales that they cannot even cover online costs. The problem is that inexperienced web designers cannot distinguish between website design and promotion from everything that has come before.

Many website owners and online publishers still think that when they switch on their computers and view a website that they are seeing a printed page on their screen. They then use traditional print strategies in a web layout. This is a big mistake. Nearly all of the rules for print design just do not work on the web. While the delivery of information is still the driving force of online publication, the method of delivery is very different. The end result is often messy and the original sales message is lost.

To help you avoid these problems and issues, we have prepared this easy to use guide on the creation of a web site and how to help you keep focused on creating content and promoting your site.

You will also notice that all the points listed here are implemented on every SubHub site.

1) Resolution

Resolution means the quality of the image measured in pixels. PPI or pixels per inch determine the quality of an image. Because your images are to be viewed on a screen, they do not need to be more than 77 ppi. Anything higher will show no improvement and will only create slower download times.

You can use Photoshop, Microsoft Paint or Paint.Net to alter the quality of images for the web.

2) JPEG's and GIF's

JPEG, or Joint Photographers Experts Group, is superior in rendering colour and detail found in photographs or images that use gradients, blends or other tonal variation.

GIF means Graphics Interchange Format. GIF’s are supported by practically all known web browsers. They can include interlacing, transparent backgrounds, used as image maps and much more.

Sometimes when you look at a website, it is easy to tell that the photos were saved in the wrong format. Images can look grainy or fuzzy. When creating images for your site it is important to think about the format to save them in.

Use GIF is you are working with graphics and line art with flat colours and no gradients. Use JPEG for photographs, or images with fine tonal variations. The right file type is important for both picture quality and keeping files sizes to a minimum.

3) Fonts

For visitors to your site to see the same font as was used to build the site, they must have that font installed on their computer. If they do not, their browser will show an alternative font that may have no relation to the one you intended them to see.

This means don’t get too wacky with your fonts. Make sure you use a standard font that virtually every computer will have installed. If it’s a contemporary look, then you need San Serif fonts like Arial and Helvetica. If you want something more sophisticated, then Times or Verdana are a good choice. Research shows that the plainer, San Serif fonts are easier to read on a screen.

If you really must show off your creative fonts, then present them as a graphic in the header image.

4) Typography

The reality of web design is that you actually have very little control over how your site looks to visitors. It is much less sophisticated than print media. All the aspects of typography, such as font, size, text breaks, page breaks, etc., are actually determined mostly by the web browser and not by the site owner.

Text is nowhere near as sharp on a screen as it is on a page. Because of this, you must be careful not to overload your readers with large blocks of text. Make it nice and easy for them. As always, use lots of breaks and white space.

5) Plug-Ins

Software plug-ins are often a big mistake for web designers. The desire to add enhanced functionality and fancy gimmicks often overshadows the need for commercial success. Just because you can does not mean you should.

There are still some classic mistakes web designers who insist on using plug-ins make:

a) Failing to include a warning to the visitor that a plug-in is required to view the site and where they can download it.

b) Creating a link to the plug-in creator’s website that takes the visitor away from the original site.

If you must use plug-ins, the key is to keep your visitors' attention. Make sure any links to external sites open in a new browser window rather than losing your web page. Even better is to try and obtain direct access to the plug-ins so visitors can effectively download them directly via your site.

6) Navigation

Interactivity is possibly the biggest difference between a print publication and a website. The viewer controls the sequence of pages and jumps around the site using links.

The result of this is that a web designer must present the content of the site in a very different format from print. A website is not a physical product or document and it is not a document waiting to be simply printed. It is a dynamic, interactive and exciting content delivery tool.

You cannot assume that a visitor to your website lands on the home page and reads the site sequentially. They can enter the site from any point and go where their interest takes them. Every individual page must be able to stand up on its own. You visitors need to be able to easily know where they are and how to get anywhere else on your site.

7) Colours

Colours can make or break a website. It is tempting for any designer to utilise their full range of design skills to create a visually stunning and artistic site. However, there are limitations in designing for the web that do not occur with print.

There are in reality only 216 ‘web-safe’ colours you can use. This means that only those 216 colours are viewable on any monitor without dithering, whether on a Mac or a PC.

This means that the colours used in a print piece cannot be easily transferred to a computer screen. There are many variables in print such as texture, finish, paper thickness, inks and absorbency, all of which are not available on a computer screen.

Finally and probably most importantly, too much colour on a website can be very distractive and confusing. Too many colours and colourful items can just end up creating a visual noise. Once again, help your visitors focus with lots of white space and simple designs. Use colour to highlight the important aspects of your message.

8) Computer Screens

A site that looks nice and clean on a big screen with millions of colours may look jagged and broken on an old monitor with just 256 colours. Colours that look bright and sharp on one screen can look dark and dull on another. The size of the screen also has an effect. A site that looks great on a 17” monitor will be cut off on a smaller one. This is why SubHub sites have their content in a central column, to ensure our sites can be viewed on any monitor.

Before finalising any website design, make sure you have viewed it on a number of computers, both on and off site.