Graphic design and branding

Interface, brand and accessibility: how I decide what you see.

The method on the other side of the screen: who is being designed for, which rules get checked, and why the brand system ends up in the code rather than in a PDF.

UX human-centred design, heuristics
UI grid and typography, tokens
Accessibility WCAG 2.2 level AA, contrast

The system lives in the code

A brand manual is a document somebody has to remember to respect. A design system is where the actual colour comes from.

This site is the example, and you can check it by looking at it. The house orange is measured off a photograph of my own, and it lives in three variants because vivid orange does not reach the minimum contrast for text: on top of it the text goes in ink, and orange text on white always uses the dark variant. That is not a recommendation written on a page: they are three variables, and any piece that does not use them shows.

Same with the grid and the type. A single typeface, contrast carried by weight and spaced small caps, and two columns that are always the same: label on the left, text on the right. When the rules are this few, they can be followed; when they are a forty-page document, they get broken the first Tuesday.

And some decisions are negative: no rounded corners, no soft shadows, no cards. What separates two blocks is a one-pixel rule or the air between them. Deciding what stays out is half the system.

Accessible is not a layer added at the end

Almost everything that makes a website accessible is decided while nothing has been drawn yet.

Contrast is decided when the palette is chosen; reading order, when the grid is laid out; the size of what gets tapped, when the button is drawn. Leave that for the end and there is no accessibility: there are patches. The international reference standard, WCAG, is written precisely as testable criteria, and that lets accessibility be treated like any other requirement: it is met or it is not, and it can be verified.

The working level here is AA. In practice that means text with enough contrast against its background, a visible focus while tabbing, tap targets with a minimum size, nothing that depends on colour alone to be understood, and motion that switches off when the system asks for less. This site honours that last preference in the home page echoes, which stay still if the browser asks them to.

And there is a legal side better not discovered late: the accessibility of digital products and services is regulated in the European Union, and in the Spanish public sector a royal decree has required it since 2018.

Interface and brand glossary.

The terms of the craft, with a case where they apply and the public text that defines them.

UX · User experience Everything someone perceives while using a product: whether they understand where they are, whether they get done what they came for and what they take away from it. It starts before the first screen and continues after it is closed. Example: A contact form has good experience if it says what will happen after sending it, not if it has a pretty shadow. Source: The Definition of User Experience, Nielsen Norman Group
UI · Interface The visible, operable part: grid, typography, colour, states and controls. It is where experience decisions materialise, and where you notice when none were made. Example: Two columns that are always the same, a single typeface and weight as hierarchy: a new page is assembled from pieces that already exist rather than inventing a block of its own. Source: Human Interface Guidelines, Apple
Human-centred design · ISO 9241-210 A standardised method in four activities that repeat: understand the context of use, specify the requirements of the people involved, produce design solutions and evaluate them with real users. Example: Before drawing an employee portal you need to know whether it will be opened on a phone with gloves on or sitting in an office. The answer changes the size of everything. Source: ISO 9241-210:2019
Usability heuristics · Nielsen’s ten Ten general rules —visibility of system status, user control, consistency, error prevention…— that let you review an interface without setting up a lab. Example: It is the list I review an existing brand or screen with: in an afternoon you can see what survives, what gets adjusted and what has to be redone. Source: 10 Usability Heuristics for User Interface Design, Nielsen Norman Group
WCAG 2.2 · Web accessibility The W3C standard with the accessibility criteria for web content, organised in three levels: A, AA and AAA. It is written as testable criteria, so it can be verified instead of argued about. Example: The working level here is AA: contrast, visible focus when tabbing, a minimum size for what gets tapped, and nothing understood by colour alone. Source: Web Content Accessibility Guidelines 2.2 (W3C)
Contrast The luminance ratio between text and its background. WCAG asks for 4.5:1 for normal text and 3:1 for large text and for the boundaries of controls, at level AA. Example: The brand orange is no good for text on white because it does not reach 3:1; that is what the dark variant exists for. The whole palette is checked, and touching a colour means measuring again. Source: WCAG 2.2 · contrast criteria (Quick Reference, W3C)
ARIA · WAI-ARIA 1.2 The vocabulary that gives a component its role, state and properties when HTML does not reach. Its first rule is not to use it: if the native element exists, the native element wins. Example: The photo viewer in the gallery is a native browser dialog, not a stack of layers: what the system already knows how to do is not reimplemented. Source: Accessible Rich Internet Applications 1.2 (W3C)
Design tokens Visual decisions stored as named values —colour, size, spacing, typography— so a single source feeds the website, the application and the printed material. The name states the role, not the colour. Example: The variable is called “accent”, not “orange”. If the brand ever changes colour, what changes is one value and not a mental convention scattered across forty files. Source: Design Tokens Format Module (W3C Community Group)
Design system The set of tokens, components and usage rules that makes two pieces by different people look like the same house. It is not a folder of templates: it is what you build with. Example: The guide for this site is generated from the tokens and the real pieces, so it cannot drift from the CSS: if the code changes, the guide changes with it. Source: Material Design · Foundations (Google)
Perceived performance · Core Web Vitals The metrics that measure how a page feels while loading and being used: when the main content appears, how long it takes to respond and how much the layout jumps while loading. Example: Every photograph’s dimensions are written into the markup so the mosaic does not jump while loading. That is a design decision, even if it looks like a coding one. Source: Web Vitals (web.dev, Google)
Registered trade mark The exclusive right over a distinctive sign for certain goods or services, which comes from registration at the relevant office: the national one in Spain or the European Union one for the whole internal market. Example: It pays to check the name is free before drawing the logo, not after printing the cards. Registration is filed by an agent or by the owner; design does not replace it. Source: Regulation (EU) 2017/1001 on the European Union trade mark

Questions.

Are UI and UX the same thing?

No. Experience is whether the person gets done what they came for; the interface is what they do it with. You can have a beautiful interface that solves the problem badly, and that is still bad design.

Does accessibility limit design?

It limits bad decisions. Minimum contrast rules out combinations many people cannot read, visible focus forces you to draw a state that existed anyway, and a minimum tap size fixes the phone for everybody. The constraint organises; it does not subtract.

Do you need a brand manual?

You need the rules to live where the building happens. A document is useful for explaining them to whoever arrives, but if the colour only lives in the PDF, by the third piece there are three different oranges. The rules go into variables, and the document describes them.

How do you check contrast?

By measuring each colour pair against the threshold the standard asks for before accepting it, and measuring again every time a palette value is touched. It is a check, not an impression.

Do you also design the screens of what you build?

Yes, and that is the advantage of it being the same person: the screen is thought through knowing what each decision costs to build, and the visual system ends up inside the product instead of stopping at the home page.

Sources.

The standards, guidelines and legal texts behind the above, with their body and their date.