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.
Web design and web development describe 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 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 be 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 just 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.
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 can be thought of as the person who 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 any design work is begun (or else 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 relatively set, the web designer usually starts making what are called 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 barebones 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, anything that goes into making up the appearance of a site. The “cascading” part means that it makes it easy for any changes to that look to be done 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 certainly 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 the ability of a site to be read by someone with a visual or physical impairment without missing out. This could mean text that’s optimized to be read by an electronic screen reader to 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. There’s a lot of this that can be handled on the coding end, 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 (ie: 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 pleasing to the eye while 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. If you're interested in going for a web design career, here's an article that shows you how to become a web designer.
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 very time consuming. But the expectations of websites at that time were very 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 development involves working with various coding languages or language frameworks that generate the HTML or work with it 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 what’s called a client-side scripting language. That means it contains code that is executed on the web server, which is called by the website (also called the client). This generates HTML code that is sent back to the client. This enables you to have a website that has dynamic data displayed that is 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 what’s called 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, certainly the basics of HTML and CSS are crucial for any webwork. From there, Javascript is an excellent introduction to scripting languages and is very 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.
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 for smaller projects— or if you’re working for smaller development houses—it might be one person doing all of this work. This means there’s still a good reason to learn some of the skills that go into both fields no matter which one you’re pursuing.
Web design and web development are clearly very 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 per se if you’re a designer, knowing something about interactive scripts work will help you think about a site’s user experience. You may not come up with the color scheme for a website if you’re a coder, but it’s good for you to know the ins and outs of images and fonts so that they’ll display properly.
Web design and development courses are available through any coding bootcamp. If you’re currently pursuing one of these two careers, why not take a course in the other to broaden your perspective? The broadening of your experience can only help your skills and make you that much more employable.
Looking to start a web design or development career? Join Career Karma today for free and find the education program you need to break into tech!
Top comments (2)
Great, This is really a good difference. I have also written on Web Design Vs Web Development-Understanding The Differences. Kindly read it and let me know your thoughts.
This is the best way to differentiate between these fields in a crisp way. I have done a detailed comparison in my blog - Web Design VS Web Development: Which Is More Crucial For Your Business. Please read it and share your views on the same.