What’s the Difference Between Web Design and Development?

Written on March 8, 2021

Web Design and Web Development are both commonly searched terms that businesses use when looking for a professional to build their website. They’re the same thing, and yet not quite. The truth is that they are two halves of a whole. You need someone to design your website as well as develop it. They are both part of the web building process, so it is important to know the difference between the two.

What is Web Design?

A simple way to describe web design is “how a website looks” and the decision-making during the design process. Experienced web designers use foundational skills to create something that is aesthetically pleasing to the eye, meanwhile providing an excellent, effortless user experience. Most importantly, what the web designer builds best represents the brand for whom it was made for. They work on the appearance, layout and content of a website.

Some Design Principles

  • Balance – Different elements in a design carry different weight, meaning some draw in the eye more easily than others, thus balance must be made
  • Consistency – Repeating a series of colors, font types shapes, throughout all your web pages
  • Contrast – How different elements appear together in a design, especially when they are close in a layout
  • Emphasis – As stated before, different elements carry different weight. Sometimes you want to purposely add more weight to something, like a headline for example, by making the size of the text very large.
  • Hierarchy – The importance of the order of elements on a page. For example, the title of the page would be the most important and should be easy to read as soon as you go to a web page. Then subsequent headings would go underneath.
  • Movement – Your eye should travel from one element to another by using balance, contrast, emphasis and other design principles.
  • Proportion – Size of elements in relation to each other. The greater the difference the more obvious the importance of something becomes.
  • Pattern – Repetition of visual elements, such as wallpaper. For example, repeating circles on the background of a web page.
  • Unity – The elements on a page should have a clear relationship with one another.
  • Variety – Should be used to reinforce other principles while creating an aesthetically more pleasing user experience.
  • White Space – White space is the empty space around the elements on a page. Utilizing white space allows elements on the page to be moved through more easily.

In most cases, the web designer is responsible for creating the wireframes for a site. Think of a wireframe like a blueprint of a house. Wireframes are outlines of a web page which provide a clear overview as to layout, functionality and behavior. Color, styling and imagery are kept to a minimum, if not omitted completely until visual mockups are created in the next steps. These details need to be ironed out before development to save time and prevent any miscommunications from taking place.

Some programs used in web design

  1. Photoshop – This program has been a staple for over 30 years. It was originally intended for photo editing and eventually evolved into an application capable of web work.
  2. Sketch – Another popular design platform that is the choice for Mac computer users in particular. It is built specifically for UI design (unlike Photoshop, which has many applications).
  3. InDesign – Adobe developed InDesign with ux/ui and web design in mind and quickly becoming the go to application for web design in the adobe ecosystem.

What is Web Development?

If web design relates to the blueprints of the house and how the house will look, web development relates to construction of the house itself. So you’ve designed your website, but now you need to actually build it. Web developers use programming languages (coding) to build live web pages. This means that you can now click on elements, and they will interact with you. Such interactions include navigation linking, hover over effects, form submissions etc.

There are two sides to web development, the front end and back end. 

Front end developers use at a minimum three programming languages to build the interface of the site. They are Hyper Text Markup Language(HTML), Cascading Stylesheets(CSS) and JavaScript. The interface is whatever the end user comes into contact with such as the buttons, text copy, images etc.

Backend developers program how the database will store and pull data to display to the website’s visitor using scripting languages like PHP and a database service like MySQL.

There are also Content Management Systems (CMS). These CMS use programming languages behind the scenes to offer users an easy to use interface to publish their own content without doing any extraneous coding themselves. 

When a client requests web design work or web development work more often than not they mean that they need both services done because they go hand in hand together. The terms are practically interchangeable at this point to the unassuming. There are freelancers who may do one or the other but most companies provide both as a service.

 

—-

Need more help with web design or web development? Reach out to schedule a free 30-minute consultation with our team, and we’ll help guide you in the right direction.