UI design

In short

UI (user interface) design is the craft of giving a digital product its visible, touchable surface — layout, grid, type, colour, icons, components and their states — so that a user can see what is possible, act on it and understand the result. It sits between UX research (what to build and why) and front-end code (how it ships), and is judged on hierarchy, consistency, accessibility and fidelity to platform conventions rather than on decoration. In Indian B.Des and B.Tech design syllabi it is examined through layout and grid problems, colour-contrast and type-scale calculations, component/state documentation and critique of real screens; portfolio and placement rounds at Zoho, Freshworks, Zomato, Swiggy, Paytm, PhonePe, Razorpay, Infosys/TCS design studios, Tata Digital and design consultancies (Lollypop, Obvious, Fractal Ink) test exactly these. Government and regulated work adds hard compliance: GIGW 3.0, IS 17802, the RPwD Act 2016, the DPDP Act 2023 and the CCPA dark-pattern guidelines of 2023.

Explained

What UI design covers, and how it is structured

• Definition: the design of the interface layer — everything the user perceives (visual, textual, auditory, haptic) and everything they can operate (controls, gestures, inputs).
• UI vs UX: UX is the whole experience including research, flows and service; UI is the concrete rendered artefact. A usable flow can still fail on an illegible UI, and a beautiful UI cannot rescue a wrong flow.
• Types of interface: GUI (graphical, pointer/touch), form-based, conversational (chatbot, IVR, voice), gesture/touch, TUI (tangible user interface), VUI (voice), and command-line. Most Indian product work is GUI + form-heavy with conversational add-ons.
• Levels of granularity (Brad Frost's atomic design): atoms (button, label, input) → molecules (search field = input + button) → organisms (header, product card grid) → templates (page skeleton) → pages (real content). Universities examine this as a classification question.
• Deliverables: wireframe (structure, greyscale) → mockup/visual design (high fidelity) → specification/redlines → component library and tokens → handoff notes for developers.
• Core design principles (examined almost every year):
  • Hierarchy — size, weight, colour, position and whitespace tell the eye what to read first.
  • Consistency — the same control looks and behaves the same everywhere (internal consistency) and like the platform (external consistency).
  • Affordance and signifier — the property that makes an action possible, and the visible cue that announces it (a raised button, an underline on a link).
  • Feedback — every action gets a visible response within ~100 ms; longer waits need a loader or progress indicator.
  • Constraint and error prevention — disable, mask, limit and validate rather than scold afterwards.
  • Recognition over recall — show options instead of making the user remember them.
  • Mapping — control layout mirrors the real-world arrangement it controls.
• Gestalt principles used daily: proximity (related items close), similarity, common region (a card), closure, continuity, figure–ground. Proximity and common region do most of the work in grouping form fields.

Grid, layout and spacing

• Grid anatomy: columns (content), gutters (space between columns), margins (outer space), rows/baseline, and the container width.
• Grid types: manuscript (single block, long reading), column grid (most web layouts, usually 12 columns because 12 divides by 2, 3, 4 and 6), modular (columns + rows, for dashboards and catalogues), hierarchical (editorial, irregular), and baseline grid for vertical rhythm.
• Material Design responsive grid: 4 columns on compact (phone), 8 on medium (tablet), 12 on expanded (desktop); margins and gutters commonly 16 dp on phone, 24 dp on larger screens.
• 8-point grid: every dimension, padding and margin is a multiple of 8 (4 allowed as a half-step for icons and tight text spacing). Reason: common screen densities (1×, 1.5×, 2×, 3×) scale multiples of 8 to whole pixels, so nothing lands on a half-pixel and blurs.
• Spacing scale: a fixed ladder such as 4, 8, 12, 16, 24, 32, 48, 64 — used instead of arbitrary values so the whole team spaces identically.
• Whitespace: micro (between letters, lines, fields) and macro (between sections). Dense Indian commerce UIs (IRCTC, Flipkart, Zomato) trade whitespace for information density deliberately — it is a decision, not an error, but it must preserve grouping.
• Layout laws: F-pattern scanning for text-heavy pages, Z-pattern for sparse landing pages, and the rule that primary actions sit in the thumb zone (bottom third) on phones.
• Safe areas: notches, punch-holes, status bar, home indicator and the on-screen keyboard reduce usable height; never place controls under them.

Typography and colour for screens

• Type anatomy and metrics: x-height (drives apparent size), cap height, ascender/descender, counters, baseline, em box; point/px/dp as the measured unit.
• Typeface choice: sans-serif for UI at small sizes (Inter, Roboto, SF Pro, Noto Sans); serif usually for long-form reading or brand voice. Indic scripts (Devanagari, Tamil, Bengali, Malayalam, Telugu, Kannada, Gujarati, Odia, Gurmukhi) need fonts with proper conjunct/matra support — Noto Sans/Serif Devanagari, Mukta, Hind, Baloo; Devanagari needs more line-height than Latin because matras sit above and below the baseline.
• Localisation: the Constitution's Eighth Schedule lists 22 scheduled languages; government and consumer apps (UMANG, DigiLocker, BHIM/UPI apps) commonly ship 10–15, so UI layouts must tolerate 30–40% text expansion and never bake text into images.
• Type scale: a geometric ladder from a base size using a ratio (1.067 minor second, 1.125 major second, 1.2 minor third, 1.25 major third, 1.333 perfect fourth, 1.618 golden). Base body text is 16 px/sp on web and mobile; 14 sp for secondary text; 12 sp minimum for captions.
• Readability rules: line-height 1.4–1.6× for body; measure (line length) 45–75 characters; sentence case for labels; avoid all-caps for anything longer than a short label; left-align body text, never justify on screen.
• Hierarchy with type: vary size, weight and colour — but change only one or two at a time; use at most 2 typefaces and 4–6 sizes in a screen.
• Colour fundamentals: hue, saturation, lightness/value; HSL and HSB are easier to reason about than hex; sRGB is the screen gamut; additive mixing (RGB) on screen versus subtractive (CMYK) in print.
• Colour roles in a UI palette: primary (brand action), secondary, surface/background, on-surface (text/icon), error, warning, success, info, plus a neutral ramp (usually 9–12 steps). Material 3 adds tonal palettes with explicit "on-" pairs so contrast is guaranteed.
• Semantic colour caution: red/green alone cannot carry meaning — roughly 8% of Indian men have some form of colour-vision deficiency; pair colour with an icon, label or pattern.
• Dark mode: do not simply invert. Use dark grey surfaces (not pure black) with elevation shown by lighter surfaces, reduce saturated colours, and re-check contrast — a palette that passes on white usually fails on dark.

Components, states and interaction patterns

• A component is specified by its states, not just its default look. Minimum set: default (enabled), hover, focus (visible keyboard ring), pressed/active, selected, disabled, loading, error, empty.
• Buttons: one primary (filled) per view, secondary (outlined/tonal), tertiary (text), destructive (error colour + confirmation). Label with a verb ("Pay ₹499", not "Submit").
• Inputs and forms: persistent label above the field (floating labels fail when prefilled; placeholder-only labels disappear on typing); helper text below; inline validation on blur, not on every keystroke; show input masks for PAN, Aadhaar, GSTIN, IFSC, PIN code and 10-digit mobile numbers; default the mobile keyboard type (numeric for OTP, email for email).
• Selection controls: checkbox (multi-select, independent), radio (single choice from a visible small set), switch (immediate on/off setting, no Save), dropdown (single choice, 7+ options), segmented control (2–5 exclusive options).
• Navigation patterns: bottom navigation (3–5 top-level destinations on mobile), tabs (sibling content), navigation drawer (many or secondary destinations), breadcrumbs (deep hierarchy on web), search (large catalogues).
• Feedback and messaging: toast/snackbar (transient, non-blocking), banner (persistent, dismissible), modal dialog (blocking, needs a decision), inline error (field level), skeleton/shimmer loader (known layout), spinner (unknown duration), progress bar (measurable).
• Content states: empty (first use — explain and give an action), partial, loaded, error, offline. Indian network reality (2G/3G fallback, patchy 4G) makes offline and slow states mandatory, not optional.
• Data display: tables (sortable, sticky header, right-align numbers, ₹ aligned), lists, cards, charts. Numbers in Indian UIs use the lakh/crore grouping (₹12,34,567) where the audience is domestic — state the convention in the spec.
• Microinteractions: trigger → rules → feedback → loops/modes; keep transitions 150–300 ms, use ease-out for entry and ease-in for exit, and respect the "reduce motion" setting.
• Iconography: one grid (commonly 24×24 dp with a 20 dp live area), consistent stroke weight (1.5–2 px), consistent corner radius; always pair ambiguous icons with a text label; never use an icon alone for a destructive action.

Platform conventions, responsive and adaptive design

• Android — Material Design 3: units are dp (density-independent pixels) for layout and sp (scale-independent pixels) for text, so text respects the user's font-size setting. Baseline density 160 dpi = 1 dp = 1 px. Minimum touch target 48×48 dp. Back is a system gesture; FAB for the single most important action.
• iOS — Human Interface Guidelines: units are pt (1 pt = 1 px at 1×, 2× on Retina, 3× on Max devices). Minimum touch target 44×44 pt; navigation bar with back-title, tab bar at the bottom, Dynamic Type support, no bespoke back buttons.
• Web: CSS px (reference pixel), with rem for type and spacing so the root size scales; respect browser zoom to 200%.
• Responsive vs adaptive: responsive = one fluid layout that reflows continuously (fluid grids, flexible media, media queries); adaptive = a few fixed layouts chosen at breakpoints. Responsive is the default; adaptive suits complex dashboards.
• Window size classes (Material 3): compact <600 dp, medium 600–839 dp, expanded 840–1199 dp, large 1200–1599 dp, extra-large ≥1600 dp. Breakpoints should follow content, not device model names.
• Mobile-first: design the smallest layout first and add columns as width allows; India is majority mobile-first by traffic, so this is the realistic default.
• Platform-honest design: share the brand, not the widgets — an Android user expects Material switches and iOS users expect iOS ones; forcing one look on both is a classic critique point.

Design systems, tokens and handoff

• Design system = design principles + style guide (colour, type, spacing, motion, voice) + component library (design + coded) + usage guidance + governance (who approves changes, how versions are released).
• Why it matters: consistency at scale, faster delivery, single place to fix accessibility. Known examples: Material 3 (Google), Human Interface Guidelines (Apple), Carbon (IBM), Polaris (Shopify), Fluent (Microsoft), and Indian ones such as Zoho's and Freshworks' internal systems and the Government of India's web/UI guidance that accompanies GIGW.
• Design tokens: named variables for values — color.text.primary, space.4, radius.md, font.size.body. Three tiers: primitive (blue-600) → semantic (color.action.primary) → component (button.bg.default). Tokens let one change propagate to design and code, and make theming (light/dark, white-label) mechanical.
• Naming and documentation: every component needs anatomy, variants, states, sizes, do/don't, accessibility notes and content rules.
• Handoff: specification of spacing, type, colour tokens, states, breakpoints, interaction and empty/error copy; version-controlled; a developer should not need to measure the mockup.
• Quality checks before shipping: contrast audit, keyboard-only pass, screen-reader label pass, 200% zoom, longest-string localisation, slow-network and offline states, and a dark-mode pass.

Accessibility, Indian standards, law and ethics

• WCAG 2.2 (W3C) four principles — POUR: Perceivable, Operable, Understandable, Robust; conformance levels A, AA, AAA. AA is the normal target.
• Key WCAG criteria a UI designer owns: text contrast ≥ 4.5:1 (≥ 3:1 for large text, i.e. ≥ 18 pt / 14 pt bold, and for UI-component and graphical boundaries); focus visible; target size (minimum) 24×24 CSS px under 2.2, with 44×44 as the enhanced level — platform guidelines (48 dp / 44 pt) are stricter and are what to design to; no information by colour alone; text resizable to 200%; reflow at 320 px without two-dimensional scrolling; labels and instructions present; consistent help; accessible authentication (do not force a cognitive puzzle for login).
• Indian standards and law:
  • GIGW 3.0 (Guidelines for Indian Government Websites, Apps and Portals, issued by NIC/MeitY, 2023 edition) — applies to government websites and apps and is built on WCAG; compliance is certified and audited.
  • IS 17802 (Parts 1 and 2), "Accessibility for ICT products and services" — the Indian Standard, aligned with the European EN 301 549 approach; cited in government procurement.
  • Rights of Persons with Disabilities Act, 2016 — Section 40 and the RPwD Rules require accessibility standards for ICT and services; the Accessible India Campaign (Sugamya Bharat Abhiyan) covers the web/ICT pillar.
  • DPDP Act 2023 with the DPDP Rules, 2025 (notified November 2025; most notice and consent obligations phase in over the following 18 months) — the consent notice is a UI artefact: itemised, in clear plain language, available in English or any language listed in the Eighth Schedule, with an equally easy withdraw-consent control. "Accept all" must not be easier than "manage".
  • CCPA Guidelines for Prevention and Regulation of Dark Patterns, 2023 (under the Consumer Protection Act, 2019) — name and prohibit 13 practices including false urgency, basket sneaking, confirm-shaming, forced action, nagging, subscription traps, interface interference, bait and switch, drip pricing, disguised advertisement, SaaS billing and rogue malware. These are directly design-level offences.
  • GST display: prices shown to consumers must be inclusive of tax as applicable; since 22 September 2025 the slabs are 5%, 18% and 40% (with nil/exempt categories) — a checkout UI that hard-codes old slab labels is a defect.
  • Payments: RBI/NPCI UPI and card-tokenisation rules shape the payment UI (mandated confirmation screens, no storage of card data in the app, OTP/additional-factor flows); follow the current circulars as they are revised often.
• Advantages of disciplined UI design: fewer support tickets, higher conversion, cheaper development (reuse), legally defensible accessibility, faster onboarding of new designers.
• Limitations: a design system constrains novelty and can ossify; heavy component libraries can bloat load time; guidelines cannot substitute for testing with real users (covered in the UX research topic); accessibility conformance is a floor, not proof of usability.

Key points

• UI design — the perceivable, operable surface of a product: layout, grid, type, colour, components, states, motion.
• Hierarchy — controlled by size, weight, colour, position and whitespace; the user must know where to look first without being told.
• Affordance vs signifier — affordance is the possibility of action; the signifier is the visible cue that advertises it.
• 8-point grid — all spacing in multiples of 8 (4 as half-step) so values stay whole pixels at 1×, 1.5×, 2× and 3× densities.
• 12-column grid — divides cleanly by 2, 3, 4 and 6; column width = (W − (n−1)g − 2m)/n.
• dp and sp — Android's density-independent layout unit and font unit; 1 dp = 1 px at 160 dpi; sp honours the user's font setting, so use sp for all text.
• Touch target — 48×48 dp (Material) and 44×44 pt (Apple); WCAG 2.2 minimum is 24×24 CSS px, enhanced 44×44.
• Type scale — geometric ladder from a 16 px base using ratios 1.2, 1.25, 1.333 or 1.618; limit to 4–6 sizes.
• Measure — 45–75 characters per line; line-height 1.4–1.6× for body text; more for Devanagari and other Indic scripts.
• Contrast ratio — (L1+0.05)/(L2+0.05); ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI boundaries.
• Never colour alone — pair with icon, label or shape; ~8% of Indian men have colour-vision deficiency.
• Component states — default, hover, focus, pressed, selected, disabled, loading, error, empty; a component without states is unspecified.
• Atomic design — atoms → molecules → organisms → templates → pages.
• Design tokens — primitive → semantic → component layers; one source of truth shared by design and code.
• Responsive vs adaptive — fluid continuous reflow versus a few fixed layouts switched at breakpoints.
• Window size classes — compact <600 dp, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥1600.
• Indian compliance set — GIGW 3.0, IS 17802, RPwD Act 2016 s.40, DPDP Act 2023 consent UI, CCPA dark-pattern guidelines 2023 (13 named practices).
• Fitts's and Hick's laws — bigger and nearer targets are faster to hit; choice time grows with log₂(n+1), so group long lists rather than paging them.

Formulas and examples

Example 1 — Laying out a 12-column desktop grid. A web page has container W = 1140 px, n = 12, gutter g = 24 px, outer margin m = 0 (margins handled outside the container).

• Total gutters = (12 − 1) × 24 = 264 px.
• Column space = 1140 − 264 = 876 px → c = 876/12 = 73 px.
• A product card spanning 4 columns: S₄ = 4(73) + 3(24) = 292 + 72 = 364 px.
• A sidebar spanning 3 columns: S₃ = 3(73) + 2(24) = 219 + 48 = 267 px; main area 9 columns = 9(73) + 8(24) = 657 + 192 = 849 px. Check: 267 + 24 + 849 = 1140 px ✓.

Example 2 — Density conversion and asset export. A 48 dp primary button with a 24 dp icon must ship for Android.

• xhdpi (320 dpi, s = 2): button = 48 × 2 = 96 px, icon = 48 px.
• xxhdpi (480 dpi, s = 3): button = 48 × 3 = 144 px, icon = 72 px.
• xxxhdpi (640 dpi, s = 4): button = 192 px, icon = 96 px.
• A 1 dp divider at xxhdpi = 3 px (whole pixel ✓); a 1.5 dp divider would be 4.5 px — blurry, which is why the spacing scale sticks to 4 and 8.

Example 3 — Type scale and measure. Base S₀ = 16 px, ratio r = 1.25 (major third), line-height multiplier 1.5 for body.

• Measure check for body text in a 600 px text column: 600 / (0.5 × 16) = 600/8 = 75 characters — at the top of the 45–75 band, so 600 px is the practical maximum width for 16 px body text.
• If the same 16 px text ran the full 849 px main area: 849/8 ≈ 106 characters — too long; either widen the gutters, drop to a 7-column text measure, or raise the size.

Example 4 — Contrast ratio decisions. (a) Grey text #767676 on white #FFFFFF.

• White: all channels 1.0 → L₁ = 1.0000.
• #767676: c = 118/255 = 0.4627 (>0.03928) → C = ((0.4627+0.055)/1.055)^2.4 = (0.4908)^2.4 = 0.1813, same for R, G, B → L₂ = 0.2126(0.1813) + 0.7152(0.1813) + 0.0722(0.1813) = 0.1813.
• CR = (1.0 + 0.05)/(0.1813 + 0.05) = 1.05/0.2313 = 4.54:1 → passes AA for normal text (≥4.5), fails AAA (≥7).

(b) Saffron #FF9933 as a button fill.

• R = 255 → 1.0000; G = 153 → c = 0.6, C = (0.655/1.055)^2.4 = (0.6209)^2.4 = 0.3184; B = 51 → c = 0.2, C = (0.255/1.055)^2.4 = (0.2417)^2.4 = 0.0332.
• L = 0.2126(1.0) + 0.7152(0.3184) + 0.0722(0.0332) = 0.2126 + 0.2277 + 0.0024 = 0.4427.
• White label: CR = 1.05/0.4927 = 2.13:1 → fails even the 3:1 large-text floor.
• Black label: CR = 0.4927/0.05 = 9.85:1 → passes AAA.
• Decision: use near-black text on saffron, or darken the fill substantially if white text is a brand requirement.

Example 5 — Target size and menu structure. (a) Fitts's law with a = 0.05 s, b = 0.10 s/bit, pointer 200 px away.

• 48 px target: 2D/W = 400/48 = 8.333; log₂ 8.333 = 3.059 → MT = 0.05 + 0.10(3.059) = 0.356 s.
• 24 px target: 2D/W = 400/24 = 16.667; log₂ 16.667 = 4.059 → MT = 0.456 s.
• Halving the target costs 100 ms per tap — about 1 bit of difficulty; over a 10-tap checkout that is a full second.

(b) Hick's law with a = 0.20 s, b = 0.15 s/bit for a settings menu.

• One flat list of 8 items: RT = 0.20 + 0.15·log₂9 = 0.20 + 0.15(3.170) = 0.675 s.
• Split into 2 screens of 4: each 0.20 + 0.15·log₂5 = 0.20 + 0.15(2.322) = 0.548 s; two decisions = 1.096 s.
• So splitting a short list into two levels is *slower*; hierarchy pays only when n is large (and for scannability, not speed).

Where it is used

• Consumer apps and commerce: Flipkart, Myntra, Zomato, Swiggy, Nykaa, Meesho — dense catalogue UIs, price and offer hierarchy, ₹ formatting in lakh/crore grouping, low-bandwidth and offline states.
• Fintech and payments: PhonePe, Paytm, Razorpay, Groww, Zerodha, bank apps — UPI/OTP flows under RBI and NPCI rules, amount-confirmation screens, error states where a wrong UI decision costs real money.
• SaaS and enterprise product teams: Zoho, Freshworks, Postman, Chargebee, Infosys/TCS/Wipro design studios — design-system and component-library work, tokens, documentation, accessibility audits.
• Government and public digital infrastructure: UMANG, DigiLocker, IRCTC, GSTN, income-tax e-filing, Aadhaar services, state portals — GIGW 3.0 and IS 17802 compliance, multilingual UI across Eighth Schedule languages, assisted/low-literacy design.
• Job roles: UI designer, product designer, visual/interaction designer, design-system designer, design technologist, accessibility specialist; in agencies, UI design is bundled with UX and front-end review.
• Beyond screens: automotive HMI (Tata Motors, Mahindra, TVS clusters), smart-TV and set-top interfaces, kiosks and ATMs, medical and industrial HMI panels, and IoT companion apps.

Interview questions

• Q: What is the difference between UI and UX design? A: UX defines what the product should do and how the journey works, based on research; UI designs the concrete interface — layout, type, colour, components and states — that renders that journey. They overlap but are judged on different evidence.
• Q: Why is an 8-point grid used instead of arbitrary spacing? A: Multiples of 8 (and 4) scale to whole pixels at 1×, 1.5×, 2× and 3× densities, so nothing renders on a half-pixel, and a fixed ladder removes guesswork across a team.
• Q: What is the difference between dp, sp and px? A: px is a physical pixel; dp is a density-independent layout unit where 1 dp = 1 px at 160 dpi; sp is like dp but also scales with the user's font-size setting, so all text should be in sp.
• Q: What minimum contrast ratio does body text need and how is it computed? A: 4.5:1 under WCAG AA (3:1 for large text and UI boundaries), computed as (L₁+0.05)/(L₂+0.05) from sRGB relative luminances.
• Q: How do you make a state visible to someone who cannot distinguish red from green? A: Never rely on hue alone — add an icon, text label, shape or pattern, and ensure the element still meets the contrast requirement in greyscale.
• Q: What states must a button specification contain? A: Default, hover, focus-visible, pressed, selected (if applicable), disabled and loading — plus the token, size and spacing values for each.
• Q: When would you use a radio group, a dropdown and a segmented control? A: Radios for one choice from a small visible set, a dropdown when the options are many (roughly 7+) or space-constrained, and a segmented control for 2–5 exclusive options that benefit from always being visible.
• Q: What is a design token and why not just use hex codes in the file? A: A token is a named variable (e.g. color.action.primary) with primitive, semantic and component tiers; it gives design and code one source of truth, makes theming and dark mode mechanical and makes a single fix propagate everywhere.
• Q: A placeholder-as-label form looks cleaner. Why is it wrong? A: The label disappears once the user types or the field is prefilled, destroying recall, failing screen-reader labelling and making errors hard to correct; keep a persistent visible label.
• Q: What Indian rules constrain UI design directly? A: GIGW 3.0 and IS 17802 for government/ICT accessibility, the RPwD Act 2016 (s.40) behind them, the DPDP Act 2023 for consent-notice and withdrawal design, and the CCPA dark-pattern guidelines of 2023 which prohibit 13 named interface practices.
• Q: Give an example of a dark pattern and the honest alternative. A: "Confirm-shaming" ("No thanks, I don't want to save money") — the honest alternative is a neutral, equally prominent decline control; under the CCPA 2023 guidelines the shaming version is prohibited.
• Q: Why not reuse the exact same UI on Android and iOS? A: Users expect platform-native controls, navigation and gestures (back gesture and Material widgets versus iOS tab bar and back-title); share the brand and content model, adapt the components.
• Q: How does Fitts's law change your button sizing? A: Movement time rises with log₂(2D/W), so shrinking a target or placing it far from the thumb costs measurable time — hence 48 dp minimum targets and primary actions in the bottom thumb zone on phones.

Common mistakes

• Designing only the happy path — no empty, loading, error, offline or long-content states, so the build has to invent them.
• Picking colours for looks and checking contrast later (or never); brand saffron/yellow/light-green fills with white text almost always fail.
• Using arbitrary spacing (13, 17, 22 px) and arbitrary font sizes instead of a spacing ladder and a type scale, then wondering why screens look inconsistent.
• Setting text in px/dp instead of sp or rem, which breaks the user's font-size setting and 200% zoom.
• Ignoring text expansion — fixed-width buttons and tabs that break in Hindi, Tamil or Malayalam, or text baked into images so it cannot be translated.
• Confusing icon-only toolbars for elegance: unlabelled icons are guessed wrongly, and a destructive icon with no label is a defect.
• Treating a mockup as the deliverable — no redlines, tokens, variants or states, so the developer measures pixels off a screenshot.
• Quoting accessibility conformance as proof of usability, or claiming "WCAG compliant" without naming the version and level (e.g. WCAG 2.2 Level AA).

Related topics

UX research and usability · Figma and prototyping · Branding and communication design · Design software: Adobe tools · Information architecture and interaction design · Front-end implementation and design handoff