Web design and development

The concept of web design and development has been around for about as long as websites have existed. It used to have a much simpler definition because website creation used to be a much simpler process.

When you compare the first website, which came out in 1991, to modern websites, you can really see how much websites have evolved. Today, creating and maintaining a website is more complex, and involves an entire ecosystem of roles and skill sets.

For designers, it can be difficult to know exactly where you fit into this ecosystem. This article outlines the major aspects of the website creation process, offering a clear picture of your role, the roles of others, and the skill sets involved.

What is web design and development?

Web design and development is an umbrella term that describes the process of creating a website. Like the name suggests, it involves two major skill sets: web design and web development. Web design determines the look and feel of a website, while web development determines how it functions.

Because there isn’t always a hard line that separates the two roles, the titles are often used interchangeably. As the web continues to evolve, so do the roles.

In the almost 30 years since the first website was created, numerous job titles have emerged to describe various skill sets used to create a website, with more coming out every year. These titles often overlap, and their meanings change from company to company. It’s enough to make your head spin.

Design vs. front-end development vs. back-end development

To keep it simple, let’s separate website creation into two categories: what the users sees, and what the user doesn’t see.

What the user sees takes place in a browser and involves design and front-end development. Design defines a website’s colors, layout, font, and images—all the stuff that goes into a website’s branding and usability—and requires tools like Photoshop, Illustrator, Fireworks, and Sketch.

Using coding languages like HTML, CSS, and Javascript to implement that design is called front-end development. These languages make it possible for users to interact with buttons, images, text, contact forms, and navigation menus. And they’re integral to responsive and adaptive design.

Some designers code and some front-end developers design. Some designers don’t touch a piece of code. And some front-end developers stick to coding and nothing else. Helpful, right?

What the user doesn’t see takes place on a server and involves back-end development.

A website needs a back end to store and organize all the data that comes through the front end. So if a user buys something or fills out a form, they’re entering information into an application on the front end of the website. And that information is stored in a database that lives on a server.

A website works the way you want it to because the front and back ends of a website are always communicating. A back-end developer is like the conductor. They make sure applications, databases, and servers work together harmoniously using languages like Ruby, PHP, .Net, and Python along with frameworks like Ruby on Rails and Code Igniter.

Elements of web design

In his essay, The Politics of Design, the iconic designer Paul Rand wrote, “Design is a problem-solving activity. It provides a means of clarifying, synthesizing, and dramatizing a word, a picture, a product, or an event.”

Web designers are constantly solving problems for their users. Websites should make it easy for users to go where they want to go and do what they want to do. A frustrated user is less likely to stick around, let alone come back to a website.

That’s why each web design element is in service of making the website as easy to use as possible: so people visit and interact with the website over and over again.

Layout: The layout is the arrangement of a website’s header, navigation menu, footer, content, and graphics. The layout depends on the website’s purpose and how a web designer wants the user to interact with the website. For example, a photography website would prioritize big beautiful images, while an editorial site would prioritize text and letter spacing.

Visual hierarchy: A user should be able to access the information they need by glancing at a website. This is where visual hierarchy comes in. Visual hierarchy is the process of determining which aesthetic aspects of the website should stand out using size, color, spacing, and more.

The headings in this article are a basic example of visual hierarchy. They quickly let you, the reader, know what this article is about.

Navigation: Navigation helps a user get from point A to point B using navigational tools like site architecture, menus, and search bars. Simple, effective navigation helps users find the information they’re looking for quickly and easily.

Color: Color gives a website personality, makes it stand out, and shows the user how to take action. The color palette might be determined by a brand’s existing identity or by the content of a website (like how this plant website uses hues of green). A consistent color palette helps give order to a website.

Graphics: Graphics are the logos, icons, and images that live on a website. They should complement the color palette, layout, and content.

Speed: A user’s first impression relies on how long it takes for a website to load. If it takes too long, chances are the user won’t stick around.

According to Akamai’s 2017 State of Online Retail Performance report, the optimal page load time across devices is 1.8 to 2.7 seconds. The same report found that a two-second delay increases a site’s bounce rate—the percentage of visitors that leave a website after viewing one page—by up to 103%.

Accessibility: Who can or cannot use a website is dependent on a website’s accessibility. Making accessibility a priority ensures that all users are able to access and use a website and its functions equally.

Examples of web design

The following examples include an agency website, an ecommerce site, and a personal portfolio. Each serves a different purpose, but they’re all easy to use thanks to simple navigation, fast loading times, and clear layouts.

Partners & Spade

Partners & Spade is a New York City–based branding studio. Their website design is interactive without sacrificing simplicity. You know exactly what they’re about as soon as you visit their home page, and it’s easy to find their contact info, work examples, client list, and location.

The Sill

The Sill’s website is visually cohesive, with navigation tools that make it easy to find information about plant care, upcoming events, and plants available for purchase.

Agnes Lloyd-Platt

This portfolio website for fashion and beauty photographer and filmmaker Agnes Lloyd-Platt is visually striking and easy to use. The homepage pretty much gives a visitor all the information they need to know from the jump: work examples, contact info, and her representation.

The navigation menu is simple, so if someone wants to learn more about her work and who she is, they can. Plus, her portfolio can be filtered by type or color, making it easy to find specific projects.

Better together

Building a website involves a lot of moving parts. And knowing how each role complements the next will make you a better designer. Maybe you want to learn coding languages, or maybe you want to focus on the user experience aspect. Whatever it is, having a firm grasp of what web design and development actually entails will serve as a guiding light throughout your career.

Create a magical web experience

More and more every day, life happens on screen—how can your team ensure that your product is providing the kind of web experience that keeps people coming back?

InVision’s digital product design platform connects your team’s entire workflow, giving them what they need—from start to finish—to design amazing online experiences. Use Boards to collect and share inspiration. Sketch out wireframes on the Freehand collaborative canvas. Turn ideas into powerful screens with Studio, and bridge the gap between design and development with Inspect. Get creativity and consistency at scale with Design System Manager as your team’s single source of truth. InVision powers your product design process every step of the way.