Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
UI vs UX and Design for Developers: Evaluating a Screen with Usability Heuristics
UI is the visible surface of a screen, UX the whole flow of using it; design decisions are made for measurable reasons, not taste. We group Nielsen's ten heuristics into four questions, review Bookstore's checkout, rank the findings by 0–4 severity, and measure and fix with Playwright a screen that creates two orders on a double-click and wipes the form on an error.
Visual Hierarchy: Size, Weight, Color, Position and Gestalt Principles
Visual hierarchy means making the order in which the eye reads a screen match the order of the user's task; the most effective way is usually to calm the rest down rather than enlarge one thing. We measure that 19 of 20 texts on Bookstore's book detail page are bold, build a three-level hierarchy with size, weight, colour, position and the Gestalt principles, and show primary/secondary/tertiary buttons and the squint test with before and after screens.
Typography: Type Scale, Line Height, Line Length, Font Choice and Turkish Characters
Good typography rests on a few rules: a single-ratio type scale, 45–75 characters per line, 1.5–1.6 line-height for body text and tabular figures in tables. On Bookstore's book page we measure and fix 146-character lines and drifting decimal points, and show in Chromium the ch unit's trap in Inter, the ğ, ş, İ and ₺ missing from the latin subset, and the i that uppercases wrongly without lang.
Color and Contrast: Building a Palette, Semantic Colors, OKLCH and WCAG Contrast Ratios
An interface palette is made of a brand colour, a neutral scale and semantic colours; with OKLCH and the same lightness steps, the same-numbered shade of every colour gives almost the same contrast against white. In Bookstore's catalogue we measure WCAG 2.2 ratios with our own script and axe-core, fix 8 failing texts and a stock status shown by colour alone, re-tune dark mode instead of inverting it, and explain where APCA stands today.
Spacing, Layout Grids and Alignment: a 4/8 Spacing System, Whitespace and Responsive Grids
A consistent interface takes its spacing from a limited scale of multiples of 4 and 8, and keeps the space inside a group smaller than the space between groups. In Bookstore's catalogue we measure 12 arbitrary spacing values, card padding wider than the gap between cards and 19 borders, fix them with spacing tokens, a single left edge, background tone and a content-out auto-fill grid, compare it with a 12-column grid and add a compact density.
Form Design: Label Placement, Error Messages, Inline Validation and Splitting Long Forms
A good form asks for few fields, keeps the label visible above the field, shows no error before the user has finished typing, and on an error says what happened and how to fix it and moves focus to a summary. We cut Bookstore's delivery form from 16 fields to 6 and from 150 characters to type to 54, measure and fix floating labels, asterisks, per-keystroke validation, "Invalid" messages and blocked paste, and apply WCAG 2.2's Redundant Entry and Accessible Authentication criteria.
Interaction Design: Affordance, Feedback, Component States and Empty/Loading/Error Screens
A good interactive component designs each of its states (hover, focus-visible, active, disabled, loading, error), gives feedback within 400 ms, and shows the user a way forward on empty, no-results and error screens. In Bookstore's cart we measure an 803 ms silent wait, invisible focus, a disabled button with no reason and an "Are you sure?" dialog, and fix them with optimistic UI, undo, a skeleton and a tokenised focus ring.
Navigation and Information Architecture: Menus, Breadcrumbs, Search, Filters and Pagination Decisions
Good catalogue navigation keeps the list's state in the URL, separates category as hierarchy from format as facet, makes active filters visible, and uses pagination rather than infinite scroll for lists people search and compare. In Bookstore's catalogue we measure filters lost on reload, a Back button that leaves the catalogue, a footer hidden until all 70 books load and a list with zero links, and fix them with pushState/replaceState, facet counts, chips, breadcrumbs and no-results recovery.
Responsive and Platform-Appropriate Design: Touch Targets, Thumb Zones, Breakpoint Decisions and Dark Mode
Responsive design is not shrinking a screen but deciding what is needed on a narrow one, putting breakpoints where the content breaks, raising primary targets to 44–48 pixels and building dark mode as a separate theme with surfaces separated by tone. In Bookstore's catalogue we measure horizontal scrolling at 26 of 97 widths, a hover-only button invisible on phones, a 15-pixel Checkout and covers inverted by a filter, and fix them.
What Is a Design System? Design Tokens (DTCG 2025.10), Component Libraries and Documentation
A design system is made of tokens, components, usage rules and governance, and tokens split into primitive, semantic and component layers. We move Bookstore's hand-written tokens.css into DTCG 2025.10 JSON files and a resolver for light/dark and reduced motion, generate CSS and Tailwind output with Terrazzo, and measure that 100 of 101 variables resolve exactly the same in Chromium.
From Figma to Code: Dev Mode, Auto Layout to Flexbox, Variables to Tokens and AI-Assisted Handoff with the Figma MCP Server
Moving from Figma to code means carrying intent, not numbers: Auto Layout's FILL and HUG map to Flexbox, Variables to DTCG tokens, and design components to code components through Code Connect. We convert Bookstore's cart bar from Auto Layout JSON to CSS, measure copied pixels breaking at 768 pixels and in dark mode, catch drift between Figma variables and tokens, and describe the Figma MCP server's plan conditions from the official documentation.