However, the evolution of interfaces, variable typography, dark modes, and the need for truly perceptual accessibility have revealed an important limitation:
meeting WCAG 2 does not always mean text is genuinely readable.

This is where APCA (Accessible Perceptual Contrast Algorithm) comes in, the new approach shaping the future of visual accessibility and forming part of the transition toward WCAG 3.

The problem with contrast in WCAG 2

The current WCAG 2 model:

• Uses a fixed mathematical ratio between colors.
• Does not account for font size or font weight.
• Treats light-on-dark the same as dark-on-light.
• Can approve combinations that are difficult to read in practice.

This creates a common scenario in many digital products:

Interfaces that are “accessible on paper,” but not necessarily comfortable for real people.

What changes with APCA

APCA introduces a fundamental shift:
moving from a mathematical measurement to a perceptual measurement.

Instead of ratios like 4.5:1, APCA uses a scale called Lc (Lightness Contrast) that:

• Is based on how the human eye actually perceives contrast.
• Considers font size, font weight, and polarity.
• Enables different rules depending on the text type.
• Aligns with the future direction of WCAG 3.

The result is simple but powerful:

APCA measures real readability, not just technical compliance.

Why this is critical for Design Systems

For teams building Design Systems, the impact is immediate:

1. It redefines color tokens

It is no longer enough to “pass 4.5:1.”
Colors must now ensure comfortable reading within real typographic contexts.

2. It improves real product accessibility

Adopting APCA means:

• Less hard-to-read text.
• Better experiences in dark mode.
• More inclusive interfaces for users with low vision.

3. It prepares organizations for WCAG 3

APCA is not a passing trend.
It is the foundation of the next accessibility model coming with WCAG 3.

Adopting it early reduces:

• Technical debt
• UI rework
• Future compliance risk

WCAG 2 vs APCA in one sentence

WCAG 2 measures contrast.
APCA measures readability.

And in user experience, that difference changes everything.

Conclusion

Digital accessibility is entering a new era. We are moving from static rule-checking toward designing experiences that can truly be read.

Adopting APCA today does not mean abandoning WCAG 2 immediately, it means:

• understanding its limitations
• improving the visual quality of products
• preparing for the standard that is coming

Because in accessibility, the real goal was never to pass a test.

The real goal has always been that people can read.

The post APCA vs WCAG: why the future of visual accessibility has already changed appeared first on Roger Romero's Blog.

What is a Design System?

A Design System is a set of guidelines, components, and visual patterns that enable design and development teams to work more efficiently and cohesively. By documenting these elements, a Design System ensures that every piece of a user interface remains consistent and true to the brand’s identity. This is especially important for large-scale projects or those where multiple teams collaborate within the same digital ecosystem.

Visual Identity as the Visual Foundation of a Design System

A brand’s visual identity is what we see and feel when interacting with its products. A Design System takes this visual identity and breaks it down into its essential elements: typography, color palette, iconography, buttons, forms, and more. These visual elements not only help maintain a unified aesthetic but are also fundamental in conveying the brand’s personality and values, seeking to differentiate the brand from its competitors and generate an emotional connection with the public.

For example, if a brand has a young and modern focus, the Design System will likely include dynamic typography and vibrant colors. Conversely, a brand that seeks to project trust and formality may lean towards more subdued color palettes and elegant fonts. Every visual decision is directly aligned with the principles of the brand’s visual identity.

Branding: The Soul of Consistency

If visual identity is what we see, branding is what we feel and experience when interacting with a brand. A Design System goes beyond organizing visual components; it is deeply tied to the user experience (UX). Branding helps define not only how a product looks, but how it feels and behaves.

A brand’s voice and tone, although not always explicitly visual, must also be aligned with the Design System. This can influence how messages are structured within the interface, from button labels to error notifications. An effective Design System translates branding values and tone into smooth and consistent interactions, reinforcing the brand’s promise at every touchpoint.

The Cohesion Between Visual Identity, Branding, and Design System

When a company designs its system, it ensures that its visual identity and branding are present and consistent across every aspect of the digital product. This cohesion is essential for building a strong brand that users recognize and trust.

When developing a Design System, design and development teams can ensure that:

