Web Development vs. Web Design: Which Is Right For You?

Are you looking to make some changes on your site? Maybe it’s a simple layout adjustment, maybe your website hasn’t been updated since 1997. Either way, web skills are likely required.

But how do you know if you need web development or web design? Aren’t they both the same thing? It turns out, comparing the two is like saying the White Sox and the Cubs are the same which, in Chicago, is a sure fire way to start a riot.

So how do we distinguish between the two? It’s actually quite simple. It requires two completely different skill sets. Some providers offer both, but typically involves two different experts working in tandem with one another to produce the end result.

Let’s go into more detail on both to help you find the skill set that’s right for you and to hopefully eliminate any confusion.

What Is Web Development?

Website development is producing and manipulating the code that makes up a web page. A trained front end developer will utilize programming languages such as HTML, CSS, and Javascript - among many others - to tell a web browser to display elements on a web page the way they are laid out by a designer.

There are a few different types of web developers:

• Full stack Web Development. A developer that works on both the back-end (server side) and front-end (client side) of a website.
• Front-end Web Development. A developer that works only on the front-end portion of the site. They are concerned only with the graphical interface the client will see on the site. This includes fonts, colors, layouts, and visuals.
• Back-end Web Development. A developer that works only on the back-end of the website. They are only concerned with servers, applications, and databases.

For this discussion, we are focused on front-end development. This type of developer will need to employ a vast toolkit to ensure that the web page is accurately displayed and also responsive (able to adjust accordingly to the user’s device.) Most web developers are familiar with many different coding languages and will continue to learn the latest technologies as the web continues to grow and advance.

A web developer's primary goal is to reproduce a design in the most efficient, accurate way possible. They are focused primarily on performance and problem solving. They are not responsible for the initial layout or the design of a page. They are not a UI designer. They are not concerned with color scheme, font, or design choices. It is their responsibility to accurately translate a designer’s vision to the web such that it works seamlessly and flawlessly.

A good web developer will translate a designer’s vision to a web page. A great web developer will translate the vision, point out any potential issues with the design, provide potential solutions, and offer up proactive recommendations on how to produce a better product.

Finding a talented, established website development partner will ensure you spend more time on your business and less time checking to make sure your website isn’t broken.

What is Web Design?

Website design is the visual layout of a web page or pages. It is a designer’s vision of what a web page will look like. It usually combines many different disciplines to ensure a web page not only looks beautiful, but performs well.

A web designer will typically have expertise in web layout best practices, knowledge of website design standards (such as the mobile friendly Bootstrap), and a background of successful projects.

Rather than concerning themselves with code, they look to make things easier for web developers by understanding what is possible and not possible with web pages and layouts. They utilize tools such as InVision, Adobe XD, and Adobe Photoshop to create layouts and designs that bring web pages to life.

Web designers are typically responsible for the following:

• Information Architecture. IA is the structure of the website. It outlines the types of information and pages that will be needed on a website to ensure appropriate templates are built and user flows are accounted for.
• Wireframes. Wireframes are sketches of page layouts. They help to visualize how a page will display without the distraction of colors, fonts, and images. It is simply a layout of elements on a page.
• Designs. Once wireframes are complete, a web designer will create a visual version of the pages for review. During this phase, you will see web pages come to life with colors, fonts, and brand standards. It is usually a static image of a page that cannot be interacted with, but rather gives you a sense of what it will look like on the web once a web developer has completed translating the page to web.

Sometimes, web designers will be fluent in basic programming languages, such as HTML and CSS, and can provide this information to web developers to help them realize the vision. However, it is much more common for a web designer to hand off code-free design files to a developer for implementation.

It is also important to note that not all designers are web designers. Web designers have skills specific to website technologies and layouts. This ensures that a design can be translated relatively easily to the web without losing much of the original design. The web is completely different from print in that it has to follow stricter guidelines and best practices to be successful.

Do I need Web Development or Web Design?

Web development vs web design: which do you need? It is usually a combination of both. If you do not have a vision or an existing site, you will need to employ a web designer to help realize the design of the new site. You will work with them to organize all of the pages needed for the new site, then layout and design these pages to hand off to a web developer for implementation.

If you already have a site and have a general idea of how you want a new page to layout, you might be able to work with your web developer to utilize existing site design elements to make the appropriate changes.

If possible, it is usually a good idea to find a versatile, trusted partner that can handle web design and development so they can help provide necessary expertise as needed. This also helps to foster collaboration between design and development to ensure a stronger finished product.

Of course if you already have a designer and/or a developer, it is completely acceptable to collaborate with an additional resource. You’ll just want to make sure both are skilled, reliable resources that work with one another throughout the process.

Marcel Digital provides both website design and website development services. We have the ability to work as a comprehensive resource to provide designs and development or to plug in as needed to work collaboratively with an existing team.