Web design vs graphic design
By: Monica Galvan
Tags: UI, Visual Design, Web Design, UX, Careers

How are web design and graphic design different?

Now that you have a better idea of what graphic design and web design are in their own respects, what about the key differences between them?

Technical skills

The main difference between graphic designers and web designers are technical skills. Web designers need to be familiar with HTML, CSS, and how to make a design work on the web. With traditional graphic design, you can fully customize your design without too many limitations. But with web design, you have to consider technical constraints like file size and load time.

Web design is dynamic, graphic design is permanent

In many ways, graphic design is permanent. When you design a book cover or a poster, once it’s printed you can’t make any changes. Web design, however, is a dynamic medium. It has the power and flexibility to change and adapt. Every few years, a company might go through a complete redesign of their website. Design trends evolve and it’s important for the business to remain relevant.

Web design is interactive, graphic design is static

With web design, the user can interact with the design. You click a button, navigate through various webpages, there may even be motion graphics and videos on a webpage. Graphic design is less interactive. You can look at it, touch it, but it doesn’t change when you interact with it.

DPI and pixel dimensions

Web designers are concerned with technical constraints like file sizes and load times. For this reason, images need to be sized down. Here’s an article to help on how to optimize images for better web design and SEO.

File size plays less of a factor in graphic design. Usually, you want the highest resolution images for print which tends to create large file sizes. The same image used on the web vs on a printed layout will vary significantly in size. This is due to the DPI (dots per inch) and pixel dimension. Images for the web usually are saved in 72 DPI while printed photos need to use 300 DPI. This is why if you’ve ever tried to print a photo from the Internet, it’s often blurry, pixelated, and super small on the paper. A printed image requires more pixels than a computer, tablet, or phone screen needs to display an image.

DPI comparison, low resolution to high resolution

Typography constraints

While there have been quite a few advances in web design, typography is still somewhat restricted on the web. When you build a webpage, you may specify a certain font in the CSS but if the user's browser doesn’t support it, the design may default to a basic font replacement. It’s a good idea to specify a font stack so that the browser has multiple fonts it can choose from. This simply involves a font-family value consisting of multiple font names separated by commas.

CSS example for adding backup fonts

In the above example, the main typography choice for a paragraph (p) text is Helvetica. But if for some reason the browser has issues displaying this font, it goes down the list in order of the font stack to either Arial or a general sans-serif option.

In graphic design, as long as you have the actual font installed on your computer, you can use any typeface you want and that’s exactly how it will look when you export and print the design. Be sure to purchase the correct license for the fonts you use. Fonts usually come in either an OTF or TTF file format.

Quick tip: You’ll definitely want to outline your text when your logo or graphic design project is complete. When you outline text it’s no longer editable, it becomes a shape. This protects your design so it won’t shift when a printer or another designer opens the file on their computer but doesn’t have the font installed on their computer. By outlining and saving as a high-quality PDF document, you ensure your design remains as you designed it.

Web design requires an ongoing relationship

Websites require continuous maintenance, they are never “done”. Since the web is dynamic, you can make changes whenever you want. As a web designer, your client may want to hire you on retainer or some other arrangement so that you can help with ongoing design updates.

Whereas with graphic design, once your work is sent to print, it’s done. If there are changes, that usually means there will be a new version. For example, maybe it’s a new direct mail piece that will be sent out in a few months. Reprinting and distributing graphic design is also costly. If there’s a mistake on the direct mail piece, the client now has to reprint and pay for new postage to send them out.

Both collaborate with different professionals

As a freelance web designer, you can choose to add web development to your services by learning how to build custom websites with a tool like Webflow. If not, or maybe the client requires you to use a pre-existing CMS, you’ll likely need to partner with a web developer to bring your UI design mockups to life. As a graphic designer, you may work with a production artist who helps clean up and prep your files for final print production.