• Every component, from buttons to forms, aligns with the brand’s official colors and typography.
• The brand’s narrative is reflected in the user experience. Whether the brand aims to project accessibility, luxury, or innovation, the Design System should provide the tools to communicate these values.
• Product iterations and updates remain faithful to the brand’s original identity, even as trends or technologies evolve.

Conclusion

A Design System is more than a component library; it is the tangible manifestation of a brand’s identity and branding in the digital space. By merging these two disciplines, design and development teams can build products that are not only visually consistent but also deeply aligned with the brand’s vision and values.

Investing in a solid Design System ensures that visual identity and branding remain consistent and recognizable across all platforms, enhancing the user experience and, in turn, strengthening the relationship between the brand and its audiences.

The post How Visual Identity and Branding Influence the Creation of a Design System appeared first on Roger Romero's Blog.

In this article, we’ll explore when and how to use these three elements within a design system and share the best and worst practices for using icons in each of them.

Badge

What is a Badge and When to Use It?

A badge is a small visual element that typically appears on or near a component, such as an icon or product card, to display relevant information like a count or status. Its main function is to highlight concise information that requires immediate attention without disrupting the interface’s flow.

When to use it:

• Notification or count alerts: Use badges to show the number of pending items or actions, such as unread messages, items in a shopping cart, or available updates.
• Status indicators: To signal a relevant state or category, such as the priority of a support ticket or product availability (e.g., “In stock” or “Out of stock”).

Examples:

• A bell icon with a badge showing the number of new notifications.
• A red badge with a number on an inbox icon indicating unread messages.

Best Practices for Icons in Badges:

• Clear visuals: Use simple and recognizable icons that immediately convey the action or status. For example, an envelope for unread emails or an alert symbol for warnings.
• Proper sizing: Ensure the icon is large enough to be visible in the badge’s small space, but not too large to overwhelm it.
• Effective contrast: Make sure the icon contrasts well with the badge’s background so that the information is legible.

Worst Practices:

• Overloading the space: Avoid combining text, icons, and numbers all at once in a small badge. Keep the design simple and focused.
• Ambiguous icons: Don’t use icons that require interpretation or that aren’t universally understood. A confusing icon will frustrate the user and defeat the badge’s purpose.

Ribbon

What is a Ribbon and When to Use It?

A ribbon is a banner or strip that overlays content, such as an image or product card, to highlight a special feature or promotion. Its goal is to catch the user’s attention on something important, like an offer or a new product.

When to use it:

• Highlight promotions or special attributes: Use ribbons when a product or content needs to be emphasized with labels like “On Sale,” “New,” “Exclusive,” or “Limited.”
• For featured products: Emphasize the most popular products, temporary promotions, or new releases.

Examples:

• A ribbon that says “New” on the corner of a product card.
• A banner highlighting a discount offer over a product image in an online store.

Best Practices for Icons in Ribbons:

• Complement the text: Icons in ribbons should reinforce the message. For example, a star icon could accompany a ribbon that highlights a “Featured Product.”
• Simplicity: Since the ribbon already draws attention, the icon should be subtle and not steal focus from the primary content.
• Visual consistency: Ensure the icon’s style matches the rest of the design system to maintain visual coherence.

Worst Practices:

• Redundant icons: Don’t add icons that merely repeat what the text already conveys. If the ribbon says “New,” adding an icon might be unnecessary.
• Overloading with icons: Avoid using large or detailed icons that can make the ribbon look cluttered or unclear.

Notifications

What is a Notification and When to Use It?

A notification is a pop-up or persistent message in the interface that informs the user about important events or required actions. Notifications can be interactive (allowing the user to close or respond) or passive (informative, with no action required).

When to use it:

• To inform about important changes: Notifications are useful when you need to alert the user about system changes, such as a new update, message, or completed event.
• To request user actions: Use notifications when the system requires the user to take a specific action, like confirming a purchase, reviewing a message, or accepting a condition.

Examples:

• A banner at the top notifying the user of a successful update.
• A pop-up notification reminding the user of a pending task.

Best Practices for Icons in Notifications:

