Alt News
One Section.
One Purpose.
Concept news template — replacing the everything-at-once chaos of typical news sites with a clean, section-by-section layout where each content type gets its own dedicated space.
Concept Designer · News Template Concept · 2020
A section-by-section news interface — where each content type gets its own zone so readers always know what they're looking at.
Hero · Trending · Latest News · Videos · Footer — each section isolated with a single visual language and purpose.
Sports, Technology, Health, Business, Lifestyle, Covid-19 — surfaced in the header and anchoring the footer.
Category nav in the header bar and five category columns in the footer — readers reach any beat from anywhere on the page.
Figma File Walkthrough
Complete walkthrough of the Figma file — covers Homepage Hero, Trending News, Latest News with newsletter sidebar, Videos section, and Footer.
Category first.
Always.
The homepage is anchored by two navigation layers — a utility bar at the top with About, Contact, the ALT News logo centre, and social platform icons right, then a dedicated category bar beneath it with six editorial beats always visible. The main content area is a four-column card grid where every card surfaces its category label before the headline — never anonymous content. Below the grid, a full-width search bar with a bold red underline marks the transition into the next section, so the search affordance is always in the reader's peripheral view as they scroll past the hero.
- Dual navigation: utility topbar + dedicated category bar across 6 editorial beats
- Four-column hero card grid — category label always appears before the headline
- Social icons in topbar: Facebook, Instagram, Twitter, YouTube — direct platform links
- Full-width search bar at hero bottom with red accent underline and placeholder guidance
- Card grid uses photo thumbnails with title and author attribution on every card
- Clean white-and-dark-navy palette — content takes priority over decoration
Homepage — Hero Section
The feed with
a hierarchy.
The Trending section uses a featured 2-up card layout that creates natural editorial weight without requiring a per-article decision. One large card anchors the left side, a second highlighted story holds the right, and three equal-weight cards fill the row below. An "all trending news" link with a red underline sits in the section header — always visible, never blocking the content, letting readers escape to the full feed without disrupting their current browse. Author name and date run on every card without exception.
- 1 large featured card left + 1 secondary highlight right — natural visual hierarchy
- 3 equal supporting cards below the featured pair — consistent weight, no favouritism
- "All trending news" link in section header with red underline — escape hatch always visible
- Author name and publish date on every single card — no anonymous content
- White background for Trending keeps it distinct from the dark Videos section below
- Section heading bold black on white — content-first, decoration-last
Trending News Section
Content left.
Utility right.
The Latest News section runs as a clean two-column layout. The left column is a scannable article list — thumbnail, bold title, author in red accent colour, date, and a two-line excerpt so readers can evaluate the story before clicking. The right column surfaces utility: a newsletter signup with a single email field and a bold Subscribe CTA, then below it four social follower count tiles (Facebook 56,568 · Instagram 1.8K · YouTube 56K · Twitter 2.9K) that let readers connect on their preferred platform. Utility never interrupts — it sits alongside, not between, the content.
- Article list: thumbnail + bold title + author (in red) + date + 2-line excerpt
- Author names in red accent — consistent with site-wide link colour language
- Newsletter signup: email field + Subscribe CTA — no popup, no modal
- Social counts: Facebook 56,568 · Instagram 1.8K · YouTube 56K · Twitter 2.9K
- Utility sidebar content never interrupts the article list — sits alongside it
- Clean white background keeps article typography readable at comfortable line lengths
Latest News + Newsletter Sidebar
Video gets
its own dark.
The Videos section switches to a near-black background — the only section on the page with a dark treatment. This gives video thumbnails the contrast and visual weight they need to read as video rather than static editorial. A single large featured video anchors the left with title and author attribution below. Four secondary video entries fill the right column as a compact list: thumbnail with play icon overlay, title bold, author and date below. An "All Videos" link in the section header mirrors the Trending section's escape hatch pattern — consistent navigation language across the page.
- Dark near-black background isolates video content from the white editorial sections
- 1 large featured video left — title and author attribution below thumbnail
- 4 secondary video entries right — thumbnail + play icon + title + author + date
- "All Videos" link in section header — consistent escape-hatch pattern
- Play icon overlaid on every thumbnail — affordance is always visible, never hidden
- Dark section creates a visual chapter break between Latest News and the Footer
Videos Section
Footer as
a discovery tool.
The footer transforms from a legal afterthought into an editorial map. Five category columns — Business, Technology, Health, Sports, Lifestyle — each hold topic-specific article links, turning the end of the page into another discovery surface for readers who scroll all the way down. The section uses the same near-black background as the Videos section, creating a unified dark chapter that closes the page. The ALT News logo anchors the bottom bar alongside standard legal links: Contact, Terms of Use, Advertise, Newsletter, Sitemap, Accessibility, and Copyright.
- 5 category columns: Business, Technology, Health, Sports, Lifestyle
- Each column holds article links — footer as discovery, not just compliance
- ALT News logo bottom-left — brand identity present at page-end
- Legal links: Contact · Terms · Advertise · Newsletter · Sitemap · Accessibility
- Continuous dark background from Videos → Footer creates a strong visual close
- Copyright attribution bottom-left: PhantomCluster
Footer — Category Discovery
The
Problem
Most news sites cram too much onto a single view. Breaking news, trending posts, videos, newsletter popups, and category archives all compete for the same space simultaneously. Readers lose track of what they came to find and editorial hierarchy collapses under the weight of everything happening at once.
Process
& Approach
Mapped five distinct reader intents — trending discovery, category browsing, reading the latest, watching videos, and topic navigation — and designed each as its own focused section with a single visual language and a "View all" escape hatch that never pulls the reader away from their current context.
Map Reader Intent
Identified five core reader goals: discover trending, browse a specific beat, read the latest, watch videos, find articles by topic. Each intent became a dedicated section with its own layout.
Design Section by Section
Each section was built for one purpose and given a visual treatment matched to its content — card grid for Hero, 2-up for Trending, article list for Latest, dark background for Videos.
Connect Through Navigation
Six categories surface twice: in the header category bar for quick access from the top, and as five columns in the footer for discovery at the bottom. Consistent escape hatches throughout.
The
Design
A five-section news template: a category-nav hero grid, a Trending section with a featured 2-up card layout, a Latest News list with inline newsletter sidebar and social counts, a dark-background Videos section, and a category-organised footer — each section isolated and purposeful.
Where it Led.
Section-based thinking — proved as a system, not a theory.
Concept exploration demonstrating how a section-by-section structure solves news-site information overload without reducing content volume. Published on Behance in 2020.
Less isn't always the answer. Separation is.
The noise on news sites doesn't come from too much content — it comes from too many content types sharing the same visual space with no hierarchy. Five sections, six categories, each doing one job: less noise than a single page trying to do everything simultaneously. Clarity through separation, not subtraction.
View full project on Behance ↗Category-Led Navigation
Six editorial beats (Sports, Tech, Health, Business, Lifestyle, Covid-19) surface in both the header bar and the footer columns — readers jump to their specific topic from anywhere.
Four-Column Hero Grid
Four articles visible immediately on load, each labeled with category before headline. No card is anonymous — topic context always comes first.
Trending 2-Up Layout
A large featured card anchors the Trending section with a secondary highlight alongside, then three equal-weight cards below — visual hierarchy without per-article editorial decisions.
Sidebar as Utility Layer
Newsletter signup and social follower counts sit alongside the article list — utility delivered inline without a popup or a separate page interrupting the reading flow.
Videos in the Dark
The Videos section switches to a near-black background, giving thumbnails the contrast and visual weight they need without competing with editorial text content.
Footer as Discovery
Five category columns transform the footer into a topic-discovery tool — readers who scroll to the bottom find article links, not just legal text.