The transition from desktop to mobile: a paradigm shift

On a desktop computer, the designer has a generous surface area allowing for the simultaneous display of the sports list, live events, the betting slip, and promotional banners. The user navigates with a mouse, a tool of surgical precision that allows for dense clickable areas, a layout often highlighted in an Aerobet review for its comprehensive data density. When switching to mobile, this architecture collapses. Spatial constraints force drastic choices: what should be shown immediately and what should be hidden behind contextual menus?

The major challenge lies in managing informational density. A single football match can offer over two hundred betting variants (exact score, scorers, number of corners, etc.). On PC, these options are often displayed in large tables. On mobile, the design must adopt an accordion structure or a horizontal tab navigation system to avoid the effect of “scroll fatigue.” The goal is to reduce the cognitive load on the bettor who, often in the urgency of a live event, must find a specific odd without being distracted by secondary information.

Tactile ergonomics at the service of execution speed

The shift to touch controls requires rethinking the “comfort zone” of the hand. Unlike desktop navigation, mobile design for sports betting must place critical elements, such as the bet validation button or live access, within thumb’s reach. This is known as “thumb-friendly” design. If a user has to use both hands to finalize a bet, the interface has failed its mission of fluidity.

Managing the retractable betting slip

One of the most significant innovations in recent years is the floating or retractable betting slip (bet slip). On a desktop site, the slip is usually fixed in a column on the right, permanently visible. On a smartphone, it must remain discreet to make room for navigation while staying accessible in a single click. Designers often opt for a persistent bar at the bottom of the screen that indicates the number of current selections. A tap on this bar expands the slip to full screen, allowing the user to enter their stake and validate. This approach preserves visual space while keeping the primary conversion function within reach.

Hierarchy through adaptive design

Responsive design is not just about moving blocks; it must also adapt the size of components. Odds buttons, for example, become large and spaced-out tactile targets to avoid selection errors. In the context of live betting, these buttons must also integrate clear visual indicators (green or red arrows) to signal changes in odds without the user needing to refresh the page. The use of micro-animations then becomes an essential communication tool to keep the player informed of the market status.

Comparison of interface elements by device

To better understand the evolution of components, it is helpful to visualize how major features are redistributed between the two types of screens.

Technical optimization for responsive design

Beyond the visual aspect, adapting a sports betting site to mobile relies on a robust technical infrastructure. Loading speed is a decisive conversion factor. A bettor wishing to wager on the end of a match will not tolerate a three-second loading delay. The design must therefore be lightweight, prioritizing CSS code and vector icons (SVG) over heavy images that consume bandwidth.

The use of technologies such as Progressive Web Apps (PWA) allows for simulating a native application experience while staying within the mobile browser. This offers benefits such as intelligent resource caching and the ability to send push notifications to inform the player of a win or an upcoming match. This convergence between web and app is the pinnacle of successful responsive design in the gaming industry.

The challenges of real-time data display

One of the biggest obstacles for mobile design is the display of detailed statistics. Modern bettors rely on possession data, shots on target, and team lineups to make their decisions. On a desktop screen, these charts can be displayed alongside the odds. On mobile, the design must often hide this data behind an “info” icon or use swipe gestures to toggle between odds and statistics. The difficulty is maintaining visual consistency so that the user never feels lost during these rapid transitions.

• Prioritize the most popular sports at the top of the mobile screen via a favorites menu.
• Use highly legible typefaces, even at small sizes, for odds numbers.
• Implement a dark mode to reduce eye strain during night sessions.

The future of the nomadic user experience

Adapting the interface of sports betting sites from PC to mobile is no longer an option, but the very foundation of an operator’s survival. The future lies in even deeper personalization, where the responsive interface does not just adapt to screen size, but also to the player’s consumption habits. By simplifying pathways, optimizing speed, and respecting the codes of tactile ergonomics, platforms turn a technical constraint into a true loyalty lever, offering a fluid experience that erases the boundary between the office and mobility.

FAQ

Why does the side menu disappear on mobile?

To maximize the central space dedicated to odds, the side menu is generally replaced by a “hamburger” menu or a navigation bar located at the top or bottom of the screen.

