4 Ways Graphic Design for Print Is Different than Web Design
Graphic design is such an all encompassing term. You could be designing graphics for a magazine, t-shirts, menus or even koozies and it's all considered to be graphic design. Even though each of those examples are all in a different medium, they're still printed designs that share most of the same rules.
Web design plays by a completely different set of rules than print design. Your print design will look relatively the same on different pieces of paper, but in web design, you could get your site looking perfect in Chrome, but it could look completely different in Firefox. Learning how the two design types are different could help you add web to your graphic design arsenal.
Catchy typography is just as important on the web as it is in print. A printed document will always show the same font, no matter where or what it's printed. However, sometimes a browser isn't able to read a fancy font.
For example, you might have created the headings on your site with the font Karla. Karla is a sans-serif font, but your users' browser may read the font as a different sans serif, because it doesn't have access to Karla.
Before you jump into typography on the web, there's a few things you should keep in mind. Text shouldn't be embedded within an image if you can help it. It should be separately added within the HTML. There are a couple reasons for this, most important being accessibility.
When someone is using a screen reader or accessing a page with a translator like Google Translate, they won’t be able to get that content from the image. People with vision problems, like the elderly, often browse the web zoomed in and text in images can become so pixelated that it is difficult to read. Unnecessary images also add to a webpage's loading times.
Another reason to include text in the HTML rather than in an image is for search engine optimization (SEO). Search engines can't read images the way that they read text.
Costs are also a little different. New web font formats have made it possible for it to be unnecessary for the font to be stored on the user's computer since they're stored on web servers and created within the user's browser. Most of these fonts can only be used online, so be careful and do your homework when choosing a font, especially if some of your work will need to be printed.
You should also keep in mind that even after you've done all this work to pick a beautiful set of fonts, that a user could also have set their browser to override fonts to see the kind of font they like best.
Large file sizes are slow loading, and slow load time can cause you to lose users. The larger the file for print usually means a better quality image, but web images shouldn't be more than 72 ppi, or pixels per inch. The higher the ppi, the longer it'll take the browser to load. The way you've saved your image, or the type of file it is, are also different across print and web design. Most print standards are TIFF and EPS. However, web browsers can't read those file types. Web images should be converted to JPEG, GIF, or PNG.
It's possible to save images for web in Photoshop. From there you can save it as a different file type and change the quality of the image to cut down on download time. Just make sure you're keeping the original source file so you can go back and make changes if needed.
Print projects use CMYK color since they're made using a combination of cyan, magenta, yellow and black ink. Websites use the RGB color model since they're created for screens by using a combination of different amounts of red, green and blue light. This color is then converted to a "hex value," which is a six digit number the browser can read.
What this can mean that a color that's been perfectly selected for print, might not be right as an RGB option. It's possible to use Photoshop or InDesign to convert your work from CMYK to RGB, but it's not recommended, since there could be some unforeseen color issues. If you know ahead of time that your work will be created for web, choose RGB just to save you any future headaches. A web designer should always design knowing their work will be viewed on different quality monitors with different resolutions and brightness.
A print design is pretty much complete as soon as it's been submitted. When you've finished your work on a magazine ad, your involvement with that project is over. If the client likes the design, it's then sent to be printed. Web design is constant and always changing.
In web design, it's important to think about ways that your design might change over time, or how it could look on different browsers or devices. A really pretty swirly font could look great on a laptop, or even a tablet, but on a cell phone it could be tough to read. An idea to help you design this way is to think of your work as little modules or elements that can work together even if they're rearranged.
Typography
Catchy typography is just as important on the web as it is in print. A printed document will always show the same font, no matter where or what it's printed. However, sometimes a browser isn't able to read a fancy font.
For example, you might have created the headings on your site with the font Karla. Karla is a sans-serif font, but your users' browser may read the font as a different sans serif, because it doesn't have access to Karla.
Before you jump into typography on the web, there's a few things you should keep in mind. Text shouldn't be embedded within an image if you can help it. It should be separately added within the HTML. There are a couple reasons for this, most important being accessibility.
When someone is using a screen reader or accessing a page with a translator like Google Translate, they won’t be able to get that content from the image. People with vision problems, like the elderly, often browse the web zoomed in and text in images can become so pixelated that it is difficult to read. Unnecessary images also add to a webpage's loading times.
Another reason to include text in the HTML rather than in an image is for search engine optimization (SEO). Search engines can't read images the way that they read text.
Costs are also a little different. New web font formats have made it possible for it to be unnecessary for the font to be stored on the user's computer since they're stored on web servers and created within the user's browser. Most of these fonts can only be used online, so be careful and do your homework when choosing a font, especially if some of your work will need to be printed.
You should also keep in mind that even after you've done all this work to pick a beautiful set of fonts, that a user could also have set their browser to override fonts to see the kind of font they like best.
File Types and Sizes
Large file sizes are slow loading, and slow load time can cause you to lose users. The larger the file for print usually means a better quality image, but web images shouldn't be more than 72 ppi, or pixels per inch. The higher the ppi, the longer it'll take the browser to load. The way you've saved your image, or the type of file it is, are also different across print and web design. Most print standards are TIFF and EPS. However, web browsers can't read those file types. Web images should be converted to JPEG, GIF, or PNG.
It's possible to save images for web in Photoshop. From there you can save it as a different file type and change the quality of the image to cut down on download time. Just make sure you're keeping the original source file so you can go back and make changes if needed.
Color
Print projects use CMYK color since they're made using a combination of cyan, magenta, yellow and black ink. Websites use the RGB color model since they're created for screens by using a combination of different amounts of red, green and blue light. This color is then converted to a "hex value," which is a six digit number the browser can read.
What this can mean that a color that's been perfectly selected for print, might not be right as an RGB option. It's possible to use Photoshop or InDesign to convert your work from CMYK to RGB, but it's not recommended, since there could be some unforeseen color issues. If you know ahead of time that your work will be created for web, choose RGB just to save you any future headaches. A web designer should always design knowing their work will be viewed on different quality monitors with different resolutions and brightness.
Responsive and Dynamic
A print design is pretty much complete as soon as it's been submitted. When you've finished your work on a magazine ad, your involvement with that project is over. If the client likes the design, it's then sent to be printed. Web design is constant and always changing.
In web design, it's important to think about ways that your design might change over time, or how it could look on different browsers or devices. A really pretty swirly font could look great on a laptop, or even a tablet, but on a cell phone it could be tough to read. An idea to help you design this way is to think of your work as little modules or elements that can work together even if they're rearranged.
