Designer terms for Dummies.

After the success of our previous article, Developer Terms for Dummies, we decided to create a design glossary to help you understand what designers really mean when they use certain terms. Whether you’re a developer trying to decode design files, a PM who wants to keep up, or a newbie designer still finding your footing, this one’s for you.

What’s the difference between UX and UI?

UX (User Experience) is all about how a product works and feels to use. It covers everything from how intuitive a navigation menu is to how easily someone can complete a task without friction. Good UX comes from understanding users’ needs, testing interactions, and creating seamless, enjoyable journeys.

UI (User Interface), on the other hand, focuses on how a product looks. It’s the visual layer: colours, typography, buttons, icons, and overall style. A strong UI makes a product appealing and easy to navigate by providing clear visual cues.

While they’re different disciplines, UX and UI work hand in hand. A product with stunning visuals but poor usability quickly frustrates users, while a product that functions perfectly but looks clunky may struggle to win trust or engagement. Magic happens when both come together to create experiences that are functional, intuitive, and beautiful.

So… should I prioritise a stunning UI or a seamless UX?

A seamless user experience will always have the biggest impact on a product’s lovability. A beautiful interface might grab users’ attention, but it’s usability that keeps them coming back. In the end, it’s about creating a journey that feels intuitive and effortless.

The power of UI and UX.

Our ongoing improvements to allO’s products, combined with a recent website redesign, have tripled their leads.

Discover how

Is “user-friendly” really that friendly?

It depends. A design might look friendly in Figma, but its true nature only shows during development. Real user-friendliness comes down to the details, like micro-interactions, toast messages, and how easily users can get back on track when something goes wrong.

There’s always a balance between the effort required to build nuanced animations and the value they add. Prototypes can highlight potential issues, but the best results come from testing with real users, gathering feedback, and refining step by step.

What is auto-layout?

Auto-layout works like magic… Imagine packing a suitcase. If every time you added or removed an item, you had to rearrange everything by hand, it would be frustrating and slow. Auto-layout does that organising for you.

In Figma, it automatically adjusts the size and position of elements based on rules you set. Add a new button to a navigation bar, and auto-layout shifts everything to make room. Change the text on that button, and it expands without breaking the layout.

This keeps design files flexible and easy to update. Instead of manually dragging elements around, designers can focus on the bigger picture, knowing that the details will take care of themselves. It’s like having a perfectly packed suitcase where everything stays in place, no matter how much you pack or unpack.

Auto-layout also brings designs closer to how they’ll behave in development. It creates consistency, supports dynamic layouts, and works much like flexbox or CSS grid. By keeping spacing and alignment predictable, it helps make interfaces more responsive and bridges the gap between designers and developers.

What is “mobile-first”?

Mobile-first means designing for the smallest screens first, then scaling up for larger ones. It focuses on essential touchpoints: larger tap targets, placing key actions within easy thumb reach, and avoiding hover effects that don’t work on mobile.

This approach is usually prioritised when data shows a product is used more on mobile than on other devices. Think of Tinder… you wouldn’t really want to use it on a computer, would you?

Designing for tiny screens.

Smart watches are an increasingly popular device with their own UI/UX needs and particularities.

Learn all about it!

What about “responsive design”?

Responsive design ensures those layouts adapt seamlessly across devices. Auto-layout helps by reducing the number of elements designers need to manage. However, it can sometimes feel limiting on a desktop, where layouts are expected to fill more space. This is why each screen should be considered and reviewed individually.

In this context, typography and accessibility are crucial. Text should be legible at any size, and content must remain clear and usable whether it’s viewed on a phone, tablet, or a widescreen monitor.

Building digital experiences for all.

In our Handbook, we share how we approach WCAG guidelines, use semantic HTML, and strike a balance between accessibility and visually appealing interfaces.

Go to Handbook

Why care about Figma file organisation?

When Figma files are well organised, the whole design process runs more smoothly. With clear structure, tokens, well-labelled components, and proper documentation, everything stays consistent and easy to find. This makes handoffs simpler, reduces time spent searching for assets, and helps designers and developers work more efficiently.

Why is naming components so important?

When component names aren’t consistent, collaboration quickly gets messy. A Primary Button in one file shouldn’t suddenly appear as a Blue CTA in another. Standardising names, ideally with a shared index, keeps communication clear between design and development. It may not be the most exciting task, but it saves hours of confusion and back-and-forth later on.

What are Tokens?

Tokens are the atomic units of a design system: colours, typography, spacing, and shadows. They ensure consistency by linking design directly to development. Instead of updating values manually, tokens cascade changes everywhere. That means fewer errors, faster iterations, and a smoother workflow across the team.