Is the loading time longer on a smartphone?

Normally no, as mobile versions use optimized assets and lightweight scripts to ensure optimal responsiveness, even on 4G or 5G connections.

Can we watch live matches on the mobile interface?

Yes, modern interfaces integrate adaptive video players that resize or switch to full screen to provide a comfortable viewing experience.

Are all betting options available on mobile?

The goal of responsive design is to offer 100% of the markets available on PC, although their visual organization is different to avoid clutter.

Is the betting slip automatic?

On most mobile sites, clicking on an odd automatically adds the selection to a floating slip that remains accessible with a simple gesture at the bottom of the page.

Why analyze UX/UI Design trends?

Faced with the rapid advent of autonomous agents, your approach to design risks obsolescence if you ignore the 2026 UI/UX trends already transforming the sector. This dossier decrypts the shift toward the intention economy, where agentic UX and generative interfaces dictate new standards for human-machine interaction. Identify how resolution velocity replaces engagement and discover why the designer must now act as a system governor to master these post-AI aesthetics.

Agentic UX: The end of search as we know it

From search to delegation: A paradigm shift

Forget the classic search bar. With agentic UX, the user no longer searches; they delegate a complex mission to an autonomous AI. This is a radical shift: moving from passive interaction to active human-machine collaboration. We are leaving the attention economy, which sought to captivate us, to enter the intention economy. The goal? To solve the user’s problem as quickly as possible. The interface is no longer a final destination where one lingers, but a mere starting point for action.

Proposal cards, the new building block of interaction

No more endless lists of blue links. “Proposal cards” display concrete solutions, pre-processed by AI. They are no longer results, but action plans. Imagine: for “organizing a weekend in Lisbon,” the AI generates a unique card combining flights, hotels, and activities. Everything is ready; all that remains is to validate the package. The designer must sculpt these cards so they remain clear and editable. The secrets of agentic UX are at the heart of this new approach, ensuring that the user maintains control over the generated proposal.

The impact on metrics: Farewell to “time on site”

Old metrics like time spent on site or page views are becoming obsolete. Worse, they are now counterproductive for evaluating a successful experience.

A new star is emerging among the 2026 UI/UX trends: “resolution velocity.” The sole objective is to measure the raw speed with which the user’s intention is satisfied.

In 2026, the success of an interface will no longer be measured by the time spent on it, but by the speed at which it can be forgotten because our problem was solved.

This shift forces companies to completely rethink their value model. It is now necessary to monetize pure efficiency rather than chasing advertising engagement or artificial retention.

Generative interfaces: Just-in-time design becomes the norm

What is a Generative Interface (GenUI)?

GenUI dominates 2026 UI/UX trends by marking a rupture where the interface is no longer a static artifact. Instead of drawing fixed screens, the system assembles components in real-time according to the precise context. This is referred to as a “liquid layout” where buttons and text reorganize instantly. AI determines if a form is necessary or which fields to display, adapting the layout to the exact intention. Thus, each user receives a unique interface, perfectly tailored to their immediate need. Variability replaces standardized uniformity.

The role of the “Design System Governor”

The designer no longer draws fixed screens for predictable scenarios. Their role evolves radically toward that of a “Design System Governor,” a true strategic conductor. They define the strict rules and atomic components that the AI will manipulate. They are the one who encodes the experiential logic and ethical constraints. They become the architect of the global system. They no longer paint pixels; they design the structure. Proper design system maintenance then becomes the cornerstone of the entire user experience. It is the sine qua non condition for ensuring the consistency of these automated assemblies.

Comparison: Traditional design vs. Generative design

To grasp the scale of this paradigm shift, let’s observe the fundamental differences. This table summarizes the transition.

Trust design: Between ethical friction and AI transparency

However, giving so much power to autonomous AI raises a fundamental question: how can we trust them? The answer lies in intentionally thoughtful design.

Ethical friction: Slowing down to decide better

