Practical Color, Composition, and UX Tips for Graphic Designers
Graphic design is about creating visual harmony and appeal, allowing users to engage with captivating narratives.
From eye-catching billboards to memorable logos, designers are responsible for the efficiency of business and marketing materials.
Graphic design can be a gripping but challenging journey. It requires awareness of traditional art rules, exploring new trends, and developing your watchfulness and creative vision.
This article outlines what digital creators should know, from color meanings in design to advanced compositional rules. Read on!
What are the 5 key design areas?
Since web design is a complex discipline, it involves different rules and theories from allied knowledge areas.
To become a professional digital creator, you must acquire diverse skills and constantly update your knowledge in various fields and trends.
The five key design areas to explore are:
- Color theory. Color is a crucial design element as it influences user perception. Carefully matching different colors and shades, you can achieve harmony and a cool visual experience. For example, using a concrete color (light gray) in design creates neutral compositions. On the other hand, the symbolism of the color white runs deeper and can be applied in multiple contexts, e.g., representing a sense of clarity and spaciousness in website layouts or emphasizing a modern and clean aesthetic for corporate sites. To deepen your grasp of color theory, read books like The Art of Color by Johannes Itten or Interaction of Colors by Josef Alberts.
- Typography. Fonts are another critical design element you should learn to combine, as chosen typefaces directly influence readability, brand identity, and overall project mood. Numerous fonts available today are sorted into families—serif, sans serif, script, monospaced, and display. To choose a fitting option, make sure to familiarize yourself with typography history and read specialized books, such as Thinking with Type by Ellen Lupton or On Web Typography by Jason Santa Maria.
- Visual hierarchy. This refers to how different colors, fonts, images, and graphics interact and are arranged in a design, guiding user attention through specific visual anchors. For example, your web page conversion rate can grow if your CTA button is properly located and highlighted to grab attention. To dive deeper into visual hierarchy principles, look through The Building Blocks of Visual Hierarchy by Ben Gremillion, Matt Ellis, and Jerry Cao.
- Composition. This implies thoroughly arranging all design elements to make them visually balanced and appealing. Visual hierarchy and composition may appear similar, but they are, in fact, different. A properly organized visual hierarchy guides the viewer’s eye to crucial elements, while the composition is about the overall layout.
- User experience. UX involves understanding how customers interact with designs and the emotions they experience. Engagement with a brand or product can be complex and unpredictable, making it essential to carefully consider all touchpoints to ensure a positive and seamless user experience. Modern design principles strive to simplify interactions, providing users with clear and easy-to-follow instructions. For a more in-depth understanding of this design area, explore the bestselling book The Design of Everyday Things by Don Norman.
The meaning of color elements in design
Based on various research studies, colors have the incredible power to influence human emotions, evoking happiness, sorrow, joy, and more. Some colors can even affect human physiological processes.
For example, the color red increases appetite, which is why many brands, such as Coca-Cola, Lays, KFC, and Pizza Hut, use this hue in their logos.
White
What does white symbolize? This depends on the viewer’s cultural background. In Western countries, white is commonly associated with purity, peace, simplicity, and cleanliness.
However, in some Eastern cultures, the color psychology of white is seen as a transition to a new phase of existence and is also linked to bad luck.
In graphic design, white can symbolize a blank canvas and provide a sense of openness, making it a popular choice for minimalist and modern designs.
White is commonly used as a background color to enhance other elements and create a sense of spaciousness. It can evoke tranquility and innocence, making it an ideal choice for industries like healthcare, technology, and lifestyle.
Black
Most believe black is a color with negative connotations, like mourning, sorrow, and death. But in some cultures, it can deliver positive feelings.
For example, Chinese culture identifies black as an attribute of health and prosperity.
That’s why you should consider cultural differences when creating designs, as they can hold varying meanings and interpretations across different societies.
Overall, black exudes sophistication, elegance, and power. It is frequently used to add depth and drama to a design, making it a popular choice for high-end brands and luxury products.
Red
This color was historically associated with blood, acquiring additional meanings like sacrifice, danger, and courage. However, in today’s world, red symbolizes passion, energy, and intensity.
It can evoke feelings of love, desire, and excitement, making it a go-to choice for the fashion, food, and entertainment industries.
Red is also used to draw attention and create a sense of urgency—ideal for call-to-action buttons and important messages.
Yellow
Yellow is linked with kindling joy and happiness, making it a color often associated with pleasant aspects of life. Its cheerful and lively nature can serve as a great source of inspiration for web designs, infusing them with positivity, vibrancy, and an uplifting atmosphere.
By incorporating yellow strategically, you can create engaging websites that stimulate creativity and evoke a sense of optimism and enthusiasm in users.
The color is often used in designs for children’s products, leisure, and entertainment industries.
Blue
Reminiscent of the sky and sea, this color evokes a sense of freedom and delivers inspiration. It is frequently associated with trust, loyalty, sincerity, and wisdom.
Blue also evokes feelings of calmness, stability, and confidence. It is commonly used in corporate branding, finance, and technology industries, where reliability and professionalism are crucial.
How to efficiently utilize typography in your designs
Along with colors, typography greatly impacts a user’s perception of a design. For example, blackletter fonts work well for luxury brands, while sans-serif fonts are easily readable, making them suitable for body text.
Here are some essential font pairing tips:
- Combine two typefaces from the same font family.
- Pair bold fonts with skinny ones.
- Mix serif and sans serif typefaces.
- Reserve decorative fonts for headings.
Consider using online font generation tools such as Monotype, FontJoy, and Fontpair to practice font pairing and develop your creative vision.
How to make a good graphic with compositional and visual hierarchy rules
You should always consider compositional and visual hierarchy rules since they’re key to visually appealing and functional designs. Here are four essential rules to keep in mind.
The proximity principle
The proximity principle is based on arranging similar design elements close to each other, resulting in a more impactful and cohesive composition.
This creates a direct connection for viewers, allowing them to perceive narratives and grasp ideas easily.
For example, if you have a blog section with multiple articles, position them close to each other, creating a visually unified and user-friendly experience.
Fitts’ Law
Fitts’s Law principle helps designers optimize their layout and placement of elements to enhance user experience and efficiency.
This psychology rule states that the time a person takes to move a pointer (e.g., a mouse cursor) to a target area is influenced by the distance ratio to the target and its size.
Simply put, users are more likely to interact with closely located, larger design elements.
For example, navigation buttons on smartphones are placed at the bottom of the screens because they are easily reachable and can be tapped on with ease.
In contrast, elements located in the upper areas of the screen might be harder to reach.
Hick’s Law
Hick’s Law states that the more choices you provide for users, the longer it takes for them to make a decision.
Consequently, designers should narrow down available options whenever possible to reduce decision-making time and enhance user experience.
Nonetheless, sometimes, the number of choices is predetermined, e.g., a company offers five different services.
In such cases, you should allocate visual emphasis to the most preferred option to guide users toward it. You can do this with size or color.
Von Restorff effect
Imagine a basket filled with apples, where all of them are red and only one is green. According to the Von Restorff theory, you are more likely to remember the unique item, which, in this case, would be the green apple.
Designers can leverage this principle by making specific graphic elements stand out using size, shape, or color. For example, make a CTA button with a contrasting color to draw the user’s attention to it.
Conclusion
Using the power of visual narratives, graphic designers can engage users and contribute to achieving marketing objectives.
Graphic design is a complex topic built on color theory, compositional basics, typography, visual hierarchy, and highly-performed UX.
Explore the major design principles and theories described in this article, and create impactful projects with noteworthy color elements and compositional brilliance.