Elements and Principles
January 17th, 2020 ∙ 17 min read
In its most simple form, Deconstructing Design is about the endless pursuit of understanding what makes great design great. Now more than ever, people use and experience world-class design all day long. It's in the advertisements we see, branding and packaging we're sold, and in the technical products (apps, websites, and hardware) we use. Well, at least the good ones. We all know what great design looks and feels like, but few know why it looks and feels great.
In this first post, I wanted to establish some nomenclature and lay the foundation for how to discuss good design. Even though I didn't go to design school, I'd imagine this is one of the first "Design 101"-type courses everyone would take.
The first step in creating great designs is knowing what the fundamental aspects of great design are.
In any field of study, there seems to be a natural yin and yang between the objective and the subjective, the science and the art, the hard skills and the soft skills.
Let's take cooking for example. I'm no world-class chief, but I do know that there are four fundamental elements of cooking that every chief needs to master in the beginning: salt, fat, acid, and heat. The act of cooking is applying well known principles to those elements like baking, roasting, grilling, frying, boiling, simmering, and steaming. The composition of those elements, principles, and techniques is what ultimately makes a great dish.
Now let's bring that back to design. Again, I'm no world-class designer, but I've found through my experience that there are foundational elements every designer needs to know. Even if you're just wanting to better identify great design or communicate about great design with a team member, these elements are the building blocks of those conversations. Those elements are color, direction, line, size, shape, texture, typography, and value.
The act of designing is utilizing those elements while applying design principles to best solve a problem.
Those principles include, but are not limited to, alignment, balance, contrast, hierarchy, movement, proportion, proximity, repetition, space, and unity.
Let's start exploring what each of these mean in a little more detail.
Elements of Design
These are the elements, the building blocks per se, that make up any and all designs (or art) around us. Better understanding them not only helps you be more intentional when designing your next interface, product, or piece of art, but it enables you to have a more informed conversation about design as well.
Color
Color is probably one of the most widely known elements of design. It's seen everywhere, it transcends language, it's deeply rooted in culture, and it's powerful. Three primary (ha, no pun intended) aspects came up time and time again while doing a deeper dive into color. The first was the technical properties of color, second was color theory, and third was the color space, or the technical organization of colors.
This one section could easily be the length of this entire post, or even offer enough breadth and depth for an entirely new blog altogether. I can assure you with confidence that all aspects of color won't all be covered now, but let's scratch the surface on those three primary aspects to consider when deconstructing color.
Color theory
Mood and affects of color on people. Psycology.
It’s important to note that while color is global, different cultures have different connotations for colors. For example, in some cultures, white is associated with purity; in others, it’s associated with death.
there are three basic categories of color theory that are logical and useful : The color wheel, color harmony, and the context of how colors are used.
Technical
HSV (hue, saturation, and value) is a color system used to talk about color. If I could break each of those letters down in their most basic form, this is how I'd describe them:
Hue: A fancy word for color. The hue of an apple is red.
Saturation (chroma): The intensity or purity of the color. Looking at that same red apple with a pair of sunglasses would reduce its saturation.
Value (brightness or light): The amount of black or white that's injected into the color. Take the shades off, and imagine that same apple. As you see it, it has a value of 50 – its most true color is coming through.
Hopefully this diagram helps shed some light on the concept 😏
Color space
A color space is a specific organization of colors that helps people reproduce identical colors in various places. Imagine you were playing around with various colors of paint on a piece of paper and found the perfect shade of red. If you then wanted to use that color for the background on your new website, how would you go about doing that? How do those colors "map" between technologies and environments?
Answer: color spaces
The five most popular are CIE, RGB, YUV, HSL/HSV, and CMYK. Beyond that, feel free to run down a rabbit hole on this topic. I'm moving on to direction!
More resources
The 7 Step Guide to Understanding Color Theory
The HSB Color System: A Practitioner's Primer
Tutorial: Hue, Value & Saturation
Direction
I debated if I should include Direction as an element or principle for far too long while writing this. It may sit as a sub-topic under Composition, but for now it'll lie here (I've yet to make up my mind).
The direction, or flow, of a design refers to how the eye moves over the page. There are two things to keep in mind when considering direction during your creative process:
- How deliberate are you being about the direction someone should take through your design?
- What are the known patterns of consumption for the medium and culture you're designing for?
The first can be influenced and achieved by using nearly every design element referenced here. Leading lines can guide someone's eye in a desired motion. Size and scale can do the same. All of these can make your design unique and different, but don't forget the most important thing about great design: it solves a problem. This is where the second thing to consider comes into play.
If you're designing a webpage for a primarily English-speaking demographic, then common patterns to consider are "E", "F", and "Z" shapes. This is due to people expecting to scan a page top to bottom, left to right. The further your design moves away from an established convention, the more difficult and confusing it may be.
More resources
3 Design Layouts: Gutenberg Diagram, Z-Pattern, and F-Pattern
Line
A line is to design as an atom is to an element. It's one of the most basic elements consisting of at least two points connected together. It's used in the composition of many design elements such as shapes, typography, and direction. Beyond the elements, lines also have the power to convey emotion and establish hierarchy.
Variations of lines include thick or thin, dashed or solid, rounded or squared, straight or curved, closed or open, vertical, diagonal, or horizontal – the options are endless.
In short, they're simple, versatile, and effective when used property.
More resources
Size (also known as Mass or Volume)
When talking about size within design, there are three foundational, distinct terms to establish first.
Size: The physical dimensions of an object
Scale: The relative size of different objects or of an object to a common standard
Proportion: harmony of scale
Size in its most literal form is an absolute measurement. A page may be 1200px wide. A font size could be 40pt. A line can be 4px thick.
Size becomes more applicable to design when we talk about the relationship of size, otherwise known as scale. Scale can be used to showcase importance when compared to a similar element. A typography scale, for, example, may have a paragraph size of 16, a subheading size of 24, and a heading size of 40. Scale is commonly used to establish contrast or hierarchy.
More resources
How To Use Size, Scale, and Proportion in Web Design
Elements of Design: Scale and Proportion
Shape
Shape might be one of the first elements of design most of us learned in formal education. In its most simple definition, shape is any enclosed space defined by lines or in contrast to its surroundings (negative space – we'll get there).
Two ways of describing shapes can be geometric (similar to the shapes above) or organic (similar to background blobs you may see in present-day web design, or circular speech bubbles you may see while someone's typing a message in a chat box). They're all around us. Nearly every complex, fancy design is made up of a composition of the simple, elementary shapes above.
More resources
Shape as a Visual Element of Art
Texture
Texture is the most unfamiliar element of design to me at the moment. It very well be that I may not be looking for it a majority of the time, but it doesn't seem to be very widely used in present-day web and mobile interface design (where I've been spending most of my time). I have seen it widely used in the world of advertising.
From a physical perspective, they're all around us. Just from where I'm sitting at my design I can see dozens of textures from various wood to desk and counter surfaces to fabrics.
More than with any other element, textures serve as a nod to our natural environment.
More resources
The Role of Textures in Contemporary Graphic Design
Typography
Again, I can't even begin to give typography justice in one or two paragraphs. Its worth of a blog all on its own as well.
Typography is important element of design because it literally conveys the message you want to communicate.
Beyond the literal use case, it carries many of the same qualities of lines, shapes, and colors. Typefaces can convey emotion, they can be masterful pieces of creative expression, and they are also powerful at establishing hierarchy all on their own when used appropriately.
More resources
Value
Value, similar to direction, had me in a pickle when deciding to include it as a foundational element due to its close relationship to color. Within that process, I created the cool illustrative graphic above and thought it had to stay after all.
The reason I ultimately left it as a foundational element is due to its versatility. Not only is it a fundamental property of color, but it can be applied to any other foundational design element.
Want to create a more dynamic homepage, but don't want to hire a custom illustrator? Add a large full-screen photograph as the background and reduce its value to create an interesting homepage with clear hierarchy.
Value can be used to tone up or down the presence of typography, shapes, lines, textures, and colors.
More resources
Elements of Design: Value and Texture
Principles of Design
These are the "rules" of design. Website after website, page after page, I couldn't get a clear consensus on exactly how many principles there were, but this is a pretty exhaustive set of them. These design principles are the tried-and-true methods to creating clear, tasteful designs, and should be kept in mind when creating any type of design. Let's get started.
Alignment
Alignment allows us to create an ordered appearance to the elements within a given design. Alignment can be used to help establish direction, show a relationship, or improve the readability of a piece of text. An effective tool to establish a strong sense of alignment is a grid system.
More resources
Principle of Design: Alignment
Grids in Graphic Design: A Quick History, and 5 Amazing Tips
Balance
Balance provides stability and structure to a design. This is best described in the physical sense. If you saw a design with large images and text all off to one side of the screen or page, it'd feel a bit off. It doesn't match the laws of the physical world we're used to.
This theme, mapping the digital world to the physical world, is one of my favorite aspects of design. The physical world is familiar to all of us. It's expected and natural. The digital world is no different. Whether i's the balance of a design, the speed of an animation, or the proportion of known figures, one assured way to achieve bad design is to go against the grain of the physical world.
One of my favorite talks of all time is on this very topic. It's called Stop Drawing Dead Fish by Bret Victor. It's a must watch.
More resources
Design Principles: Compositional, Symmetrical, and Asymmetrical Balance
Contrast
Contrast is created when two elements are juxtaposed. In other words, when you put two very different things next to each other, they each make the other stand out more due to the stark difference between them.
Juxtaposition can be achieves through opposing lines, shapes, textures, and color, to name a few.
Imagine if a piece of art on the wall had both a rough piece of tree bark and a smooth piece of marble. The bark would feel exceptionally rough in comparison, and the marble exceptionally smooth.
More resources
The Ultimate Collection of Principles of Design
What is Contrast in the Principles of Design
Hierarchy
Hierarchy helps signal the importance of each element. Hierarchy is my favorite principle because when used well, it can be one of the most helpful principles when storytelling through design.
Hierarchy is like a secret message you're giving the user or consumer of the design as to where they should start the story, in what order they should read it, and where the story ends. A clear hierarchy helps improve comprehension, reinforce the message, and serve as a guide to the information you're trying to convey.
More resources
5 principles of effective visual hierarchy
12 Visual Hierarchy Principles Every Non-Designer Needs to Know
Movement
This principle might be a bit abstract to grasp at first. What it comes to digital design, movement is most commonly thought to be referring to animation. Something on the page actually moving.
It turns out this isn't the case. Back to the physical world use case, things that are in motion have characteristic to them. If you were to take a picture of something moving, it's most likely leaning, blurry, or warped due to how that object responds to the surrounding physical world.
This familiarity we all have with objects in motion can be used in graphic design as well. Opacity, transparency, blur, angels, and motion lines are all common ways to achieve movement.
More resources
Design Elements and Principles
Proportion (also known as Scale)
Yet another example of, "Is this a sub-element of size, or a standalone principle." Regardless, the important thing to keep in mind about proportion is relevance between objects. As the size of certain objects change in a design, familiar, related objects should adjust as well.
If a house and people are both showcased in a design, the person is most likely going to be smaller than the house. It's familiar. There are cases where the person is closer than the house to showcase depth, or the person is larger than the house to achieve a shocking effect, but let's save those for another principle.
Similar to hierarchy and contrast, proportion is commonly used to communicate importance.
More resources
Proximity
This one's straightforward. On a biological level, objects next to each other feel more related than objects further apart. What's interesting to note is even objects unrelated in attributes (color, shape, size, etc) feel similar when arranged in close proximity.
Proximity is also one of the easiest way to achieve unity – the last principle in this set.
More resources
Gestalt Theory for UX Design: principel of Proximity
Repetition, Pattern, and Rhythm
I'll let the above graphic speak for this principle. Regardless if you're using repetition, which is more straightforward, or rhythm, which can be slightly more abstract, they're both used to achieve the same goal – provide a sense of clarity, consistency, and cohesiveness.
Repetition: An object, form, or figure that is repeated.
Pattern: A combination of elements or shapes repeated in a recurring and regular arrangement.
Rhythm: Like pattern, in that the same elements (i.e.shape, line) are repeated; however, with rhythm there are slight variations in the pattern.
More resources
Design in Art: Repetition, Pattern, and Rhythm
Space
Every shape or form has a place in space. Space refers to the area around, above, below, or behind an object.
Space is the principle I was slowest to grok when teaching myself design. Looking back at my early work, I could have leveraged space to improve my work immensely.
Pro tip: As you're trying to get comfortable with the concept of space, try a little trick. After you've taken a first pass at an interface, ad, or any piece of digital design, try going back through the design and doubling the space between all primary elements of the design.
It's ok, it will most likely look weird and feel uncomfortable.
Now, in small increments, move the elements back to their original position until they feel well-placed, but still have room to breath. You most likely will have added anywhere between 25%-50% more space than you had in your original designs. This is a great exercise in becoming more comfortable leveraging space in your design process.
There's also another related and equally powerful term called Negative Space. This refers to the use of surrounding space to create the focal point of the design. Some of the most creative use cases I've found of negative space, in this case, logo design, can be found below:
“White space is to be regarded as an active element, not a passive background.” — Jan Tschichold
More resources
Principles of Good Design: Space
Design Principles: Space and the Figure Ground Relationship
Design Principles: White Space
Unity, Variety, and Harmony
Ahh, it's only fitting that Unity is the last principle. Unity, variety, and harmony is what happens when you bring all of these elements and principles together. It gives a design a sense of completeness.
Unity can be achieved through both variety and harmony. Variety refers to diversity and contrast throughout the design, and harmony refers to using similar elements to accent their own similarities. Both ultimately achieve a sense of unity within the design
More resources
Principles of Good Design: Unity
Wildcard: Break the rules
Wow. Now that all of the principles have been covered, don't forget to break them! I can't do this point justice compared to one of the all-time greats, so I'll leave you with this.
“Learn the rules like a pro, so you can break them like an artist.” ~ Pablo Picasso
As always, don't hesitate to reach out via Instagram or Twitter if you have any comments, question, or feedback on the post!
Credits
https://visme.co/blog/elements-principles-good-design
https://www.canva.com/learn/design-elements-principles
https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-b74be0dbdb58
http://www.j6design.com.au/6-principles-of-design
https://zurb.com/blog/the-3-elements-of-good-design-usability-u
https://study.com/academy/lesson/what-are-the-seven-elements-of-art-definition-examples.html
https://jlsnell.wordpress.com/2008/07/25/six-basic-elements-of-design
https://creativemarket.com/blog/10-basic-elements-of-design
https://www.creativelive.com/blog/timothy-samara-fundamentals-of-design
https://en.wikipedia.org/wiki/Visual_design_elements_and_principles
https://blog.designcrowd.com/article/620/design-principles-6-design-fundamentals-to-guide-your-work
https://www.toptal.com/designers/ui/principles-of-design
https://99designs.com/blog/tips/elements-of-design
https://blog.prototypr.io/back-to-basics-the-elements-of-design-db5826f79d12
https://www.invisionapp.com/design-defined/elements-of-design
https://www.liveabout.com/principles-of-art-and-design-2578740
Fundamentals