We often praise absolute fluidity, but introducing ethical friction changes the game. This is the paradoxical idea of voluntarily adding steps or delays in a user journey to break the click automation. Why impose this slowdown? For high-stakes actions, such as deleting an account or validating an important transfer, friction forces reflection and prevents costly errors before they become irreversible. In the face of deepfakes, doubt sets in. This is the “Cost of Hesitation,” a trend analyzed by Accenture Song: users now demand tangible guarantees before committing.

Transparency and explainability: Requirements for human-centered AI

Trust comes through understanding. Users in 2026 will demand to know why an AI made a decision on their behalf. The era of opaque “black boxes” is definitively over. Design must therefore integrate simple explainability (XAI) elements. A phrase like “We suggest this because you liked that” is often enough to defuse mistrust. It is also a weapon against misinformation, a key UX challenge for 2026—a concern highlighted by the MIT Technology Review to secure our digital interactions.

Key principles for designing trust

To build this trust, several design principles are emerging as standards.

• User Control: Always offer an exit strategy or the ability to cancel an AI action.
• “Sandbox Mode”: Allow testing of AI proposals without real consequences.
• Clear Feedback: Explicitly indicate when an AI is at work and what it is doing.
• Verifiable Sources: Cite the information sources used by the AI to generate a response.

Post-AI aesthetics: From liquid glass to neo-brutalism 2.0

Now that logic and trust are established, what will the face of our interfaces look like? Two major, almost opposing, aesthetic trends are taking shape.

Liquid glass and spatial continuity

Liquid Glass goes beyond a simple visual effect to offer a living and reactive material. It is a striking evolution of glassmorphism that uses active transparencies, fluid distortions, and palpable depth, literally transforming the screen into a liquid surface. This visual approach is directly rooted in immersive extended reality (XR) interfaces. It breaks rigid frames to establish absolute and natural spatial continuity between the different elements of the UI. The ultimate goal is to sculpt a more organic interface, much less rigid, that fosters total immersion for the user.

The return of authenticity: Neo-brutalism 2.0

Neo-Brutalism 2.0 is emerging today as a fierce and necessary counter-trend. It is a direct reaction to the overly smooth, sometimes clinical aesthetic now associated with mass-generated visual productions from artificial intelligence. It is defined by bold typography, striking colors, deconstructed grids, and a raw “hand-made” authenticity. Here, imperfection becomes an essential trademark, a sincere guarantee of humanity that reassures the user. It is, above all, a quest for honesty and strong character in a digital world that feels increasingly sanitized.

Light skeuomorphism: A need for tactility

Skeuomorphism is not dead; it is making a strategic comeback in a much more subtle form: light skeuomorphism, one of the 2026 UI/UX trends to watch. It is no longer about crudely imitating reality as before, but about adding fine drop shadows, discrete textures, or precise micro-interactions that give elements a reassuring physicality. It is a touch of tangible matter in the pixel. The goal is to make interfaces intuitive by capitalizing on our understanding of the physical world. For inspiration, check out this top 10 UI inspiration sites.

Example of Neo-brutalist interfaces: New-York Magazine (Vulture)

Vulture adapts this style to the world of entertainment:

• Visible codes: The interface often uses flat primary colors (like Vulture yellow or electric red) to highlight categories.
• The Neo-brutalist effect: Navigation is direct, with very pronounced grids and category tags displayed in a very raw manner, without rounded corners or modern transparency effects.

Multimodal interfaces and spatial continuity

Beyond the click: Voice, gaze, gesture

Multimodal interfaces are now becoming the inescapable standard for any serious designer. Users drive their experience through voice, eye tracking, or precise spatial gestures, such as the famous “Gaze-and-Pinch” popularized by Apple. The physical keyboard is gradually fading in favor of fluid interaction. The immediate benefit lies in an interaction that is much more natural, fast, and instinctive for the human brain. It is also a major breakthrough for accessibility, as these systems finally adapt to the constraints of people with disabilities. The challenge for design is to orchestrate these input modes without creating confusion. We must ensure perfect consistency.

The influence of XR on web and mobile design

You don’t need an expensive headset to feel this major paradigm shift. The fundamental principles of XR (extended reality) are durably infiltrating classic 2D design. We are witnessing the advent of Spatial UI where elements leave the flat plane to gain volume. Interfaces integrate real depth, logical overlays, and animations simulating movement in a tangible 3D space. The screen becomes a window into a deep world. This approach makes navigation significantly more intuitive by mimicking real physics. It establishes an immediate visual hierarchy.

