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.
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:
- Stick to simple text fields.
- Ask for their zip code to prefill the city and state inputs.
- Detect their location from their browser for part of their address
- After getting the shipping address, default to the same billing address
- Offer to save multiple addresses for future use?
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”, 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.
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, and can be tweaked or scaled down 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.
