Graphic Design vs Web Design

Anton Matusevych

UI/UX Designer

Graphic and web design are two areas that are often confused with each other. After all, they both focus on ‘design’ and they both often work on the same projects. 

 

However, that doesn’t mean they are the same, and knowing the differences is essential for knowing who to turn to at any given point in a project. To that end, here’s a detailed breakdown of each role and their key differences.

Of course, while individual skills can vary based on the respective person or team, there are a few essential core staples of graphic design vs web design that seldom change - these are what define the roles and what we want to focus on here!

 

What is Graphic Design?

 

Graphic design refers to the creation of visual, communicative assets for the user-facing side of products. This can include illustrations and icons (what most people arguably think of as ‘graphics’), as well as typography, photography, and even templates. A graphic designer or team will use all of these mediums to create the necessary assets or compositions for a project.

 

The biggest possible distinction is that a graphic designer doesn’t have technical knowledge. Instead, they supplement their visual skills with an understanding of user behavior and the ability to research problems. This is why graphic designers can also help with page layouts, for example - they understand how users behave and design the frontend accordingly.

 

On top of this, graphic design requires much more than the ability to draw or illustrate. It requires a knowledge of color theory (how colors interact with each other), psychology (how visuals influence user behavior), and the more advanced subjects, such as visual hierarchies (how to visualize more important options over secondary ones). While graphic design is an area that lacks the technical knowledge needed in digital projects, their understanding of visuals, users, and the relation between the two are just as vital.

 

Examples of Graphic Design

 

Graphic design happens all around us - it’s in magazines, billboards, flyers, and any other printed materials you can think of. That said, here are a few examples of graphic design in regards to digital mediums - including how it overlaps and works with websites.

 

  • LinkedIn. While we wouldn’t consider any social media network to be ‘graphic-heavy’, they all nonetheless use graphic design as essential visual shortcuts. Using LinkedIn as an example, the top bar is reduced to a small number of easily-interpretable icons, ensuring easy navigation across screens. What’s more, this helps translate well into mobile and tablets so that, while the visual layout may be altered, the icons ensure consistency and familiarity.

  • McDonald’s. This is a brand with a logo known all over the world, so it’s no surprise that the website and printed materials utilize graphic design components as much as possible. Everything appears text-light and conveys branding through logo, color, and photography. In fact, this is true for pretty much all the best food-related services, such as restaurants and delivery apps: show don’t tell is the way to go.

  • IKEA. All e-commerce or retail operations require strong visuals, but IKEA has cemented itself with branding and style. The company utilizes graphics as much as possible, from its vibrant blue and yellow colors to show its products in a home environment. These are graphic design choices that have defined the company almost as much as their naming conventions.

 

What is Web Design?

 

Web design refers to the skills and methods used in both producing and maintaining a website. This includes both technical skills, such as coding and search engine optimization (which is heavily influenced by technological choices), as well as design-related skills, such as interfaces and user experience. 

 

Whether it’s an individual web designer or a team that encompasses the respective skills required, web design is a process that’s active at the very beginning. In fact, we can say it's essentially product design for websites. It involves understanding the goal of the website, how users will interact with it, making the respective technology choices, and planning a path forward. 

 

However, we did just mention that web design can include some graphical elements. Because of this, it’s not uncommon to see some graphical skillsets within web design teams - which is arguably where some of the initial confusion lies - but it is web designers that create all of the backend infrastructures as well.

 

It’s also worth noting that website design is often considered as its own skillset. While there are many visual elements in common with other software, such as buttons and navigation, websites often have specific technology choices of their own. That being said, with the rise of progressive web apps, the boundaries between websites and applications have become increasingly blurred. 

 

We no longer treat websites as completely separate entities from applications and other software within the business domain. Likewise, we’re also seeing web design skills needed in broader areas.

 

Examples of Web Design

 

Every good website utilizes web design in its conception, so there is a vast range of fantastic examples out there. Here are just a few we’d like to point out:

 

  • Dropbox. While this site might seem very minimalistic, that’s entirely the point. Dropbox’s website is designed to support its business service (transferring files), so the navigation is clean and simple. Likewise, a lot of design choices went into creating the file-sharing process itself in such a way as to work with modern browsers and devices. This is how Dropbox ensures an intuitive and smooth process.

  • Slack. As a product that exists both in-browser and as a downloadable, standalone option, Slack is a fantastic example of where websites and more dedicated software begin to blur. The platform utilizes clear navigation, despite a growing list of features, and usability, which is why it continues to be a user-favorite in its competitive niche.

  • Wikipedia. This is an example of a website that is essentially as far removed from graphic design influences as possible. That said, it has plenty of choices that are made for a reason. Wikipedia needs to clearly and easily display large amounts of information on a single screen, while also creating web architecture to support its wider editing and admin tasks. It may sound easy, but if you look at Wikipedia’s original designs, you’ll see a lot of work has gone into making it as intuitive and usable as possible.

 

Graphic and Web Design Differences

 

Dynamic vs Static

 

Graphic design has been around much longer than web design, but much of its involvement lies in physical media, such as magazines and printed media. On the other hand, web design is purely focused on digital mediums, and herein lies a key difference.

 

In a magazine or book, content is arranged in a specific order, with the design often taking this for granted. The order is somewhat static. On a website, however, different users have their own paths, and designers can’t rely on an established pattern

 