From humanoid robots to biometric adaptation

Looking toward an even more forward-looking trend: direct interaction with autonomous physical agents. The MIT Technology Review identifies humanoid robots as the “next frontier of AI,” and this changes everything. It is a disruption for our professions. This opens an unprecedented field for UX: how to design human-robot exchanges that remain safe? We must define socially acceptable and predictable interactions to avoid rejection. Biometric adaptation is also arriving, where the UI adjusts itself based on your stress level. The interface becomes empathetic and reactive.

The responsible ecosystem: Compliance UX and sustainable design

These new interactions and aesthetics do not float in a vacuum. They are framed by increasingly strong constraints: legal, ethical, and environmental.

Compliance UX and the “Brussels Effect”

One of the most striking 2026 trends is the emergence of Compliance UX. Design no longer responds only to user or business needs but now obeys the law. This is a new fundamental constraint that redefines our priorities. It is the perfect illustration of the “Brussels Effect”: strict European regulations […] quickly becoming global standards. Companies must adapt or face heavy sanctions.

In 2026, accessibility and ethics will no longer be options. They will be legal prerequisites shaping design from the very first line of code.

Green UX: Designing for the planet

Green UX or sustainable design is essential for creating digital services that are significantly less energy-intensive and climate-friendly.

• Resource Optimization: Compressing images into WebP, using lightweight system fonts, and limiting unnecessary third-party scripts.
• Functional Sobriety: Questioning the real relevance of each feature and evaluating its “carbon cost” before any development.
• Dark Mode by Default: Drastically reducing energy consumption on OLED screens, a strong user expectation.
• Transparency for the User: Displaying the carbon footprint of a specific action (e.g., choosing to “watch in HD” vs. “in SD”).
• Green Hosting: Systematically choosing certified hosts that use renewable energy for their servers.

Design for belonging and equity

We must go beyond technical accessibility to talk about social inclusion with “Design for Belonging.” This approach aims to reduce systemic exclusion, which is often invisible in our interfaces. Its goal is to create experiences where everyone feels welcome, respected, and represented, regardless of their background, identity, or abilities. It is a powerful lever for building trust. This approach is promoted by institutions like the Stanford d.school, which has become a key reference on the subject.

Toward intention-centered design: New metrics, new roles

All these evolutions—technological, aesthetic, ethical—converge toward a profound transformation of the design profession and product strategy.

“Calm technology” and functional minimalism

“Calm Technology” is emerging as a necessary response to digital saturation. This approach aims to design tools that respect our limited attention instead of constantly soliciting it through constant interruptions. This philosophy aligns with the “Social Rewilding” phenomenon identified by Accenture. Users now seek to disconnect to prioritize real experiences, and design must support this need for texture rather than fight it.

Concretely, this translates into a drastic reduction in notifications, more silence, and minimalism centered on essential function.

Product management 3.0 and role convergence

Product strategy is also evolving radically. Product Management 3.0 no longer separates disciplines but integrates UX, technology, and business imperatives from the initial design phase. We are observing a marked pivot toward a “Profit-First” model. Sustainable economic viability now takes precedence over growth at any cost, forcing designers to justify the commercial impact of every pixel. This requirement erases traditional silos. The boundary between product design and UX is becoming increasingly blurred, creating hybrid profiles capable of navigating between technique and strategy.

Training and adapting: Key skills for 2026

To stay relevant, the designer of 2026 must acquire new skills, far beyond simple design tools. Technical mastery is no longer enough in the face of current strategic demands.

To measure the scale of the change, one only needs to compare these new requirements with the UX/UI trends of 2025.

Here are the indispensable skills to master these trends:

• Systems Thinking: Designing rule systems, not just screens.
• AI Governance: Understanding and steering AI models.
• Ethical and Legal Design: Integrating compliance and responsibility constraints.
• Cognitive Psychology: Anticipating human reactions to autonomous agents.
• Multimodal Prototyping: Mastering tools to test voice, gesture, etc., experiences.

