Fundamentals / Principles

Design Thinking Process

UI Terms You Need to Know

You can Download a FREE PDF file

Download PDFSupport Project

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.

M-Design System

M-Design System is a universal solution for designers that allows to build a digital products 20X faster, created exclusively for Figma

Subscribe YouTube

Learning can be expensive sometimes, but I want to have an equal opportunities for everyone, that is why, I have launched a YouTube channel where you can get a knowledge from top industry expert

Subscribe

Subscribe our YouTube

Learning can be expensive sometimes, but I want to have an equal opportunities for everyone, that is why, I have launched a YouTube channel where you can get a knowledge from top industry expert

Subscribe

Join Our Newsletter

Get the latest product design guides directly on your inbox!

Thank you!
Your submission has been received!
Oops! Something went wrong while submitting the form. Try again!