Are web design and graphic design the same?

by
Monica Galvan
You want to be a designer but what type of designer? Graphic design and web design may sound similar but there are key differences. In this article, we’ll dive into the two design fields to help you decide which career path to choose.

If you’re new to design, you may be wondering what is the difference between graphic design and web design? Are they the same or do they require completely different skill sets? Which should you pursue and which offers more opportunities as a freelance designer?

We’ll start with defining what each role specializes in then discuss key similarities and differences between the two. We’ll also offer our recommendation for the next step when you’re deciding which career path to pursue as a new designer.

What is graphic design

Graphic designers focus on creating graphics, combining typography with photos and illustration to present an idea. Traditionally, graphic designers used to work more on logos and print design like posters, brochures, magazine and book layouts, and packaging. But over time design has evolved along with technology and now graphic designers work on creating more digital assets for web and email. 

Graphic designers have a deep understanding of the fundamentals of design. Mastering design elements like typography, color theory, visual hierarchy, and layout are key to graphic design. They use software like Adobe Photoshop, Illustrator, and InDesign on a daily basis to create their work. Here’s a YouTube playlist on the best tools for graphic designers.

You can think of visual design as an umbrella. Graphic design and web design are subcategories within design. For more of a background on graphic design and how it has evolved over time, check out this article on The History of Graphic Design. You’ll also learn how key art movements influenced graphic design.

What is web design

Web design is the process of designing the visual look and feel of a website. As a web designer, you’ll focus on planning the user experience of the website, wireframe layouts, organize content and images in a way that tells a story, and design the final UI.

Web designers also need to master the design fundamentals graphic designers must know. They need to understand how to use typography, color, hierarchy, and layout when designing the UI for websites.

For more information on what a web designer does, check out this article on What is a Web Designer? We dive deeper into the specific skills and software you need if you want to become a web designer.

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
DPI comparison, low resolution to high resolution

In this video, Ran walks you through his process for how to optimize and export images for the web so they not only look good but they load quickly and rank better for SEO.

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
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. 

To outline your type in Adobe Illustrator, select all, right-click and choose “Create Outlines” or use the keyboard shortcut Command + Shift + O on a Mac.

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. 

How are web design and graphic design similar?

We’ve discussed some of the key differences between web design and graphic design. It might sound like they’re not related at all but there are a few similarities within both fields, actually within any type of design role for that matter.

Master design fundamentals

Both web design and graphic design require you to have a basic understanding of design fundamentals. Know how to use typography and color to add a clear level of hierarchy to your designs. There may be some technical differences between the two mediums, but both require design knowledge.

If you’re a new designer and still mastering the fundamentals of design, the Flux YouTube channel offers a wealth of information. 

Stay up to date with design trends

No matter what type of design you specialize in, it’s important to keep on top of design trends. Sometimes, you may want the design direction to have a retro feel or be reminiscent of another time period. But most of the time you want to keep things modern and reflective of today’s trends, especially for web design. This is yet another reason why brands and websites go through significant redesigns every few years. They want to remain relevant and keep business growing with the next generation. 

If you’re curious to learn more about design trends, check out our article on The Best Web Design Trends

Creative problem solving

Both web and graphic design require you to be a creative problem solver for the client. Art is for pure pleasure, it doesn’t have to have a purpose, it can just look pleasing to the eye. Design, however, serves a purpose. You’re solving a problem, you’re communicating an idea, the only difference is the medium. Web designers solve creative problems through a well-designed website that converts users to customers. Graphic designers solve creative problems through a logo, branding, or printed materials to educate a potential customer.

Communication

You also need to be a good communicator no matter what type of designer you are. Whether you’re designing a website or a printed ad, you need to be able to communicate well with a client. You need to know how to ask a client the right questions. There’s key information they’ll want to be included in their project, overcommunicate and ask clarifying questions so you don’t misinterpret their guidelines. 

You also need to know how to articulate your design decisions. When you share your design with the client, they’ll likely have questions and feedback. You need to develop your skills and be comfortable with responding in an objective way that conveys you are the design expert. 

In this video, Ran shares how to deal with clients who give bad feedback.

Which design role will be more in demand in the future?

When you’re first learning design and thinking about how to turn it into a long-lasting successful career, it’s important to think about how you want to specialize. You may be wondering, which type of design will be more in demand in the future? 

Our suggestion is to master the design principles you need as a graphic designer and pursue the path of web design. The world is becoming more digital, the best way to future-proof your career is to have the right skills. You can also add other graphic design projects to your services but focusing on web design will help you develop a successful career.

Check out this video where Ran explains why today is the best time to become a web designer.

Learn key design and business skills

What’s next? Check out our post on How to Land Freelance Design Jobs. Also consider joining one of our courses like The $10k Website Process where you’ll not only learn key design fundamentals like how to use typography for the web and how to create dynamic wireframe layouts, but you’ll also learn the strategy and how to turn it into a successful business.


FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.