Smashing Magazine UX Teardown: Putting the Byline Before the Headline
Information ArchitectureTYPENORMLabs6 minJuly 30, 2026

Smashing Magazine UX Teardown: Putting the Byline Before the Headline

A UX teardown of Smashing Magazine's reading experience: it makes people visible where Medium and Substack show algorithms — and pays for it with a category page three years out of date.

The first thing Smashing Magazine's article index tells you is a number: 2274 ARTICLES. The UX Design category says 57. The books page says 15 printed books. All three indexes in this flow state their own size before showing you anything.

That's a scope signal. A count tells you whether you're about to skim a shelf or a library, and it sets the expectation that you will not finish — which is presumably why a feed-shaped competitor like Medium's tag pages don't print one, and why infinite scroll works better when you can't see the bottom.

The second thing the index does is stranger. Its entries open with a face and a name in red — "Andy Budd wrote" — above a headline that hasn't been introduced yet. On Medium or Substack's discovery surfaces the author sits under the headline in small grey type, after the thumbnail. Here the byline is the lede.

This teardown walks the read flow — index, category, catalogue — to name that pattern and find the place it breaks.

1 / 3

Articles index

The first thing the page says is a number: 2274 ARTICLES, set in small-caps above the word 'Articles'. That's not a stat, it's a positioning move — the archive is the product, and the count is the proof. The layout then does something most content indexes won't: it leads with the author. Each entry opens 'Andy Budd wrote' — name in red, 'wrote' in italic serif — beside a red-framed portrait, and only then gives you the headline. Underneath sits a full standfirst long enough to actually decide from, dated in small-caps serif. Two chip systems run in parallel and are colour-coded to mean different things: pink chips in the sticky header are the standing category nav, green chips under 'Hidden gems' are an editor's shortlist. The right rail carries the only quantified signals on the page — '10 min read' and a comment count shown honestly even when it reads '0 comments'. Time-to-read and a human's shortlist, rather than popularity, are what this index asks you to browse by.

View full flow (3 screens)

Two chips that look identical and mean opposite things

Articles index
Articles index — The first thing the page says is a number: 2274 ARTICLES, set in small-caps above the word 'Articles'. That's not a stat, it's a positioning move — the archive is the product, and the count is the proof. The layout then does something most content indexes won't: it leads with the author. Each entry opens 'Andy Budd wrote' — name in red, 'wrote' in italic serif — beside a red-framed portrait, and only then gives you the headline. Underneath sits a full standfirst long enough to actually decide from, dated in small-caps serif. Two chip systems run in parallel and are colour-coded to mean different things: pink chips in the sticky header are the standing category nav, green chips under 'Hidden gems' are an editor's shortlist. The right rail carries the only quantified signals on the page — '10 min read' and a comment count shown honestly even when it reads '0 comments'. Time-to-read and a human's shortlist, rather than popularity, are what this index asks you to browse by.

The two rows of pills are the same shape and mean opposite things. The pink ones in the sticky header (Accessibility, UX, CSS, JavaScript, Performance) are the standing category system: permanent, complete, repeated on every page. The green ones beneath "Hidden gems" are an editor's shortlist.

Colour is doing all of the disambiguation. It mostly pays off, because the header row reads as navigation from being pinned and repeated, and the green row reads as editorial from the handwritten-sounding label above it. But that's a lot of meaning to hang on hue (NN/g on colour as the sole signal). A reader who processes both rows as one system will read the shortlist as a taxonomy, and conclude the site has no Design category. It has one. It's in the row above.

The right rail prints 10 min read and, underneath, 0 comments. Most publications swap a zero for "Join the discussion." Smashing prints the zero.

The category page tells the truth about its own tagging

UX Design category
UX Design category — The category page runs the same template one level down, with two additions: another count (57 articles) and an 'Also related to' rail — Design Patterns, Navigation, User Experience, UI, Usability, Content Strategy, User Research, Psychology — that treats adjacent tags as the primary escape hatch. It also exposes the honest cost of a strict tag: sorted reverse-chronologically, the newest thing filed under UX Design is from 2023, even though the homepage is publishing UX pieces this month. The archive isn't stale; the label is narrow. That's the tradeoff every taxonomy makes and almost no site shows you — a filtered view is only as current as the discipline of whoever applies the labels, and here the seams are visible rather than smoothed over by a recommender.

Here is where the pattern breaks.

The UX Design category runs the same template one level down, adds an "Also related to" rail of sibling topics, and sorts reverse-chronologically like everything else. The newest article in it is dated July 12, 2023.

The site is not dormant. Its sibling category at /category/ux/ is full of current work — Designing For Distressed Users ran on July 9, 2026, and it is unambiguously an article about UX design. There is a "UX" chip in the header and a separate "UX Design" category page, and for three years the recent work has been landing on the first one. A reader who follows the second link gets a page that is technically accurate and practically false: it says nobody here has written about UX design since 2023.

