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.

Both pages now move. Photographs drift inside their frames as you scroll, headings and cards settle in as they arrive, and every gradient rule draws itself rather than simply appearing. It is the same motion on both concepts, on purpose, so it is not one of the things being chosen between. Scroll slowly and it should feel like a page being set rather than a page performing. If it is too much, or not enough, say so: every duration and distance is a dial. Anyone whose device asks for reduced motion gets both pages completely still.

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, uses a warm charcoal for the dark bands, and a muted purple #705D88 for the accents. Plum is the alternative, the purple-forward version with a light blue accent, 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.
MotionPhotographs drift inside their frames as you scroll, and sections settle in as they arrive. A’s signature is the gradient hairline drawn down the side of the article as you read it.

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 opening with a ruled colophon and a drop cap, then a wider text column with the illustration held beside it.
CarouselA 620ms vertical wipe, like a press run.
MotionThe same movement as A, with one difference: the illustration parks beside the article as you read, and the picture drifts inside a frame that is holding still.

Open Concept B