To go further: Reference analyses on the future of UX

This overview paints a picture of the future. For those who want to dive deeper into these topics, here are the authoritative sources and analyses.

Fundamental reports and articles

The trends presented here are the result of a synthesis of several forward-looking analyses conducted by industry experts. They bring together varied visions to anticipate major developments.

• For an annual overview, the report The State of UX in 2025 by UX Collective is a starting point.
• Tanmay Vatsa’s analysis on Medium, “2026 UX/UI Design Trends That Will Be Everywhere”, offers a complementary perspective.
• The Nielsen Norman Group viewpoint is always essential, found in their article “State of UX, 2026”.
• For structural changes, the article “10 UX Design Shifts You Can’t Ignore in 2026” is particularly enlightening.
• Another synthetic vision is proposed by Punit Chawla: “UX/UI Design Trends for 2026”.
• Finally, the Orizon agency offers its top 10 in “10 UI/UX Trends That Will Shape 2026”.

The year 2026 marks a decisive turning point where agentic UX and generative interfaces redefine digital interaction. Beyond new aesthetics like Liquid Glass, it is ethics and sustainability that now guide design. Design is no longer an end in itself, but a strategic lever serving user intention.

FAQ

What are the main UX/UI trends that will define 2026?

The year 2026 is characterized by a deep transformation driven by artificial intelligence. Major trends include Agentic UX, where the user delegates tasks to autonomous agents, and Generative Interfaces (GenUI), which are built in real-time according to context. There is also a strong demand for ethical and transparent design, as well as contrasting aesthetics ranging from immersive “Liquid Glass” to authentic Neo-brutalism.

What is Agentic UX and how does it change navigation?

Agentic UX represents the shift from an attention economy to an intention economy. Concretely, the user no longer navigates to search for information but entrusts a complex mission to an AI (like organizing an entire trip). The interface evolves to present “proposal cards”—turnkey solutions generated by the agent that the user only needs to validate or adjust.

What are Generative Interfaces (GenUI)?

A generative interface, or GenUI, breaks with the concept of pre-designed static screens. It is a fluid interface assembled on the fly by artificial intelligence to respond specifically to the user’s need at that exact moment. Using “liquid layouts,” components reorganize dynamically, offering a hyper-personalized and unique experience for each individual.

How is the UX designer’s role evolving toward that of a “system governor”?

With AI automating screen production, the designer no longer draws every pixel. They become an architect or a design system governor. Their mission is to define the rules, ethical constraints, and atomic components that the AI will use. They focus on the structure, logic, and supervision of the system to ensure a consistent and human experience.

Why is “resolution velocity” replacing time spent on site?

In a context where AI solves the user’s problems, keeping them on a site for a long time is no longer a sign of success, but potentially of inefficiency. The new key metric is resolution velocity: it measures the speed at which the user’s intention is satisfied. The goal is to provide the solution as quickly as possible to free the user.

What are the new visual aesthetics expected for 2026?

Two visual currents oppose and complement each other. On one side, Liquid Glass, influenced by extended reality (XR), offers fluid, transparent, and spatial interfaces. On the other, Neo-Brutalism 2.0 is making a strong comeback with imperfect designs, bold typography, and striking colors, seeking to prove the authenticity and humanity of content in the face of smooth AI creations.

With the advent of new digital devices, we are faced with a multitude of screen resolutions and pixel densities. In this article, we will explore the different solutions that will help you choose the ideal font size based on pixel density (DPI).

Factors affecting font readability

Unlike paper, fonts displayed on a screen can appear differently from one device to another, or even from one screen to another. Several factors influence how fonts are displayed:

1. Pixel Density (PPI/DPI)

Pixel density (Pixels Per Inch) defines the sharpness of the rendering.

• The aliasing challenge: On a low-density screen, the curves of letters can appear “jagged” (staircase effect). High-density screens (Retina, Quad HD) allow for thinner or lighter fonts without them disappearing or becoming blurry.
• The relative unit: Because of this variation, logical pixels (or dp on Android, pt on iOS) are used rather than physical pixels to ensure that text maintains the same visual size everywhere.

