When it comes to building a website (or building just about anything, for that matter), there is a lot of jargon that gets thrown around. Two terms we hear a lot in my industry are “design” and “development.” These two terms are often used interchangeably, when in fact they mean very different things. “What’s the big deal?” you may ask. They are both important elements of building a website and are closely related, but there is a big difference. Here at Creative Arcade, we do both, so we’re going to shed some light on the subject. For the purposes of this article, we’re going to focus on website design and development.
Why Does it Matter?
It’s just semantics, isn’t it? Not really. Both are necessary steps in the process of building a website, but they’re not the same thing. Although they go hand-in-hand with each other (and often overlap), they each require a different set of skills to complete successfully. Don’t get me wrong…I’ve known people who can do both and are quite skilled. In my experience, though, each of these parts of building a website takes a different mindset and approach.
Design
According to Dictionary.com, the word “design” means “to prepare the preliminary sketch or the plans for (a work to be executed), especially to plan the form and structure of” or “to plan and fashion artistically or skillfully.”
If we had to sum up what web design is in the most basic terms, we would say it’s the aesthetic part of the process…the look and feel of a site. It’s the flow of the user’s experience as they interact with a site.
Design involves a great deal more than just aesthetics, though. Certainly, there is an artistic aspect to it, but there are also some technical guidelines and best practices that great designers follow that contribute to the appeal of a particular piece. Skilled designers can take the concept of a site or application and create a physical layout that is pleasing to the eye and follows good design principles.
Good design evokes a response from the viewer, and it’s everywhere. You may be responding to a well-executed design without even knowing.
Development
Looking back to Dictionary.com, to “develop” means “to bring out the capabilities or possibilities of; bring to a more advanced or effective state:” or “to bring into being or activity; generate; evolve.”
Development is the process of taking a static layout or concept and turning it into a functioning website or application. This is usually done by a programmer. There are a lot of different tools available to implement a design, and experienced developers can guide you in selecting the right tools to use to achieve your goals. This is where you’ll hear terms like HTML, CSS, Javascript, PHP, .Net and on, and on…
and on.
The choices available to build your site with are seemingly endless, but this is where an experienced developer can help you out. They can work with you to recommend the best solution to meet your needs. Ultimately the purpose of development, as the definition says, is to bring the design to a more advanced or effective state. It takes the plan and layout created during the design phase and turns it into a working and effective application. Development makes the design work.
A Recipe for Success
What happens when you combine the two can be magical. Think of design and development as the peanut butter and jelly of a sandwich. You can make a sandwich with just jelly or just peanut butter, but it won’t be nearly as good as the sandwich with both. This also applies when building a website.
Ingredient #1
Let’s say you just came up with a ground-breaking design for a website that is going to change the world (or at least your business). You’ve come up with the site map to define the structure, created some wireframes to model out how the content should be structured on the pages, and hired a talented artist to make it look amazing…and then stop there. What you’re left with is a great concept, but until you turn all of that detail into something users can interact with that’s all you have…a concept.
Ingredient #2
Now let’s go from the other direction. You have a great idea for yet another application that is going to revolutionize your industry, and you found a developer who can make it work. Your developer jumps right into creating the application according to the idea you have. The end result is a product that may function according to specifications you set out, but is it useful? What is the user’s experience, and does it really meet the need you were trying to fulfill? What does it look like?
Mix it all Together
What if you combined the two ingredients?
Take your great idea, then take the time to plan out how to present it to your users. Build out the structure of the application, planning for the customers you are trying to serve. Sketch out the user interface (also known as UI) and user experience (UX). Then, have a designer give it a look and style that is visually pleasing. If you really want to go all out, build a wireframe model of the site so you can play with how it all flows together.
Once all of that is done, development can begin. Gather all of the material you have and let a developer bring the design to life. Since the structure of the site is already planned out and the developer knows how users will interact with it, they can use the best tools available to meet your needs and the needs of your customers. With a good plan in place, the developer can use the right technology to make the site work exactly as you envisioned.
Design and development go hand-in-hand. The design of your site needs to take into consideration any technical limitations there may be. It helps when an experienced designer is familiar enough with web-based content to know how the technology works. On the flip side, what may work the best in terms of programming may not be the best way to present information or features to the user. Developers need the input of a designer to guide how the site is presented. Ideally, there is give-and-take between both approaches as designer and developer collaborate to deliver a great site.
If you’re interested in learning more about websites and our process, check out this podcast episode. If you have more questions, feel free to reach out.
{{cta(‘5d92e304-794b-4f4f-bdeb-8979006a3a88’)}}
