Most people understand cars. Rather than tech-speak you into complete boredom, let’s use a car analogy for web design and development.
The difference between web design and web development
Design and development are quite different beasts, but in short – one has to do with the pretty stuff (like the car’s body, finish and colour) while the other has to do with what’s under the hood (engine and chassis).
Let’s break that down …
- The road = the internet superhighway (ugh!)
- The chassis = the computer (or server) attached to the internet
- The engine = your content management system (CMS)
- The mechanic = a guy like me (a web developer)
- The body painter, detailer & panel beater = the designer
I’m a hybrid of the last two. I bash websites into shape, fiddle with stuff under the hood, then whip over the whole thing with a new paint job. Which is when the detailing begins :) I used to only design websites, but needed more of a challenge so I also now tinker with the engine.
Once I’ve got a server (chassis) attached to the internet (the road) running a programming language and database (also chassis) I can bolt on an engine (the CMS) and start beautiful work.
Server & Programming Language
(The chassis)
If your website is built with a solid Content Management System (allowing you to update your site via an administration section) then you can guarantee that there is a server (computer) running a database behind it. That computer will most likely be running PHP (the language) with a MySQL database. PHP pulls website content (in the form of text and images) from a MySQL database and writes it to the screen as HTML. Think of the words and pictures on your website as content. Everything on your About Us page, photos in your Gallery, every News item and every Event you add – fall under the title of content. And remember, content is your site’s fuel.
Without a foundation, everything will fall apart. That’s your chassis. A computer running PHP, JavaScript & MySQL is probably the most popular choice for websites in 2014.
Computer languages are updated every so often (sometimes yearly) to allow for new functionality as the style (or new invention) dictates, but you will find many servers running older versions of PHP and MySQL too. Older servers are still running old versions of this software because they have older clients with big sites who rely on the same chassis. Banks are interesting cases because their chassis is often very old. I know of one bank using COBOL, a computer language invented back in 1959. COBOL Programmers are like hen’s teeth and can earn more than the Prime Minister of Australia.
But I digress. let’s lift the bonnet. The engine.
Content Management System (CMS)
(Your website’s engine)
Most websites these days are built with a Content Management System (CMS). A CMS allows you to enter the back-end of your website and add pictures, text or upload documents without having to learn code. Whether you are using WordPress, Drupal or Joomla (there are hundreds of others) your CMS is the heart of your website – much like your car’s engine. And like an engine, your CMS needs regular maintenance (read about what I do to maintain a website here). It also needs security tweaked as hackers change their methods of attack. Sometimes maintenance on a CMS (engine) is performed every month. I find myself tweaking security on clients sites every day.
Drupal, Joomla and WordPress code is open-source. It is developed by a team of people (sometimes thousands) and each release is referred to as “core” code. It’s the job of your web developer to go in and check to see that you have the latest version of the code, but it’s not his job to touch it (more about best practice web development here).
I should talk about your web developer / development team next but I’ll deal with Web Design first because that’s probably what you are most familiar with.
Web Designer
(Panel beat and paint)
Web design has to do with everything you see on a website. It’s sometimes referred to as the superficial side of the business, but that’s probably not a fair commment. Web designers have to deal with many issues besides picking the right colour. They invariably lift the hood of the car to check that engine parts are functioning okay. A designer can sometimes get away without knowing what makes a site work, but you can only go so far with Photoshop and design skills.
Website designers typically deal with;
- how a customer uses your website (website usability)
- the overall site layout (website structure)
- navigational heirarchy (can things be easily found?)
- buttons (do they entice the user to click?)
- form fields (too many fields and users will go elsewhere)
- typography (is the site text easy to read?)
- page titles (does my article title represent the content?)
- headings (can Google easily understand my site for indexing?)
- sub-headings (clarifying what the article is about for scan reading?)
Three clicks and they’re gone
Remember that?
Usability plays a big part. Is the site easy to use? Can site content be easily read on a tablet or smartphone? (i.e. Is it a responsive website?) If not, what needs to change?
In a perfect world, a web designer will be designing in Photoshop and realising the look of your site using HTML and CSS with more than a little JavaScript thrown in (JavaScript does all the fancy stuff Flash used to do). Some Wed Design purists just use CSS, but as this ain’t a perfect world and because some servers aren’t fitted with the latest engines (CMSs), web designers often have to bridge the gap between design and web development.
Such is my life (actually it’s a lot of fun).
More often than not, web designers are not usability experts. This is particularly true for those designers with a print background. This is evidenced by the many very pretty but difficult to use websites. Designers moving from print to the web are often so enamoured by the technology, they will overlook things like usability (Does that button really look like a button or is it just a circle?) and SEO (Can Google see my site? Is my text text and not just one big image?).
A website is NOT a brochure
I often tell my students (I teach this stuff at Uni sometimes) “Be ultra-conservative with layout and creative with images, fonts and graphics.” People need to know where they are just by looking at the site and if it’s a good fit for their needs.
Another aspect to a web designer’s job is to make your website look like all other parts of the business. Your business logo down through colours and overall look and feel of your site should be consistent. In many cases, designers are lumbered with old logos, colour schemes and awful graphics. If a business has been using those graphics, then they have to be rolled into the design. It’s often why I don’t add every single website to my showreel. Some simply don’t look that great because of the old graphics and colours I’ve had to incorporate into the site design (just some of our graphic work).
In short, everything you see on a website is the responsibility of the web site designer. That’s why he has to be part panel beater, part spray painter and part detailer.
One thing your web designer is not is . . . a mechanic. That’s a job for your web developer.
Web Development
(The mechanic)
Imagine topping up your oil up every 2 or 3 months, doing a full oil change every year, adding water, checking spark plugs and turning tyres while keeping an eye on the door-locks and window winders. That’s a developer’s job.
Like your car, your website needs a mechanic. Not updating your website properly will eventually lead to problems. You can get away with not putting oil and water in your car for a while, but one day, it will stop. I’ve taken over many websites which had just stopped. Some sites that come to me with have so much spyware and hidden viruses, I’ve just scraped the text and started again with a new server and oten a new domain name (these days domains like this are often penalised by Google).
Web development usually refers to the overall functionality of a website. Do you need an e-commerce shop with a checkout system? What about an event scheduler? Do you need on-site membership? What platform do we use? Drupal, WordPress, Joomla, Magento or Shopify?
The developer works under the hood, usually grappling with the ins and outs of the computer programming languages which transport your content to and from the database.
The Hybrid Developer / Designer
(The artistic website mechanic)
That’s kind of what I am. In the past, I could only go so far with the look and feel of a site. It was just a matter of time before I needed to get my head under the bonnet and start fiddling with “the wires”.
Sometimes it takes a team of people to develop a website, but more often than not, with today’s technology and a multitude of CSS frameworks to choose from, a website can easily be built by a single person (for example, a freelance web developer like myself – here are several reasons to choose a freelancer over a web firm).
An Artistic Web Mechanic (I really need to work on that) has the ability to both write and understand code (HTML, CSS, PHP, JavaScript) and has enough creative acumen to get your website looking great. This requires both a logical and artistic brain.
Search Engine Optimisation (SEO)
I also find a lot of my time is dedicated to getting sites found. There’s nothing more embarrassing than going live with a site – only to find that 2 months later, Google hasn’t indexed it because it wasn’t properly coded in the first place. To this end, I build all my sites with both usability and SEO in mind. I also recommend people try a Google Adword campaign in the early days – as a way to boost traffic.
About 5 years ago, your basic new website opened to an audience of about 300 people per month. These days, with late adopters finally hopping onto the web, that number has dwindled to about a third. And because Google keeps changing its algorithm to avoid spammers (read my article about SEO here) it’s even more difficult to get found.
In Conclusion
So there you have it. Your website is (very much, actually) like a car.
The metaphor isn’t quite perfect, but hopefully this serves to illustrate the difference between web development and website design.
A computer programmer is another type of person you might meet in this industry. A different breed of human being entirely. More often than not, you’ll have a much easier time talking to a web designer than a computer programmer or systems administrator.
But that’s another post entirely.
If you found this post interesting, please leave a comment below.
Michael - Web Development July 30, 2013 at 12:29 am
Thank you for this information. I thought you did a great job on saying what the difference of the two were. Some people in the industry have different naming systems but this is the most common. Thanks again for the post!
Edwin Lynch July 30, 2013 at 7:31 am
No worries Michael. Anytime. As you probably know, there’s a healthy cross-over between the two, but I find the car analogy works best for me. Mechanic = developer, car body = designer, chassis = programming language. Love your Flash site by the way. Very nice. :)
Ducktoes Web Design August 9, 2013 at 2:41 am
Very informative, thanks for sharing!
Edwin Lynch August 14, 2013 at 4:29 pm
No worries Ducktoes. Thanks.
Benny Franklin December 7, 2013 at 11:20 am
Great metophor & analogy. I’m a 52 yr old man in the automobile industry (25 yrs) committed to staying relevant. So I’m getting a certification in web development, because the automobile industry is diving into eCommerce fast. And the dealers are vulnerable to mismanaging money. So I see opportunity. I am a photographer also and web design interest me as well. So a Hybrid? Wow! You are my new hero.
Edwin Lynch December 11, 2013 at 7:42 am
Glad I’m someone’s hero. ;) Thanks Benny. And did you know 52 is the new 42. Now you not only understand the 100+ year old automobile, but you have a birds-eye on modern websites, too. Make sure you look into open source development platforms when you do web design as most websites are built with PHP-driven CMSs. How is your industry incorporating eCommerce? People buying cars online? I’d love to know more. Start an industry blog over at blogspot.com. My aim here is to “lift the fog” on web design and development. I think something similar could be yours too.
Jasa Web December 28, 2013 at 2:39 pm
Thank You Edwin,
Your writing has given confirmation that web site design and development actually very different. Because in my area, people consider both of them are the same job. Though they are different.
Maybe one day I will write the same topic, of course with my local language.
Edwin Lynch January 6, 2014 at 1:37 pm
That would be great Jasa. It’s funny that people think it’s the same thing – I guess that’s why I used a car as the main analogy. people know all about cars! :)
Donagh January 27, 2014 at 12:44 am
Hey there,
Now that’s how you explain things, you should have been a teacher! I see your second name is Lynch, if you have an Irish background do you know of any recommendable hybrid design/devolpers in Ireland? Maybe you do international work yourself?
Edwin Lynch January 27, 2014 at 1:07 pm
I know nobody in Ireland with those skills – sadly. Although my Grandfather hails from Ireland. He was a Lynch through and through. Plus – I am a teacher. Glad you got something out of the metaphor :)
Anirban Pathak February 24, 2014 at 5:02 pm
Great Information . We can tell by looking at our Google Analytics that businesses are searching for both Web Design Company and Web Development Company. Nowadays these terms are virtually interchangeable as “web companies” alternate the way they describe their services.
Edwin Lynch March 18, 2014 at 8:09 am
True. Although developers also work at the back-end of a website – either on the database and / or with php or asp code, while designers can sometimes quite happily sit in photoshop.
Greg Olson April 13, 2014 at 12:00 am
Hi Edwin,
I had a recent client interaction where the team was a little confused between what gets presented to the user and what runs under the hood. I thought that someone must have written about the website being like a high performance automobile. It turns out you did. Thanks for the clear and concise walkthrough.
Kind Regards,
Greg Olson
Managing Directory
Delightability, LLC.
Author: The Experience Design BLUEPRINT
Edwin James Lynch April 21, 2014 at 9:37 am
No worries Greg. I think people forget that, like a car, a website or a piece of software is a machine. They know their computer is like that but not so each piece of software that runs on it. It’s a comparison people can understand. Glad it helped.
Sia Sharma December 19, 2014 at 5:24 pm
Hey Edwin You are very smartly describe the difference between design and development..Thanks for sharing us…
Edwin James Lynch January 5, 2015 at 9:00 am
You’re welcome. Everybody has a car but not many understand just how similar a car is to a website.
zac February 21, 2015 at 6:33 pm
Hey Edwin
If I want to start a career in creating websites – where do I start? Do I start with a Web Development course (and self-teach myself Photoshop and web design) or do I just focus on Web Design? When you think about it – you dont need to have a lot of Artistic Talent to design a website. Graphic Designer needs a lot of talent, but not a Web Designer – what do you think about this? I am afraid I wont have enough ability for web design.
Edwin James Lynch March 2, 2015 at 11:01 am
Hey Zac, In my experience I’d recommend learning Photoshop first. It’s pretty much the industry standard image editing software and everything else stems form there. It’s what will give your websites pop! You’re kinda right about websites not needing bucketloads of artistic talent. There are a lot of frameworks that will sort things like layout and typography out right from the outset. Forget about uni – it’s really a waste of time if you want to develop technical (and saleable) skills. I learnt everything I know from http://www.udemy.com (web development and marketing), http://www.learnable.com (web development), http://www.treehouselearning.com (a bit more expensive but fantastic courses) and of course http://www.lynda.com – but try udemy first. Do the free courses and then they’ll start sending you offers. I rarely pay more than $10 for a whole course. With patience, even the $600 courses are eventually offered for $10.
Prontecs March 16, 2015 at 7:34 pm
Hey, nice post. Most of the people are not aware about the difference between web design & web development. I think your post will help them in clarifying the difference.
Edwin James Lynch March 17, 2015 at 2:06 pm
Thanks
Leo July 5, 2016 at 8:45 pm
I am glad you do not say that designer is responsible only for the looks. The most common mistake when speaking of web design is this one – many people think that design is exceptionally visual, but that is not true. Look at the definition of the word. Design is the way something has been made : the way the parts of something are formed and arranged for a particular use, effect, etc. Design is not only the image, it is the structure. Design defines how users interact with apps, speaking of app development. Look at this page, for example – first you see a picture, and then a link to the portfolio. Only then you read the text which is highly structured and has a lot of headlines and bullet lists – and it iis design as well! Development is a tool, design is a structure. By the way, web development is a complex term that comprises not only coding but design, marketing, planning and so on.
Look at the definition of the word. Design is the way something has been made : the way the parts of something are formed and arranged for a particular use, effect, etc. Design is not only the image, it is the structure. Design defines how users interact with apps, speaking of app development. Look at this page, for example – first you see a picture, and then a link to the portfolio. Only then you read the text which is highly structured and has a lot of headlines and bullet lists – and it iis design as well! Development is a tool, design is a structure. By the way, web development is a complex term that comprises not only coding but design, marketing, planning and so on.
Edwin James Lynch July 6, 2016 at 9:01 am
Design is but a small part of what I do these days. Much of my new work is ethical SEO and content management. I try to include this in any website plan. Producing your own content is best, but sometimes outsourcing (which, as you know, can be very expensive) is the only alternative. I’m working with a bunch of local writers (ex-newspaper journos) on content marketing. In this article I talk about a blog being the engine of a website. While great design is two a penny these days, you’re right about website structure – navigation in particular has to be conservative and feel natural. Building a website with all the elements (holistically) is my way forward. One could argue that design is really a series of cushy coat-hangers in a pretty wardrobe. Most people visit websites to check out the clothes – that is what has value. Not that I really need to bring in yet another website metaphor.
Thanks for your comments, Leo.