The Hopkins Institute · Landing Page Design Concepts

Two directions for the home page

Both follow the page structure and copy in the supplied content document: navigation, the three-slide carousel, the launch article. Both use the approved brand palette and typefaces, and both handle the logo the same way. They differ in structure: how the darker colour is deployed, how the article is set, where the giving ask sits, and how the carousel moves between slides.

How to read these

Each page carries a Show design notes switch in the lower right. Left on, it shows small gold markers throughout. Hover or tap one to read why something is the way it is. Where a decision came from the supplied direction, the note quotes the source: look for the green Directed label and the "Why this is here" line.

The notes flag anything we assumed, invented, corrected, or filled with placeholder content, and they ask questions where input is needed. The lower article grid is deliberately dummy content: there is one real article so far, and the layout noted as a preference needs a populated grid to be legible. No statistic, name, date or dollar amount has been invented anywhere on either page.

Some photographs are stand-ins. Anything marked as an asset note is a slot waiting for a better file.

Next to that switch there is a Palette control with two options. Newsprint is the default, because it follows the direction asked for: warmer, more colourful, with darker background colours. It keeps the deep purple as the identity colour on the headings, the logo and the nib, and it uses a warm charcoal for the dark bands. Plum is the alternative, the purple-forward version, if that is preferred. Switch between them on either page, including the photography, which retints with the palette. The finished site ships one palette, so one is chosen and the other dropped before build.

Broadsheet

Concept A

A Californian broadsheet. The article-forward arrangement noted as a preference, with the page resolving into a news grid in its lower half.

HeroThe masthead carries the logo. The opening slide leads with the tagline alone, with no logo over the photograph.
ColourFull-bleed dark bands alternating with a warm newsprint ground.
ArticleSet in a measured column with a running sidebar and a vertical gradient spine.
CarouselA slow 700ms crossfade.

Open Concept A

Masthead

Concept B

The launch as an institution unveiled. Weightier and more ceremonial at the top, opening up further down.

HeroSame as A, as directed: tagline alone, no logo over the photograph.
ColourOne continuous dark region roughly two screens deep, then everything below turns light. How to Give sits above the article.
ArticleA centred column with a drop cap, a ruled colophon and a full-width plate.
CarouselA 620ms vertical wipe, like a press run.

Open Concept B