Masthead - Editorial UX Design Landing Page Template

Quick summary

Masthead is a landing page template for a weekly user experience and design jobs newsletter. It opens with a full-width broadsheet masthead, moves through three designer success spotlights, and leads readers into a five-question inline quiz that narrows live-matched roles before asking for an email. Every section earns the scroll before asking for the sign-up.

Who this template is for

This template is built for independent newsletter creators and small editorial teams running a curated user experience or design jobs publication. It fits equally well for solo operators who want a high-trust first impression and for small teams launching a new issue-based job digest.

• user experience and product design newsletter publishers seeking a polished, editorial-first landing page
• Job board creators targeting mid-career designers, junior researchers, and design leaders
• Freelance designers or studios building a subscriber list around curated role briefs

What problem this template solves

Most job newsletter landing pages look like every other email capture form. They offer no proof, no personality, and no reason to trust the curation behind the list. Masthead solves this by giving visitors the actual reading experience before they commit to subscribing.

• Generic landing pages fail to show the editorial voice that sets a curated newsletter apart
• Readers leave without subscribing because they cannot tell if the roles match their seniority or discipline
• No visible social proof means the newsletter feels unproven, even if the curation is excellent

What you get with this template

You get a fully structured single-column landing page that functions as both a marketing surface and a preview of the newsletter itself. The template includes six distinct content sections, each with a clear job to do in the conversion flow.

• A broadsheet masthead header with dateline and a featured role card styled as a front-page story
• Three designer creator spotlights with halftone-style headshots, pull-quotes, and a four-stage hired timeline
• A five-step inline quiz with a live role counter and a final email capture screen

Feature list

This template is built around features that reflect the editorial character and practical conversion goals of a design jobs newsletter.

Broadsheet Masthead Header

The header spans the full width like a newspaper nameplate. "MASTHEAD" sits in a tight, high-contrast serif at the top. A dateline line reads issue number, week, and new role count directly beneath it. Below that, a featured role card uses a two-deck headline structure: company name in rust, role title in oversized charcoal serif, and a one-sentence editorial lede.

Five-Step Inline Role-Match Quiz

The quiz is the primary call-to-action on the page. Visitors answer five questions covering discipline, experience band, work setting, salary floor, and remote preference. Each answer updates a live counter showing how many open roles match that week. The final screen captures only an email address, with the submit button reading "Send My Matches" in rust on cream.

Creator Spotlight Section

Three designer success stories are presented in a structured editorial layout. Each spotlight includes a circular halftone-treated headshot, a rust italic pull-quote about the moment they spotted their role, and a horizontal timeline moving from Subscribed through Spotted, Applied, and Hired. The spotlights escalate in seniority, from junior researcher to senior product designer to head of design, so every reader finds a version of themselves in the arc.

Embedded Sample Issue Preview

Between the creator spotlights, the template includes embedded broadsheet-column snippets from a sample newsletter issue. Visitors read actual curated role listings in the editorial format before deciding to subscribe. A secondary call-to-action link, "Just Browse This Week's Issue," lets visitors access a sample edition without filling in any form.

Editorial Typography System

The template uses Fraunces as the display serif for headlines and pull-quotes, and DM Sans for body text and labels. The pairing creates a deliberate contrast between editorial weight and readable utility. Typography carries the entire visual load since no hero image is used anywhere on the page.

Scroll-Driven Animation Layer

Sections reveal with AOS scroll animations, staggered fades, and quiz state transitions. The animation pacing is set to medium intensity, meaning content appears purposefully as the reader scrolls rather than firing all at once. Quiz steps transition cleanly between states as answers are selected.

Page sections overview

Design & branding system

The visual identity draws from the aesthetic of a design annual printed in the mid-1970s. Aged newsprint, rust-red chapter markers, and typography so considered it slows the reader down. There is no hero image anywhere. The type carries the entire visual identity.

• Color palette: parchment cream (#F5F0E8) background, dried-ink charcoal (#2C2C2C) for body, oxidized rust (#A0522D) for pull-quotes and highlighted roles, faded pencil gray (#B5AFA6) for secondary text and divider rules
• Typography: Fraunces display serif for headlines, datelines, and pull-quotes; DM Sans for body text, quiz labels, and supporting copy
• Layout: single-column flow with broadsheet-column nesting for sample snippets, full-width masthead header, and horizontal editorial timelines

Mobile & speed optimization

The template is built desktop-first to honor the editorial broadsheet layout, with responsive stacking applied so the design reads cleanly on smaller screens. The quiz remains fully usable on mobile with each step occupying its own focused view.

• Desktop-first layout with mobile-responsive column stacking for spotlights, quiz, and sample issue sections
• Static-first build approach with client-side components isolated to the interactive quiz only
• AOS scroll animations are scoped to medium intensity to keep motion purposeful without adding unnecessary load

How this template helps you convert

Every section in this template is arranged to build trust before asking for anything. Visitors move from reading to recognizing to committing, in that order.

1. The featured role card and broadsheet masthead immediately signal editorial quality, giving readers a reason to keep scrolling rather than bouncing.
2. The creator spotlights and embedded sample snippets let visitors experience the newsletter's value directly, removing uncertainty about whether it matches their career stage.
3. The five-step quiz turns a passive browse into a personalized match, so the email capture at the end feels like a logical next step rather than a cold ask.

Other information about this template

This template is built as a static-first single-column flow with interactivity limited to the quiz component. The footer follows a horizontal flow pattern with dot separators. The page is localized for English-language audiences with USD salary references and US-centric company context.

• The quiz salary step uses a slider input for setting a salary floor, giving the experience a tactile quality that a simple text field cannot match
• Social proof is woven through named designer spotlights and a visible subscriber count rather than relying on generic star ratings or testimonials
• The secondary path below the quiz, "Just Browse This Week's Issue," provides a no-form trust-building route for visitors who are not yet ready to subscribe
• The footer uses a horizontal flow layout with dot separators, keeping the editorial character consistent to the very last element on the page

Show more