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 really mean? You are 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 go through 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. A UX designer is an architect. They do not choose the color of the walls, rather, they plan the layout of the rooms, ensure that hallways are wide enough, that doors are in the right places, and that you move through the house logically and effortlessly.
The goal of UX design is to answer the following questions:
Is this product useful? Does it solve a real user problem?
Is it usable? Can users easily achieve their goals?
Is it accessible? Can it be used by individuals with disabilities or any other impairment, whether permanent or temporary?
Is it pleasant to use? Does using the product itself create a feeling of satisfaction?
UX terminology often involves 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 Interfaces
UI design (User Interface Design) deals with the visual appearance and interactive elements of a 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 pleasing and functional.
The UI designer is responsible for everything the user sees and interacts with on the screen or outside of it. Some elements that the UI designer deals with include:
Buttons: How they look, where they are located.
Icons: Clear, recognizable, and consistent with the brand identity.
Typography: Choosing fonts and their sizes for readability, their relationships, and hierarchy.
Color palette: Compliance with the brand and color psychology to achieve the best effect for users.
Element layout: Visual hierarchy guiding the user to the desired goal.
In short, what is UI? It is the connection that enables users to interact with the product. Good UI is intuitive, consistent, and aesthetically pleasing.
UX vs. UI: Key Differences (and How They Work Together)
Although they are 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 leave quickly. Conversely, a product with excellent UX but poor UI may seem unprofessional and off-putting.
The best products achieve a perfect synergy of both.
Aspect | UX Design (User Experience) | UI Design (User Interface) |
|---|---|---|
Focus | User's feelings, pathways, logic, problem-solving. | Visual appearance, interactive elements, aesthetics. |
Goal | To make the product useful, logical, and enjoyable. | To make the interface beautiful, intuitive, and branded. |
Process | Research, analysis, prototyping, testing. | Creating visual elements, design systems. |
Metaphor | Architect (structure and functionality of the house). | Interior designer (look and feel of the rooms). |
Questions | Why? How? | What? How does it look?Export to Sheets |
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 a message to an audience using typography, images, colors, and shapes.
While UX/UI design primarily deals with interactive digital products (applications, websites), the term graphic design encompasses a much broader spectrum, including:
Branding: Logo design, business cards, letterhead, and other materials that define a brand.
Marketing materials: Brochures, flyers, billboards, ads.
Packaging design.
Social media graphics.
A graphic designer may work on elements of UI design (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 Should Know
These 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), representing a typical user of your product. It helps the team focus on the needs and goals of the actual audience, not on 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 the user experiences while using your product or service to achieve a specific goal. The journey map helps identify pain points and opportunities for improvement.
Wireframe
A wireframe is a basic, low-fidelity representation of a website or app's structure. It focuses solely on the layout of elements, information hierarchy, and functionality, without colors, fonts, or images. It is like a blueprint 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 in 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 detailed 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 the 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 validated and ready for final tweaks, presentations, 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 that looks and functions almost like a 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 look at UI terminology that defines the visual part of the 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 goal is to ensure consistency and speed up the design and development process.
Color Palette
A set of colors used in interface design. A good palette is in line with the brand and is used strategically to evoke certain emotions and guide the user's attention (e.g., using a bright color for primary calls to action).
White Space
The 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
An approach to design 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., title) are larger, bolder, or a different color to attract attention over less significant ones (e.g., secondary text).
Understanding the basic UX/UI and design terminology is the first step toward creating better digital products. Now you know that UX design lays the foundation and ensures functionality, UI design adds visual appeal 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 is being referred to.
Do you have an idea for an application or website, but are not 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!