This means that web design has to provide the tools for users to navigate easily, as well as ensure each page of view works as a standalone screen for its respective purposes.

 

What’s more, in an age of personalization and dynamic loading content, web designers are having to be more and more creative. A good example of this lies in e-commerce. On a digital store, the shop can prioritize items based on your preferences, make recommendations based on historical data and trends, and other customizations. None of this happens in a catalog - the technology isn’t there. It’s a whole new area that web designers have to increasingly consider in their work.

 

Creativity

 

Like any product, a website needs to be both usable and stand-out from the competition. A plain website of black and white text won’t get you very far. Today’s users expect a strong visual effort - for this, you need people that are creative.

 

Graphic design is where this comes in. Designers use their knowledge on the target users to create visuals that work. This is where some of the larger branding aspects also come into play, too. A website has to match anything else the business does, such as physical shops or printed materials. Brand-loyal followers should be able to identify with the website easily.

 

File Size & Performance

 

On a website, larger file sizes cause slower loading times and other performance issues, which are bad for both search engine optimization and the end-user experience. It’s well known that people can’t stand slow websites and click away if the response isn’t fast enough.

 

Furthermore, while people also enjoy beautiful websites full of graphics and animations, these are some of the main culprits behind large file sizes and slow performance. 

 

Web designers look at performance as a whole. In addition to working with graphic designers to ensure images are as light as possible, they’ll also look at how content is loaded in, what other actions are working behind the scenes, and any other areas that can impact performance.

 

Scale & Ratio

 

In traditional print media, the size of the page rarely changes. This makes it easy for graphic designers to provide material that’s the perfect size, every time. But, in a digital world, we all own different sized screens.

 

As a result of this, web designers have to consider designs that can be handled on large computer monitors, tablets, or small smartphones. There are many ways of doing this - today, we prefer to dynamically load content based on the device rather than having a secondary mobile-variant of our websites - but it’s a factor that influences every choice.

 

Web designers have to create structures that dynamically adapt to scale. In turn, this means they have to plan with assets that also adapt. An image that appears on a desktop might need to be scaled down - but it also might need to be adjusted to fit the text. 

 

This also influences typography and other areas, creating an overlap between graphic and web design concerns. A graphic design team might pick the most beautiful fonts, for example, but the web team has to test if they’re able to be read clearly on a smaller screen.

 

Visual Theory

 

Earlier, we mentioned both color theory and visual hierarchies. It’s this wider visual theory that’s essential to websites. When a user lands on a website, it’s the visual presentation on the frontend that directs where they go. The quicker they can understand where to move, where to click, and how to find what they need, the more successful the website is in addressing their initial problems.

 

For this, graphic designers understand which colors to use, how to layout pages, how to give space and visual ‘weight’ to the most important aspects and how all of these choices influence the final experience.

 

Ongoing Support

 

When a visual asset is done, that’s it - it’s finished. However, a website is constantly adapting and evolving. New pages or sections are being added, or the web design team has to choose new technologies to make it even more performant. In turn, these choices then mean planning a new section or even redesigning the existing structure.

 

As the internet has evolved, websites have become more adaptable and performant. To keep up, web designers have had to keep up with this pace. The rise of smartphones, for example, meant that mobile sites became more and more vital, while even desktops have new browsers and other technologies that need to be accounted for.

Yet most of this rarely concerns the graphic design, as it’s purely focused on the frontend. When technology choices impact visuals, then graphic design is often involved, but until then, it’s the web design team that maintains and improves existing websites.

 

Analytics

 

We’ve already established that web design is an ongoing process - so who do you think it is that analyses current website performance and data? Web designers use this information to measure their website’s success and plan the next improvements.

 

For example, a typical website might focus on which pages are being viewed (and which are not), how many people quickly leave the website (the bounce rate) and how fast the website as a whole is performing for users. It might also focus on SEO, too, such as which keywords are drawing people in, which pages are ranking highly and what the most common traffic sources are. Many of these can then lead to new web design decisions.

 

However, for more specific websites, it doesn’t stop there. E-commerce stores, as well as other portals, often have to consider user activity even more. Can users find all the items they need? Is the payment process running smoothly? Are people purchasing more - or less - frequently? All of these can indicate when something is going wrong and needs to be improved.

 

Role with Developers

 

While it’s clear that web designers are not web developers (although the two often get lumped under the ‘web dev’ industry), it’s clear they still have strong technical knowledge. This makes them the perfect choice for working side by side with the developers on any given project.

 

Designers have to make technological choices that overlap with developers, so it makes perfect sense that the design role closely interacts with the latter. While the web design role considers file sizes and performance issues, it’s ultimately developers that have to convert everything into functional code. This is also true when it comes to subsequent improvements or adaptations. As a result, communication between these two teams is essential.

 

Graphic design, on the other hand, rarely overlaps, if at all. When the website needs visual assets, it's the web design team that typically hands these over to the developers as part of the complete project.

 

TL;DR - Graphic Design vs Web Design

 

If you’re working on a website, you need both web design and graphic design. The former is active throughout the project, from initial choices to helping developers implement everything correctly. Alongside this, the graphic design brings knowledge of user behavior and visual theory to create assets to ensure the frontend is as user-friendly and inspiring as possible.

 

There’s a balance between the two, of course, as web design has to ensure a product that’s ultimately performant on various devices, but it’s not possible to have one without the other and still expect success on today’s market.

Easter egg ;)