That's the standing cost of a hand-maintained taxonomy, and it's invisible from the inside. Nobody broke anything. Someone picked a slightly different label a hundred times in a row, the page still renders, the query still returns rows, and a whole category quietly fell out of date (NN/g on category names that don't match user vocabulary).

An algorithmic feed would have hidden this. It would surface recent UX articles regardless of label and you'd never learn the taxonomy had drifted. Both systems have the flaw. Only the hand-kept one shows you the seam.

What I can't tell from outside is whether any of this costs Smashing anything — whether the UX Design page still gets traffic, whether the two categories were ever meant to be distinct, or whether someone there already knows and has it in a backlog. That's a question their analytics answers in an afternoon and a stranger reading the public site cannot answer at all.

The catalogue never changes voice

Books
Books — The store is where the reading experience turns into a business model, and it does so without changing voice. '15 printed books', framed as 'our editorial flagships' — print is the default tab, eBook is secondary, and the hardcover is described in physical terms (cover art credited to an illustrator, free worldwide shipping, 100 days money-back). Every price is shown struck through against a lower one, and every single book repeats the same line underneath: save up to $10 and get the eBook free with Smashing Membership. The membership isn't sold on a separate page you have to find; it's sold in the margin of everything else, priced against a cup of coffee, and reinforced on the homepage by a live member count. The free article and the $60 hardcover are the same funnel, and the magazine never pretends otherwise.

The books page is where reading turns into revenue, and the register barely shifts. "OUR CHARMING Printed Books." A mascot hauling a stack of hardcovers. The section label, 15 PRINTED BOOKS, set rotated in the left margin, the same print device the homepage uses for "COMMUNITY LINKS."

Print is the default tab and eBook is secondary, which is the reverse of what a digital publisher's economics would suggest. The books are called "our editorial flagships" and described in physical terms: cover art credited to an illustrator, hardcover, free worldwide shipping. Every single one repeats the same line beneath its price — save up to $10 and get the eBook free with Smashing Membership.

There's no modal, no exit-intent overlay. The membership ask is a line of copy under every price, plus a block in the middle of the homepage that names its exact size, 1,916 members, and prices itself against a cup of coffee.

The homepage makes the people visible

Full homepage
Smashing Magazine — Homepage — A homepage that opens on an author, not a headline — a chronological river of long-form work with the membership pitch stitched into the middle of it.

Scroll the whole thing and the thesis resolves. Story after story carries a photographed human in a tilted red frame. The sponsor sits in the right rail in its own grey box, clearly paid, never dressed as editorial. Deep in the page there's a Person of the Week: a named community member, a paragraph about what they do, and a thank-you addressed to them directly.

Nothing on this page is trending or ranked by popularity. The ordering signal is time and the recommendation signal is an editor, which in a category dominated by engagement-sorted feeds means Smashing spends its most valuable real estate putting faces on the page.

What this means for your product

Lead with whoever is accountable for the thing. Attribution is the cheapest layout decision on this list and the most expensive to maintain: a red byline above the headline commits you to a photographed portrait per author, a Person of the Week someone has to choose, and a comment count you've then agreed to print at zero. Smashing pays all three.

Tell people how big the thing is. A count behind a link costs one line and sets an expectation no amount of scrolling can. Hiding the number doesn't make a collection feel infinite. It makes it feel unmeasurable.

And the warning, which is the part most likely to apply to you: a taxonomy is only as current as the discipline of whoever applies the labels. If your filters are hand-maintained, something behind one of them is already years out of date and nobody has told you, because nothing errors — nothing 404s, nothing logs, and the count at the top stays accurate about a set that stopped growing. Go and look at the newest item behind each of your category links.

Take it further

The lens behind this teardown — can a user tell where they are, what's behind a link, and who's responsible for it — is the UX Clarity framework, the same one we apply in a Full UX Audit. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.

Sources: NN/g — Category Names Suck · NN/g — Using Colour to Enhance Design · NN/g — Recognition vs Recall.

Ready to find out which of your category pages is quietly three years out of date? Apply for a Full UX Audit →

Free UX Snapshot for 50 Product Teams

Apply now and get a complimentary UX Snapshot — our rapid clarity audit delivered in 48 hours. Limited to the first 50 products.

Apply for Free UX Snapshot

Related

Design Principles & Laws

Gestalt Principles in UI Design: Which One Wins When Two Disagree

The gestalt principles describe how people group what they see: proximity, similarity, common region, closure, continuity, figure-ground, common fate. On a real screen several apply at once, and the layout bugs come from two of them giving different answers.

TYPENORMLabs · 10 min · September 30, 2026

Design Principles & Laws
Visual Hierarchy
Web

Accessibility

WCAG 2.2: What Changed and What It Means

WCAG 2.2 added nine success criteria and removed one. What each new criterion asks for, which ones count toward AA, what stayed the same on contrast, and how to update a 2.1 audit.

TYPENORMLabs · 9 min · September 23, 2026

Accessibility
Web

Visual Hierarchy

Visual Design Principles for Product Teams: A Check for Each One

Visual design principles are hierarchy, contrast, proximity, alignment, repetition, scale, and whitespace. For a product team they are most useful as checks you can run on a screenshot in a review, so a disagreement about a screen ends with a measurement instead of a vote.

TYPENORMLabs · 9 min · September 29, 2026

Visual Hierarchy
Design Principles & Laws
Web