# 01 — Tubik: “UX Design: How to Make User Interface Readable”

- **Source:** https://tubikstudio.com/blog/ux-design-readable-user-interface/
- **Captured:** 2026-07-11
- **Surface studied:** Complete article page at 1440×1000 and 390×844
- **Reading archetype:** Design-education article with a portfolio/editorial shell
- **Responsive classification:** Recomposed

## Visual references

- [Desktop — full-page overview strip](../assets/references/01-tubik-readable-ui/desktop-full.png)
- [Desktop — first viewport](../assets/references/01-tubik-readable-ui/desktop-hero.png)
- [Desktop — readable mid-article viewport](../assets/references/01-tubik-readable-ui/desktop-body.png)
- [Mobile — full-page overview strip](../assets/references/01-tubik-readable-ui/mobile-full.png)
- [Mobile — first viewport](../assets/references/01-tubik-readable-ui/mobile-hero.png)
- [Mobile — readable mid-article viewport](../assets/references/01-tubik-readable-ui/mobile-body.png)

The full-page files are deliberately used as pacing/anatomy overviews; use the hero and body viewport captures for typographic detail.

## Evidence note

- **Observation:** The live page was inspected with a structural UX audit, computed styles, media inventory, and desktop/mobile screenshots.
- **Observation:** Tubik’s legacy lazy loader initially exposed 1×1 placeholders to the full-page capture. The existing `data-src` values were loaded before the final screenshots so the saved evidence shows the article’s intended images.
- **Inference:** Comments about reading comfort, hierarchy, and transferability are design judgments grounded in those captures and measurements, not claims from Tubik.

## First impression

- **Observation:** The opening behaves like a clean design-studio poster: fixed global navigation, a large serif title, compact taxonomy, a plainspoken deck, author/share utilities, then a colorful hero illustration.
- **Observation:** Almost every surface is black, white, or gray; the article’s examples provide most of the color. A violet contact link is the one persistent interface accent.
- **Inference:** This restraint makes the work samples feel like evidence rather than decoration. The page says “studio expertise” without wrapping every lesson in a card.
- **Inference:** The unusually large desktop measure feels confident and spacious, but it sometimes prioritizes portfolio scale over the tighter measure usually preferred for sustained reading.

## Article anatomy, in order

1. **Fixed studio/blog header.** Tubik mark, back-to-blog affordance, search, browse, contact, and a second row of topic links.
2. **Article identity.** Taxonomy labels (“Processes and Tools”, “UI/UX”), H1, explanatory deck, author identity, and share controls.
3. **Hero illustration.** A high-color editorial illustration interrupts the monochrome shell before the first paragraph.
4. **Narrative setup.** Several short paragraphs establish the difference between an interface that looks polished and one that reads comfortably.
5. **Core conceptual section.** “Legibility vs. Readability” defines the two terms, then introduces a large visual example.
6. **Typography chapter.** One H2 contains five numbered H3 lessons: size, line length, line height, weight/contrast, and restrained font choice.
7. **Visual hierarchy chapter.** Scanning behavior is explained with lists, an embedded Vimeo example, and captions.
8. **Structure chapter.** Numbers, lists, and negative space become separate sub-sections supported by project screenshots.
9. **Writing, contrast, accessibility, and personalization chapters.** The article widens from typography into interface language and user control.
10. **Closing test and recommended reading.** A concise conclusion is followed by related links.
11. **Utility tail.** Share row, newsletter signup, related case studies, tags, archives/categories, collaboration prompt, and the studio footer.

## Desktop behavior

- **Observation:** The page is built around a 1170px container centered in a 1440px viewport. The common article paragraphs and H2/H3 headings are 900px wide with 120px side margins inside that container.
- **Observation:** The H1 occupies 1054px and is allowed to break naturally across two lines. The 684px deck is much narrower, producing a useful funnel from display scale to reading scale.
- **Observation:** Body text measures 20px with a 35px line-height. Paragraphs use 20px bottom spacing; major inline images use much larger vertical gaps, commonly around 75–95px.
- **Observation:** Article images can expand to the 1140px content width, so evidence periodically breaks out from the 900px prose measure.
- **Observation:** The fixed header is 89px tall and retains broad navigation throughout the read. The full page measured about 23,795 CSS pixels after the intended media was loaded.
- **Inference:** The alternating 900px prose / 1140px media rhythm is the page’s main pacing mechanism. It lets a long technical explainer breathe without inventing ornamental section treatments.

## Mobile adaptation

- **Observation:** The article container becomes 390px wide with 15px gutters; the effective prose and image width is 360px.
- **Observation:** The H1 drops from 72/82px to 38/41.8px. Body text drops from 20/35px to 16/24px. The deck drops from 24/35px to 16/24px.
- **Observation:** H2 remains assertive at 38px, but its line-height opens to about 42px. H3 steps down only slightly, from 30px to 28px, so sub-sections still act as strong restart points.
- **Observation:** The header becomes a 60px mobile bar. Search and browse remain icon-led, while the topic list becomes a horizontally constrained row beneath it.
- **Observation:** Share controls move ahead of the author in the mobile first viewport. The desktop’s split utility alignment becomes a vertical reading sequence: deck → share → author → image.
- **Observation:** The wide evidence images become single-column and edge-aligned to the 360px content measure; there is no miniature side-by-side grid to decode.
- **Inference:** This is more than stacking. The hierarchy is re-authored: utility order changes, type ratios tighten, and media loses its desktop breakout behavior.

## Typography system

