GlossaryUX/UI and web design
UX/UI and web design terms, plainly defined
How websites and digital products are researched, structured, designed, tested and made accessible, from user research and wireframes to design systems and multilingual layouts. Each definition links to the service or article where we cover the subject in depth.
Research and UX strategy
How a team finds out what a product must do before anyone draws a screen.
- Product design
Product design is the discipline of defining and designing a digital product as a whole: business goals, user needs, workflows, information architecture, data and technical limits, as well as the screens. User experience and user interface (UX/UI) design is one visible part of it. The result is a validated concept, a clickable prototype and a design system that a development team can build from without guessing.
More: Product Design
- UI/UX design
UI/UX design is the work of deciding how a digital product behaves for its users (UX, user experience) and how its screens look and respond (UI, user interface). UX settles who the users are and what each of them must get done; UI turns that into screens and components developers can build, with clear hierarchy, navigation, states and accessibility. Our UI/UX design starts from $10,000 for products with accounts, roles and flows: a focused app is usually 15 to 30 screens, a multi-role product 80 or more, and prototypes are tested before development.
More: UI/UX Design
- User research
User research is the study of how real people do the work a product is meant to support, through interviews, observation, analytics, support tickets and the spreadsheets where the exceptions live. Good questions ask about the past (“show us what you did with your last order”) rather than about wishes, and in B2B the buyer and the user are often different people. Boehm and Basili estimated that 40 to 50% of software project effort goes into avoidable rework, much of which research, prototyping and testing would catch early.
More: UI/UX Design
- Customer journey map (CJM)
A customer journey map (CJM) is a diagram of the steps and decisions a person goes through on the way from first contact to an inquiry or a purchase, across channels and over time. Built from data rather than assumptions, it shows that people rarely move in a straight line: they notice a post, search for the company days later and come back weeks after that. There is no universal best journey: a luxury store may deliberately slow the customer down, while an electronics store removes every obstacle. In luxury, customers often return three or four times before making contact.
More: Why Luxury E-commerce Breaks Every Rule of Conversion Optimization
- Jobs to Be Done (JTBD)
Jobs to Be Done (JTBD) is a product design method that looks at the progress a customer is trying to make, the job they hire a product or service to do, rather than at their demographics or the features they ask for. It moves a brief from what a page should contain to what the person needs to get done. Together with Double Diamond, object-oriented UX and Atomic Design, it is one of the established methods behind our approach to e-commerce design.
- Double Diamond
The Double Diamond is a design process framework of four phases: discover and define the right problem, then develop and deliver the right solution, widening the search and narrowing it down twice. It guards against the most expensive mistake in design, a polished answer to the wrong question. Like JTBD, OOUX and Atomic Design, it formalizes starting from what the business needs its digital experience to do.
- Object-oriented UX (OOUX)
Object-oriented UX (OOUX) is a design method that starts from the real objects of a system, such as products, collections, materials, experts, locations and services, and their relationships, rather than from screens. Each object is first defined with its properties and connections, and only then is it decided how it appears on a page. Every object becomes a candidate for a page, a filter or a link, and the same object can reappear in a collection, a story, a comparison or a recommendation.
- Atomic Design
Atomic Design is Brad Frost's method of building an interface as a hierarchy of parts: atoms such as buttons and labels, then molecules, organisms, templates and pages. It makes components reusable and keeps a growing interface consistent. We apply it the other way round: start with the organism, meaning the real business and its customer journeys, and only then break it into components, so that the parts serve the whole rather than a UI kit.
- Competitor UX review
A competitor UX review is a structured study of how competing sites and apps solve the same tasks: navigation, filters, product pages, forms and checkout. Each interaction found is treated as a hypothesis to test, adapt or reject, never as something to copy, and a competitor's latest launch is not a starting point. For one pearl store we reviewed 13 jewellery sites and built a matrix of 24 ways into a catalogue; one of them, filtering by size in millimetres, was missing from all five specialist competitors.
More: The Website Design Process Most Agencies Show You Is Wrong
- Product thinking
Product thinking is the habit of connecting every design decision to the business result it should change: from a symptom such as customers abandoning a process, through workflow, information architecture and backend logic, to a specific KPI. The user sees one click, but behind it may sit customer, order, payment, inventory, CRM and accounting systems, so the user flow and the business flow are designed together. Usability is not usefulness: perfect UX will not save a product whose problem is not important enough.
More: Product Design vs UX/UI: Where Does a Digital Product Actually Begin?
- Design hypothesis
A design hypothesis is a design decision stated as an assumption that real behaviour will confirm or reject: if this changes, that measurable result should follow. Before launch every design is a hypothesis; after launch analytics, click maps and abandonment rates test it, so the team defends the hypothesis rather than the mockup. Each hypothesis gets its own analytics event and a review date six to eight weeks after launch. Making one store louder and more familiar lifted its conversion by 17%.
More: Website Design
Structure, flows and prototypes
The plans, paths and prototypes that decide how a site or app works before it gets its look.
- Information architecture
Information architecture is the structure of a website or an app: which pages and sections exist, how they are grouped and named, how navigation and internal links connect them, and where each type of content lives. It is designed before the visual design, usually as a sitemap and wireframes. Good information architecture helps visitors find what they need and helps search engines and AI systems understand the site.
More: Website Design
- Page map (site map)
A page map, or site map, is the list of all pages and templates of a website with their hierarchy and URL rules, agreed together with the wireframes before any colour appears. It fixes the scope of design and development. The number of templates, not pages, drives the price: fifty articles share one template, while the home page, catalogue, product card and checkout are four separate design problems.
More: Website Design
- User flow
A user flow is the step-by-step path a user takes to complete one task in a product, from the starting point to the result, including what happens when a step fails. Flows are drawn for every key task together with the role table and the information architecture, and approved before visual design. Fixing a UX problem at this stage takes hours; after development it takes weeks.
More: UI/UX Design
- Wireframe
A wireframe is a simplified layout of a page or screen that shows its structure, content blocks and their order without colours, fonts or images. It keeps the discussion on tasks and content rather than taste, and stops pages from looking more finished than the decisions behind them. Our first wireframes are deliberately plain, grey shapes with real labels, and every template is wireframed and approved before visual design. AI tools can now turn approved wireframes into working interfaces within hours.
More: The Website Design Process Most Agencies Show You Is Wrong
- Clickable prototype
A clickable prototype is an interactive model of a product's key screens, usually built in Figma, that lets people tap through the main flows before any code is written. Testing it with real users is cheap: a change in a prototype costs a few screens, while after the build it means rework in code and in the database. A polished prototype can still hide open questions about data sources, ownership, failures and scale. A discovery phase, two to four weeks and from $4,000 with us, ends with one.
More: The Website Design Process Most Agencies Show You Is Wrong
- Mockup
A mockup is a static, full-colour image of a screen that shows how it will look but not how it behaves. It helps agree on the visual direction once structure and flows are settled. Drawn before those decisions, a mockup is a promise the build may not keep, which is why it follows wireframes rather than replacing them. Sometimes the real thing persuades better: one pitch was won with an animated home page, with motion, video and music, instead of a static mockup.
More: The Website Design Process Most Agencies Show You Is Wrong
- UI states (empty, loading, error)
UI states are the conditions a screen can be in besides the ideal one: empty, loading, error, closed to the user's role, or crowded with thousands of records. Each state, along with the wording of its messages, should be designed in advance so that developers do not have to invent it on the last day. Screens such as an empty search result, a sold-out product, a country without delivery or a form error belong in the specification and show whether a team has thought past the happy path.
More: Product Design vs UX/UI: Where Does a Digital Product Actually Begin?
- Happy path
The happy path is the scenario in which everything goes right: the user enters valid data, the network works and every connected system answers. Demos show only the happy path, but real users leave fields empty, double-click, lose connection, open the site in another browser or come back six months later. Edge cases such as missing data, a failed payment, an unavailable CRM or a slow network are part of the product and need to be designed and tested, not left to chance.
More: The Website Design Process Most Agencies Show You Is Wrong
- Design specification
A design specification is the document that describes every page template and block of a product: its content, behaviour, states, the data it needs and the reason behind each decision. It turns a design into something a team can build and check the result against. Each template gets a short passport: why the page exists, where people come from, what they should do, where they go next and how it is measured. For one luxury store ours ran to 108 pages covering 13 templates and 61 blocks.
More: The Website Design Process Most Agencies Show You Is Wrong
- Design handoff
Design handoff is the transfer of a finished design to developers in a form they can build from: the Figma file with annotated components, spacing specifications, exported assets, the prototype, user flows and the list of states. When a client's own team builds the product, the handoff is the deliverable itself, so it includes the page map and wireframes of every template with its purpose. It is not a relay race: implementation changes things, so the designer stays in the conversation and catches differences between design and build early.
More: UI/UX Design
- Figma
Figma is a browser-based design tool in which interfaces, prototypes and design systems are created and shared, with designers, developers and clients working in the same file. It is the standard tool for website and product design and for design handoff. Our prototypes, design systems and handoff files live there, usually with two to three rounds of revisions per page. Opened too early, though, Figma starts dictating reality and produces a beautiful system that answers a question nobody asked.
More: Website Design
- Content-first design
Content-first design is an approach in which real texts, photos and data are gathered or drafted before the visual design, so that the layout is built around what the business actually has to say. Without real content a design can only be tested on placeholders. Template sites and sites generated from a prompt look alike precisely because the design came first and the content was poured in afterwards. Structure decides whether a business deserves attention; design decides whether people give it.
More: Website Design
Visual design and UI
The visual layer: systems, type, colour, space and the first impression they make.
- Design system
A design system is the shared set of rules and reusable parts behind a product's interface: colors, typography, spacing, components such as buttons and forms, and guidelines for using them, usually kept in Figma and matched in code. It keeps new screens consistent and speeds up both design and development. Without one, every new page looks slightly different from the last.
More: UI/UX Design
- Design tokens
Design tokens are the named basic values of a design system, such as colours, font sizes, spacing and corner radii, defined once and used by both designers and code. Changing a token updates every component that relies on it, so colour scales, type and spacing carry the brand logic consistently across all variants. AI tools now work at this layer as well, keeping tokens consistent, documenting components and running visual regression tests.
More: UI/UX Design
- Design system debt (design drift)
Design system debt, or design drift, is the gradual loss of visual consistency when an interface keeps changing in a hurry without a shared system: dozens of near-identical buttons, different indents, fonts and sizes. A site can look consistent at a glance and still have no real design system underneath. In one large online store, four years of rushed interface changes had eroded the original visual concept. Like technical debt, it grows quietly and is usually paid for during the next redesign.
More: The Hidden Technical Debt That Makes Website Redesigns More Expensive Than Planned
- Visual hierarchy
Visual hierarchy is the arrangement of size, weight, colour, contrast and position that decides what a visitor notices first, second and last on a page. It tells people what matters most and what to do next without making them read everything. Consistency lowers the effort of reading, while colour creates emphasis so that one action clearly matters most. When everything is emphasized, nothing is.
More: What Good Web Design Actually Does Once the Structure Is Right
- F-pattern and Z-pattern
The F-pattern and the Z-pattern are common paths of eye movement on a page: an F-shape on text-heavy pages, where people scan the top lines and the left edge, and a Z-shape on simpler layouts, from the top left across and then diagonally down. They help decide where headings, key messages and calls to action go. They are tendencies, not laws of behaviour: content, industry and the visitor's motivation all change how a page is actually read.
- Typography
Typography is the choice and arrangement of typefaces: weight, size scale, spacing, line length and hierarchy. On the web it is one of the strongest signals of quality; system fonts and framework defaults read as an absence of intent even on a well-structured site. Luxury sites usually pair a serif for names and headings with a sans-serif for the interface. On a multilingual site the typography also has to work in every script, not only in Latin.
More: Why Some Websites Look Cheap Even When They Are Well Designed
- Variable fonts
A variable font is a single font file that contains a continuous range of weights, widths or styles instead of a separate file for each. Its axes can shift smoothly with the screen size, the scroll position or the state of an element. The result is fewer files to load and more expressive typography without extra weight on the page.
- Whitespace (negative space)
Whitespace, or negative space, is the empty space between and around the elements of a page: margins, padding and the gaps between lines and blocks. It gives content room to be read and makes the important things stand out. Space exists because something was deliberately left out, so it reads as premium only when what remains is strong enough to deserve it; otherwise it simply looks empty.
More: Why Some Websites Look Cheap Even When They Are Well Designed
- Minimalism in design
Minimalism in design is the removal of everything a page does not need, so that what remains is clear and easy to act on. It is not the absence of information but the absence of unnecessary information: first understand what is necessary, then remove the rest. Minimalism that hides what people came for, such as prices, sizes or delivery terms, lowers sales. Invisible design, which lets people focus on their task rather than on the interface, is a related but different idea.
More: Design You Don't Notice: Why the Best Design Disappears
- Accent colour
An accent colour is the one bright or contrasting colour in a palette that is reserved for what needs attention: main buttons, links and key highlights. A web palette usually consists of a base, a dark, a light and one accent, plus functional colours for errors and confirmations. Used sparingly, the accent guides the eye; used everywhere, it stops meaning anything. On nine luxury sites we studied, five buy buttons were black or near-black, while the brand colour lived in small details and the photographs carried the colour.
- Above the fold (first screen)
Above the fold is the part of a web page visible without scrolling, the first screen. Within it a visitor has to understand what the business does, who it is for and what to do next. A landing page without a clear call to action on the first screen makes visitors from ads hunt for it. Social proof, such as a rating and a customer count, works best beside the main promise, not three scrolls below it.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Hero section
A hero section is the large first block of a page, usually a headline with an image or video and the main call to action. It sets the first impression and the story the rest of the page tells, so it has to match the business: a striking image can tell the wrong story, and a clinic should not put a long film before its booking link. Autoplay video hands the first impression to whichever frame happens to be playing, and one clear subject per screen is still among the strongest layouts in luxury.
More: Do You Need a Website Redesign? Start With a Usability Audit
- Dark mode
Dark mode is a colour scheme with light text on a dark background, offered as an alternative to the standard light theme and often switched on automatically from the device setting. In B2B SaaS, fintech and creative tools it is now a design-first decision: both modes are designed from the start as part of the design system rather than produced later by inverting colours. Simply inverted themes tend to break contrast, shadows and images.
- Stock photography
Stock photography is ready-made imagery licensed from photo banks rather than shot for a specific business. Generic stock makes a well-structured site feel cheaper than a simpler one with specific, real photographs, because visitors recognize the images and learn nothing about the company. On one manufacturing site, the perception changed once the placeholders were replaced with photos of real work. In architecture and construction the rule is short: renders promise, photographs prove.
More: Why Some Websites Look Cheap Even When They Are Well Designed
- Art direction
Art direction is the creative leadership that sets the visual language of a brand or project: the idea, mood, palette, composition, photography and motion, and how they serve the message. It keeps images, video and interface consistent when many people and tools produce them. With AI now generating images and video, art direction remains the human part of the work: a clear visual brief, a palette and an understanding of how motion serves the brand.
More: AI-Powered Web Design and AI Video Editing in 2025-2026
- Moodboard
A moodboard is a collage of visual references, such as images, colours, textures and typefaces, used to agree on the mood and direction of a design before work begins. It is a useful conversation tool but not a strategy. A palette chosen from a moodboard or from a founder's favourite colour, without a look at the category, is a common mistake. Heritage branding should begin with a diagnosis of the brand, and a brand voice belongs in a written document rather than on a moodboard.
- Aesthetic-usability effect (halo effect)
The aesthetic-usability effect is the tendency of people to perceive more attractive interfaces as easier to use, even when they work exactly the same. In 1995 Kurosu and Kashimura at Hitachi tested 26 ATM interface layouts that were identical in function and found the better-looking ones rated as more usable. Attractive design makes users forgive minor friction, but the same halo can hide a weak business behind good looks, which is why testing has to look past it.
- First impression (50 milliseconds)
The first impression of a website is the judgement of its visual appeal that visitors form almost instantly, before reading anything. Lindgaard and colleagues at Carleton University showed in 2006 that people judge a web page's visual appeal in about 50 milliseconds, and those ratings correlated closely with judgements made after 500 milliseconds. That first glance colours how everything else on the site is read, credibility included.
Interaction, motion and AI interfaces
How interfaces respond, move and increasingly adapt themselves with AI.
- Interaction design
Interaction design is the part of UX that defines how a product responds to people at every touchpoint: taps, swipes, hover, scrolling, typing and voice. It covers feedback, transitions, micro-interactions, haptic feedback and interface states, including states that adapt to behaviour in real time. Good interaction design makes cause and effect obvious, so users always know what has happened and what they can do next.
More: UX/UI Design in 2026: Why It Still Pays Off for Your Business
- Micro-interactions and motion
Micro-interactions are small, single-purpose responses of an interface to a user's action, such as a button that reacts to a press or a field that confirms valid input, and motion is the animation that carries them. They confirm actions and guide attention, and they are planned at the strategy stage rather than added as a finishing touch. On nine luxury sites we measured, button transitions ran from 0 to 0.5 seconds: calm comes from a still layout and few words, not from slow motion.
- 3D on websites (WebGL, three.js)
3D on websites is real-time three-dimensional graphics drawn in the browser, usually with WebGL and libraries such as three.js, for product views, interactive scenes or immersive first screens. It can make a brand memorable, but it is heavy: on phones without a strong graphics chip it slows the page down or breaks. When we tested a three.js first screen on our own site, mobile PageSpeed fell to 32; after loading the scene only where a graphics chip can draw it, with a light version for everyone else, the score reached 78.
More: 3D on a Live Site: Our three.js Experiment and What Google Saw
- AI in web design
AI in web design is the use of machine-learning tools across the design process: generating layout variations, testing colour systems, drafting copy, producing video for hero sections and checking accessibility in real time. It now works at the design system layer as well, keeping tokens consistent, documenting components and running visual regression tests. AI speeds up production and lowers its cost, while strategy and art direction stay human: someone still has to decide what the interface is for.
More: AI-Powered Web Design and AI Video Editing in 2025-2026
- Generative UI
Generative UI is an interface assembled by AI from a natural-language brief or from the user's context, rather than designed screen by screen in advance. Current platforms already generate production-ready component structures and adapt them across breakpoints. The next task for designers is to create a system from which interfaces can be recomposed, so that AI can rebuild the experience around each person while the brand and the rules stay intact.
More: AI-Powered Web Design and AI Video Editing in 2025-2026
- UX personalization
UX personalization is the adaptation of a website or app to each visitor, changing content priority, navigation and calls to action according to who they are and what they appear to want. Machine-learning systems now infer intent from behaviour, going beyond the rule-based logic and A/B testing of the 2010s. For designers, the unit of work shifts from the page and the component to context, intent and decision.
More: AI-Powered Web Design and AI Video Editing in 2025-2026
- Zero UI (screenless interfaces)
Zero UI is a design approach for interfaces without a screen, where people interact through voice, gestures or their surroundings, as with voice assistants and smart devices. With no visual hierarchy to lean on, the information architecture has to carry the whole structure and be clear enough to navigate without seeing it. It is a useful reminder that structure, not decoration, is what makes any interface usable.
Usability, conversion and testing
Ways to find where people get stuck and what turns a visit into an inquiry or a sale.
- Usability audit
A usability audit is an expert review of how easily people can do what they came for on a website or in an app: navigation, structure, forms, page speed, broken links and the points in the journey where visitors give up. It ends with a prioritized list of fixes rather than a new design, which often makes it a cheaper first step before a redesign. Our usability audit starts from $1,500. It takes one to two weeks, draws on session recordings, rage clicks and analytics, and ends with annotated screenshots and a walkthrough call.
More: Usability Audit
- Heuristic evaluation
Heuristic evaluation is an expert review of an interface against established usability principles, or heuristics, such as clear feedback, consistency, error prevention and easy recovery. Specialists go through navigation, page hierarchy, the mobile experience, load speed, conversion paths, form friction and content clarity. Combined with analytics, the review lets every finding trace back to a principle or to real visitor behaviour, which makes the list of fixes easier to trust and to prioritize.
More: Usability Audit
- Usability testing
Usability testing is watching real users try to complete real tasks on a website, in an app or in a prototype, to see where they hesitate, make mistakes or give up. It reveals problems that the team, who know the product too well, cannot see. Nielsen Norman Group found in 2000 that five users of one kind uncover about 85% of usability problems, so several small rounds with fixes in between beat one large study. A test is worth running only if it is able to fail.
More: UI/UX Design
- Heatmaps and click maps
Heatmaps and click maps are visual reports that show where visitors click, how far they scroll and where their attention stops, aggregated over many sessions. They also reveal rage clicks, repeated clicks on something that does not respond, and dead clicks on elements that are not links, in tools such as Microsoft Clarity. Heatmaps let a redesign rest on behaviour instead of opinions; they inform design judgement rather than replace it.
More: Do You Need a Website Redesign? Start With a Usability Audit
- Session recordings
Session recordings are replays of individual visits that show how a real person moved, scrolled, clicked and typed on a site. Analytics says what happened, a recording shows what a person did, and usability analysis explains why. Recordings once showed customers relying on breadcrumbs that an earlier design had removed for looks. They also often show that the interface can stay while the code underneath is replaced.
More: Do You Need a Website Redesign? Start With a Usability Audit
- UX friction
UX friction is the distance between what a person came to do and what the interface makes them do to get there. Bad friction includes broken search, unclear shipping terms and unnecessary checkout fields, and each piece of it costs conversions. Some friction is intentional, such as a payment confirmation, and in luxury the time spent examining a piece from every angle, reading about its origin or watching how it was made is what creates desire.
More: Why Luxury E-commerce Breaks Every Rule of Conversion Optimization
- Cognitive load
Cognitive load is the amount of mental effort an interface demands from a person to understand it and make a decision. Every element without a purpose, every extra option and every unclear label adds to it, and an overloaded visitor postpones the decision or leaves. The practical rule is one clear message and one primary action per screen, with consistent patterns so that people do not have to relearn the interface on each page.
- Call to action (CTA)
A call to action (CTA) is the element, usually a button or a link, that tells a visitor what to do next: request a quote, book a call, buy. Vague CTAs such as Learn More ask visitors to think harder, while specific low-risk actions such as Schedule a Free Consultation get more clicks. In luxury, Request availability or Book a private appointment replace Buy Now when a product needs inspection or advice. A CTA that disappears into the page is not subtle, it is invisible.
More: Why Your Business Isn't Getting Leads From Its Website (And How to Fix It in 2026)
- Form optimization (form friction)
Form optimization is reducing the effort a form demands so that more of the people who start it also finish it. Each extra field is a reason to abandon: name, email and one qualifying question usually beat a ten-field form, and one dental practice that cut a nine-field form to name, phone and preferred time saw completed submissions rise. The metric that matters is how many people start the form and how many submit it. In e-commerce the same problem appears as checkout friction.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Trust signals (social proof)
Trust signals are the elements that give a visitor checkable reasons to believe a business: projects, reviews, ratings, figures, certifications and client names, placed at the moment of decision. Badges alone do not create trust; claims that can be verified do. Design itself is a signal: in a Stanford Persuasive Technology Lab study of more than 4,500 people, 46.1% said visual design influenced how credible a site seemed. One firm with hundreds of Google reviews gained form submissions once those reviews appeared on its own site.
More: Why Your Business Isn't Getting Leads From Its Website (And How to Fix It in 2026)
- Sticky CTA (sticky buy button)
A sticky CTA is a call-to-action button that stays fixed on the screen while the visitor scrolls, most often the price and buy button on a mobile product page. It keeps the main action within reach on long pages; one store redesign introduced it because 76% of orders came from phones. It has to be checked together with everything else that floats: on three of nine luxury sites we studied, chat bubbles, help buttons or accessibility widgets covered the mobile buy bar.
More: We Measured Nine Luxury Brand Websites. Here Is What Their Design Gets Right
- Pop-ups and floating widgets
Pop-ups and floating widgets are elements that appear over the page content: newsletter and discount windows, cookie banners, chat bubbles and help buttons. Each may make sense on its own, but added by different teams they are rarely checked together on a 390-pixel phone screen, where they cover products and buttons. A subscription or discount window over the product blocks not only people but also AI shopping agents trying to read the page.
More: We Measured Nine Luxury Brand Websites. Here Is What Their Design Gets Right
- Perceived performance
Perceived performance is how fast a site feels to a visitor, which depends not only on load time but on what appears first, whether the layout shifts and whether the page responds at once. Speed is a UX decision: Aberdeen Group found that a one-second delay cut conversions by about 7%. A page that hesitates, jumps while loading or reveals images in stages says something about the business; in one store the price block loaded after the buy button and pushed it down, so the first click missed.
More: Why Some Websites Look Cheap Even When They Are Well Designed
Accessibility, mobile and languages
Design that works for every person, every screen and every language of the site.
- Web accessibility
Web accessibility is the practice of designing and building websites that people with disabilities, whether visual, hearing, motor or cognitive, can use, often with assistive technology such as screen readers. It belongs in design and development, not in a checklist after launch: high contrast, keyboard navigation, real headings, labelled form fields, text alternatives for images and a reduced-motion mode are good UX for everyone and help machines read the page too. For one federation site we built a dedicated mode for visually impaired visitors.
More: Website Design for Architecture Firms: What Clients Look For Before They Call
- WCAG 2.2
WCAG 2.2 (Web Content Accessibility Guidelines) is the version of the international web accessibility standard published by the W3C in October 2023, with success criteria at levels A, AA and AAA. Level AA, the usual target, asks for a contrast of at least 4.5:1 for normal text and 3:1 for large text and interface parts, and for pointer targets of at least 24 by 24 CSS pixels. Meeting it is a floor, not a ceiling: a site can pass every check and still be hard to use.
More: Website Design
- ADA website compliance
ADA website compliance means making a website usable for people with disabilities in line with the Americans with Disabilities Act, a US civil rights law. In its March 2022 guidance the US Department of Justice stated that the ADA applies to what businesses open to the public offer on the web; it sets no detailed technical rule and names WCAG as helpful guidance. Lawsuits over website accessibility are common in the US, so for American businesses accessibility is a legal question as well as a UX one.
More: UI/UX Design
- Colour contrast ratio
Colour contrast ratio is the measured difference in luminance between text or an interface element and its background, expressed from 1:1 (no contrast) to 21:1 (black on white). WCAG asks for at least 4.5:1 for normal text. Low contrast hides even the most important buttons: one luxury house had an order-by-phone button in black on #222222, about 1.3:1. A palette that fails the numbers cannot be fixed in code without changing the design, so contrast is checked when the palette is chosen.
More: We Measured Nine Luxury Brand Websites. Here Is What Their Design Gets Right
- Alt text
Alt text is a short text description of an image in the page code, read aloud by screen readers and used by search engines and AI systems to understand what the picture shows. WCAG asks for text alternatives for meaningful images, and image search brings visitors of its own. A useful alt text describes the specific image, such as “living room of a private house with a glass wall”, rather than repeating a keyword or the file name.
More: Website Design for Architecture Firms: What Clients Look For Before They Call
- Accessible authentication (WCAG 2.2)
Accessible authentication is a WCAG 2.2 requirement (level AA) that signing in must not depend on a memory or puzzle test unless an alternative is offered, so password managers and pasting must be allowed. WCAG 2.2 added related rules for forms and controls as well: users should not have to retype information they have already entered (level A), and drag actions need a single-pointer alternative (level AA). These rules help everyone, not only people with disabilities.
More: UI/UX Design
- Touch target size
Touch target size is the size of the area that responds to a tap, which can be larger than the visible icon or text. Apple's guidelines recommend 44 by 44 points by default, Android at least 48 by 48 dp, and WCAG 2.2 at least 24 by 24 CSS pixels unless targets are spaced apart. A target that is comfortable with a mouse or trackpad is often too small for a thumb, which leads to mistaps and frustration on phones.
More: UI/UX Design
- Reduced motion
Reduced motion is an operating system setting for people who are sensitive to animation, which websites can detect through the prefers-reduced-motion media query. A considerate site respects it by calming or switching off parallax, large transitions and moving scenes. On our own site, visitors with this setting get a light first screen without the 3D scene.
More: 3D on a Live Site: Our three.js Experiment and What Google Saw
- Mobile-first design
Mobile-first design is the approach of designing for phones first and then expanding the layout to tablets and desktops, instead of shrinking a desktop design. For most sites mobile is the majority experience: if 65% of visitors are on phones, designing for desktop and fixing mobile later optimizes for the minority. Thumb-reachable buttons, click-to-call and forms that need no zooming are the basics, and in a store the catalogue, filters, product page, cart and checkout are all designed for the phone first.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Responsive design (breakpoints)
Responsive design is an approach in which one website adapts its layout to the screen it is viewed on, rearranging columns, images and navigation at set widths called breakpoints for phones, tablets and desktops. It lets one codebase and one address serve every device. A responsive site is not the same as a mobile app, and a good mobile layout is designed rather than simply shrunk. AI tools can now adapt responsive structures across breakpoints automatically.
More: AI-Powered Web Design and AI Video Editing in 2025-2026
- Click-to-call
Click-to-call is a phone number on a website or in an ad that starts a call with a single tap on a mobile device. For service businesses it is one of the mobile essentials, next to thumb-reachable buttons and short forms. A phone number shown as plain text or as an image that cannot be tapped is one of the quiet ways a site loses leads at the very moment a visitor is ready to act.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Platform guidelines (iOS and Material Design)
Platform guidelines are the official design rules of mobile operating systems: Apple's Human Interface Guidelines for iOS and Google's Material Design for Android. Users expect an iOS app to behave like other iOS apps and an Android app like other Android apps, so fighting these conventions creates friction. Following them covers basics such as thumb-sized targets and important actions within thumb reach, while error and offline states still have to be designed for each product.
- Multilingual website
A multilingual website is a site that serves visitors in several languages, ideally as one system adapted to different audiences, markets and content operations rather than one design translated several times. Structure and brand stay the same, while content, layout, typography, imagery, navigation and business rules can change. Each extra market adds roughly 10 to 30% to design and development and 20 to 30% to search work, so two well-supported versions beat five poorly maintained ones. Our own site runs in English, Russian and Ukrainian, each designed separately.
More: Multilingual Website Design: What Changes Beyond Translation
- Language switcher
A language switcher is the control that lets a visitor move between the language versions of a website, ideally to the equivalent page rather than to the home page. Sites usually offer a region selector on the first visit, a default language for the main market or a version suggested by location, but visitors should always be able to change it. Google advises against automatic redirects by language and calls IP-based location unreliable: suggest a version, link the equivalents and keep the switcher visible.
More: Why Multi-Language Websites Need a Different Design Approach
- RTL layout (right to left)
RTL (right-to-left) layout is the mirrored version of a website for languages written from right to left, such as Arabic. Navigation, column order, arrows, sliders, icons and forms are flipped, while numbers, Latin brand names and product codes still run left to right, and fonts are chosen anew. It has required a separate mirrored design rather than a simple switch, which puts an Arabic version at the top of the 10 to 30% extra budget range per market.
- Text expansion
Text expansion is the growth in length when interface text is translated from English into another language. Russian and Ukrainian usually run 15 to 25% longer: “Book a Call” becomes “Записаться на звонок”, nearly twice as many characters. Buttons, menus and headings that fit perfectly in English then wrap or break, so every component should be stress-tested against the longest language before the design is approved.
More: Why Multi-Language Websites Need a Different Design Approach
- Script-specific typography (Cyrillic, Arabic)
Script-specific typography is choosing and setting type for each writing system a site uses, such as Latin, Cyrillic or Arabic, rather than assuming one font works everywhere. A font with excellent Latin letters may have weak Cyrillic, and the reverse. Each script also has its own quotation marks, dashes and comfortable line length, and Chinese, with its denser characters, needs a different line length again.
More: Why Multi-Language Websites Need a Different Design Approach
- Cultural adaptation of design
Cultural adaptation of design is adjusting a website or product to the culture of each market beyond translation: metaphors, holidays, photography, the kind of social proof that persuades and how direct the tone may be. What builds trust in one market can feel pushy or cold in another. A global design system provides the consistent framework while leaving room for each market's own content and imagery.
More: Why Multi-Language Websites Need a Different Design Approach
Website types and redesign
The kinds of websites businesses order and when to redesign, restructure or rebuild.
- Website design
Website design is the work of defining a site's structure and look in enough detail to build it: page map, wireframes of every template, key pages for desktop and mobile, a design system and the handoff to developers. Ordered on its own, it risks architecture decisions being made later by someone else. Our website design starts from $8,000; the price moves with the number of languages and markets, whether a brand identity exists, how many components and states the system covers and how ready the texts and photos are.
More: Website Design
- Landing page
A landing page is a single web page built around one offer and one action, such as a request, a booking or a purchase, usually as the destination of an ad or email campaign. Everything on it supports that one decision, with as few distractions as possible. When ads bring clicks but not leads, the landing page is often where the problem lies. Our landing pages start from $4,000.
More: Landing Page Development
- Corporate website
A corporate website is a company's main site, where it explains what it does, for whom and why it can be trusted. It suits businesses with several services or audiences and usually includes case studies, several languages and inquiries that go straight into a CRM. It is a larger project than a landing page: with us a corporate website costs $20,000 to $40,000.
- Lead generation website
A lead generation website is a site built as a business tool whose main job is to turn visitors into inquiries, calls or bookings, rather than a digital brochure. It can lose leads in three places: reach, when the traffic is wrong or too small; understanding, when visitors do not grasp the offer; and action, when the next step is unclear, proof is missing, the form is long or the phone number cannot be tapped. Each of these needs a different fix, so the diagnosis comes before the redesign.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Template website vs custom website
A template website is built on a ready-made theme or a website builder, while a custom website is designed and developed for a specific business, its structure and its goals. Templates suit idea tests, portfolios and very small local firms; a custom site is needed to compete in search, generate leads or win high-value clients, since template and prompt-generated sites make companies in one industry look alike. In Seattle in 2026, builders cost $20 to $80 a month, freelancers $1,500 to $6,000 and custom agency sites $15,000 to $50,000 or more.
- Website redesign
A website redesign is a new design, and often a new structure, for an existing site that keeps its domain, content and search authority. It is the right choice when the foundation is healthy: search visibility, a reliable CMS, a logical structure and good speed. When every change needs a developer or the platform is slow and fragile, a rebuild may be the better answer, and redesigning only because a site looks old is not a strategy. In the US a redesign typically costs $5,000 to $15,000 and takes 6 to 12 weeks.
More: Website Redesign Seattle | We Build Sites That Generate Leads
- Website restructure
A website restructure is a change to which pages a site has, why they exist, in what order they come and whether they tell visitors what to do next, without necessarily changing how the site looks. A redesign changes the look; a restructure changes whether the site works. In one cited case, a rebuild of messaging and structure lifted qualified leads by 34% in a quarter, while a visual redesign with the same positioning did not.
More: Most Companies Don't Need a New Website. They Need a New Structure.
- Case study page
A case study page tells the story of one project: the task, constraints, key decisions, scope and result, shown with plans and photographs rather than renders alone. In visual industries, before-and-after stages that explain each decision persuade best, because renders promise and photographs prove. Clients go straight to projects in their own niche, so a portfolio needs filters by project type, and each case should credit the people who actually led the work.
More: Website Design for Architecture Firms: What Clients Look For Before They Call
- Luxury e-commerce UX
Luxury e-commerce UX is the design of online stores for premium brands, where the experience is part of the product and standard conversion rules often do not apply. A luxury site may deliberately slow the visitor down and use generous empty space or unconventional navigation; breaking a convention can be the right decision. Slow transitions and video belong to the brand, but full text on materials and dimensions must be in the HTML from the first load. On nine luxury sites, six of eight buy buttons had square corners and none used the pill button of mainstream stores.
More: Why Luxury E-commerce Breaks Every Rule of Conversion Optimization
- E-commerce UX design
E-commerce UX design is the design of the digital layer of a retail business, its objects, relationships, customer journeys and decisions, not just a set of store pages. Navigation follows how customers actually shop: a jewellery house organized both by product category and by collection needs navigation that supports both. A store that sells to two audiences, such as architects and designers alongside consumers, gives each of them its own entry point.
Other topics
Glossary
Need a term explained on your own project?
Bring it to a strategic session. In two hours we look at your business as a whole and explain, in plain words, what each technical or marketing decision means for it. The session costs $500, credited toward a project started within 30 days.