What is a Design System?

Tokens, Primitives, Components are the puzzle pieces used to improve consistency, speed and collaboration.

Learn more

WHAT’S CAIXA ALTA (ALL CAPS)?

A little treat for our fellow Portuguese speakers. “Caixa alta” simply means uppercase letters. For the developers out there, think text-transform: uppercase. It’s part of the trio with caixa baixa (lowercase) and caixa mista (mixed case).

The term dates back to traditional typesetting, when capital letters were literally kept in the upper drawer of the case. These days, uppercase is mostly used for emphasis in titles, buttons, and labels. Just don’t overdo it; use it too much and it feels like YOU’RE SHOUTING.

How does “text hierarchy” work?

Text hierarchy guides readers through content, showing them what to look at first and how to move naturally from one element to the next. Titles create structure, spacing gives breathing room, and body copy provides details.

When this hierarchy is clear, a page is effortless to scan and easy to read. Without it, everything competes for attention, making the content feel heavy and overwhelming.

Good hierarchy comes from consistent typography choices like size, weight, and colour, combined with thoughtful spacing and alignment. This helps information flow smoothly and makes it easier to understand at a glance.

What are Personas?

Personas are fictional user profiles built from research, often based on interviews and data. They represent patterns across different types of users, helping teams understand who they are designing for. Traditionally, personas highlight differences between groups, such as age, habits, or goals, so teams can prioritise features for the most relevant audience.

More recent approaches take a different view. As explored in The New Chameleons: How to Connect with Consumers Who Defy Categorization, users are increasingly complex and fluid. Instead of dividing them into neat boxes, modern personas focus on shared behaviours and motivations that bring users together.

When done well, personas bridge design and business. They connect user needs to strategic decisions, making it clear which features deliver the most value and why.

All That We Share

There’s more uniting us than setting us apart. This brilliant dutch add shows just that!

Worth a look!

What’s the difference between RGB, CMYK, HEX, and Pantone?

These terms refer to different colour systems used in design, each with its own purpose:

• RGB, which stands for Red, Green, and Blue, is used for anything displayed on a screen, like websites, apps, and digital ads. RGB colours are created by mixing light, which is why the base colours are red, green, and blue.

• CMYK stands for Cyan, Magenta, Yellow, and Key (Black) and is used for print materials like magazines, packaging, and posters. Unlike digital colours, which are created with light, CMYK blends physical inks. This difference is why colours often look slightly muted in print compared to the brighter, more vivid colours you see on a screen.”

• HEX (or Hexadecimal) codes represent RGB colours in a format that’s easy to use in web design and development. A HEX value is a six-digit code like #FF5733, that precisely defines a colour for digital platforms. It’s simpler and more efficient than writing out full RGB values, which is why it’s the preferred choice for coding.

• Pantone is a standardised colour matching system used mainly in print and product design. It provides a universal reference so that colours stay consistent across different printers, materials, and production processes. This means a specific shade, like Pantone 186 C, will look the same on a business card, a T-shirt, or any other printed surface. Pantone is especially important for branding, where colour accuracy plays a key role in maintaining a brand’s identity.

In short, RGB and HEX are used for digital platforms, while CMYK and Pantone are for print. Designers switch between these systems depending on where a design will appear, so choosing the right one is essential to keep colours accurate and consistent across screens and materials.

Experiment with digital colours!

We’ve built a Svelte-based monochromatic palette generator that lets you input any valid colour format to instantly create a full palette.

Try it out!

Quick fire extra terms.

• Wireframes are the bare bones of a design. They show structure and flow without any visual polish, keeping the focus on functionality before moving on to details.

• Grids are the invisible scaffolding that keep layouts aligned and balanced. When they’re used well, nobody notices them, but everything just feels right.

• Above the fold refers to the part of a page you see before scrolling. It still matters, but today’s users will scroll as long as the content gives them a reason to.

• Make it pop or “make the logo bigger” is a classic, if vague, piece of feedback. Unless you have a literal flying pig technique up your sleeve, it’s better to ask for clarity on what “pop” really means.

---

Et voilá!

Ultimately, design is a conversation. The clearer the words we use, the better the work we create together.

Hopefully, this glossary has made some of those words less mysterious and a lot more practical. The next time someone mentions a token, a grid, or a component, you’ll know exactly what they mean, or at least be ready to call them out when they say, “Make it pop!”

If you still have questions after reading this, don’t be shy, ask away! The best conversations start with a good question.