2. Screen Resolution

More than just a simple multiplication, resolution influences the available workspace.

• Size ratio: On a low resolution, a 16px font will take up a huge amount of screen space, limiting the number of words per line. On a 4K screen, this same font can become unreadable because it is tiny if not scaled properly.
• Rendering context: Resolution often determines whether the user will see your text in a single or multi-column layout.

3. Reading Distance

This is the factor that dictates the minimum usable size.

• Viewing angle: The further the eye is, the larger the letter must be to occupy the same visual angle.
• Mobile vs. Desktop hierarchy: On mobile (30 cm), slightly smaller fonts (e.g., 14px) are acceptable because the screen is close. On a television (“10-foot UI” usage), the text must be massive to remain legible.

4. Font Composition (Anatomy)

The anatomy of a letter directly impacts the speed of recognition by the brain.

• The importance of X-height: At the same size, a font with a large X-height (like Helvetica or Verdana) will appear larger and be more readable on screen than a font with a small X-height (like Garamond).
• Apertures: The white spaces inside letters (like the hole in an ‘e’ or a ‘c’) are vital. If they are too small, the letter turns into a dark “blob” on low-quality screens.

5. Font Size and Line Spacing

Size isn’t everything; it’s its relationship with the surrounding space that creates comfort.

• Line spacing (Line-height): For the web, a line spacing of 1.5 times the font size is often recommended. Text that is too tight tires the eye because it’s difficult to find the start of the next line.
• Contrast: On screen, size must be compensated for by contrast. A thin font (Light) requires a larger size or higher color contrast (black on white) to remain accessible.

Comparative table between different resolutions, pixel densities, and recommended font sizes based on “normal” reading distance.

Recommendations for choosing the right font size

Here are some recommendations for choosing the ideal font size based on the factors mentioned above:

1. Prioritize a generous X-height

X-height (the size of lowercase letters like “x”, “a”, “e”) is the #1 factor for readability on screen. The larger it is, the more open and easy to decipher the letter appears, even at a small size.

Why? On a screen, fine details of ascenders (the top of a “b”) and descenders (the bottom of a “g”) can get lost. A large X-height stabilizes the eye on the line.

Examples of fonts with large X-height:

• Verdana: Specifically designed for the screen, it has a massive X-height.
• Roboto (Google): Very balanced, it remains readable on various mobile resolutions.
• Helvetica Now: A modern version optimized for digital.

To avoid for body text: “Old-style” fonts like Garamond, which have a small X-height, making them tiny and tiring to read on a standard screen.

2. Long texts: Round and airy fonts

For a blog article or a report, the goal is to reduce eye strain. We look for fonts that “breathe.”

The principle: Fonts with wide apertures (the open space in a “c”, “e”, or “s”) prevent letters from turning into black blobs when the user squints.

Recommended examples:

• Open Sans: Very round, extremely readable thanks to its open forms.
• Montserrat: Very geometric and wide, it gives a modern and airy look.
• Georgia: If you prefer a Serif font, this is the queen of on-screen readability for long narratives.

3. Short texts: Narrow and dense fonts

For interface elements (buttons, navigation bars, notifications), space is often limited. In these cases, more condensed fonts can be used.

The principle: We prioritize recognition of the overall word shape rather than fluid reading.

Recommended examples:

• Oswald: A condensed font perfect for impactful titles or buttons.
• Archivo Narrow: Ideal when you have a lot of information to fit into a small screen width (dashboards).
• Inter: Although versatile, it is very effective in small UI spaces.

Summary table of uses

Font Measurement Systems

Font size can be measured using different scales. Here is an overview of two fixed scales (pixels and points) and two variable scales (em and percentage), along with their pros and cons:

1. Pixels

This scale measures font size in pixels on the screen. This means the font size is fixed, but the actual size displayed depends on the screen’s pixel density. It is a measurement understood by all browsers, but it does not adapt to different pixel densities and cannot be resized by older browsers.

2. Points

The point unit is a legacy of printing, where one point equals 1/72 of an inch (about 0.03 cm). Points offer relative control over the final result, but they do not display the same way on all devices. Consequently, points are not ideal for flexible layouts.

