What’s the Difference Between Web Design and Web Development?

Are web design and web development the same?

Web design is the style part of the website, and web development is the HTML/CSS coding along with the programming (JavaScript, PHP, etc.) and database management that makes the website function.

What is Web Development?

In short, the definition of web development is producing all the functionality for a website. Website development is more the technical, non-design aspects of building a website which include programming, writing HTML and doing coding (JavaScript, CSS, etc.).

Webstix does both web development and design. This means we can handle everything from the initial brainstorming meeting to wire frame designs to design mockups to coding and programming, too. We're more full service than just doing web development but if that's what you need, we can certainly do that.

What is Web Design?

Typically, with design, there are several steps:

• Gather the design requirements
• Create wireframes to show layout (where things will go and about how much space they will take)
• Present the wireframes to the client and get feedback/approval
• Once approved, create an internal design and go through review
• Present the first draft to the client and get feedback/approval
• Once approved, send the design (Photoshop files) to the HTML coder

Most of the work is done in Photoshop. Any illustrations are done in Illustrator. If photography is needed, a photo shoot is scheduled and placeholder images are used until the photos are ready.

Web Development

A coder will take the Photoshop file and code it to HTML and CSS. They will produce an HTML template with related image and CSS files. This template will be tested in the latest versions of web browsers to make sure it’s compatible.

A developer will next take the template and convert it into a WordPress theme (or other CMS theme/template), adding functionality. Some functionality is on the client side (web browser), while other functionality is on the server side (PHP programming and database).

A staging website will be set up in a development environment (as close to the production environment as possible).

The functioning design/staging site will then be tested again in the latest version of major web browser.

Blank pages will then be set up along with navigation.

Next, content will be added (text/copy with links, images, video, etc.) and any other functionality (photo galleries, e-commerce, etc.) will be added on.

Finally, the complete website will be tested again in the latest version of major web browsers to ensure compatibility. The desktop and mobile versions will be tested using various devices and operating systems.

• Once everything has been tested and adjusted, it’s presented to the client for feedback/approval.
• When the final approval has been given, the website launch is scheduled.
• For the launch, the hosting must be set up along with the domain name and checking where DNS is hosted.
• During launch, the following work is done:
• Upload all files and the database
• Configure the website
• Change resource references from the staging site domain
• Test all pages and functions of the website
• Clean up any unneeded files
• Make the DNS switch, pointing the domain name to the hosting or remove the coming soon page.
• There is also post-launch work:
• Set up the SSL certificate
• Perform more testing
  • Make sure forms work and deliver emails
  • Make sure all resources load securely
• Check error logs for issues to fix
• Give support to the client

And then I’ve left out at least 150 more details – items we’ve found that Google and other search engines want done on websites. Webstix has a checklist of nearly 200 of these items to help ensure everything works correctly at launch and so that clients don’t come back after the website launches wondering why “X. Y, and Z” were not done.

We also do training and provide documentation so our clients can manage their new website themselves.