Web Design vs Web Development

Web Design vs Web Development

Share This Article

Share on facebook
Share on twitter
Share on linkedin
What's the difference between web design and web development in 2020? It’s no longer as simple as website design or code.

In 2020, it’s hard to find a web designer that doesn’t have a basic understanding of HTML and CSS or a web developer that can’t put a decent wireframe together.

If you’re strictly looking at the general outline of each role however, the distinction becomes clearer.

Let’s take a look at the differences between web design and web development and what you may need for your next project.

Web Design

Web design covers everything that you see on a website, including its visual aesthetics and the overall usability.

This is also known as user interface and user experience (UI / UX) design.

Key areas include:

  • Wireframes and mock-ups
  • Branding
  • Colour palettes
  • Typography
  • Layout / format
  • Graphic design

Web design is entirely focused on a sites visual appearance and less concerned with the systems and code used to make it all work.

Web design brings a digital experience to life through the use of colour, imagery, typography and layout.

That being said, many web designers are able to use HTML and CSS as it helps with their designs and can allow them to bring a mock-up to life when necessary.

Web designers often work with platforms like WordPress or Shopify to create websites for their clients.

These content management systems allow them to create websites without writing a single line of code while allowing the client to manage their website easily.

Web Development

Web development involves every line of code that makes a website work, from the front-end design code (HTML / CSS) to the back-end server code (PHP / Java).

The front-end code is responsible for displaying the website to the user, a designer creates the mock-ups and a front-end developer makes it work on a website.

Back-end code is in charge of managing the database and serving that data to be displayed on the front-end.

Key areas include:

  • HTML, CSS and JavaScript (front-end)
  • PHP, Java and Python (back-end)
  • CSS preprocessors (i.e. LESS or Sass)
  • Frameworks, Libraries and Git

Front-end web developers rarely create mock-ups or choose colour palettes, these are provided by the web designer.

It’s a developer’s job to bring those mock-ups and designs to life.

That being said, understanding the designer’s intentions requires some knowledge of UI / UX best practices.

Freelance vs Agency

As you can see there is a lot of crossover between web designers, front-end developers and back-end developers and it’s common to find an individual who claims to cover all three areas but often within a team you’ll find people specialising in each specific area.

At White Peak Digital for example a project can involve a project manager, graphic designer, web designer, front-end developer and a back-end developer or that can scale all the way down to simply a project manager and a web designer depending on a project’s specific needs.

A project manager works closely with the client and the rest of the team throughout development, a graphic designer works on branding and logo design, the web designer puts together website wireframes and mock-ups, the front-end developer implements those designs on the website while the back-end developer makes everything work behind the scenes.

I hope you found this post insightful, if you have any questions please don’t hesitate to reach out to us directly.

To your success,

Jackson Gartner
About The Author

Jackson Gartner

Jackson Gartner is a web consultant and the founder of White Peak Digital. He has a background in website design, digital marketing and customer experience. In his free time, he enjoys motorsport and time with family.
Brand Design Checklist

Brand Design Checklist for 2020

When you’re designing a brand for your new business there is always a lot to consider so it’s no surprise if you forget something. Use this complete brand design checklist to help organise everything you need for your new or existing business.

Website Launch Checklist

Website Pre & Post Launch Checklist

A Quality Assurance or Launch Checklist is used to ensure the deployment of a new website goes as smoothly as possible. In this article we’ll take a look at exactly what that involves and how you can use it during your next website launch.

6 Key Focus Points For Website Success Guide

Making Your Website More Successful

Subscribe to learn how to make your website more successful, starting with this free guide. Unsubscribe with one click at any time.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.