UX Series 02: The Principles of Design

the Principles

It’s something all us design students learned, staring blankly up at our professors, eyes pried open in a coffee induced trance of attentive half sleep. They’re bludgeoned into our skulls from day one; The principles of design. They lay the foundation for future exploration into the field of design and continue to act as the backbone behind our day to day decisions.

Unfortunately, most sources cite a very different list of what these principles are, depending on what branch of design is being referenced. Luckily though, there is quite a bit of overlap. Below is my take on the principles of design, and not just for user interface design, but all design as a whole.

Balance

Balance is all about the proper distribution of an objects properties. This may include color, shape, line thickness, the actual objects themselves, etc. The main take away here, is that we can use distribution to achieve certain effects.

Typically, balance can either be symmetrical, or asymmetrical.

Symmetrical Balance

Symmetrical balance is great at portraying cleanliness, purpose and a sense of something being man made, since we don’t often find perfect symmetry in nature. It’s also predictable, easy to scan, and instantly understood by a user.

Symmetrical Balance

Asymmetrical Balance

Asymmetrical balance is great at retaining the kind of purpose implied from perfect symmetry, while also bringing a sense of life and organic nature to a work. It provides much more freedom in how a work is arranged and put together, not binding the any portion of your piece from needed to reflect on the other.

Asymmetrical Balance

Proportion

Proportion refers to the relationships between your objects, and how aspects of the size, scale, and intensity of certain properties are established. This is extraordinarily important in typography, when laying out the various font sizing, kerning, and line heights.

Font Scale

No text is viewed in isolation, meaning that the size of our top most header may end up having an effect on how our users interpret the body text. The same goes for a painter building a color pallet. The saturations of blues, from use in a bright sky to the darkest shadows, aren’t chosen in a vacuum. They are chosen with a mindfulness of how they will play off each other.

Pattern

Pattern refers to the ways in which we organize the various objects in our work to achieve a certain effect. Take a chess board for example.

Chess Board

A chess board is riddled with pattern. First, we identify spaces on the board as an array of where we can move a piece. Pieces are grouped by color, white for one player and black for the other. We then organize pieces by their shape; pawns in the front and a mostly mirrored layout for all of the others.

This, of course, is due to many reasons rooted in the design of game mechanics. However, it also achieves the result of making every setup of the board predictable and understandable at a glance.

Hierarchy

Hierarchy refers to how we assign importance to objects in our work. There are many ways to achieve this, but in my own opinion, I firmly believe that all hierarchy comes down to manipulation of contrast.

Hierarchy

We may for example, use spatial contrast by building one enormous central room surrounded by a series of tiny offices. We provide difference in font sizing, leaning on our association of large as being important. We may use a rarely used red color to denote an error state, grabbing the users attention. This is a contrast both in color, as well as in time.

Unity

Most importantly, we maintain a sense of unity in all other aspects of design. If our work does not read as a whole, but as a collection of unassociated pieces, our message and purpose may be muddled. It establishes a professional quality of polish that otherwise wouldn’t exist.

Google Icons

We want to make sure that our lighting, color schemes, use of depth, choice of musical scale, etc, all feel like they belong together. Even if our mission is to communicate disjointedness, the choice of when to discard unity is a conscious one and done with care.

Conclusion

At the end of the day, these are just guidelines to help us make better decisions with our work. Every principle is mailable and has room for interpretation. Still, they are great starting places to begin thinking about how we may implement a solution in our designs.

Happy Coding