Web Design vs. Graphic Design – Do you Know the Difference?

Web Design vs. Graphic Design – Do you Know the Difference?

Both are equally important to a beautiful and easy to navigate e-commerce site, but what are the differences between the two? In this article, we explore the differences and similarities between graphic and web designers.

There is often confusion between graphic and web design and with good reason – sometimes the two disciplines overlap, making it easy for non-tech people to mix up the two and attribute graphic design tasks to web designers and vice versa. It’s a common mistake, but one that ends up costing site owners time and money. So, let’s take a look at how each profession contributes to the creation of websites and their elements.

Both graphic and web design influence how a website looks and feels, but they play very different roles in the process. Simply put, graphic design deals with the visual while web design deals with the mechanical aspects of a website. Therefore, if someone needs to create or modify an image – that’s graphic design. And though the title of this post misleadingly pits them against one another, web and graphic designers actually work together to contribute to the overall design of a website. However, each profession has a different skillset and defined role in the creation process. Understanding these crucial differences allows e-commerce site owners and managers to find the right person and service for the design of their website.

Art and Mechanics, United!

To make it easier to realize the differences between graphic and web designers, readers first need to understand that both deal with typography, graphics, and principles of designs. It’s when we look at the logistics of how each discipline deals with those that we begin to see the differences. Think of the graphic designer as the artist and the web designer as the mechanic, working together to create something beautiful. The artist may come up with the concept and look of the project while the mechanic builds it. To build it, the mechanic should have an understanding of the artist’s vision and concept to make the project come together. While the artist needs to have an understanding of what the mechanic is capable of and adjust their ideas accordingly. Following this example, a web designer should have a basic understanding of graphic design to do his or her job, but that doesn’t make him or her a graphic designer. A web designer is still the person that is more deeply involved in the building of a website while the graphic designer is responsible for the visuals of it. Simultaneously, a graphic designer that has a basic understanding of web design can create work that is web friendly, making the web designer’s job easier.

Below are some of the main differences between the two roles.

Web Design

  • Technology based
  • Does tasks like responsive design across all devices, creates slideshows, wireframes and site maps
  • Understands user behaviour and how to design a website accordingly
  • Degree field: Computer Science
  • Programs and tools used: Programming languages like HTML and CSS, Adobe Dreamweaver, Adobe Photoshop, site testing tools

Graphic Design

  • Art based
  • Does tasks like logo, banner ads and email header designs
  • Understands colour theory, the use of negative space and other design principles
  • Degree field: Graphic Design
  • Programs and tools used: Pen and paper for hand sketching, Wacom tablet, Adobe Photoshop, Adobe Illustrator

A Web Designer and a Graphic Designer Walk into a Bar…

To further explain the differences between graphic and web designers, let’s take a real-life example to illustrate how these two individuals would potentially work together on an e-commerce site.

Situation: An e-commerce site owner wants to redesign the header of their website. He or she approaches a graphic designer and a web designer to do this. The owner has a few specifications – the header needs to be blue and have a different-coloured hover effect over the menu items. The owner also wants a sticky header – meaning that it stays on the page as the user scrolls through the site.

Step 1: The graphic designer creates the header using Adobe Illustrator or Photoshop. He or she may give the owner a few examples using variations of blue as well as several font variations.

Step 2: The owner chooses the design they prefer and head off to their web designer or developer. At this point, the graphic designer’s job is done – they were responsible for the execution of the visual aspect of the job.

Step 3: With the design in hand, the owner recruits the web designer or developer to implement the design into their website. Using a programming language, he or she translates the graphic designer’s vision into a tangible website. They would also be responsible for the code that makes the hover effect possible and makes sure the design is responsive and functions across desktop and mobile. The web designer or developer is also the person that would make the header sticky, as per the owner’s request.

The Final Design

With the differences between web and graphic design explained, you are now familiar not only with their roles in a project but how both professions contribute to the visual look and feel of a website. So next time you need something updated or created for your site, you will know who to call – a graphic designer, web designer, or possibly both! Want to see some actual examples of graphic tasks that we offer? Click below!

Read more articles