Every eye-catching design comes from a foundation of techniques. Whether you’ve been formally educated in design or not, you need to know these fundamentals to create eye-catching designs yourself.
Some may seem obvious, while others you may subconsciously use. However, being able to identify these individual elements allows you to describe them when you create them, which can be instrumental in giving good feedback or communicating with stakeholders.
Let’s go over 30 elements so you’ll learn how to analyze great designs, spot their foundations, and use them to improve your creations.
Elements are the building blocks of design (but not to be confused with the atoms in atomic design!). They can be arranged and combined in various ways to communicate messages, increase visual appeal, improve communication, evoke emotions, strengthen brand identity, enhance user experience, establish visual hierarchy, achieve differentiation, convey emotions, and engage the audience. In other words, they can do pretty much anything!
In the example below, you see the combination of these elements to create the composition: shape, line, color, texture, shade, space, and form:
You must be thinking these all seem simple so far. But simple elements can have a big impact.
Shapes can hold colors or hide parts of a design, and you can find them on many graphics. You can use dominant shapes to draw viewers’ attention and convey hierarchy or small shapes to support the overall composition and create visual balance.
Also, you can use shapes in your design to convey meanings and evoke emotions, depending on the type of shape. For example:
Color has a profound impact on how we perceive and interpret visual information. It helps to convey emotions, set the mood, and create visual interest within a design. Without color, we use significant impact in our creations!
While using colors in the design, take into consideration the mood and feeling that you would like to convey to viewers, here are a few examples of color meanings:
A line is a basic building block for creating shapes, forms, and compositions. It moves across a surface and can vary in length, width, direction, and curvature.
You can use lines in your design to organize space, define boundaries, and convey information. Here are some meanings and symbolism:
Texture refers to the visual or tactile surface quality of an element. It encompasses characteristics such as roughness, smoothness, or patterns. You’ve probably seen texture in art galleries, with thick daubs of paint creating a work of art on a canvas. Did you want to reach out and feel the texture?
Use texture in your design to add depth, interest, and realism, it will evoke sensations of touch and enrich the overall sensory viewer experience:
The rule of thirds will help you to create more balanced and visually appealing arrangements of your design elements. It’s helpful for all types of art, like photography and illustration. For us web designers, the rule of thirds creates impactful results on a webpage!
As we will see in the image below, first the viewer’s attention goes to the top left, down to the bottom left, and up to the top right:
A design should be balanced between shapes, lines, color, form, texture, value, and space. A design that lacks balance feels like falling to one side.
And if you couldn’t tell from that explanation, this is a tricky element to gauge. Symmetry and visual density accompany this principle.
To ensure that your design is balanced, make sure that if you put something on one side of your design, you will balance it, by adding something of the same weight on the other side:
Using a unit in design means that the design should have scalability; it should follow the same style for typography and elements just like UX/UI designers do with a design system. A graphic composition isn’t different!
Use the unit to define which style of elements you will be leveraging to create your design and make sure that they can match and create a relationship with one another:
Contrast creates a visual hierarchy among design elements, and you can achieve it with colors, shapes, and textures.
A great contrast can occur with sizing and with colors that are opposite to one another.
Use contrast in your design to improve readability and clarity, create a sense of hierarchy, bring a point of focus, and make it more sophisticated:
Emphasis drives the user’s attention to one of your design elements, and you can achieve that by breaking repetition and using leading lines and shapes. You can often see this as opposition to balance, but really it’s drawing one design element out intentionally.
Emphasis will drive the viewer’s focus, highlighting key messages or components. This deliberate approach not only enhances visual appeal but also ensures clarity and engagement.
Use emphasis on your design if you would like to make the intended message or purpose unmistakably clear:
In graphic design, the principle of proportion refers to the relationship between different elements within a composition, emphasizing their size and scale about each other and the overall design.
You can use proportion to create visual balance, harmony, and hierarchy, guiding the viewer’s eye and conveying a sense of order and coherence:
Repetition in design involves using consistent patterns, shapes, colors, or elements throughout a composition to create visual unity and reinforce key messages. Your favorite movies might use leitmotifs in their music or parallelism in their camera shots to achieve a similar effect!
By repeating certain design elements, you can establish a sense of rhythm and consistency, which helps guide the viewer’s eye and strengthens the overall impact of the design:
Rhythm refers to the repetition or alternation of visual elements at regular intervals within a composition. Like music, visual rhythm in design creates a sense of pattern and time.
You can achieve rhythm through the repetition of shapes, colors, or textures, guiding the viewer’s eye and establishing a cohesive visual flow:
Alignment refers to the arrangement of elements along a common axis or edge, and it helps to establish visual order and cohesion within a design.
Common alignment techniques include left, right, center, and justified alignment, as well as using grids or guides for precise placement.
To elevate your design work, you can make use of grids and align the elements accordingly to them:
A pattern refers to a repeated decorative motif or design element that creates a visual rhythm or sequence. Patterns can be simple or complex, consisting of various shapes, colors, and textures arranged regularly or irregularly.
Use patterns on your design to enhance visual interest, add texture, and convey meaning or symbolism:
Spacing in design refers to the intentional arrangement of elements within a composition, particularly the distance between these elements.
Use spacing on your design to establish visual hierarchy, improve readability, and create balance and harmony:
Shades refer to variations of a single color achieved by adding black to it, resulting in darker tones. In other words, this element is color with an extra step.
Shades are an essential aspect of color manipulation and can significantly impact the mood, tone, and overall visual aesthetic of a design.
Use shades to create a sense of realism in your design. These shades can be the gentle gradient of a sunset or the dramatic contrast of light and shadow:
Symmetry means that things are the same on both sides. There are different types of symmetry we can use:
Use symmetry to make things look balanced and harmonious:
Asymmetry is intentionally breaking symmetry for dynamic visual interest. For example, arranging images and text in a magazine spread with varying sizes and angles is asymmetry:
Imagine a storybook where the title is big and bold at the top, the chapter headings are a bit smaller, and the regular text is just the right size to read comfortably. Here are a few ways to create this hierarchy:
Putting that all together, use hierarchy in your design to organize information so that the most important things stand out the most:
Color harmony refers to the pleasing arrangement of colors in a composition. There are several types of color harmony, including:
By carefully selecting colors that complement each other and work well together, you can evoke a harmonious and pleasing visual experience for the viewer:
Each font has its own personality, and when you pair them just right, they create a beautiful harmony. Here’s a simple guide to typography pairing.
Use the help of tools such as Fontpair to play around with font matches and inspiration websites like Femmebot to use great combinations in your design:
Negative space, also known as white space, is the space around and between the main objects or subjects in a design. The background helps define the positive elements (like text or images) and gives them room to breathe.
Negative space is crucial for creating balance and harmony; it helps pieces fit together neatly without feeling cramped or cluttered. It also guides the viewer’s eye and emphasizes the focal point of the design.
Give your elements enough room to stand out by leaving plenty of space around them. Experiment with different layouts and arrangements to find the perfect balance between positive and negative space:
Scale refers to the relative size of elements within a design, while proportion deals with how these sizes relate to each other.
By carefully scaling elements relative to each other, you can create a visual hierarchy that guides the viewer’s eye and emphasizes the most important parts of the design. Proportion ensures that elements relate to each other pleasingly and harmoniously, avoiding awkward or unbalanced compositions:
Transparency adds depth and dimension to a design, allowing elements to interact with each other more dynamically. It can create visual interest and complexity, making the design more engaging and immersive.
When designing, think of transparency as a tool to enhance your composition. Experiment with different levels of transparency to achieve the desired effect:
Perspective is how objects appear smaller as they recede into the distance and how lines converge toward a vanishing point. This is another term you hear all the time in traditional art that applies to web design.
You can use perspective to create realism and depth in the compositions, guiding the viewer’s eye and creating a sense of space and dimension:
Reflection can create symmetry, balance, and a sense of harmony by repeating certain elements or motifs throughout a design. It’s a technique used to add depth, interest, and visual unity to a composition.
When designing, consider reflection as a tool to enhance the coherence and impact of your composition, you can experiment with duplicating and mirroring elements to create interesting patterns or visual rhythms:
Accessibility involves designing products, websites, and other digital or physical spaces to accommodate diverse needs, including those of people with disabilities, aging populations, or temporary impairments.
Adhere to accessibility standards and guidelines, such as the Web Content Accessibility Guidelines (WCAG), to ensure that your designs are perceivable, operable, understandable, and robust for all users.
Pay attention to factors like color contrast, text legibility, keyboard navigation, alternative text for images, and compatibility with assistive technologies:
Responsive design is a web design and development approach that aims to create web pages that adapt and respond to the user’s device and screen size.
To implement responsive design, use fluid grids, such as percentages rather than fixed pixels to ensure that content adapts fluidly to different screen sizes:
Iconography refers to the use and design of icons, which are visual symbols or representations used to convey information, actions, or ideas quickly and intuitively.
When using icons, ensure clarity by selecting universally recognizable symbols and maintaining consistency in their usage throughout the design. Also, pair icons with descriptive text or tooltips to enhance accessibility and aid users’ understanding:
Steal Like an Artist is a concept by Austin Kleon in his book of the same name. It teaches us that designers don’t have to create from scratch but can draw inspiration from others and remix them to create something new and original.
Don’t forget that inspiration comes from everywhere. Seek it out!:
Take it easy when improving your design. Do not compare yourself with others. Instead, compare your work from today with the work of yesterday.
Don’t be afraid to experiment and make mistakes along the way; it will be part of your growing process and it is okay to design things that you might feel embarrassed about in the future. Design without shame!
Keep evolving and instead of only copying the work of others and making it into a new thing, always try to understand what makes it effective so that you can start applying those same techniques to your design in the future.
Reference for the screenshots: free designs available on canva.com
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Our team kept running into misalignment, rework, and wasted effort. A simple design kick-off meeting helped us fix it — here’s how.
Progressive disclosure is a design technique that involves revealing information gradually based on the user’s needs.
Ultimately, “PX” and “UX” are both just words. Here’s what I liked (and didn’t) about Duolingo’s newest announcement.
Dive into the world of mobile UX design and explore the best practices, common challenges, and examples of apps that are doing it right.
Learn more →