• Clear, informative icons: Use icons that help users quickly identify the type of notification. A checkmark icon can indicate success, an exclamation mark a warning, and an “X” an error.
• Visual hierarchy: Icons shouldn’t compete with the main content of the notification. Keep the icon size proportional and aligned with the content.
• Appropriate colors: Ensure the icon’s color matches the notification’s context. Green icons should indicate success, yellow should indicate warnings, and red should indicate errors or issues.

Worst Practices:

• Overloading with icons: Don’t add unnecessary or decorative icons to a notification that already contains sufficient informative text. This can overwhelm the user visually.
• Inconsistent icon colors: Avoid using incorrect icon colors that don’t align with the notification type. A red icon for a success message can confuse users.

Conclusion: When and How to Use These Elements

• Badges are ideal for displaying concise, direct information, such as counts or statuses. Use them when you need to highlight numbers or updates without interrupting the user experience.
• Ribbons are effective for drawing attention to featured products or characteristics. They are visually appealing and should be used sparingly to avoid cluttering the interface.
• Notifications should be used when the user needs to be informed or alerted about important events. Make sure they are clear and non-intrusive, respecting the user experience.

In all cases, the effective use of icons is crucial. Icons should complement rather than overload, and always be accessible and understandable. By following these practices, you can ensure that these components function effectively within a design system, providing an intuitive and pleasant user experience.

If you’re developing a UI design system, remember that balancing functionality and aesthetics is essential. Well-implemented badges, ribbons, and notifications, along with the appropriate use of icons, can make an interface not only visually appealing but also highly functional and accessible.

The post How to use badges, ribbons and notifications in user interface designs appeared first on Roger Romero's Blog.

Common breakpoints and configurations

In this article, I’ll recommend the best breakpoints for your website, considering three main categories: mobile devices, tablets, and desktops. Below is a reference table with the minimum and maximum width values for each range, along with the recommended margins and gutters for optimal design:

These values not only ensure a well-structured design but also help maintain visual consistency across a variety of devices, optimizing the user experience.

Breakpoints for Mobile Devices: Extra Small (xs) and Small (sm)

Mobile devices account for the majority of global web traffic, so it is crucial to prioritize responsive design for small screens. The xs and sm breakpoints are essential to ensure that your site is accessible and user-friendly on mobile devices.

• Extra Small (xs): 360px – 575px
  This breakpoint covers smaller mobile devices, such as lower-end phones or those with compact screens. It’s important to optimize interactive elements like buttons and menus to make them easily accessible and readable on small screens.
• Small (sm): 576px – 767px
  This range includes most modern smartphones with larger screens. At this point, you can start working on slightly wider designs and display more content without compromising readability or usability.

What to adjust on mobile?

• Font size and buttons: Ensure that buttons are large enough to be tapped with a finger and text is legible without the need for zooming.
• Image optimization: Use lower-resolution images to reduce load times and improve user experience.
• Vertical layout: Most mobile devices are used in portrait mode, so it’s important that your design works well in this orientation.

Breakpoint for Tablets: Medium (md)

Tablets require an intermediate approach, as their screens are larger than phones but smaller than desktops. The md breakpoint is ideal for these types of devices.

• Medium (md): 768px – 1024px
  This range covers most tablets, such as the iPad in portrait mode. It’s a key point to adjust the design and offer a user experience that takes advantage of the larger screen without complicating navigation.

What to adjust on tablets?

• Increase screen space usage: Take advantage of the larger screen to display more content without overloading the interface.
• Usability in landscape mode: Ensure that the site works well in both vertical and horizontal orientations, as users may rotate the device to view content more comfortably.

Breakpoints for Desktops: Large (lg) and Extra Large (xl)

The lg and xl breakpoints are used for larger screens, such as laptops and desktop monitors. Here’s where you can maximize the use of available screen space.

• Large (lg): 1025px – 1365px
  This breakpoint is suitable for most laptops. It allows for expanding the design and displaying more content on the screen without the need for excessive scrolling.
• Extra Large (xl): 1366px – 1440px
  This range covers large desktop screens, such as high-resolution monitors. At this point, it’s important to optimize the layout to take full advantage of the screen space without cluttering the interface.

What to adjust on desktop?

• Column layout: On larger screens, you can use a multi-column structure to present more information simultaneously.
• High-resolution images and graphics: Increase the resolution of images and graphics to take full advantage of high-definition displays.