3. Em

The “em” unit is relative to the default font size. For example, 1 em is equal to your browser’s standard font size. “ems” are adaptive and allow for the creation of flexible layouts. They are well-supported by most browsers, including older versions.

4. Percentage

Measuring font size in percentage allows for the creation of fluid and adaptable layouts. However, this can be more complex to manage than other units, as the font size is determined as a percentage of the default font size.

Web Typography: Complete guide to choosing the perfect font – 2020 Happy.webacademy

Media Queries for font size

Media Queries are powerful tools for responsive web design. You can use them to adjust font size based on screen resolution. Media Queries allow you to offer an optimal user experience by adapting font size to different devices.

ISO 9241-300 Standard

The AFNOR 9241-300 standard specifies the rules to follow when designing interfaces for mobile, desktop, or TV screens.

The ISO standard recommends a font height of 2.8 mm for a reading distance of 50 cm. In other words, the total size of the font (from its ascender to its descender) should be 2.8 mm if the user reads at a distance of about 50 cm.

This results in the following equivalencies:

• 2.8 mm for d=50 cm
• 3.5 mm for d=60 cm
• 4 mm for d=70 cm

Font size, the guarantor of readability

Choosing the right font size for your online text is essential to ensuring a pleasant reading experience for your users. By taking into account pixel density, screen resolution, reading distance, and font composition, you can create readable and adaptive layouts. Using units like “em” and Media Queries can greatly improve the flexibility of your web designs.

Remember that readability is essential, and font size is a key element of it. Take the time to test different sizes and units to ensure your text is easy to read across a variety of devices.

Featured image: illustration by Tamanna Mundhra – Dribbble

What is a wireframe?

The wireframe as an architect’s blueprint

An effective Wireframe allows for the visualization of page layout, information architecture, user journeys, and essential functionalities. The goal is to validate interface concepts and user experience before handing the project over to developers. This crucial design phase is often entrusted to professionals such as UX designers, UI designers, or ergonomists.

Differences and similarities between prototyping and wireframing

According to Jakob Nielsen in his book Usability Engineering (1993), the Wireframe, like the Mockup, is a “horizontal prototype,” a static representation of the graphical part of the user interface. The prototype becomes “vertical” when functionalities are implemented, allowing for user testing based on specific scenarios.

It is common for the concepts of prototyping and mocking up to be confused. Alita Joyce from NNGroup highlights that although a Wireframe is always a low-fidelity prototype, not all prototypes are Wireframes.

Advantages of wireframing

Creating “wired” mockups offers several significant advantages:

• Optimization of interface design by focusing on functional specifications.
• Presentation of the future interface to stakeholders to obtain their approval before development.
• Quick detection of errors or problems in UX Design and ergonomics for rapid iterations.
• Saving time and money thanks to its speed, low resource cost, and flexibility, thereby reducing revisions during the development phase.

On the other hand, high-fidelity prototypes serve as the first version of the final product, testing efficiency and usability before the deployment of the web or mobile application. These elements are produced at distinct stages of the UX/UI design project.

Mockup creation in the design process

To design an interface while optimizing the quality of the user experience, it is essential to follow several key steps. These steps, when well-orchestrated, allow a simple idea to be transformed into a functional and aesthetic reality. Creating mockups in the design process is one of these crucial steps. It plays a central role in the preliminary visualization of a concept, offering a tangible and concrete representation of the designer’s vision. This process, although iterative and adaptive, follows a series of key phases, from user research to ergonomic evaluation, including the creation of wireframes, mockups, and prototypes.

Conducting user research: understanding the needs of end-users

Before diving into mockup creation, it is crucial to understand the needs and expectations of the end-users. An in-depth analysis of the target users allows for the creation of mockups that respond precisely to their needs and expectations. This research phase constitutes the very foundation of the user-centered design process.

Mocking up interface screens: key steps in the process

The mocking up stage involves the preliminary visualization of the interface screens to be designed. This process can be subdivided into several essential sub-steps, such as sketching, zoning, wireframing, mockup creation, and the realization of functional prototypes in collaboration with developers.

