Web Design vs Web Development

When you’re looking through job listings, you’ll see posts for “web design,” “web coding,” “web programming,” “web architect,” and “web development.” Those are pretty vague descriptors. Take the words “design” and “develop,” for example. Aren’t those two ways of saying the same thing? Not exactly, although there are aspects that both roles share. So, web design vs web development…what’s the difference? 

Web designers and web developers perform two different areas of work that go into building a complex website. Although they are different jobs, they need to work together—and sometimes share tasks—to build a common vision. Let’s break down what each position involves. 

Web Design

Web design is the work involved with the visuals and aesthetics of a website. This involves the layout of the pages as a whole down to selecting fonts and icons that will become standard for the site. The web designer is often in control of what the experience is like visually for the user.

It’s not enough for a web design to make a layout and design for a website. In this day and age of ubiquitous computing, users will look at a website on a variety of media: desktops, tablets, phones, televisions. Each of those platforms has a wide range of dimensions and limitations. The web designer needs to take all of those platforms into account to make sure the site is usable, attractive, and practical no matter where a user is accessing it. 

Information Architect

A related role whose tasks may overlap with the web designer is the information architect. In larger teams, this might be a separate person or people. Often the designer will take on this duty. An information architect organizes a site’s hierarchy and flow. They work with the client to understand what their goals for the site are and what they want users to do. The architect then organizes the flow of screens and information. Ideally, this process would happen before the designer begins his design work (or hand in hand with it). Sometimes the web designer has to make extensive changes to their work as changes in the architecture come from the client. 

Once the architecture is set, the web designer usually starts making wireframes. Wireframes are diagrams that help plan the content and functionality of a website. They’re a way of seeing the paths users might follow to accomplish certain tasks (for example, buying something). Wireframes are the most bare bones version of a website before any styling or imagery is added. 

Both web designers and developers should be knowledgeable about CSS: Cascading Style Sheets. These are where the overall aesthetics for a site live. A CSS file contains information about the look of text blocks on the site, images, and anything that makes up the appearance of a site. The “cascading” part means that it is easy for a designer or developer to make changes to that look in one place, then cascade across the whole site. By having those design choices live in one piece of code, it’s more efficient and easier to manage.

If you’re thinking that going into web design will mean you don’t need to write code, it’s possible, but not likely. Web designers at least need to be somewhat knowledgeable about HTML and CSS, and at least know what Javascript can do as far as web front-ends go. This doesn’t mean that you have to be a fluent coder in these languages, but you want to be able to talk the talk with those who are. And being knowledgeable about what Javascript or other languages can do for user experience will help shape your designs.

Being a web designer has also come to mean working with the site’s usability. “Usability” means that someone with a visual or physical impairment can read that site without missing out. This could mean text that’s optimized for an electronic screen reader to read it and aid those with visual issues. It could also mean optimizing the color scheme so that people with color blindness can operate the site fully and don’t miss out on functionality. A programmer handles much of this, but the designer needs to make sure they aren’t creating a website that works against those tools. 

The tools a web designer uses vary, but one long-standing staple is the Adobe suite of software. This includes Photoshop for image editing and Illustrator for making graphic layouts and for editing the icons used in a site. For example, consider if a site has a custom image for mousing over an action button. Usually, the designer will provide the developer with these assets in a variety of sizes and for each state the icon could represent (i.e., different appearances for when the user clicks the mouse button).

So what goes into making a good web designer? There are a ton of factors that are hard to qualify. A good designer uses aesthetic principles to make a design that is both pleasing to the eye and still useful to utilize. There’s a bit of a balance between art and science at work, so it takes a special brain to do it well. 

Web Development

A web developer does the coding that makes the actual website by following the plans from the web designer. They make the web designer’s idea come to life. 

The fundamental building block of web development is HTML: HyperText Markup Language. This is the code that a web browser reads to display a website. In the beginnings of the World Wide Web, web developers would hand code HTML to create each page. As you can imagine, this was limited and time-consuming, but the expectations of websites at that time were limited. There were no real-time updates of the page without refreshing. The most sophisticated thing a webpage would do is provide a form you could submit. 

Today, web developers work with various coding languages or language frameworks that generate the HTML. These programming languages work with HTML to make websites much more complicated than they were twenty years ago. Let’s take a look at some of those languages and frameworks.

PHP

PHP is a client-side scripting language. That means it contains code that is executed on the web server, which is called the website (also called the client). This generates HTML code that is sent back to the client. This enables the website to display dynamic data called from a database or other sources. 

Javascript

Javascript is mostly used as a server-side scripting language. This means that it doesn’t have to rely on those calls to the server for it to do its work. It’s most commonly used for updates on a page that can happen quickly. This could take the form of an error message popping up in a text field when you’ve entered incorrect characters (which then disappears when you enter the right ones), for example. 

React

Scripting languages are sometimes packaged into a framework. This is a collection of precoded Javascript scripts that can help with making the business of building a complex website that much easier. Think of it a bit like pre-made doors and windows for a house. Yes, you can spend the time and money to build these from scratch, but if you don’t have to, you won’t. React is a Javascript framework that helps with building website frontends. You still code and you can modify what the framework produces, but it helps you get to where you’re going faster.

There are dozens more languages that you might encounter as a web developer, but don’t feel that you have to master all of them. Usually, a web developer is skilled in one or two in particular and works solely with those languages. 

If you were wondering where to start, the basics of HTML and CSS are crucial for any webwork. From there, Javascript is an excellent introduction to scripting languages and is widely used. More Javascript frameworks exist than any other language, and it’s a skill that’s constantly in demand. Learning Javascript will also give you a good grounding for learning other scripting languages.

Web Design vs Web Development: Where to Go Next

Once upon a time, one person was responsible for web design and web development. As time went on (and websites became more and more complex and sophisticated), these roles separated out. Most sites have teams of people in both of those roles, but smaller projects or smaller development houses may only have one person doing all of this work. This means there’s still a good reason to learn some skills that go into both fields no matter which one you’re pursuing.

Web design and web development are clearly different fields, but in their Venn diagram, they have a lot of overlap. If you’re interested in working in one of these positions, it would benefit you to learn a lot about the other. While you might not end up doing web development if you’re a designer, knowing something about interactive scripts work will help you think about a site’s user experience. You may not create the color scheme for a website if you’re a coder, but it’s good to know the ins and outs of images and fonts so they display properly.

Web design and development courses are available through any coding bootcamp. If you’re pursuing one of these two careers, you may want to take a course in the other to broaden your perspective. This will only help your skills and make you that much more employable.