UX/UI and Design Terminology

Are you entering the world of digital design and coming across terms like UX, UI, persona, wireframe, and not sure what they mean? You’re not alone. The boundaries between different design disciplines often seem unclear, and the specific UX/UI terminology can be confusing for beginners.

In this text, we will explain some of the most common terms you may encounter. We will cover the basics, explain what UX is, what UI is, and what graphic design is, and provide you with a glossary of key terms that will help you communicate confidently with designers, developers, and clients.

What is UX Design? Understanding User Experience

UX design (User Experience Design) is the process of creating products that are useful, easy to use, and pleasant to interact with. The focus is not on how the product looks, but how the user feels while using it.

Now imagine you are building a house. The UX designer is the architect. They do not choose the wall colors but plan the layout of the rooms, ensure that hallways are wide enough, that doors are in the right places, and that moving through the house is logical and effortless.

The goal of UX design is to answer the following questions:

• Is this product useful? Does it solve a real problem for the user?

• Is it usable? Can users easily achieve their goals?

• Is it accessible? Can it be used by people with disabilities or any other limitations, whether permanent or temporary?

• Is it enjoyable to use? Does using the product create a feeling of satisfaction?

UX terminology often includes research, analysis, and testing to ensure that the final product meets the needs of the target audience.

What is UI Design? The Art of Visual Interface

UI design (User Interface Design) deals with the visual appearance and interactive elements of the product. Let’s go back to the house-building example. If the UX designer is the architect, the UI designer is the interior designer. They choose colors, furniture, materials, and decorations to make the space aesthetically appealing and functional.

The UI designer is responsible for everything the user sees and interacts with in any form on the screen or outside of it. Some elements that the UI designer works with include:

• Buttons: How they look, where they are located.

• Icons: Clear, recognizable, and in line with brand identity.

• Typography: Selection of fonts and their sizes for readability, their relationship, and hierarchy.

• Color Palette: Alignment with the brand and color psychology to achieve the best effect on users.

• Layout of elements: Visual hierarchy that guides the user to their desired goal.

In short, what is UI? It is the connection that allows the user to interact with the product. Good UI is intuitive, consistent, and visually appealing.

UX vs. UI: Key Differences (and How They Work Together)

Although closely related, UX and UI are not the same thing. The difference between UX and UI is one of the most common discussion topics. A product can have a beautiful UI, but if the UX is poor (e.g., complicated navigation), users will quickly abandon it. Conversely, a product with excellent UX but a poor UI may come off as unprofessional and off-putting.

The best products achieve perfect synergy of both.

And Where Does Graphic Design Fit In?

Graphic design is a broad discipline that focuses on visual communication and presentation. Its primary goal is to convey messages to the audience using typography, images, colors, and shapes.

While UX/UI design mainly deals with interactive digital products (applications, websites), the term graphic design encompasses a much wider range, including:

• Branding: Design of logos, business cards, letterheads, and other materials that represent a brand.

• Marketing Materials: Brochures, flyers, billboards, advertisements.

• Packaging Design.

• Graphics for Social Media.

A graphic designer can work on UI design elements (e.g., creating icons or illustrations), but their focus is on static visual communication, while the UI designer focuses on interactivity and functionality within the digital environment.

Key UX Terminology You Must Know

Here are some of the basic UX terms you will often encounter.

Persona

A persona is a fictional character created based on research (in a process called UX research) that represents a typical user of your product. It helps the team focus on the needs and goals of real audiences rather than their own assumptions. A persona has a name, age, occupation, goals, and frustrations.

User Journey Map

This is a visual representation of all the steps and emotions a user goes through while using your product or service to achieve a certain goal. The journey map helps identify pain points and opportunities for improvement.

Wireframe

A wireframe is a basic, low-fidelity representation of the layout of a webpage or application. It focuses solely on the arrangement of elements, the hierarchy of information, and functionality, without colors, fonts, or images. It is like a sketch or skeleton of the design.

Low Fidelity

Low fidelity design represents an early and simplified version of the design. Its purpose is to quickly showcase the layout of elements, user flow, and basic functionality, without wasting time on colors, typography, or visual effects. The low-fi approach allows for rapid iteration, easier collaboration with the team, and feedback at the earliest stages of development. Due to its simplicity, it is ideal for testing ideas, solving problems, and defining direction before investing in the final design.

High Fidelity

High fidelity design represents a well-developed and visually finalized version of the product or interface. At this stage, typography, colors, styles, spacing, animations, and the complete visual identity are defined, while functionality and user flow look almost like that of a finished product. High-fi prototypes allow for a realistic representation of the user experience, precise testing, and clear communication with stakeholders or developers. This level of fidelity is used when the concept is confirmed and ready for final refinements, presentation, or development.

Prototype

A prototype is an interactive model of the final product used for testing before programming begins. It can be low fidelity (clickable wireframe) or high-fidelity, looking and functioning almost like the real product.

Usability Testing

This is the process of observing real users as they use your product to identify usability issues. Participants are given tasks, and designers observe where problems, confusion, or frustration arise.

Essential UI Terms

Now, let’s take a look at UI terminology that defines the visual aspect of design.

Design System

A design system is a centralized collection of all components, rules, and standards used in creating products. It includes everything from colors and typography to specific buttons and forms. Its aim is to ensure consistency and speed up the design and development process.

Color Palette

A set of colors used in the interface design. A good palette is aligned with the brand and is used strategically to evoke certain emotions and guide user attention (e.g., using bright colors for primary calls to action).

White Space

Empty space between elements on the screen. White space (which does not have to be white) is crucial for readability, organization, and reducing visual noise. It gives elements space to breathe.

Responsive Design

A design approach that allows a website or application to automatically adjust to different screen sizes - from desktop monitors to tablets and mobile phones. The goal is to provide an optimal experience on every device.

Hierarchy

Visual hierarchy is the principle of organizing elements to clearly show their importance. The most important elements (e.g., headings) are larger, bolder, or a different color to attract attention before less important ones (e.g., secondary text).

Understanding the basics of UX/UI and design terminology is the first step towards creating better digital products. Now you know that UX design lays the foundation and ensures functionality, UI design adds visual polish and makes interaction pleasant, while graphic design serves a broader purpose of visual communication.

These terms are not just technical jargon; they represent key concepts that guide the process of creating products that users will love. The next time you hear the word "wireframe" or "persona", you will know exactly what it’s about.

Do you have an idea for an app or website but aren't sure where to start? Let me help you turn your vision into a functional and beautiful digital product. Contact me today for a free consultation!