Publishing · 6 designs
Blog, magazine and news website design inspiration
Layouts for company blogs, a nonprofit resource hub, fashion and food magazines, a broadsheet-style news site and a streaming service. They are all about hierarchy: one featured item, then a grid or list of the rest.
What these publishing designs have in common
- One featured story leads, as a full-bleed photo card or a tall portrait beside a huge headline, with the rest in a grid or list below.
- Article cards repeat the same parts: photo, category label, title, short excerpt, then author, date or reading time.
- Magazines and news sites use a masthead: a condensed serif in caps, or a blackletter-style title with a date line.
- A newsletter sign-up appears in most of them, sometimes as a card inside the article grid.
- The streaming design swaps articles for rows of poster cards: continue watching, trending, genres.
How often each section appears
- Newsletter
- 4 of 6
- Blog or journal
- 4 of 6
Counted from the 6 designs on this page.
Good to know before you build
FNJ's builder designs the pages and the layout of articles, but it has no publishing database. A site you update daily needs a way to publish posts, such as editing the exported code or connecting a CMS.
Blog website designs2
Streaming service website designs1
Magazine website designs2
News website designs1
Questions about publishing websites
What makes a good blog homepage layout?
Both blog designs here use a three-column grid of article cards, each with a photo, title, short excerpt and the author or reading time. One leads with a large featured article; the other opens with a centred title and a search box, and slips a newsletter card into the grid. Both end with a load-more button or pagination.
How do magazine websites look different from blogs?
The magazine designs lean on a masthead and big editorial type: a condensed serif in caps for fashion, heavy condensed caps on hot pink for food. They also use a side navigation of sections and mix tall photos with stacked smaller stories.
Can the AI builder run a blog?
It designs the blog's pages, but there is no built-in publishing system, so posts don't appear automatically. Plan how you'll add new articles, for example by editing the exported code or connecting a headless CMS.