February 10, 2020
I’m not sure whether to file this under
art because… isn’t it both? I’m not classically trained in design in any way but have worked with designers for most of my career. I like to think I have an eye for tasteful design, but what does that mean?
I recently decided to try to put some words to what that means. Through some simple research, I kept running into the following basic design principles that identify good designs. Note that this is not an exhaustive list and I was also mostly looking for guidelines for web user interfaces. There are other principles to consider and I think the majority/all of these can be applied to design in general.
Whitespace defines the area in a design lacking substantial content. This is usually the space between elements and even letters.
There are multiple types of whitespace:
The amount of whitespace used can be considered both subjective and objective. However, if you are thinking objectivity, think usability and how easy/difficult it is for a user to read and use certain elements available.
You want enough space between elements to create contextual breaks and add flow, but not too much that it separates two connected ideas.
References: Papermill store white space
Aligning visual elements within your design helps create organization, composition, structure, balance, and relations.
There are generally two types of alignment:
It can reduce busyness, help focus a user’s attention to specific areas, and can help tie together content with the same/similar theme or context. If you’re familiar with the grid system (think a literal grid of rows and columns), this is generally used to help you align your elements.
Try to simplify your column and row element alignment on as few as possible. This will prevent a user’s eyes from jumping around too many places.
However, if you are purposeful with your alignment usage, you can make chaos look controlled if you use a mixture of different alignments. This can also create interesting designs.
References: 254 Alignment Principles
The Oxford dictionary defines contrast as:
a difference between two or more things that you can see clearly when they are compared or put close together
differences in color or in light and dark, used in photographs and paintings to create a special effect
In design, contrast can be used for many things:
Ways in which you can create contrast:
On top of using contrast as a design tool, the WCAG (Web Content Accessibility Guidelines) has some ratings used to help define acceptable levels of contrast to help with readability.
There are currently two levels:
There are many tools and browser plugins that can help you achieve these levels such as the WebAIM Contrast Checker.
The size and scale of all elements need to be considered. You want to adjust the scale to:
The scale of elements helps determine and define your visual hierarchy (more on this later).
Arranging your type to make your copy more visible is an art. Here are some things to consider when creating your typography
Color is said to be the first UI design fundamental that shapes a user’s experience. People also associate ideas with different colors through psychology. For example, green associated with wealth and nature.
Also, too many can destroy the quality of your design or the message you are trying to convey.
To add additional contrast without adding too many different colors, a simple trick is to use slight differences in the same color, but change hue to reinforce different blocks of the layout.
Every element has some level of importance, some more than others. VH is how we establish the importance of that element. You can control VH with many things, including scale (people read bigger things first) and color (things that pop stand out more) as mentioned above.
VH is important because it can help determine whether something is important to someone and worth their time. For example, someone could take a mere fraction of a second to determine if whether or not what they see is worth their time. If you don’t have a clear VH, they might skim over that design/content immediately.
It’s also important to note how different cultures read/scan a design. For western countries, they may read left to right, but for some Asian countries, they read right to left.
Knowing these principles allows me to look and specifically critique good or bad use of certain principles. They will also allow me to build and practice my vocabulary and understanding of what is considered good design.