Have you ever wondered what the difference is between Web Design and Web Development? The two terms are often used interchangeably when, in reality, they have two very different functionalities and duties! If you’re considering building a website for your business or in pursuing one or the other as a career, you’ll save yourself (and your sanity) by clearly understanding the difference.


Undoubtedly one of our all-time favorite ads, this visual representation of left brain vs. right brain also accurately describes Web Development and Web Design. Web Development is a left brain endeavor, where Web Design is more easily categorized as right brain. As our Creative Director, Tyler Fraser, described the two in our recent blog, Becoming a Creative Director, Tyler’s Story, being a designer or developer are…

“…two roles that typically use two different halves of the brain. You don’t usually have someone capable of utilizing both halves equivalently and expertly in this setting.” But, “being proficient in both design and development opens horizons in the world of web like you can’t even imagine. Not only can you envision a product, but you can create it. You design knowing exactly how a website is going to function at the end of the day.”

Web Design

Web design is the art of envisioning and creating all visual aspects of a website. Typically more in tune with their right brain capabilities, designers work with the color scheme, layout, and general design of a website. They’re visual experts that always keep a website’s functionality and flow in mind. Creating the look and feel of a website requires working with graphic design programs such as Adobe Photoshop, Adobe Illustrator or Creative Suite.

Our typical design process includes a few steps and begins with a Discovery meeting to understand our client’s overall goals, vision, and website needs. Next, designers create design concepts which act as a mock up of the client’s website. These design concepts include the color scheme and layout of key elements such as navigation, content placement, images, forms, and calls-to-action. Each element of a website is represented accurately in the initial design concepts, although they’re not yet functional. This is because the web development phase hasn’t begun- a phase where developers work their “magic” to make each design concept come to life.

web_designAs with most creative processes, there can be changes to the design, flow, and general look of the website during the design concept phase. It’s both typical and welcomed, as a firm’s first priority should always be to collaborate with each client to design and create their perfect website!

“The difference between a good web designer and a great web designer is that the first can make a beautiful website, but the second can make a beautiful website with functionality in mind.” – Tyler Fraser, Creative Director

Web Development

If you think of building a website like building a house, the design phase is just one part of the entire project. Deciding on the style, fixtures, roof and flooring is only the beginning. When those design elements have been approved, it’s time to build the house. HTML is like the building materials – providing the real structure of a site. CSS the paint and decor, while JavaScript your fridge and stove. PHP simply takes things one step further and adds central air and heating to the house.

It’s the same with a website: when the design concepts are approved and signed off on by the client, the conceptualization phase is over and the build begins! Queue that left brain- it’s time to bring out the mastery of coding language, mathematical skills, and analytics processes.

There are different programming languages developers have to learn in order to take a website’s design and turn it into a functional website. This includes HTML and CSS as markup and styling languages, and programming languages such as PHP and JavaScript.


HTMLA website’s foundation is made with HTML (Hyper Text Markup Language). It places the website’s text in to all the right places: titles, headers, and links. HTML helps classify text into certain categories or containers so that it’s helpfully organized and ready for styling. Each of these categories are invisible to our eye. Why? They’re “under the hood” – just like the engine in a car.

HTML also places meta data into the website’s code to be read and understood by search engines. Since search engines “see” words and images on a website differently than we do and HTML makes it possible. Search engines crawl websites in order to read the words and images of a website and understand what it’s about.


After the HTML has been created, it’s time to move on to CSS (Cascading Style Sheets). Where HTML has described the content of a website, CSS takes it a step further to dictate the website’s style. Background colors or images are added and resized as needed. Font types, sizes, weights, styles, and colors are changed to match the design concepts signed off on by the client. Those invisible categories created in the HTML stage are positioned properly here and given color or borders, if needed. CSS is an ever-evolving language itself and its possibilities keep growing.

PHP, JavaScript & jQuery

PHP and JavaScript create the website’s overall functionality, while jQuery is a JavaScript ‘library’. While there are other programming languages, these are the most common. They enable such things like images to rotate, forms to function, and items to be selected, submitted and purchased from an e-commerce website.

PHP is a delegator language- it calls what you need, whether that be certain snippets of HTML or Javascript, when you need it. It can communicate with your database to grab pieces of information like a catalog of items in a store. From data evaluation and serving custom content to browsers, to communication with a database or the sharing of cookies, PHP’s value is undeniable. It’s widely-used and very efficient.

JavaScript helps developers program a website’s behavior, and runs in a person’s web browser.  It’s additionally used to program video games and even robots!

The video above gives a quick, easy-to-understand rundown of HTML, CSS and JavaScript!

jQuery is a ‘library’ for JavaScript. This means that it’s a standardized and official set of scripted functions and commands for JavaScript. It makes it easier to navigate a document, create animations, handle events and increases developer capabilities to create plug-ins. It’s a “feature-rich JavaScript library that’s fast and small. It’s very versatile, and has changed the way that millions of people write JavaScript.” –jquery.com.

If you made it this far… you’re now an expert on the difference between Web Development and Web Design! If you have any questions, please feel free to Contact Us or leave a comment below!


*Special thanks to Chuck Zimmerman for weighing in on PHP, JavaScript and jQuery.*

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts