News Website Design: Homepage, Article & Category Page Layouts That Work
This article is adapted from the Prateeksha Web Design blog.
A news website has about three seconds to prove it belongs to a reader who just clicked in from Google, Twitter, or a WhatsApp forward. News website design is the discipline of arranging headlines, images, and navigation so that reader finds the right story instantly, trusts what they're looking at, and keeps reading. Get the layout wrong and even the best reporting sits unread below a cluttered fold.
This guide covers the actual layout decisions: what goes where on the homepage, how an article page should be structured from headline to related-stories module, how category pages should organize a flood of content without becoming a wall of links, and what changes on mobile. If you're planning the full build — CMS, hosting, monetization, SEO setup — for the full step-by-step build process, see our complete guide. This article is about what the reader actually sees and clicks.
Homepage Anatomy: What Belongs Above and Below the Fold
A news homepage is not a single hierarchy — it's several hierarchies stacked on top of each other, each one answering a different reader intent. Someone landing on your homepage is either checking "what's happening right now," browsing by section, or searching for something specific. Good news website design serves all three without making any of them compete for the same pixels.
The lead story block
The lead story is the single biggest visual element on the page — typically a large image (16:9 or wider), a bold headline in a larger type size than anything else on the page, and a one- or two-line deck (a short summary sentence under the headline). This is editorial judgment made visible: whatever your team decides is the day's most important story gets the most space, full stop. Don't let this slot auto-rotate through five stories on a timer — readers can't process a carousel in the two seconds they spend deciding whether to stay.
The latest news module
Directly beside or below the lead story, a compact list of the 5–8 most recent headlines gives readers a quick scan of "what's new" without competing visually with the lead story's imagery. This module works as plain text links with timestamps — no large images needed, since its job is speed, not persuasion.
Trending or top stories
A horizontal strip of 4–6 stories, usually ranked by reader engagement rather than publish time. This section rewards genuinely popular content and gives your homepage a second axis beyond "newest first" — useful when a three-day-old investigative piece is still outperforming today's routine updates.
Category navigation and breaking-news banner
Category navigation — Business, Sports, Technology, Politics, Entertainment, or whatever sections your outlet covers — belongs in the primary header, always visible, never buried in a hamburger menu on desktop. A breaking-news banner, when you have one, sits directly under the header, above the lead story, in a distinct color (commonly red or a high-contrast accent) so it interrupts the normal reading flow only when there's genuinely something urgent. Don't leave a stale "breaking" banner up for days — it trains readers to ignore the word entirely.
Anatomy of a news website homepage
Here's how these pieces typically stack, top to bottom, on a desktop layout:
Below the fold, category blocks (Business, Sports, Technology, and so on) each show 3–5 headlines with a thumbnail and a "See all" link into the full category page. This gives every major section homepage visibility without forcing readers to hunt through a nav menu for what they care about. We build this exact structure as part of our news portal design and development service, adapted to each publication's section count and content volume.
Article Page Anatomy: From Headline to Related Coverage
The article page is where a news site earns or loses trust in the first two seconds. Article page layout needs a clear reading order: headline, then who wrote it and when, then the story itself, with supporting elements placed so they help rather than interrupt.
Headline hierarchy
The headline is the only H1 on the page, set at the largest type size in the article template — typically 28–36px on desktop. Below it, an optional deck (a one-sentence subhead) can add context the headline itself couldn't fit. Never stack two competing large headlines; readers scan the first thing that looks like a headline and skip the rest.
Byline, timestamps, and hero media
Directly under the headline: the author's name (linked to their author page), the publish date, and — critically for news — an "updated" timestamp when the story has been revised after publishing. This single detail does more for reader trust than almost anything else on the page, because news readers specifically want to know if what they're reading is current. The hero image or video sits below this byline block, at full article width, with a visible caption and credit line directly beneath it.
Body content structure
Article body copy should run 65–75 characters per line at the body font size — narrower and readers feel like they're reading a phone book; wider and the eye loses its place jumping to the next line. Break long articles with subheadings every 300–400 words, use pull quotes sparingly, and keep paragraphs to 2–4 sentences. A sticky table of contents suits long-form investigative pieces but adds clutter to a routine 400-word update — reserve it for pieces over roughly 1,200 words.
Related coverage and author bio
A "related coverage" module — 3–4 other stories on the same topic — belongs either inline partway through a long article or immediately after the body, never buried past a wall of ads. This is one of the highest-value layout decisions on the page: it's the difference between a reader leaving after one article and a reader who reads three. An author bio block (photo, short bio, link to other stories) closes out the article, reinforcing the byline trust signal from the top of the page.
This is a condensed edition. Read the complete guide on prateeksha.com for every section and example.
Read the full guide on Prateeksha Web Design
Comments