Understanding the difference between web design and web development
“So, what do you do?”
That’s a simple question but hard to answer, right?
Personally, the way I answer depends on who is asking the question. Do they have any sort of tech background? Will they understand the type of work I do, or do they come from a completely different industry? Is it really something I want to get into? These are all things I consider before I reply.
I usually keep things super simple by saying “I build websites”. However, sometimes I’ll go a little deeper and say that I’m a web designer/developer.
This, my friends, is where I usually lose people. And if we’re being honest, it’s for good reason!
Most people aren’t familiar with how a website is made - they just know that it gets “built”. In reality, a website is a combination of web design AND web development. Sometimes the entire process can be done by one person (like me!) but depending on the complexity of the project it may be completed by several different professionals.
Today we’re going to break down the difference between web design and web development so that we’re all clear on the different roles and responsibilities that go with both parts. Whether you’re interested in starting your own project or hiring it out to someone else, this will give you a better understanding of what’s involved.
Shameless plug: interested in hiring a web designer/developer? I can help!
Can you do both?
In many cases, a person will do both web design and web development. This is especially true if they are creating “simple” websites for individuals or small/medium businesses. For most straightforward, content-driven websites, the same person will take care of a project from start to finish. I’m a great example of that - my clients come to me with a (relatively) simple website and I take care of the entire project for them.
Things get a bit more complicated, however, as your needs grow. Not everyone has all the skills (or available time) required to complete a project of that scope, so if you require more complex properties, it could take both a web designer and a web developer to create the site. You might choose to work with two people (a designer and a developer), or a team/agency that takes care of all duties in house.
But hold up! Let’s get back to basics and look at the difference between web design and web development.
The web design & web development process
As you might have gathered from the intro, web design and web development both fall under the website building process but they are two very different components. Before a website gets designed and/or built, the project kicks off with a look at goals. We’ll consider questions like:
- Who will be using this website?
- What are the goals for the website? Information? Revenue driver? Lead generating?
- What key content or information do you want to relay to your audience?
- What message do you want to share? How is this aligned with branding?
- Etc.
The responses to these questions will guide the information architecture (IA) and help to create a sitemap and layout. Before we can get designing and building, we need to plot out what information will be included on the website, and the best way to present it. This is step one.
What does web design mean?
Once the goals are covered and the vision for the website has been outlined, it’s time for step two: web design.
At the most basic level, web design focuses on usability and the aesthetic part of a website. A web designer will create a static layout of a website as well as the visual elements.
Web design deals with the front end of the website, meaning what the visitor/customer sees. They’re concerned with how it looks as well as how people interact with the site. You might hear about the overlap between web design and user experience (UX) and this is definitely true.
A web designer knows and uses the principles of design (balance, proximity, alignment, repetition, space and contrast), and has a great understanding of web usability. They are looking to create a site that is easy and intuitive to navigate that also looks good.
Related: Should your website have a sidebar?
Most individual or small/medium business website projects work off of an existing Squarespace template or Wordpress theme (read my post on the differences between the two platforms here). The design gets installed and further customized as needed, and overall branding is put in place. No point reinventing the wheel, right?
However, there are cases where the design and development are built totally from scratch. If this is the case, the designer will create wireframes in a program like Photoshop to test out layouts and UX before handing the design files over to the developer who will then build it all out.
Ever heard the expression “function follows form”? This is the guiding rule for most web designers.
What does web development mean?
Once the web design has been mapped out, it’s time for the web development (“the build”) to begin - also known as step three. A web developer will take the design and bring it to life through interactive components and elements.
As mentioned above, a popular option is to use a content management system (CMS) like Squarespace or Wordpress because it:
- Streamlines the development process
- Gives clients a place to access and update the website content in the future
- Is (relatively) quick to get up and running
If the developer goes this route, they will select a platform, choose a template/theme, then get to work customizing it to meet the business goals and web design outline.
Related: How to easily find out which Squarespace template a website is using - video tutorial
However, some projects are more complex and require a custom build. This happens by breaking the design into front-end and back-end development stages.
Front-end development takes the design files (provided by the web designer) and builds the site from scratch using HTML for structure, CSS for visual styling, and maybe even another language like Javascript or PHP.
Small sites usually only need front-end development, whereas back-end development comes up for larger or more complex projects. Back-end web developers focus on overall tech solutions, either from scratch or by using an existing solution.
Back-end development is focused on higher-level programming and interactions on web pages. They look at how the site works and what functionality is needed to get things done for the customers. This could be something like connecting e-commerce shopping carts to online payment processors, integrating softwares, adding web forms, interfacing with various databases, and a whole lot more.
Related: Everything you need to know about Squarespace commerce and setting up payment processing
Final thoughts
Many people take on the role of both the web designer and the web developer and that is totally normal and expected for projects of a certain size and scope. The roles and responsibilities of the web designer and developer can overlap, depending on the site. However, as you move into more complex websites, the two steps might be broken down and completed by different people or teams. It all depends on what’s involved and what functionality is required.
To recap, step one is to outline the goals for the website and figure out what information to include and how to presented. Step two is to design the website with usability in mind. From here, we move to step three which is where the actual website build happens. All of this could be completed by one person or it might take a whole team!
Either way, it’s important to remember that web design and web development often have a lot of overlap, but ultimately they are two parts of a website project.
Now it’s your turn to tell me, are you a web designer/developer and do you take care of the whole project from start to finish? Or, if you have ever worked on a website, was it designed and built by the same person or by a larger team? I’d love to know how that whole thing went down so leave me a note in the comments!
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!