As designers working in an ever-changing field, it’s important that we develop an understanding of the timeless design principles that underpin everything we do. In part one of the Universal Principles of User Experience Design, I’ll explore the foundations that enable us to establish some universal principles of UX.
These principles, which should sit at the heart of everything we design and build, are critical and will stand the test of time:
- Visual grammar
- Language and typography
- Narrative design
Collectively, these principles form the firm foundations on which we design great experiences. We can, of course, layer an understanding of other principles — psychology, anthropology, and economics. On top of these, there’s enhancing what we build, but these core principles underpin the experiences we create.
We’re increasingly asked to solve design problems that — as new technologies are imagined and invented — have never been solved before. The good news is that the principles of the past still work. By focusing on acquiring these first principles, you develop skills that stand the test of time and set you apart as a designer.
Regardless of the outcome — be it analog, like Lance Wyman’s iconic Mexico68 Olympic identity (left); or digital, like Apple’s ubiquitous Activity iOS branding (right) — the principles of design remain consistent and timeless.Of course, to comprehensively cover universal principles of UX design — a vast and complex topic — would be a challenge in just a single article. But rest assured, I’ll provide some additional tips and techniques after each section, and at the close of the three part series, I’ll provide some suggested reading. Consider this article series a short primer to set you on the right path.
Now, let’s look at part one of Universal Principles of User Experience Design: Visual Grammar.
Visual grammar
To design effectively, it’s critical to develop an understanding of the principles of visual grammar that underpin the world of visual communication. These principles, which have their roots in the history of graphic design, are still applicable today and form the building blocks of design, lying at the heart of the experiences we create.
But what exactly do I mean by visual grammar? Put simply: everything we create visually — whether it’s user interface (UI) elements or more complex arrangements of elements on screen — is comprised of a series of core elements: points, lines, and planes. By combining these elements, we can create icons, components, illustrations, diagrams, and patterns. In short, everything.
As designers, we work, at the simplest level, with an essential “grammar” of elements — points, lines, and planes. These elements, which were defined at the influential Bauhaus school at the beginning of the twentieth century, remain at the heart of what we do today, and yet, often aren’t taught rigorously.
A point marks a position in space. Two points, connected, form a line. A series of points, connected and filled, form a plane. These are the building blocks of visual design. Spending some time learning how they work — at a fundamental level — will improve your skills as a designer.UX might be a relatively young discipline, but that doesn’t mean that it doesn’t have a rich heritage, drawn from the world of graphic design, from which we can learn. As I’ll explore shortly, if you break apart any design you’ll see at heart that it’s created from points lines and planes.
At Belfast School of Art, the first six weeks of our three-year programme are spent mastering the vocabulary of visual grammar. We focus — as Mr. Miyagi does in The Karate Kid — on developing a deep understanding of principles. Practice makes perfect, or, as Mr Miyagi stresses repeatedly, “Wax on! Wax off!”
By encouraging our students to focus on just one element at a time — first points, then lines, and then planes — we develop their understanding of the underlying visual grammar. This is a tried-and-tested method of learning that traces its lineage back to the world’s leading design schools Bauhaus, Ulm, and Basel.
It takes time and patience, but if you want to improve as a designer, set aside some time and undertake a series of exercises using just points, lines and planes. Doing so will equip you with a deeper understanding of visual grammar. Rochester Institute of Technology has an excellent Mini-Course in Design Principles that acts as a perfect starting point.
With an understanding of what can be achieved using each of these elements alone, we introduce our students to the idea of combining them. It’s at this point that we see the richness of opportunity and the importance of designing within restraints.
Learning how to distill interfaces down to their core components — focusing on simplicity, and restraint — results in reduced cognitive burden and happier users. A win-win. With these core components defined we can combine them to establish a visual vocabulary for each and every project.
Points, lines, and planes are the building blocks of design. By combining these elements we can create a wealth of components: 1. A chart, plotting data using just points. 2. A slider, combining a point and a line. 3. A series of page elements and form fields, comprised of planes. 4. A visual showing what’s possible when we combine the various elements.These foundations have served graphic design for hundreds of years and form the backbone of the visual layer of UX we use in the here and now, but very few spend time mastering these essential components.
As Mr. Miyagi stresses, practice makes perfect. Once we start to put together points, lines, and planes in combination and bring color into the equation, we realize that we can create any UI component we need.
A seasoned designer can create delightful user experiences with very minimal means. As Antoine de Saint-Exupery put it, “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
Visual grammar — case studies
With a mastery of visual grammar, it becomes clear that these building blocks — at their heart, the essence of simplicity — underpin everything we do as designers when we design user interface components and wider, holistic experiences. By training your eye, it’s possible to break apart complex interfaces, see how they’re constructed and learn from them.
There are many examples of rich, immersive experiences — both web-based and native — that are built using a minimal, distilled visual grammar. If we break apart a couple, we’ll see how we can create complex interfaces using this series of core elements: points, lines, and planes.
Josh Worth’s If the Moon Were Only 1 Pixel (left) is a tour de force of what’s possible when an elegant idea is executed using a minimal visual grammar. Lunar’s Onetime (right) uses a similarly restrained visual grammar.Josh Worth’s beautiful website If the Moon Were Only 1 Pixel is a great example of a site that demonstrates what’s possible when a deep understanding of even the simplest of visual elements is married to an elegant idea. The result is a wonderful and memorable UX.
Josh Worth describes it as, “A tediously accurate scale model of the solar system.” I’d describe it as a tour de force of what’s possible when even the simplest of building blocks — points, lines, and planes — are put to good use. Scroll horizontally, and you’ll see our solar system in all its glory.
- Points, at varying sizes, become planets.
- Lines are used both to pinpoint individual planets and serve as a scale along the base of the page.
- A plane — the background — extends the length of the page, representing the blackness of space.
If the Moon Were Only 1 Pixel is a lovely example of a what’s possible when the basic building blocks of visual grammar are used sparingly, demonstrating that it’s possible to create an immersive experience with minimal means and a degree of restraint.
Another lovely example is Lunar’s time zone app, Onetime. Time zone apps are ten-a-penny, but Lunar’s is minimal and beautiful. Look closely, and you’ll see points, lines, and planes aplenty, all in the service of UX.
- A central point represents the world, split in two — half awake in light blue, half asleep in dark grey, giving a sense of time and space.
- Points also represent the cities you add to the app (yellow representing daytime cities, light blue representing nighttime cities).
- A plane of shadow breaks the globe to subtly indicate sleeping hours.
Where other time zone apps over-complicate their interface, Onetime focuses on simplicity. The result is an app that lets you, “Simply see the time anywhere at a glance.”
Simplicity can, and often does, stand the test of time. Spend some time learning about the building blocks of visual grammar — points, lines, and planes — and you’ll find you can achieve a great deal, even in the absence of color.
Tips and techniques
- As Dieter Rams puts it in his Ten Principles for Good Design: “Good design is as little design as possible.” As the sites and applications we design become increasingly complex, our role as designers is to simplify as much as possible, aiding usability in the process.To truly serve our users — and delight them in the process — we need to focus on the essentials. The best interfaces remove as much as possible, removing complexity in the process.
- The appeal of If the Moon Were Only 1 Pixel and Onetime lies in their simplicity. When embarking on a new project, ask yourself, what can you do within constraints?The best designs — those that stand the test of time — often use a distilled visual grammar. Returning to de Saint-Exupery, “Perfection is achieved… when there is nothing left to take away.”
- When building UI components try and focus on re-using elements and minimising visual complexity. With a core set of simplified and elegant components built, focus on combining these to create easily understandable interfaces that ease user interactions.
Continue reading part two of Universal Principles of User Experience Design: Language and Typography.