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 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.
As 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
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.
A 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.
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!