News and magazine website design

The design brief. A multi-section news publication covering world, sport, technology, culture, business, lifestyle and fashion, with high publishing volume and advertising as the revenue model. The design problem is density: a news homepage has to expose dozens of stories without becoming an unreadable wall.

The mixed-density grid. The layout runs at several scales at once — one large lead story with a big image, medium cards beneath it, small text-only items in the right column, and compact thumbnail rows within each section. Varying the size communicates editorial priority without any labelling. A reader knows instantly which story the editors consider most important, which is exactly how a printed front page works.

Colour-coded sections. Each section — world, sport, technology, lifestyle — carries a coloured tag on its stories and a coloured rule at its heading. On a page carrying seventy or eighty links, colour is what lets a reader navigate by interest rather than reading every headline. It is the cheapest possible wayfinding and by far the most effective.

The sidebar as a second page. Social follows, a newsletter signup, popular posts and a reader poll run down the right column. Each is a separate small module rather than a continuous block, so a reader scanning vertically can stop at whichever is relevant. The newsletter sits high, because email is the only audience a publisher genuinely owns.

Advertising designed in. Ad slots are given defined positions within the grid from the outset rather than injected between paragraphs. A news site funded by advertising performs better when the commercial units are part of the layout, because they neither disrupt reading nor get mistaken for content.

Typography. A condensed bold sans for headlines and a light face for standfirsts, at small sizes throughout. News layouts need to fit a great deal into limited space, and tight, high-contrast type is what makes forty headlines on one screen remain legible rather than exhausting.