---
title: The Disciplines of Web Design
teaser: Designing websites is an interdisciplinary practice of Visual, UI, and UX
  design.
tags: design
author: Joshua Ogle
published_on: 2017-01-31
---

Fundamentally, the web is a content delivery system. In the early days of
dial-up modems and green-on-black monochrome monitors, text was all we could
deliver with any kind of speed. We listened to the [sweet song] of the 2400bit/s
modem, tried to make the best pixel art that we could, or settled for creating
art from ASCII characters. And we liked it!

Nobody liked it; it was terrible. But steadily things improved and now the web
is filled with streaming video and complex animations, delivered to a variety of
devices with a dizzying assortment of screen sizes and capabilities. Text is
still the main method of communication on the web and most likely it always will
be, so the practice of "Web Design" centers largely around how to present the
written word and navigate a nested hierarchy of information.

Designing websites, whether they are simple pages or complex applications,
relies on a wide spectrum of design disciplines.

![](https://images.thoughtbot.com/cp-design-for-the-web/7SgT6LwCQHexdtwvtYIA_design-disciplines.png)

[sweet song]: https://www.youtube.com/watch?v=gsNaR6FRuO0

## Visual Design

Visual Design (usually synonymous with *Graphic Design*) focuses on the
strategic use of design principles to create attractive images.

This is what most people think of when they think of web design. The great part
about the web is that it touches and draws from so many kinds of design, but as
a primarily visual communication platform, visual design remains very important.

Designing products also includes things like logo design, iconography, and even
marketing materials. These all fall under the visual design umbrella without
even really touching the app itself. This can be the hardest part for a designer
to feel confident about because it can seem like designers manifest them out of
thin air. It just isn't true.

Do your customers describe your product as "friendly" or "powerful"? Is it
"simple" or "useful"? These are impressions that are intentionally designed
through a series of small choices and critiques.

Visual design principles like *color*, *form*, *space*, and *rhythm*, as well as
bigger concepts like *typography* and *abstraction* vs. *skeumorphism* all
include their own terminology and conventions that make it much easier to craft
a design language that gives your brand its own unique personality.

## User Interface Design

The easiest way for developers to get involved in design is through *User
Interface design*. The user interface is everything that the user can interact
with. UI Design is often synonymous or at least largely overlapping with
*interface design*. For the web, this commonly includes design patterns for
navigation, forms, maps, et cetera. If your workplace differentiates between
"Designers" and "Front-End Developers", this is their common ground. UI Design
aims to bridge the gap between what the software needs and what the user
expects.

Because designing interfaces is inherently tied to its medium, the product of
this design process is usually not a static design, but a coded prototype. This
means that interaction design works best if the designer is the one writing the
code, or at the very least is intimately aware of how it should be coded.

As an example, imagine that we need the user's address to ship them a product
from a store. We have a few options for how to do that:

1. Stick to simple text fields.
2. Ask for their zip code to prefill the city and state inputs.
3. Detect their location from their browser for part of their address
4. After getting the shipping address, default to the same billing address
5. Offer to save multiple addresses for future use?

![][critique-options]

For each of these options, a UI Designer needs to understand how the options fit
within the patterns already in the application, and how they might be coded
while keeping in mind the limitations of the browser and software stack.

The user interface might be influenced by the stylistic choices of the visual
design, but its main goal is efficiency through affordances.

> "...the term affordance refers
> to the perceived and actual properties
> of the thing,
> primarily those fundamental properties
> that determine just how the thing
> could possibly be used.
> [...]
> Plates are for pushing.
> Knobs are for turning.
> Slots are for inserting things into.
> Balls are for throwing or bouncing.
> When affordances are taken advantage of,
> the user knows what to do just by looking:
> no picture, label, or instruction needed."
>
> \- Donald Norman, ["The Design of Everyday Things"][DOET], 1988

The best digital user interfaces bridge the gap between the physical and
abstract, using established conventions while familiarizing the user with new
design patterns.

[DOET]: http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107

## User Experience Design

*User Experience design* (or *UX design*) is the sum of the other disciplines,
but it is also a lot more. Something as vague as "experience" means spanning
multiple disciplines, and they may involve multiple designers with specialized
roles, but the common language is user experience.

UX Design touches a wide array of design disciplines and it is important for a
specialist to have some familiarity with each of them:

* User Testing
* Gathering and presenting statistics
* Writing Documentation
* Visual Design
* Interface Design
* Usability
* Prototyping
* Copy writing

It isn't important for them to master each of these fields, and a UX Designer
might even have a background in psychology or mathematics rather than one in art
or design. Because of this, some specialists have chosen to start referring to
themselves as *UX Architects*, *Experience Strategists*, or something similar.
They might even specialize in a subset of these disciplines, but the important
part is that they investigate user behavior to best deliver the experience that
solves what the user wants.

How do you find out what the user wants? Listen to them.

User testing, research, and rapid prototyping are the best tools in the UX
Designer's utility belt. They allow us to back up or disprove our assumptions
and get to know our users better. A UX specialist spends a lot of time crafting
wireframes, validating design ideas, and talking directly to the consumers.

Start with what really matters to your users and solve their pain points in
order of importance. Unless you are a powerhouse like Google, you don't need to
be testing [41 shades of blue]. Use analytics to get some insight on where your
users are getting hung up. Use [A/B testing] to test out some possible
solutions.

The color palette is nice, but how does it make the user *feel*? Should we
de-emphasize destructive actions, or does the user need all of their options
within easy reach?

A great framework for user experience design is the [Product Design Sprint],
which was [originated by Google Ventures][gv sprint], and can be [tweaked or
scaled down][design spiking] to best fit your needs. These can be done at the
beginning of a project or to mentally map an individual feature.

You shouldn't feel overwhelmed by the breadth of this discipline, as long as you
have the complete experience in mind while crafting your product, you are
practicing UX Design. As you are able to test a hypothesis here or an assumption
there, do it objectively, and act on the results. This pattern of frequent
analysis, prototyping, and testing will let you iteratively improve and keep you
on the right track.

Design isn't something that you can (or should!) do in a vacuum. Although
putting unfinished ideas in front of a potential user can be frightening at
first, the quick iteration and validation of your direction is something that
you will find reassuring and empowering.
[41 shades of blue]: http://www.fastcodesign.com/1662273
[a/b testing]: http://en.wikipedia.org/wiki/A/B_testing
[critique-options]: https://images.thoughtbot.com/cp-design-for-the-web/jzQuuC2dSCO3sAhtX4kT_design-ui.png
  "Critiquing options for UI elements")
[design spiking]: https://thoughtbot.com/blog/design-spiking
[gv sprint]: http://www.gv.com/sprint
[product design sprint]: https://thoughtbot.com/blog/the-product-design-sprint