Conclusion

Using breakpoints such as xs, sm for mobile, md for tablets, and lg and xl for desktops will help you create a responsive design that provides an optimal experience across all platforms. By adjusting margins and gutters as suggested in the table, you can ensure that your website not only looks good but also offers a consistent and smooth user experience across different devices.

Responsive design is not just a trend; it is a necessity in modern web development. By carefully planning your breakpoints and ensuring each device has an optimized experience, your website will be ready to perform well and be accessible to all users.

Figma: https://www.figma.com/community/file/1416212487552660211/grid-system

The post The right breakpoints for a website: Mobile, tablet and desktop appeared first on Roger Romero's Blog.

Understanding the Structure of Design Tokens

To structure an efficient design token system, it is useful to break tokens down into different layers of abstraction. This allows greater clarity when naming and managing styles across different components and systems. Below, we break down the structure based on the hierarchy shown in the main image, where tokens are divided into four major groups: Namespace, Object, Base, and Modifier.

Namespace: The Starting Point of the Structure

The namespace is the first layer of a design token system. Its function is to encapsulate a set of tokens under the same space, providing a clear organizational framework. In the image, three main categories are shown within Namespace:

• System: Here we find the prefix used as an acronym to identify the system “nds” (Name of the Design System).
• Theme: This focuses on design customization, allowing for theme switching. Examples of subcategories are brand (for brand-related tokens) and mode (for modes such as dark or light).
• Domain: A category aimed at dividing tokens by user type or domain, such as public, partner, consumer, internal, or business.

Each of these subcategories allows the same token system to be applied across different contexts or products without losing consistency.

Object: Defining System Elements

The next level is Object, which allows tokens to be grouped according to the type of object they affect. The main categories of this section include:

• Group: Covering generic groupings such as form or typography.
• Component: Specific elements like buttons (button) or links (link).
• Element: The smaller parts as icon or text children of the components

This organization ensures that tokens can be applied to any element of the design system in a clear and understandable way, from a complete component to a small icon or block of text.

Base: Defining Key Properties

The Base layer defines the fundamental properties that tokens control. Here, we find categories such as:

• Category: Grouping properties like color, font, spacing, sizing, border, opacity, shadow, among others.
• Concept: Referring to more abstract interaction concepts such as action, feedback, visualization, or display.
• Property: Specifies which property of the element or component the token is affecting. For instance, properties like background, foreground, border, family, size, weight, line-height, letter-spacing, text-case, and text-decoration are examples of how specific aspects of an element’s design can be fine-tuned.

This combination of Category, Concept, and Property within the Base layer provides a powerful way to describe what visual or behavioral aspects the tokens control, from basic visual properties like color and spacing to abstract concepts like action or feedback.

Modifier: Customizing Variations and States

Finally, we have the Modifier layer, which allows specifying variations, states, and modes for components. The main subcategories are:

• Variant: Tokens that control variations such as primary, secondary, tertiary, and other types like information, warning, error, and success.
• State: Describes interactive states like default, hover, focus, active, visited, or disabled.
• Scale: Includes adjustments for size and weight such as t-shirt sizes (lg,md,sm), numerical scales (1,2,3), weight (light,regular,bold), or tone (dark,medium,light).
• Mode: Tokens that define different display modes, such as on-dark or on-light.

This level allows flexibility for quickly applying modifications to components in different states or contexts, such as when a button transitions from its default state to a hover or focus state.

Practical Examples of Applied Design Tokens

In the second image we see examples of how these categories are applied to create specific token names that are functional and clear. Through the composition of different hierarchical levels, tokens are able to precisely describe aspects of any design element.

Example 1: nds-typography-display-lg

This token describes a specific font style (size) to be used in the display typography. It is designed for application to text. Let’s break it down:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• typography: The object that this token affects, in this case, typography.
• display: Describes the purpose or concept for this token, referring to display text.
• lg: A scale modifier specifying that this is large-sized text.

Example 2: nds-component-button-color-background-primary-default

Another real-world token example shows how to describe the background color of a primary button in its default state:

