As a professional designer you should be familiar with bunch of terms. So, here is the list of UI terms to help you get started on your design journey with confidence and build a highly engaging user experience:
User Interface (UI)
User interface refers to the visual aspects of a product that users interact with. Designers will aim to improve UI through the use of visual design elements such as buttons, menus, toggles and animations.
Composition
Composition refers to the arrangement of visual elements, such as images, text and whitespace, on a page. The idea is to use contrasting colors, fonts, and so on, to draw attention to specific elements on a page.
Grid System
A grid system is a UI term that describes a framework of horizontal and vertical lines used for guiding the placement of elements on a page. By using a grid system, designers create a sense of visual order and consistency.
Graphic Design
Graphic design is the process of creating visual content using typography, images, infographics and other visual elements in a product
Layout
In relation to UI, layout describes the arrangement of visual elements on a page, including text, images, buttons and so on. The main goal of an effective layout is to help guide your users’ attention toward the important information or an element on your product.
Whitespace
Whitespace, also known as negative space, refers to the empty spaces around the design elements on a page.
Color Theory
Color theory in design refers to understanding how colors work together to create a cohesive and visually appealing design. An important aspect of color theory is color psychology, where different colors are used to affect human emotions. For example:
- Yellow symbolizes happiness, warmth and creativity.
- Blue depicts trust, loyalty and competence.
- Red stands for strength, love and energy.
- Green manifests nature, freshness and quality.
Iconography
Iconography refers to the use of icons or symbols to represent concepts or actions in a design. Its main purpose is to improve user experience and make it easier for users to navigate the product.
Navigation Design
Navigation design describes the process of designing and organizing the layout of a product’s navigation system. Its main goal is to make it easy for users to find what they are looking for.
Visual Consistency
Visual consistency refers to maintaining a cohesive look and feel throughout a product’s design. It includes the use of consistent colors, fonts and imagery. Applying visual consistency on each page of your product can help you reinforce your brand’s image and identity.
Contrast
Contrast is a UI term that describes the degree of difference between two elements in a design. It is typically used to draw attention to important elements such as headlines or CTAs, making them stand out from the rest of the page. For example, using a bright color on a certain element against a dark background will help guide your visitors’ attention to important aspects of your product.
Typography
Typography refers to the design and arrangement of text on a page, including the selection of fonts, sizes, colors and spacing.
Motion Graphics
Motion graphics refers to the use of animation, video and other dynamic elements to create engaging and interactive product experiences.
Design System
A design system is a UX/UI term that describes a collection of reusable components that are used for building products. You can think of a design system as a library for developing products, much like a “ingredients” is for cooking delicious meals.
Empty States
Empty states are moments in a user's experience with a product where there is nothing to display.
Prototype
A prototype is a product built to test ideas and changes until it resembles the final product. You can mock-up every feature and interaction in your prototype as in your fully developed product, check if your idea works, and verify the overall user-experience (UX) strategy.