When we talk about graphic design then it doesn’t only relate to print industry. Now, we see equal contribution of graphic artists in the web or digital media as well. Designing can be seen everywhere, from websites, mobile apps to posters, brochures, and many more. But it is important to note that as a graphic designer, you should be aware of the technical differences between the print and web industries. Then only you are able to design for both platforms easily. Let’s talk about the differences in detail so that you can start designing for print and web.
Understanding the key differences is a must whether you just started learning graphic designing or already become a designer. To help you in getting better understanding, ADMEC Multimedia Institute prepared this blog for you. In today’s blog, we will be covering the core differences between the two most popular media industries: Print and Digital.
You will explore what Color Modes, Resolution, bleed, typography, file formats, and more are there to use in both media industries in this blog.
Let’s start with a popular quote by David Coroson (Graphic Designer) who once said:
“ Graphic Designer will save the world, right after the rock and roll does.”
Core Differences Between Print and Web Design Every Designer Should Know
We will explore the key terms that are included in both print and web but still have differences.
1. Resolution: DPI vs PPI
Resolution simply means the details an image holds. It is measured in pixels or dots per inch area. Higher resolution equals to sharper and clearer images.
In print, quality of design is measured in DPI which means Dots Per Inch. Higher dots ensure high resolution which is must in print media.
Standard Resolution is 300 DPI. It is because printers need a lot of tiny dots to make a sharp image. Low resolution in print equals blurry results which is not acceptable. Thus, designer make sure to use 300 DPI only!
Web or Digital
In digital industry, we have another important term that is pixels per inch. With PPI, we measure quality of images that will appear on digital screen. Standard PPI value is 72 PPI.
Digital screens are backlit that means designers don’t need a very high resolution for the web. Please remember that higher resolution just improves file size. It doesn’t improve the appearance on screens.
Tip: Avoid using low-resolution images for print. They will look dread when printed.
2. Color Modes: RGB vs CMYK
Printers and digital screens use color in different ways. Thus, every designer should have a good understanding of how computers or systems mix and display colors on different mediums. So, color mode is just a way in which computers use and display colors in a design or image.
For Print: USE CMYK
- CMYK stands for Cyan, Magenta, Yellow, and Key = Black
These are the basic colors used in printers. Students working on Adobe Photoshop, Illustrator, as part of ADMEC training, will learn to work in both RGB & CMYK.
Tip: Designers, please make sure to convert your design to CMYK color mode while sending it for print.
For Web: USE RGB
- Here, RGB stands for Red, Green, and Blue
These are the color screens that are used to display images. RGB has a broad color range with more vibrant colors Make sure to design web graphics in RGB Mode only.
You must give extra value to deciding upon colors.
Well said by Wassily Kandinsky: Color is a power that directly affects the soul.
3. File Formats
Different formats work best for different platforms. Thus, designers need to choose them wisely. Print media file formats are rich in quality and un-compressed in nature which also increases their file size. Digital media file formats are lighter in file size and compressed in nature. Below, we have given the list of top formats industry wise.
For Print:
- PDF – Portable Document Format: It is best for print and keeps your layouts and images intact properly.
- TIFF – Tagged Image File Format: Good to use while sharing single layout for print media. It supports transparency.
- EPS – Encapsulated PostScript: This is a perfect match for vector graphics and illustrations.
Note: Designers, additionally, you can also send .AI Adobe Illustrator Document or CDR CorelDraw Document files for printing.
For Web
- JPEG – Joint Photographic Expert Group: JPEG is perfect for images. It has a quality to compress which makes it lighter in file size.
- PNG – Portable Network Graphics: You can use it for showing transparent icons & logos in designs.
- GIF – Graphics Interchange Format: It is good for short and loop animations but contains limited no of colors.
- SVG – Scalable Vector Graphics: SVG is used for icons and logos especially in websites and mobile apps. This file format is lightest and holds good amount of scalability which make it ideal for different screen sizes.
Tip: Designers, you always need to cross check the file size of graphics while exporting them as they should not take too much time in loading on web. Avoid file size in MBs and GBs
4. Bleed and Safe Zones: Only for Print
What is Bleed?
Bleed is the outer area that we set for final cut of the design going for print. Usually, it is set to 2mm or 1.25 inches. We include bleed area in order to avoid the white edges or border around the design after printing and trimming.
Tip: Turn on the Bleed and extend the background images or shapes to bleed area.
What is a Safe Zone?
A safe zone in design is an area under which we keep our important text and images.
You can call is as margin as well.
Example: If you are designing a flyer. In the Safe zone, document size might be: 8.5in X 11in. But in the bleed, it might be 8.625 X 11.125in. And the margin are will be inside with .5in all around the 4 corners.
For Web: No bleed is needed. Because what you see on the screen is the same as what you get.
This is a very crucial topic to understand for student in both short-term and long-term diploma course in print media design. Specifically, when working on practice or live projects and sending them for printing.
5. Typography: Screen VS Print
Understanding typography is another key term for designer whether going for digital or print. Let’s take a look one by one.
For Print:
- Printed fonts appear more accurate and smoother
- In print, usually serif fonts are used. For eg. (Times New Roman, Lora, Georgia, etc.). These are easier to read in printed designs like newspaper, magazines, books, etc.
Please ensures to use readable font sizes. Keep 7pt minimum for better readibility.
For Web:
- Screens render text differently and we see the usage of Sans-Serif fonts in web generally. San-serif fonts are like Roboto, Arial, Poppins, etc. These are easy to read
Use a larger font size, for example 16px is considered good to read for normal body text in web pages.
Tip: Understand the clear differences between Serif and San-Serif so that you can use them wisely.
6. Layouts and Design Considerations
There are some important things to consider which are related to layout formation and designing as a whole. Designers, take a look at the below given points and understand clearly.
Print Design:
- Think about ink, paper folding, binding, etc. while planning for the layout. You must use grids to organize information properly.
- Also check spacing and alignments of the content carefully as they navigate the eyes of readers.
- Think about how people hold or open a printed item and start designing accordingly.
Web Design:
- Most important thing is to check whether the web page is opening well on different type of digital screens like mobile, tablet and large screens. If you aren’t sure about it then plan for UI UX training as it covers this part in details.
- Make sure to use flexible layouts, grids, or flexbox.
- Examine clickable elements, hover effects, and scrolling behavior too.
Please always remember the sayings of Steve Jobs: “Design is not like what it looks and feels, design is how it works”.
If you want to improve command on web field especially in terms of websites and applications then take a look at the programs in web design offered by ADMEC. These courses are planned for both creative and logic minds who have passion to design and code powerful websites for the world.
7. File Size and Optimization
Another important thing is the file size and its optimization for designers working for print media as well web media. Here are some tips for both.
For Print:
- There is no issue in large file sizes. They are okay when you are sending files for printing.
- Please avoid any kind of image compression as there is a need for using high-quality images in printing.
For Web:
- File size is a big concern here. Please keep small file sizes as they help in fast loading on server.
- Give extra time to image optimization. Use options like Save for Web in Adobe Photoshop, Adobe Illustrator, or through websites like Tiny PNG.
- Please remember to balance the visibility of the images and overall designs while compressing.
Rule of Thumb: Keep your images under 500kb, if possible on internet.
8. Interactivity: Static vs Dynamic
Interactive designs are in trends. Here’s a clear differentiation for them in top two media fields.
Print:
Designs in print are static, because once they are printed, they don’t change at all. That is why designers focus on materials, colors, and layouts to capture the readers.
Web:
Internet media is completely interactive. We see animations, slides, buttons, links and lot on webpages and applications. Thus, here, designers should especially focus on user experience. Think in advance about how the users will interact with the designs on internet.
9. Testing and Proofing
One of the most significant stages in both fields in testing and proofing which take place differently in them.
Before You Print
- Do a test Print in low resolution like 150 DPI or 72DPI.
- We do it to recheck the spelling errors, bleed, accuracy, color, trim marks, etc.
- It is also important to get client approval before final print.
Before You Publish on Internet
- Test it once on different screen sizes especially on mobile as most of the users access digital media using mobile devices.
- Check its loading time carefully
- Always make sure that texts are readable, links are active and all interactive features are working properly.
10. Final Thoughts
Whether you design for print or web, both need attention to detail. But the details are different. The only difference between both that one is inked and the other is light on the screen. Once you know how to handle each medium. It will help you to become a versatile designer. This will increase your chance of getting high salary hike too.
Additional questions to ask yourself before start designing:
- Where will these design live?
- Who’s gonna see it?
- What formats work best for the message
When you get the right answers, your half job is already done at that spot.
Learn in detail with ADMEC Multimedia
So, if you got the spark to start, then ADMEC offers many special things to get started. You can learn from expert instructors via both online and offline classes. There is a proper guidance with 100% placement support to help you achieve your desired job like our placed students.
We offer:
- Diploma and certificate Courses in both web and graphic design
- Training in Tools like Illustrator, InDesign, Photoshop, and CorelDRAW
- Live Projects for Print and Web
- Affordable Course Structure
- Classes with Small Batches and much more.
Conclusion
So, whether you are designing a website or making a complete brand identity campaign. You, as a graphic designer, are to communicate visually. How the medium affects your designs is the key to success. Know your formats, understand the tools. Respect the Rule, breaks it when you understand it. And never stop learning. Now, you are ready to design smarter for both print and web!