"true professionals" 
When you start typing your post on LinkedIn looking for recommendations to get a website built, do you ask for a web designer or a web developer?
Let’s look at the difference between the two. We won’t get technical - that’s our job, not yours. But it can be helpful to know the basics when it comes to hiring a freelancer or agency to create a new website for you.
Design
When we are hired to create a new website, we divide the process into two main stages: design and development.
In the design stage, we use a design tool called Figma to create a visual design of how your website will look. We add colours, fonts, images, and text, and lay them out in a manner that is consistent with our client’s brand and in line with web design best practices.
We do this because, compared to development, design is a matter of drag and drop. Put an image here, a paragraph there. We want to be able to rapidly try out ideas, present designs to our client, and get a feel for how the finished product will look without worrying about code, performance, responsiveness, and all the technicalities that come with the development stage.
You can think of it like designing a poster, and this is what the finished product will look like.
That means the finished product in this stage is not a website - instead it is a visual representation of what the finished website will look like. And like a poster there is no movement, interaction or animation. That comes next.
We didn’t always do it like this - in the early days of Propeller Digital, we would use one tool for design and development. But as we grew and studied best practices, we learned that it’s better to break this process into two parts and use the tools that are best for each job.
Here’s an example of a design for a website from Figma:
It looks like a website but it’s not: the links and buttons don’t go anywhere, and if you look at it on a mobile phone it won’t scale to the size of your screen and becomes hard to read and navigate.
But that’s okay - this is the design phase, and we can create visuals like this much quicker in a design tool instead of a development tool.
Next up is reviewing the design with our client and internal team. We’ll usually do this over a video call, though Figma also allows our clients to view the designs themselves and leave comments on specific parts, which helps us to move on from the design stage quickly.
Once the homepage design is signed off on, we now have a solid milestone as we know how the rest of the website will look.
This saves our client money and saves our time, as it’s much easier to make changes to how the website looks in the design phase instead of the development phase, which we’ll look at next.
Development
With the design ready to go, we now begin development.
Depending on the project, we will usually use one of three tools: Webflow, Shopify, or custom-coding using a tool called JAMStack.
This is the stage where we make things clickable, add in dynamic content like blog posts, visual media like videos, and make it pop with animations and interactions.
We separate design from development as working on the website itself isn’t a matter of drag and drop like the design phase. It’s a more intentional process that requires us to build the website in a way that makes it responsive - meaning the content and layout will adapt to look great on any screen size.
If we look at the above design on a phone, it doesn’t look great because it’s not responsive:
The design doesn’t adapt, or ‘respond’, to the size of the screen. It doesn’t look good and it’s a b*tch to try and read on a phone or tablet. So the end goal of the development phase is to make this design into a responsive website.
We also consider other factors that come into effect when a website needs to be transformed into an online, always-available website, such as
- Speed and performance - how fast does the website load?
- Search Engine Optimization - can it be found on Google?
- Security - is it safe from hackers?
Separating design from development means we don’t need to be as concerned about these factors in the design phase, allowing us to focus on how the website will look, and to take care of these factors in the development stage.
The development phase is where most of the content is added in. If our client needs a content management system (CMS) for adding and editing blog posts, events, team members, ect, that is added at this stage. Pages are linked together, buttons become clickable, and 3rd party services for things like eCommerce, bookings, and contact forms are added in.
Now we’ve gone from a simple, static design, to an interactive website - a series of pages linked together in an intuitive way and made browsable over the internet.
Back when we were building websites from our bedrooms, it took longer and wasn’t as easy on us or our clients because we created our designs with development tools. This was a good way to get started as it meant we had one less tool to learn, but as we’ve grown into a professional company working for clients all over the world, we’ve improved on our process.
So in the end, you can use either of these terms - web designer or web developer - once the end goal is going to be a finished website. Some of our team specialise in one of these areas, some in both, and we work together to build elegant, bespoke websites - every time!
