跳到主要内容

Modern Broadsheet

News App Design Template

Dispatch is a news app design with a Modern Broadsheet look, built for founders and designers shipping an editorial reading product.

News app top stories screen with a breaking lead story and red masthead
News app sections screen with World, Business and Tech tabs over a story list
News app for you feed screen with topic chips and a personalized lead story

探索各界面

预览 news 移动应用设计,可在 Sleek 中完整编辑。

News app top stories screen with a breaking lead story and red masthead
News app sections screen with World, Business and Tech tabs over a story list
News app for you feed screen with topic chips and a personalized lead story
Search第 4 屏
Saved第 5 屏
Article第 6 屏

关于 News App

Dispatch is a news app design template that rebuilds the authority of a quality newspaper for mobile. It commits to a Modern Broadsheet look: warm off-white paper backgrounds, near-black ink text, a single classic news red reserved for the masthead, section labels, and the breaking badge, with thin hairline rules between stories instead of boxy cards. A strong editorial serif carries headlines and the masthead while a clean sans handles body copy, bylines, and UI, giving every screen a clear lead-versus-secondary hierarchy.

The template ships six connected screens that form a complete reading flow: a Top Stories home with a breaking lead, a Sections browser with swipeable tabs, a personalized For You feed with topic chips, a Search screen with trending topics and recent queries, a Saved reading list, and a full article view with a hero photo, byline, drop cap, and justified body text. Editorial reportage photography runs throughout, so the layout reads like a finished publication rather than a wireframe.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the sections or feeds your product needs. Then export to code, copy into Figma with no plugin, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

包含的界面

01

Top Stories

A breaking lead story with a large reportage photo, a red "Breaking" eyebrow, and a bold serif headline, followed by secondary headlines with small thumbnails and timestamps under the red Dispatch masthead.

02

Sections

Swipeable tabs for World, Business, Tech, Sports, and Culture sit above a story list for the active section, each item tagged by region with a timestamp. The browse-by-topic surface.

03

For You

A personalized feed led by a large 'Based on your interest' story with topic chips up top and a recommended secondary article below. Tailors the news to each reader.

04

Search

A search field for Dispatch news above trending topics with live reader counts and a recent-queries list with a "Clear All" action. Helps readers find and rediscover coverage.

05

Saved

A 'Reading List' of bookmarked articles with section labels, save dates, and "Remove" and "Offline" controls on each story. Lets readers keep stories for later.

06

Article

A full-bleed hero photo, a serif headline, an author byline with avatar and read time, and justified body text opening with a red drop cap. The core reading experience.

核心功能

  • Modern Broadsheet aesthetic: warm paper, ink-black text, one news red
  • Editorial serif headlines paired with a clean sans for body and UI
  • Hairline rules between stories instead of cards
  • Breaking lead story with a red eyebrow badge
  • Swipeable section tabs for World, Business, Tech, Sports, Culture
  • Personalized For You feed with topic chips
  • Search with trending topics and recent queries
  • Saved reading list with offline and remove controls

适合谁

Founders validating a news or editorial app MVP
Product designers needing an editorial reading-app starting point
Indie developers building a news feed or magazine app
Media teams prototyping a mobile news experience

你可以做什么

  • Launch an MVP for a digital news or magazine product
  • Mock up screens for an investor or stakeholder pitch
  • Hand a complete, consistent news UI off to developers
  • Explore a redesign of an existing news app

如何使用此模板

  1. 1

    打开模板

    浏览各界面并预览完整设计,看看是否契合你的想法。

  2. 2

    使用此模板

    一键在 Sleek 中打开你自己的完全可编辑副本。

  3. 3

    用 AI 编辑

    只需描述你想要的效果,就能重设配色、改布局、增删界面。

  4. 4

    导出并上线

    导出设计或交给开发者,继续推进上线。

有问必答。 开始之前你需要了解的一切。

How do I build a news app from this template?
Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the sections or feeds your product needs. You start from six complete screens instead of a blank canvas, so you reach a working news app design far faster.
What screens are included in this news app design template?
Six connected screens: Top Stories, Sections, For You, Search, Saved, and a full Article view. Together they cover the core flow of a real news app, from a breaking lead and browsing sections to saving stories and reading the full article.
Can I customize the news app UI design?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: change the palette, adjust the serif and sans type pairing, rework layouts, and add or remove sections. There's no manual redraw; you describe the change and it's applied.
Is this template suitable for a news feed or magazine app?
Absolutely. The Top Stories lead, sectioned tabs, personalized For You feed, and article view map cleanly onto news feeds, magazines, and editorial publications. Swap the content and section names to fit your niche.
Can I export the design to code or Figma?
Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.
Is this news app design template free to use?
You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

还有其他问题?请发邮件至 support@sleek.design。

开始设计你的 news 应用

在 Sleek 中使用并改成你的:重设配色、用 AI 编辑任意界面,再导出为代码或 Figma。