Brisa
Brisa’s print layouts were admired, and its website was an afterthought. Over eight weeks I designed an online edition from the print pages and built it on a CMS the editors run themselves.
Client
Brisa, Lisbon
Year
2023
Type
Editorial
Role
Design and build
Team
Me, Brisa’s editor-in-chief and its art director
Live
Eight weeks
Three of design, then five of build, ending with Issue 14 published on the new site.
Week 1Pages from five printed issues rebuilt on screen, and an editorial type system
Weeks 2–3Article templates and the subscription flow, tried with ten readers
Weeks 4–7Next.js on a headless CMS, images in AVIF, the paywall and reader accounts
Week 8Issue 14 loaded by the editors themselves, then launch
Brisa is an architecture quarterly in Lisbon, and its print layouts are the reason people subscribe. Online, those pages had become a plain grey blog: small type, cropped photos and a paywall that asked for a card before showing a word.
Readers who loved the paper did not pay for the site, and the editors needed a developer to publish anything. Brisa wanted an online edition that felt like the paper and that they could run themselves.
Design
I drew the type system first: a serif for reading, a sans for captions and a scale that holds from a phone to a wide screen, so an article keeps the proportions of its printed page.
The article templates follow the print layouts, from the full-bleed opener to the long pull quote. The subscription flow shows the first paragraphs free, then asks once, with the price on the screen.
An editorial type system, phone to wide screen
Article templates drawn from the print layouts
Photos shown whole, never cropped
A subscription flow with the price up front
Build
I built the site in Next.js on a headless CMS, so editors write in blocks that match the print templates and publish without a developer. Photos are served in AVIF at the right size for each screen, and an article loads in about a second on a phone.
Front-end
Next.js and TypeScript
CMS
Headless, with blocks that match the print templates
Images
Responsive AVIF, with a fallback for older browsers
Subscriptions
Paywall and reader accounts, monthly or yearly
The result
38% of revenue
Now comes from online subscriptions
1,900
Paying online subscribers a year after launch
2 days → 1 hour
Time for the editors to publish an article, with no developer
“The site finally looks like the magazine. We publish an article before lunch now, and nobody has to ask a developer.”
Mariana Teixeira, editor-in-chief, Brisa
Next project ·
01
Fernway
Have a product that needs designing and building?