What is the difference between web design and web development?

I remember in my early stages of learning web development, that I found myself confused multiple times about the differences between design and development. What are the roles of a web designer? What is involved in working with web design? Are web design and web development the same? Are they interchangeable terms with the same meaning?

The simple answer would be no. The role of each is completely different from the other. But let’s have a look into the different roles and methods, of both a web designer and a web developer.

Web design

Think about web designers as those who transform an idea, or a story, into a visually appealing design, and use their layout to build the user experience throughout the whole website. They design the website’s look and feel. As an architect would create a plan of your house prior to start building it, similarly a web designer would model the layout of your website before a web developer can start developing it.

Web designers have a difficult role which is often underrated. In their designs they need to integrate the best user experience possible, and create a welcoming environment for the user. They have to change an idea from writing, into a usable design and interface that catches the user’s attention. A website cannot be described as great if a proper design strategy wasn’t applied into the early stages of the project. Nowadays, web designers are rated at the same level of web developers, as without a great user experience and design, the development cannot be truly appreciated by the user.

Web designers have built a whole library of strategic techniques for themselves. You don’t just create a perfect website immediately after reading or thinking about the specifications or the features required. You start with a scope — the focus point and the purpose that the website will offer. You would first roughly envision the designs in your head, and start with a sketch or draft of the design. From sketching, web designers move to wireframes, mock-ups, and to the final design. Professional web designers build the whole website in design components, with a pixel perfect layout of all the web pages, icons, typography and other intricate features.

These are some of the main roles of a web designer:

Using software tools such as Adobe Photoshop, Framer, or Sketch to build the final layout design of the website
Have good skills in graphic design and logo design
Have a good feel for user experience, to identify the simplest approach possible to attain the desired function. This includes the layout, buttons, images and the general format of the website.
Web designers need to keep themselves up to date with the latest design trends. It’s also important to keep design consistency that is made popular from other web giant companies, such as Google, and Facebook. This makes the website environment and interface easier to navigate and use, as it is already familiar to the users eyes.
Web designers have to also keep in mind the branding of the website, colour palettes to be used, and the typography and readability of the website.

Web development

Think about web developers as those who turn the designs into a live website. Web developers uses web languages and software tools to develop the design and functionality of a website. Notice, that web developers are further split into two sub-categories; front-end developers, and back-end developers. I see front-end developers as the connection between both web designers and back-end developers, as having a little knowledge of both, would allow a front-end developer to build a fully working website. A front-end developer is the one who builds the interface, and provides the layout as the interaction between the back-end of the website and the user.

Front-end developers use three main languages; Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). With these languages, a developer is able to create a full-fledged website. From the main design layout, to inserting images, applying different types of typography and font families, implementing animations, the flow of different pages, form interfaces, and more.

Back-end developers are those who control the server data and requests. Usually a website requires back-end services if it contains dynamic data. This means, for example, users submitting a form with personal data (such as creating an account), or saving an article for your blog page. Generally, if the website requires data to be saved, and making it accessible at a later stage, it means that it would also need a database connection. Database connections are made possible by a direct connection from the server itself. Thus, a back-end developer then uses server languages such as PHP or ASP.NET, and writes database queries by using languages such as SQL or MySQL.

Here are some of the main roles of a web developer:

Building the actual interface through which a user interacts with the website. This interface is built by front-end developers using HTML, CSS, and JS languages.
Front-end developers can use styling preprocessors, javascript libraries, and frameworks to fasten the process of development (see my previous article).
Front-end developers provide the markup design to back-end developers, so they can implement a dynamic website, and submit all the required data on the server and databases.
Back-end developers create the backbone of the website using languages such as PHP and MySQL.
Both front-end and back-end developers can use the same development environments or IDEs (Integrated Development Environment). These are software application tools where you code and build the structure of the website.
Web developers may also use versioning tools to keep a history of the previous builds. This will help them to quickly and effortlessly move back to a previous “unbroken” version if required to do so.

Closing thoughts

Design vs Development

What does a full-stack developer do?

Full-stack developers are those who have a good knowledge of all of the development areas discussed above. This means that if you are a full-stack developer, you should be able to build a website from scratch, from looking at a design, and creating the mark-up of the design, up to handling back-end processes, and database queries. Usually a full-stack developer would also have a basic knowledge of design and user-experience. Being a full-stack developer does not mean you have to be an expert on all of the languages. It’s already hard to become an expert, or a professional on just one of the languages. It’s also hard to learn all the best techniques and strategies on how to be most efficient in all of the areas we discussed above. Remember, web technologies are evolving everyday.

Having a basic knowledge of everything regarding the web is always a plus, but I recommend you stick with the one you enjoy the most, and focus on becoming an expert on that. Once you feel comfortable with developing the front-end or back-end, you can then dedicate more time for those areas that need more attention.

I hope you now have a clearer understanding of the difference between the roles of web developers and web designers. Keep in mind that both have essential roles, and the web would not exist without one or the other. I can tell you that from my experience nothing will come easier then the rest. Working full-time as a front-end developer, and interacting regularly with both designers and back-end developers, has shown me that all of the roles we just discussed have their own quirks in one way or another. Just keep in mind that focusing on one language at first is the best way to get yourself started. Once you get motivated and take the first step, the rest will be less of a challenge.

Thank you for reading!

These are just some of my thoughts that are discussed in further detail in my eBook — Mastering Web Development

Until next time,

Owen Far

P.S. Follow me here or join my newsletter if you want to keep learning the crucial secrets of web development.

More from Owen Far:

How do we setup a proper development workflow?_When I built my first website, I remember I had only a few files and a couple of folders in my development project…_hackernoon.com

Stop reading. Start coding. Share your knowledge._It felt like I never had the courage to start. I was constantly thinking that I’m not ready yet, that I have to…_hackernoon.com