• nds: Indicates the namespace, in this case, “Name of the Design System”
• component-button: The object it affects, in this case, a button component.
• color-background: The property it describes, which is the background color.
• primary: The button is of the primary variant.
• default: The state modifier indicating that this is the default state for the button.

Conclusion: The Importance of Organization in Design Tokens

By structuring a design token system in this way, you get a scalable, reusable, and easy-to-understand system, which is crucial for maintaining a consistent design system over time. The provided examples demonstrate how a clear hierarchy allows tokens to precisely describe all visual aspects of a system, from colors and fonts to states and modes.

This approach also facilitates collaboration between design and development teams, as everyone works under a common and understandable language, ensuring consistency across the digital ecosystem.

The post How to Structure an Effective Design Token System appeared first on Roger Romero's Blog.

There are several typographic scales used in web and mobile design, and here are some of the most common ones:

The Importance of Typographic Scale on the Web

On the web, typographic scale is essential for guiding the user through content in a clear and coherent manner. Since the web is a visual communication medium, typographic scale helps create a visual hierarchy that makes reading and navigation easier.

The Ideal Typographic Scale for the Web

The most commonly used typographic scale on the web is the Major Third (1.250), as it provides a good balance between readability and visual hierarchy. This scale is based on the 5:4 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale on the Web

To apply typographic scale on the web, it’s important to consider visual hierarchy and readability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Third is popular on the web because:

• It provides a good balance between readability and visual hierarchy: The Major Third allows for creating a clear and consistent visual hierarchy, making reading and navigation easier on the web.
• It is flexible and adaptable: The Major Third can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with web design guidelines: The Major Third aligns with the web design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Third would look on the web:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve on the web.

The Importance of Typographic Scale in Mobile Applications

In mobile applications, typographic scale is crucial for creating an intuitive and appealing user experience. Since mobile screens are smaller than web screens, the typographic scale must be carefully chosen to ensure readability and usability.

The Ideal Typographic Scale for Mobile Applications

The most commonly used typographic scale in mobile applications is the Major Second (1.125), as it provides a good balance between readability and visual hierarchy on small screens. This scale is based on the 9:8 ratio, resulting in a gradual and harmonious increase in font sizes.

Applying Typographic Scale in Mobile Applications

To apply typographic scale in mobile applications, it’s important to consider readability and usability. Use font sizes that scale logically and predictably, and adjust the scale as needed to accommodate different screen sizes and pixel densities.

The Major Second is popular in mobile applications because:

• It provides a good balance between readability and visual hierarchy on small screens: The Major Second allows for creating a clear and consistent visual hierarchy on small screens, making reading and navigation easier in mobile applications.
• It is flexible and adaptable: The Major Second can be easily adjusted to fit different screen sizes and pixel densities.
• It is compatible with mobile design guidelines: The Major Second aligns with the mobile design guidelines of major platforms, such as Google’s Material Design and Apple’s Human Interface Guidelines.

Here’s an example of how the Major Second would look in mobile applications:

Remember that the choice of typographic scale depends on the design and user experience you want to achieve in the mobile application.

The Line Height in the Typographic Scale

Implementing a good line-height (or leading) for typographic scales involves balancing readability, visual hierarchy, and the overall aesthetic of your design. Here are some best practices to consider when setting line-height for different typographic scales:

General guidelines for Line Height

• Body Text: The line-height for body text should typically be between 1.4 and 1.6 times the font size. This range provides enough space between lines for readability, especially for longer passages of text.
• Headings: Headings generally require less line-height compared to body text, typically around 1.2 to 1.4 times the font size. This tighter spacing helps to visually group the heading with its related content.

Line Height adjusted to screen size

• Mobile: On smaller screens, reduce the line height slightly (e.g., 1.2 – 1.4 for body text) to accommodate limited vertical space while ensuring legibility.
• Desktop: You can afford to use slightly higher line heights on larger screens (e.g., 1.4 – 1.6 for body text) to create a more open and airy feel.

The Line Height context matters

• Dense Content: For text-heavy designs, like articles or reports, opt for a larger line-height within the recommended range to avoid visual clutter.
• Minimalist Designs: In minimalist or highly visual designs, you might opt for a tighter line-height to maintain a clean and compact appearance.

Accessibility considerations for the Line Height

