Design Elements for Print and Web: A Newbie's Guide Part 1

Design Elements for Print and Web: A Newbie’s Guide Part 1

Web Design and Print Design have historically become uncomfortable bed fellows. Although they jostle and seem at odds with one another, the two are inextricably connected. Master both of them and your business has the world as its proverbial oyster. So here are some juicy tid-bits to sink your teeth into. Join us as we illuminate the facts about design for print and web, and strip away some of the jargon.

Pixels

Every computer based image is composed of thousands or millions of tiny dots. These are akin to the dots you get when looking at an old-fashioned TV. Each of these dots has their own individual colour. When we zoom out and look from a distance we can view the entire image. Computer monitors have display sizes of approximately 800×600 pixels, 1024×768 pixels, or 1280×1024 pixels. Although obviously the more pixels, the more incredibly crisp the picture will appear.

Design Elements for Print and Web: A Newbie's Guide Part 1

 

Image Source

Resolution

Resolution basically means the number of pixels that are displayed per inch of an image. These can also be considered in metric form, i.e. pixels per cm, however the jargon and terminology of digital design normally talks about pixels per inch. Although it’s important in digital design to remember that higher resolution doesn’t necessarily mean a higher quality image. What matters is the total size of the image or total number of pixels in the image. People generally refer to pixels per inch or ppi when talking about digital design and resolution of images for the web.

Alternately, if you are seeking to print something, then a different set of rules apply. You will be talking about dots per inch (dpi), not pixels per inch (ppi), because we are referring to the printed page and not pixels.

Unlike digital design, print design images with a higher resolution will yield a higher quality image. Therefore if you intend to print an image, you want to use a higher resolution than you would for a web graphic to achieve a higher quality print.

 

Design Elements for Print and Web: A Newbie's Guide Part 1

Image Source

RGB (Red, Green, Blue)

This is the colour that’s used by colour monitors, digital devices, recording devices and in web design. Basically anywhere that colour is in a digital format and not printed, it’s using a RGB colour space. When you look at the colours on screen in RGB they will look vibrant, however if you try and print them in this same format then they will come out dull. This is because the colour space needs to be converted to CMYK, the preferable colour space for full colour printing.

CMYK (Cyan, Magenta, Yellow, Black)

This is the colour space used by printers. The actual colours for printing are cyan, magenta and yellow. Black is added for contrast, it’s a subtractive colour because when it’s removed you gradually get white. In order for CMYK images to work on a digital screen, they must first be converted to RGB colour space for Web design.

Graphics and File Size

There is a natural trade-off between image quality and file size. Both are directly correlated to each other. And any designer worth her weight in experience will understand that. Generally speaking the higher the quality of the image, the greater the file size will be. Also the larger the image, the larger the file size will be.

Design Elements for Print and Web: A Newbie's Guide Part 1

Image Source

When using images on the web, it’s vital to make images smaller. This will reduce the loading time of the web page. Basically when a visitor comes to your website, if there are big photos on there it will cause a long loading time. In the meantime the visitor may grow tired of the wait and click the back button or close the tab. This is a recipe for disaster for online businesses trying to get traffic to the site. So image size is crucial in web design.

Stay tuned for the next installment in the Print and Web Design Newbie’s Guide. We will be looking at different types of production files. Created by Athena Dennis for Total Web Design.

 

Leave a Reply