Design

5 Rules of Good Design: Secrets of Successful Projects

5 Rules of Good Design: Secrets of Successful Projects

4 Top Design Professions: Improve Your Skills in 5 Days

Find Out more

Creating a harmonious composition and choosing the right color palette for your layout are key aspects of design. In this material, we will provide useful tips that will help you avoid common mistakes and save time searching for optimal solutions. Learn how to combine colors to achieve visual integrity and appeal in your project. Proper combination of shades, use of contrasts, and adherence to the principles of color theory will significantly improve your design and make it more professional.

Understanding Proximity Theory

According to proximity theory, objects in close proximity to each other are perceived as related elements. This concept, developed in the field of perception psychology, was widely popularized by Artemy Lebedev in his book "Mannerism". Proximity theory plays an important role in design and visual communication because understanding how people perceive and group information allows us to create more effective and engaging interfaces. Applying this theory to graphic design and web development helps improve navigation and content perception. Let's look at a specific example. If several circles are placed equally spaced, they won't be perceived as a single whole. This demonstrates the importance of visual organization of elements in design. Effective placement of objects helps create a harmonious composition where elements interact with each other, creating a holistic experience. Proper distribution of space between objects improves user understanding and perception of information.

Image: Skillbox Media

If one of the circles is moved closer to the other, they will begin to be perceived as interconnected objects. This phenomenon illustrates how visual distance affects the perception of relationships between elements. As the circles come closer together, the viewer begins to realize their interdependence, which can be used in design and graphics to convey certain meanings and ideas.

Image: Skillbox Media

Increasing the size of one of the circles leads to its dominance over the other elements. This visual dominance can significantly alter the perception of information structure and hierarchy. In design, it's important to consider how the size of elements influences user attention and content perception. Such changes can be used to highlight key aspects or information, making them an important tool in visual communication.

Image: Skillbox Media

A striking example of this principle is the layout of text pages, where the heading is located next to the corresponding text. This creates a logical connection between the title and the content, which improves the user's perception of the information and contributes to better indexing of the page by search engines. Correct placement of headings helps highlight key points and makes the text more structured, which is important for ease of reading and navigation.

Image: Skillbox Media

This principle is also successfully applied to the layout of tables, which helps eliminate unnecessary dividers. Visual indentation helps the reader quickly and easily perceive the values ​​​​in each column, improving overall readability and comprehension of the information. This makes tables more structured and easier to analyze data.

Image: Skillbox Media

Ignoring proximity theory can lead to funny situations. For example, if several independent signs are placed close together, this can create confusion for passersby. Misinterpretation of information can lead to misunderstandings, as people often perceive visual elements in the context of their placement. When placing signs, it's important to consider not only their content but also the spacing between them to avoid comical and sometimes awkward situations. Proper design and placement of advertising materials will help ensure clarity and improve audience engagement.

"Palych's love point is a pawnshop." Image: Peekabone / "Pikabu"

Understanding the rule of internal and external in design

Art director Artem Gorbunov identified an important rule in design: "Internal ≤ external." This simple statement has a significant impact on various aspects of design, such as typography, text block layout, and the structure of more complex modules. Understanding this principle helps create a harmonious interaction between internal content and external design, which in turn improves the perception and functionality of the design. Applying this rule allows designers to achieve a higher level of aesthetics and user experience, which is a key aspect of successful design.

In typography, the terms "internal" and "external" refer to the distances between text elements. Internal spacing refers to the intervals between the strokes of letters, while external spacing is the distance between the letters themselves. For example, when using the Montserrat font with increased internal spacing, it is important to also increase the letter spacing to create visual harmony. The correct combination of these parameters helps improve the readability and aesthetics of the text, which is a key aspect in typographic design.

Image: Skillbox Media

The Roboto Condensed font is distinguished by its narrow letters, which makes it less demanding in terms of letter spacing. This emphasizes the importance of font choice in typography. Correct letter spacing can significantly improve the readability of text and visual perception, especially when using narrow fonts. Therefore, when working with Roboto Condensed, it is worth considering its features to achieve a harmonious and professional result.

Image: Skillbox Media

When discussing entire paragraphs, it is important to consider line spacing - the space between lines of text. This parameter should be no less than the space between words. To find the optimal line spacing, you can use a simple formula: multiply the font size by 1.3. Correct line spacing improves the readability of the text and helps create a harmonious visual perception.

Image: Skillbox Media

The paragraph indent should exceed the line spacing, which helps create visual harmony and improves the readability of the text. Proper indentation and line spacing help readers digest information more easily and make the text more engaging. It's important to consider these aspects when creating web content to ensure a positive reading experience and increase audience engagement.

Image: Skillbox Media

The rule applies not only to typography, but also to layout. Margins should be larger than the paragraph indentation, which contributes to a cleaner, neater design. Proper use of margins improves the readability of content and creates a harmonious space around the text. This approach not only makes layouts more aesthetically pleasing but also promotes better readability, which is important for retaining users' attention.

Image: Skillbox Media

Understanding Anchor Objects in Design

In graphic design and user interface development, anchor objects Play a key role in attracting user attention. Art director Artem Gorbunov emphasizes the importance of elements such as illustrations, headings, and icons, which immediately draw the eye. These elements should be placed at strategic points in the interface, typically in the corners or center, to ensure maximum visual impact and improve usability. Correct use of anchor objects helps improve information perception and interface navigation, which in turn contributes to increased user satisfaction.

Simplified representation of anchor points on a module. Image: Skillbox Media

Anchor objects can be placed not only in one, but also in several points simultaneously. This allows for more dynamic and balanced compositions, improving visual perception and drawing attention to key elements. Using multiple anchor objects contributes to a harmonious design and enhances the interactivity of the content.