- **Observation:** Display headings use `TWKGhost-Regular`; paragraph and most UI/article headings use `TWKLausannePan-350`; Gilroy appears in secondary site utilities.
- **Observation:** Desktop H1: 72px / 82.08px, weight 400. Desktop H2: 38px / 38px, weight 500, `-0.38px` tracking. Desktop body: 20px / 35px, weight 350.
- **Observation:** Mobile H1: 38px / 41.8px. Mobile H2: 38px / 42.18px. Mobile body: 16px / 24px.
- **Inference:** The Ghost/Lausanne contrast is doing real semantic work: the serif-like display face marks major conceptual turns; the neutral sans handles endurance and instruction.
- **Inference:** A 900px body column at 20px is likely longer than the common 65–75 character recommendation for continuous reading. It works better for scanning than for readers who move linearly through every sentence.

## Color and imagery

- **Observation:** Primary surfaces are `#ffffff`; primary text is `#000000`; secondary text commonly resolves to `#3a3a3a`, `#999999`, or `#777777` depending on breakpoint and utility.
- **Observation:** Violet (`rgb(76, 50, 255)`) is used sparingly as a contact/accent color.
- **Observation:** The page contains 22 image elements plus a hero background image and an embedded Vimeo frame. Eleven images advertise native lazy loading; additional images use a legacy lazy-loader.
- **Observation:** Imagery is mostly product/UI work, not generic lifestyle photography. Captions translate each artifact back into the lesson being taught.
- **Inference:** The best transferable move is “neutral shell, saturated evidence.” It gives an educational article visual energy without tinting every section background.

## Navigation, progress, sharing, and related content

- **Observation:** The fixed site header keeps global escape routes visible. It does not expose article-level progress, a sticky section outline, or a visible “you are here” state.
- **Observation:** Share actions appear beside the author area on desktop and before the author on mobile. A copy-link action reappears near the article’s end.
- **Observation:** “Recommended Reading” transitions into a substantial discovery tail: newsletter signup, four related case-study cards, tag/archive/category lists, and a collaboration CTA.
- **Inference:** The rich tail supports studio discovery and lead generation, but it also makes the end of the article feel much longer than the editorial conclusion.

## Interaction and motion

- **Observation:** No content is gated behind entrance animation and no scroll choreography was observed.
- **Observation:** The fixed header uses 300ms background/transform transitions. Navigation label swaps use approximately 500ms opacity/bottom transitions; many links use 300ms hover transitions.
- **Inference:** Motion is correctly subordinate to reading. The article’s pacing comes from composition and media, not fade-on-scroll repetition.

## Accessibility and performance concerns

- **Observation:** None of the 22 image elements lacked an `alt` attribute, although five had empty alt text. Several empty values belong to duplicate/hidden brand assets, but not every empty value could be confirmed decorative.
- **Observation:** The heading inventory includes H4 utility labels such as “Tags” and “Archives” after H2-level article content. That creates skipped levels in parts of the page outline.
- **Observation:** The live DOM contained 1,068 anchors, including many hidden/global-menu links; six anchors had neither visible text nor an `aria-label`. The visible interactive snapshot was far smaller, so the count should not be read as 1,068 simultaneous choices.
- **Observation:** Several top-level header links measured roughly 39px high on desktop, below a 44px touch-target guideline.
- **Observation:** The page sensibly defers much of its media, but the mix of modern and legacy lazy-loading produced placeholders until triggered in the capture environment.
- **Inference:** A modern `loading="lazy"`/`srcset` path with reserved aspect-ratio boxes would be simpler and more predictable than the current mixed loader.

## Transferable patterns

1. **Funnel the opening.** Let the title be broad, the deck narrower, then settle into a stable prose measure.
2. **Use media as chapter punctuation.** Break out images wider than text only when they carry evidence the prose cannot.
3. **Keep conceptual hierarchy literal.** H2s name chapters; numbered H3s make a dense typography section easy to resume.
4. **Put utility after comprehension.** The main article avoids in-text conversion interruptions; the heavier commercial/discovery system begins after the lesson.
5. **Recompose mobile utilities.** Reorder share/author/meta by reading priority instead of preserving desktop alignment in a vertical stack.

## What not to copy

- Do not copy the 900px desktop prose width without testing real line length in the chosen body face.
- Do not inherit the enormous hidden-link/global-menu DOM; preserve the simple visible header without shipping all navigation states at once.
- Do not reproduce the mixed legacy lazy-loading behavior.
- Do not let the discovery tail overpower the actual ending. Add a clear editorial stop before newsletter, related content, and footer taxonomy.
- Do not mimic Tubik’s fonts, logo, illustration language, or violet signature; borrow the hierarchy and breakout logic.

## Implementation notes

- Use a centered outer container near `max-width: 1170px`, a prose token near `max-width: 900px`, and a media token near `max-width: 1140px`; tune the prose token by actual `ch`, not pixels alone.
- Model type as roles: display H1, chapter H2, instructional H3, endurance body, utility label. Avoid one global fluid scale for all headings.
- At a mobile breakpoint, explicitly reorder meta/share/author with grid areas or flex `order`; do not rely on accidental source wrapping.
- Reserve image aspect ratios and use responsive `srcset`/`sizes`. Keep captions in the prose measure even when the image breaks out.
- Add `prefers-reduced-motion` handling for header and label transitions, even though motion is already restrained.
- If adapting this system for an even longer article, add a lightweight progress/section navigator after the first viewport.

## Evidence limits

- Hover states were inferred from computed transitions; no exhaustive keyboard/focus traversal was run.
- The live page is mutable. Counts and styles are a 2026-07-11 capture, not a permanent statement about Tubik’s implementation.