Ensure that your line-height choices do not compromise accessibility. Text should be easy to read, especially for users with visual impairments. WCAG guidelines recommend a line-height of at least 1.5 times the font size for body text.

Test and iterate the Line Height

Always test your typographic settings across different devices and screen sizes. What works well on a desktop might need adjustment on a mobile device or a different browser.

Conclusion

Choosing the right typographic scale is crucial for creating a consistent and appealing user experience on the web and mobile applications. By understanding the most commonly used typographic scales in each medium, you can create design systems that guide the user through the content in a clear and coherent manner.

The post Typographic Scales in Design Systems appeared first on Roger Romero's Blog.

What is Penpot?

Penpot is a web-based collaborative design tool created by Kaleidos, a Spanish tech company. Its primary differentiator is its open-source nature, meaning anyone can contribute to its development and customize the tool to meet their specific needs. This opens up a range of possibilities for organizations looking for an adaptable solution without the costs associated with proprietary software licenses.

Key Features

1. Intuitive and Powerful Interface: Penpot offers a modern and user-friendly interface that allows designers to create prototypes, wireframes, and high-fidelity designs. Its vector design tools are comparable to those of any leading design platform on the market.
2. Real-Time Collaboration: One of Penpot’s pillars is collaboration. Teams can work together in real time, making it easy to review and improve designs dynamically. This is especially useful for geographically distributed teams that need a tool to keep them in sync.
3. Accessibility and Adaptability: As an open-source tool, Penpot can be adapted and extended according to users’ needs. This is a significant benefit for organizations that require specific functionalities or integration with other systems.
4. Integration with Development Tools: Penpot is designed to integrate seamlessly with development and workflow tools, facilitating the transition from design to code. This helps reduce friction between design and development teams, improving overall project efficiency.

Benefits of Using Penpot

• Cost-Effective: As an open-source platform, Penpot eliminates licensing costs, which can represent significant savings for businesses and small teams.
• Flexibility: Users can modify and extend Penpot’s functionality according to their specific needs, something that is not possible with proprietary tools.
• Active Community: Penpot’s open-source community is continuously growing, providing support, plugins, and ongoing improvements to the software.
• Privacy and Security: Organizations can host Penpot on their own servers, ensuring that sensitive data and designs remain within their own systems.

Use Cases

Penpot is ideal for a variety of use cases, including:

• User Interface (UI) Design: Creating user interfaces for web and mobile applications.
• Prototyping: Developing interactive prototypes to validate design ideas before implementation.
• Collaborative Design: Design teams needing to collaborate in real time, sharing and reviewing designs seamlessly.

Conclusion

Penpot is revolutionizing the design tool landscape with its open-source approach and commitment to collaboration and accessibility. For organizations looking for a flexible, cost-effective, and powerful alternative to traditional design tools, Penpot presents an unbeatable option. Its ability to adapt to users’ specific needs and integrate with development workflows makes Penpot an essential tool for modern design.

For more information, visit Penpot.app.

The post Penpot: The Open Source Collaborative Design Tool appeared first on Roger Romero's Blog.

From Plugin to Platform: A Journey of Growth

Over the past year, the Tokens Studio team has diligently worked to elevate the company from its humble beginnings. Their focus has been on developing a robust design data management platform. At the core of this platform lies a powerful node-based graph engine, enabling truly scalable and dynamic design decisions. This technological advancement represents a significant upgrade from their initial plugin-focused offerings.

A New Identity for a New Era

As Tokens Studio expanded its capabilities, it became clear that its brand identity also needed to evolve. The new brand identity encapsulates this growth and transformation. It’s not just about a new look; it’s about showcasing their maturity and readiness to meet the demands of complex workflows in diverse organizational settings.

Tokens Studio’s journey from a Figma-centric plugin to a comprehensive design data management platform is a testament to their commitment to innovation and excellence. The company is excited to embark on this new chapter and invites everyone to explore their revamped website to see how Tokens Studio can seamlessly integrate into their design process, regardless of the size or complexity of their organization.

Stay tuned for more updates as Tokens Studio continues to push the boundaries of design technology, helping users achieve their creative vision with unparalleled efficiency and precision.

Tokens Studio: https://tokens.studio/

