UI (User Interface)

What is UI design?

UI design (User Interface Design) is the craft of designing the visual and interactive elements the user works with on a website or an application. That includes the buttons, the navigation menus, the forms, the icons, the typography, the colours, the spacing and the animation. The UI is what the user sees and touches.

Where UX defines how the product works, UI defines how it presents itself. The two disciplines are closely linked: good UX with a poor UI gives a site that works but repels, while a good UI with poor UX gives a site that looks lovely but is frustrating to use. 94% of first impressions come down to visual design.

The fundamentals of UI design

The design system is the foundation of a consistent UI. It defines the reusable components (buttons, cards, forms), the design tokens (colours, spacing, typography), and the rules for using them. Large companies such as Google (Material Design) and Apple (Human Interface Guidelines) publish their own design systems.

Typography carries 95% of the information on the web. The choice of typefaces, sizes, weights and line heights has a direct impact on legibility and on the sense of quality. A classic combination: a sans serif for headings (Inter, Poppins) and a serif for long form text (Georgia, Merriweather). The ideal line height for body text is 1.5 to 1.75.

The colour palette communicates emotion and directs attention. A professional palette uses 2-3 main colours at most, plus shades of grey. The accent colour is reserved for interactive elements (buttons, links) so they are instantly recognisable. Contrast must meet the WCAG standards (a ratio of at least 4.5:1 for text).

Spacing (whitespace) matters as much as the content. Generous spacing between sections conveys quality and clarity. Premium sites use plenty of whitespace, while amateur sites cram elements together.

Why accessibility matters in UI

Good UI design is accessible to everyone, including people with a disability. That means sufficient contrast for people with low vision, tap targets that are large enough (at least 44x44px) for people with motor impairments, text alternatives for images (the alt attribute), and keyboard navigation that actually works.

In France, the law requires accessibility for public sector sites (RGAA). In 2026, more and more private companies are adopting accessibility, because it benefits everyone: an accessible site is a more usable site for all.

How UI shapes trust and conversion

Before reading a single word, a visitor judges your business in a fraction of a second, based on how your site looks. A polished UI sends a signal of seriousness: "this company pays attention to detail, I can trust it with my project or my money". A site that looks dated or careless does the opposite and sows doubt, even when the service behind it is excellent.

For a tradesperson, a coach or an independent shop, this effect is decisive: your site is often the first contact, before any phone call. Quality photography, legible typography, colours that fit your trade and clearly identifiable buttons make the difference between a visitor who books an appointment and a visitor who leaves to compare with a competitor. UI is not decoration, then: it is a direct commercial lever.

Mobile UI: the essential habit in 2026

Most web traffic now happens on a smartphone, which changes the rules of UI design. Buttons must be large enough and spaced far enough apart for a finger (at least 44 pixels across), text must be big enough to read without zooming, and menus must be rethought for a small screen. The mobile first principle means designing for the phone first, then enriching the design for larger screens, rather than the other way round.

A few practical habits: keep the main action visible without scrolling, avoid placing elements so close together that taps miss their target, and test the site on a real phone, not only on a computer screen. A UI that neglects mobile loses customers silently, without the owner ever noticing.

UI mistakes that undermine a site

- Using too many typefaces and colours, which looks amateurish and messy. - Using poor quality images, pixelated or stretched out of shape. - Lacking contrast, which leaves some text hard to read (light grey on white above all). - Cramming elements together with no room to breathe, for want of whitespace. - Ignoring accessibility, which excludes part of your visitors and weakens your brand image. - Neglecting consistency between pages, as if each page had been designed separately.

UI trends in 2026

Glassmorphism (the frosted glass effect) continues to dominate, with semi transparent panels and blurred backgrounds. Micro animations (button transitions, scroll animations) add life without weighing the interface down. Dark mode has become a standard, and sites often offer a light/dark switch. Subtle gradients are replacing flat colour, for more depth.

Design systems are becoming the norm for businesses. Libraries such as Shadcn/ui (which we use at ConvertiLab) provide ready made, accessible and customisable components that speed up development while keeping the visual quality high.

UI and brand identity: consistency before effects

A good UI is not about piling on fashionable effects, it is about translating your company's identity into something visual and coherent. Your colours, your typography and your image style should tell the same story as your trade and your values. A law firm, a trendy hair salon and a yoga studio should not look alike: the visual codes their respective customers expect are different.

Consistency works on two levels. First, between your site and your other materials (business card, social media, shopfront, packaging): a customer should recognise you from one to the next. Second, inside the site itself: the same button styles, the same margins, the same tone of imagery on every page. That regularity, almost invisible when it is done well, is precisely what creates a sense of professionalism. A consistent site inspires trust because it looks deliberate, where a patchwork of mismatched styles betrays amateurism, however pretty the animations.

At ConvertiLab, we create visually striking interfaces with Tailwind CSS, Shadcn/ui and Framer Motion, respecting accessibility standards and UI best practice, so that even a small business projects an image as polished as a major brand.