UI Design Elements

Color is a powerful tool people use to communicate, stimulate action, influence mood or even change behavior. Some color associations are universal. However, people can react differently to colors due to their memories, culture, and current environment.

New designers may mistakenly believe that color only has a decorative function. In reality, color is one of the most critical elements of branding.

Here are some of the impacts color has on design:

• Showcase a product's personality
• Convey messages
• Influence user behavior
• Influence users' emotions
• Draw users' attention to certain elements

Understanding color theory is crucial for building any UX designer's skill set. This knowledge helps you create color palettes that work well for the product you are making.

In design, positive space represents the area of interest. Any space taken by design elements is called positive. Negative or white space is the empty area between, around, and even inside design elements.

Negative space improves readability and makes vital elements easier to scan and discover. It creates breathing room for elements and content groups and makes designs look neat and clutter-free.^[1]

Negative space can also contribute to the overall feeling of a website or an app. Websites with large amounts of macro white space appear more minimalistic, elegant, and luxurious.

Typography can be viewed from two angles. First, it's the style and appearance of printed text. Second, it's the art and process of arranging text to make it readable and legible to meet print or digital design needs.

Typography encompasses selecting and adjusting:

• Typefaces
• Point sizes
• Line lengths
• Line spacing
• Letter spacing
• Paragraph spacing
• Kerning
• Text alignment^[2]

Good typography has several benefits. It establishes a strong visual hierarchy that helps users navigate content. Choosing the right typefaces also improves legibility and readability, making products more accessible. Unique, consistent typography helps build brand recognition as users associate the typeface with a brand.

Microcontent is a type of UX copy in the form of short text fragments or phrases. Microcontent usually communicates key messages in a concise format. For example, it can describe an article or long blog post, add clarity to an interface, or encourage desired behavior.

Examples of microcontent include:

• Page titles
• Page headings (headlines)
• Taglines
• Email subject lines
• Summaries
• Decks
• Hints
• Tips
• Explainers^[3]

Microcontent is different from microcopy. Microcopy also refers to short texts, but its goal is to help users navigate an interface. Examples of microcopy include error messages, tooltips, button labels, links, navigational menus, and similar text elements.

Motion refers to animation and other moving visual effects that designers add to UI.

Motion serves several key functions in design:

• It provides feedback for microinteractions. For example, an animated spinner indicates a page is loading or a success state animation.
• It attracts user attention as our eyes are drawn to moving objects. For example, adding a radiating halo to the button encourages users to click it.
• It guides users on a page. For example, smooth animation of accordions and anchor links helps users understand their position on the page.
• It indicates interaction, especially on mobile. For example, a short animation can show that users can delete or archive a chat when they swipe across it.

And, of course, it makes a brand memorable and the user experience more delightful and entertaining.^[4] Desirability is one of the core UX design principles that evokes emotion and drives users to take action.

In digital interfaces, designers use shadows to create a natural aesthetic to elements. Shadows add depth and make elements stand out against their backgrounds.

Modern interfaces are layered and use shadows to indicate the distance between surfaces (elevation) and show hierarchy. The larger the distance between an element (e.g., a floating button) and the surface is, the higher the elevation is, and the blurrier the shadow of the button gets. These spatial relationships between elements help users navigate across an interface and determine clickability.

Shadows also increase scannability so users can more easily detect elements on a page.^[5]

Imagery refers to the use of photos, illustrations, animations, and videos in UI. This is your chance to make the first impression and establish the product's visual identity. Well-chosen images can positively impact users' emotions and increase the product's appeal. Distracting, irrelevant, or poor-quality images can negatively affect the whole user experience.

The decision of whether to apply imagery to your designs depends on your goals:

• Photographs and videos are more effective when you have something specific in mind or something that exists in reality. Product photos help users make a decision faster and encourage buying.
• Illustrations are a better fit for representing concepts and abstract things. They help establish an emotional connection with users, tell a story, and add personality to a product.

Icons are pictograms broadly seen in web and mobile interfaces. They visually represent ideas, objects, or actions and help users understand how they can use an element (a button or a menu item, for instance).^[6]

When designed correctly, icons help users complete tasks. To apply icons correctly, follow common best practices:

• Stick to universal icons to reduce cognitive load. For example, choose a magnifying glass for the search function.
• Use consistent designs to improve recognition. For example, if you use icons with rounded edges on one page, keep this styling everywhere.
• Avoid overdoing icon style. Icons should be simple and functional; complex icons are difficult to interpret, especially for users with visual impairments.

A UI component is a standalone interactive UI building block.^[7] It can be combined with other components to create complex and functional user interfaces for applications, websites, or other digital products. Some examples of UI components include buttons, inputs, cards, selection controls, pickers, modals, lists, and tabs, among others.

A component can contain other components or be part of a more complex component. For example, a component such as a header may contain components like a button and a search bar.

Design systems often contain a component library. This means that designers can use those building blocks repeatedly instead of creating them from scratch every time.

A layout is a frame that holds visual elements (images, text, UI components) on a grid. Grids are invisible intersecting vertical and horizontal lines that divide a page into sections.

The layout structure depends on your project's objectives. Designers use composition principles and various design format properties to place elements to guide users' eyes toward the points of interest.

Designing layouts with a grid helps organize content and makes it more balanced. Grids help make any layout mathematically harmonious and eye-pleasing. Column grids are likely the most common, flexible, go-to solution to arrange content.

Layouts can also be built without a grid. Such layouts enhance contrast and create unique, artistic websites when done well. However, this rarely works for goal-oriented products.