The post Tokens Studio: New website and a refreshed brand identity appeared first on Roger Romero's Blog.

Origins of the Three-Click Rule

The three-click rule was popularized by Jeffrey Zeldman in his book “Taking Your Talent to the Web“, published in 2001. Zeldman argued that users start to lose interest if they don’t find what they’re looking for after three clicks, which can lead to a higher abandonment rate. Although subsequent studies have suggested that tolerance for clicks may depend more on the perceived value during navigation than on the exact number of clicks, the rule remains a useful starting point for designers seeking to create intuitive and efficient interfaces.

Challenges with Interactive Components

Components such as accordions, carousels, and tabs can complicate adherence to the three-click rule as they often hide content behind additional interactions. This can lead to a more cumbersome and less intuitive user experience.

Accordions: While they reduce scrolling by compressing large amounts of content, they can also conceal essential information, forcing users to make more clicks to access it.

Carousels: Used to display multiple content items, they can be problematic if content automatically changes before the user has a chance to interact with it.

Tabs: Although they efficiently organize content, they can also require additional clicks to view information that might otherwise have been visible.

When and How to Use These Components

Accordions: Useful for FAQ sections or for complex forms where not all information needs to be visible immediately.

Carousels: Suitable for complementary and non-critical content, such as image galleries on product pages, provided that users have full control over the navigation.

Tabs: Great for dividing detailed information about products or services into distinct categories that do not require sequential consumption.

Conclusion

These examples highlight how accordions, carousels, and tabs, when strategically implemented, can significantly enhance the usability and efficiency of user interfaces. In each case, the design considers both the user’s needs and the specific objectives of the context, ensuring that content is accessible without visually overloading or unnecessarily complicating the user experience. The key is to use these components in a way that complements and enhances navigation, always respecting the three-click rule to keep the interface friendly and accessible.

The post Simplifying Web Navigation: The Three-Click Rule appeared first on Roger Romero's Blog.

Consistency: The Cornerstone of Design Systems

One of the primary goals of a design system is to establish a consistent visual language across all digital products and platforms. A naming convention for design tokens ensures that everyone involved in the development process, from designers to developers, understands and utilizes the tokens in a coherent manner. This consistency not only enhances the user experience but also streamlines the development process, reducing the time and effort required to maintain and update the design system.

Maintainability: Keeping Your Design System Future-Proof

As design systems evolve and grow more complex, maintainability becomes a critical factor. Descriptive and logically structured token names make it easier to understand their purpose and application, facilitating the maintenance of the design system over time. Developers and designers can quickly comprehend what each token represents and how it should be utilized, minimizing the risk of introducing inconsistencies or errors.

Scalability: Embracing Growth and Complexity

Design systems are meant to scale and accommodate new components, patterns, and functionalities as product requirements evolve. A well-defined naming convention helps maintain the organization and structure of tokens, enabling the design system to adapt and grow efficiently. As new elements are introduced, they can seamlessly integrate into the existing system, ensuring a cohesive and consistent experience for designers and developers alike.

Collaboration: Fostering Teamwork and Communication

In today’s collaborative development environments, clear and established naming conventions facilitate effective communication and collaboration among teams and individuals. Everyone involved can accurately and consistently refer to tokens, reducing confusion and misunderstandings. This shared understanding fosters a more productive and efficient workflow, enabling teams to focus on delivering high-quality products rather than deciphering ambiguous token names.

Automation: Streamlining Processes and Workflows

Many development and design tools and processes rely on the ability to analyze and process token names in an automated manner. A well-structured naming convention facilitates integration with these tools and processes, allowing for a more efficient and automated workflow. From generating documentation to performing automated tests, a consistent naming convention ensures that tools can accurately interpret and manipulate tokens, saving valuable time and resources.

In conclusion, establishing a clear and consistent naming structure, teams can create a robust and scalable design system that promotes consistency, maintainability, collaboration, and automation. Ultimately, this approach leads to more efficient development processes, improved user experiences, and a future-proof design system that can adapt to the ever-evolving needs of digital products and platforms.

How to Structure an Effective Design Token System

The post The Importance of Naming Conventions in Design Token Systems appeared first on Roger Romero's Blog.