Designing for print, and designing for web are two different kettles of fish, and learning some of the basic considerations between the two can save you many of the traditional rookie mistakes that plagued us, in our teething process. this little article should hopefully stop you from making any huge mistakes early on.
![]()
Firstly, lets seek to define the two:
Typically when designing for print, I am talking about the following medium:
Typically when designing for web, I am referring to the following:
When designing for web, the common goal is to keep the user on your website for as long as possible or for them to be able to access and process the information they have come to seek as quickly and easily as possible. When designing, for print however, you generally have an aim of catching the demographic’s eye to pick up/read/interact with your print. An advantage of print design is that you are designing for an eventual physical result, so physical properties such as texture , shape, paper weight, size can help you achieve the desired outcome.
Colour Considerations
One must first understand that colour can be segmented primarily for ease in this article into models called RGB and CMYK. When designing graphics for the web, you will need to set your relevant graphics program (e.g Adobe Photoshop) to RGB Mode. This is because the RGB model is used in computer screens. Thus, when designing websites (and other on-screen projects such as presentations), the RGB model is used because the final product is viewed on a computer display and as such the colours you design with will be able to be output accurately by these devices and in these situations. The CMYK color model is used when designing for print. To understand it, it is best to start with RGB color. The RGB color model (made up of red, green and blue) is used in your computer monitor, and is what you will view your projects in while still on screen. These colors, however, can only be viewed with natural or produced light, such as in the computer monitor, and not on a printed page. When designing for print , dependant on your relevant software, you will be working in RGB or in CMYK if your program can. All completed digital files should be converted to CMYK before sending to printers. Because of this issue, it is important to proof prints. (i.e print a copy to test how the colours are produced on paper, so that you can then adjust and correct your colours). Furthermore, designers often use swatches, to show clients what colours look like when printed onto different kinds of paper.
It is also very important to consider that colours which work well in print, do not always work well on the web and vice a versa. If your client, comes to you with a set of pre-determined colours from say a successful print campaign and wishes the same colours to be used on their website; you have to consider whether a bright yellow background with pink text is appropriate for a users bright computer monitor and whether they will find that setup attractive on the web etc. Much of it is trial and error, common sense and a general appreciation for the difference between print and web interaction with the user.
Layout Considerations
When designing for print, you are given a determined an exact size – as such you are 100% per cent sure on how the end result will look and be structured for all who encounter it. When designing for web it is is important to note that people have different monitors, and as such different resolutions. A common early mistake is to design a website on your great spanking high resolution graphic smonitor and then wonder why it does not fit on the standard home users screen. The most common screen resolution is 1024×768 pixels; as such this should be a huge consideration when designing websites. When designing, many web designers use maximum widths of 960 pixels, or alternatively in flash – one can also design sites that resize acording to the users screen resolution/browser area. Another key consideration when designing for web is to place your navigation in a clear and easy to find area. Also, striving to keep it as simple and straight forward as possible. There is no use having great information on a website, if your users struggle to get to it! When designing for print, it is essential that an appropriate trim and bleed is left around the edge of your design to accomodate for the prinitng process. Outside this area, you should avoid placing any vital information such as text which may be trimmed/binded/lost away after printng.
Summary for Print:
Summary for Web:
Further Reading and Sources:
http://www.useit.com/alertbox/990124.html
http://graphicdesign.about.com/od/printvsweb/a/print_vs_web.htm
http://www.grantasticdesigns.com/printweb.html
nice article
joyoge designers’ bookmarks last blog post..source for package designs Lovely Package
[Reply]