Variety of placement of anchor objects. Image: Skillbox Media
Examples of using anchor objects. Image: Skillbox Media

Module sides can function as anchor objects. This rule is widely used in the interfaces of operating systems such as macOS and Windows. Anchor objects provide stability and ease of navigation, which improves the user experience and makes interaction with the system more intuitive.

An example of anchor objects in Windows 10 is the top and bottom of the screen. English: Image: Skillbox Media
Placement of anchor objects in the Windows 10 interface. Image: Skillbox Media

In practice, this rule can be illustrated by the example of business cards, where the title and main text are placed in opposite corners. This creates harmony and visual balance, which makes the business card more attractive and easier to perceive. Proper distribution of elements helps to focus attention on key information, which is especially important in business card design.

Anchor points on a business card layout. Image: Design by Jarosław Dziubek / Behance
Wallet Series promo page with clear placement of anchor objects. Image: Design by Tran Mau Tri Tam / Behance
The phone camera acting as an anchor object at the bottom of the screen. Screenshot: apple.com

Fitts's Law: Fundamentals and Applications in Design

In 1954, psychologist Paul Fitts conducted a landmark experiment that became the basis for one of the most important design principles. During the study, he placed two targets on a table and asked subjects to hit them one by one with a pen. Gradually, the distance between the targets increased and their sizes decreased. This experiment demonstrated how task difficulty affects the accuracy and speed of action, which is relevant in the field of design and user experience. The principles derived from this study can be applied to creating more effective interfaces and improving the usability of products.

In the course of the experiment, Fitts discovered a significant relationship: increasing the distance between targets and decreasing their sizes leads to the difficulty of hitting them. This law has become key in the field of user interface design because it fosters a deeper understanding of user interactions with digital products, including apps and websites. Understanding this relationship helps developers create more user-friendly and effective interfaces, which in turn improves user experience and increases customer satisfaction. Fitts's Law emphasizes that using large buttons significantly facilitates the process of clicking them. This is essential for improving the user experience. Buttons placed close to other functions can create user confusion and lead to click errors. Optimizing the size and placement of interface elements promotes more intuitive interaction, which in turn increases efficiency and reduces the likelihood of errors.

Image: Skillbox Media

If increasing the size of buttons is not possible, it is worth considering an alternative method - increasing the clickable area. This approach can be implemented without changing the visual design, which will significantly simplify the process of clicking on the necessary elements for users. Optimizing the tap target will improve interaction with the interface and increase overall usability.

Image: Skillbox Media

Fitts's Law was also researched by Jeff Raskin, who previously worked as a designer at Apple. He noted that in macOS, the settings panel is located at the top of the screen, making it easily accessible to users. This design significantly reduces the likelihood of errors, as the top edge of the screen acts as a physical limiter, allowing users to interact with interface elements more quickly and accurately.

Image: Skillbox Media

In Windows, there is a small indent above the toolbar under the Close, Minimize, and Full Screen buttons. This creates some inconvenience when clicking on the desired elements. At the same time, the Start button located in the corner of the screen provides convenient access for users, allowing them to easily hover over the cursor and get to the desired area. Optimizing the interface can significantly improve user interaction with the system, reducing errors and increasing overall work efficiency.

Image: Skillbox Media

Basics of the rules of tinctures in heraldry

The rule of tinctures is a fundamental aspect of heraldry, The science that studies coats of arms and their symbolism. The essence of this rule is that colors (enamel) should not be superimposed on other colors, nor metals on metals. This simple yet critical rule contributes to the creation of clear and easily distinguishable coats of arms. Adherence to this principle ensures a harmonious combination of elements and helps avoid visual confusion, which is especially important when creating coats of arms that must be easily recognizable and memorable. The rule of tinctures not only determines the aesthetics of a coat of arms, but also reflects its historical and cultural significance.

Tinctures used in heraldry. Image: Skillbox Media

The formation of this rule began in the Middle Ages, when knights and merchant ships needed clear visual identification over long distances. For example, a yellow pattern on a white background is virtually invisible from 20 meters away due to its lack of contrast. However, if the same pattern is superimposed on a blue background, its visibility increases significantly. This emphasizes the importance of contrast in design, which is relevant not only in historical contexts but also in contemporary visual design. The correct combination of colors and patterns can significantly affect the perception and recognizability of objects, which is especially important in areas such as graphic design and navigation.

Coat of arms of medieval France. Image: Wikimedia Commons / Skillbox Media

The principle of contrast is relevant not only in heraldry, but also in design. For example, yellow text on a white background is difficult to perceive, highlighting the importance of using contrasting colors to improve accessibility. Effective design requires careful selection of color combinations to ensure readability and ease of perception. The right color combination contributes not only to aesthetics but also to functionality, which is especially important for users with disabilities. Using contrasting colors helps make information more accessible and understandable for everyone.

Image: Skillbox Media

If you have doubts about choosing colors for the background, text, and icons, use the rule of tinctures. This principle will help you correctly solve visual communication problems, guiding you to harmonious and attractive color combinations. The Tincture Rule is a reliable tool that contributes to the creation of aesthetically pleasing and functional design.

Image: Skillbox Media

Key design aspects to consider

  • Objects in close proximity are perceived as Interrelated.
  • Internal margins between elements should be less than or equal to the outer borders.
  • The most noticeable elements of the layout are recommended to be placed in the corners of the module to attract attention.
  • The larger the object and the closer the distance to it, the easier it is to direct the eye to it.
  • Avoid using yellow on a white background to improve readability.

Graphic Designer PRO: 5 Steps to a Successful Career

Want to become a graphic designer? Learn 5 key steps to creating a portfolio and starting a career!

Learn more