Sketch and zoning: capturing initial ideas

The sketching stage consists of outlining the first design ideas on paper or using digital tools. Zoning, on the other hand, consists of delimiting the blocks of information that should be present on the page. These initial steps allow for the capture of raw concepts and the refinement of basic ideas before moving to the next stage.

Wireframe: the common thread of design

Wireframes represent the structured outline of an interface without its detailed graphic design. They serve to highlight the layout of key elements such as the header, navigation bar, call-to-action buttons, breadcrumbs, form elements, as well as areas reserved for images and media. They allow for the conceptualization and refinement of basic ideas while defining the fundamental structure of the interface.

Mockup: bringing the design to life

Mockups, representing high-fidelity graphic models, play an essential role in the detailed visualization of the interface. They facilitate communication between the various project stakeholders and offer a realistic visual representation of the final interface. The creation of mockups also serves as a tool for validation and design improvement in collaboration with the teams involved.

Prototype: functional realization

Prototypes, the ultimate stage of the mocking up process, allow the initial vision to be materialized by creating functional versions of the application or software in collaboration with developers. These prototypes serve as a basis for ergonomic evaluation and user testing, thus offering a concrete overview of the user experience before the final product launch.

Ergonomic evaluation: ensuring an optimal user experience

Ergonomic evaluation plays a crucial role between mockup iterations. It includes ergonomic audits, perception tests, and user tests aimed at ensuring that the interface meets the functional needs and expectations of users. This phase allows for the identification and resolution of potential user experience issues, thus ensuring the consistency and usability of the developed interface.

This evolution funnel of the design process, based on continuous iteration and collaboration, represents a complete and methodical approach to achieving an optimized interface design that meets specific user needs. The flexibility of the methodologies used allows for effective adaptation based on the nature of the project, the budget, and the specific requirements of each case.

Examples of wireframe mockups

Mockups can be created using various tools and methods. Here are some examples of wireframe mockups used by professionals in the field:

Hand-drawn wireframe sketch: speckyboy

Using hand sketching allows designers to quickly capture initial ideas and refine basic concepts in a creative and spontaneous way.

“Sketchy wireframe” with Axure RT: humane interface

The use of tools such as Axure RT allows for the creation of detailed and interactive wireframes, offering a more elaborate representation of the final interface.

a wireframe example by Aaron Akbari-Mort

Example of a responsive design wireframe: Balsamiq

The use of Balsamiq facilitates the design of wireframes by taking into account compatibility with different devices and screens, ensuring an optimal user experience across all platforms.

At Usabilis, we favor the use of Axure RP for creating interactive mockups, often associated with a complete ergonomic charter. We also offer comprehensive training in interface mocking up, covering various aspects of ergonomics, web, mobile, and touch interfaces.

From mockup to experience: The keys to success

The mockup creation process within the framework of interface development represents a fundamental step in achieving an optimized interface design and a successful user experience. By following an iterative and collaborative process, taking into account the needs of end-users, and regularly evaluating the ergonomics of the interface, it is possible to create effective and user-friendly interfaces that meet user expectations.

Wireframe FAQ

What is a wireframe (skeletal mockup)?

It is a schematic and simplified representation that serves as the backbone of an interface. It focuses on the structure, layout of elements, and functionalities rather than the visual or aesthetic aspect.

What is the main difference between a wireframe and a mockup?

The wireframe is a low-fidelity plan focused on information architecture, while the mockup is a high-fidelity model that presents the detailed and realistic graphic design of the final interface.

Why compare the wireframe to an architect’s plan?

Like a “blueprint” for a building, the wireframe serves as a technical foundation. It allows for the validation of interface concepts and user journeys before starting the “construction” (computer development).

What are the economic benefits of wireframing?

It saves time and money by detecting ergonomic errors very early. Its creation is fast and inexpensive, which reduces complex revisions during the development phase.

What is the role of ergonomic evaluation in this process?

It occurs between mockup iterations to ensure, via user tests or audits, that the interface is user-friendly, efficient, and perfectly meets final needs.

Featured image: Cooperation concept—serj marco DRIBBLE