The Hopkins Institute

Selected direction · home page and supporting pages

The home page, and the pages behind it

Broadsheet has been selected. It follows the page structure and copy in the supplied content document: navigation, the three-slide carousel, then the launch article. The "More from the Institute" section has been removed at the client's request, since there will not be content for it before launch. Masthead is kept below for reference only and is no longer maintained.

The four supporting pages are now built from the content supplied on 7 August, and every one of the nine navigation labels resolves to a real page — nothing in the menu is a dead link. They are listed under the home page below.

How to read these

Leaving feedback. Every page carries BugHerd, so a comment can be pinned directly onto the thing it is about rather than described in an email. Click the tab at the right-hand edge. The one exception is Concept B, which is a frozen record and has no feedback tool on it.

These pages previously carried two in-page annotation layers — design notes and client revisions — on switches in the corner. Both were removed on 7 August now that feedback lives in BugHerd, since two comment systems on one link splits the conversation. Nothing was lost: the reasoning behind every decision, the provenance of every piece of copy, and the status of every request are all recorded in the project documents, and the layer itself is archived and can be switched back on if it is ever wanted.

What those notes flagged is still true of these pages, so it is worth restating plainly: the lower article grid is deliberately dummy content, because only one real article exists so far; some photographs are stand-ins; the four photographs on the About page and the history section are waiting on material; and no statistic, name, date or dollar amount has been invented anywhere.

The page moves. 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 respects the reduced-motion setting. 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 the page completely still.

Colour. The Institute has chosen Plum, and that is now the only palette on the site — the switcher that offered the alternative has been removed, so every page here renders exactly as the finished site will. The deep purple carries the dark grounds and the photography is tinted to match. The accents are the brand’s Option 2 secondary colours, which the Institute is leaning toward: teal on the dark grounds, slate blue on the light ones. They are shown here so Option 2 can be judged in place before it is confirmed. Every text pairing was contrast-checked against this palette.

Concept A home page, upper screen

Broadsheet Selected

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
Concept B home page, upper screen

Masthead

Concept B · not selected

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.
View Concept B (superseded)

The supporting pages

Built from the content supplied on 7 August.

Change log

A dated record of every change the Institute has requested, what was done about it and when, plus the ten items still waiting on a reply and the attached content document in full.