DIA website application

DIA website application, editorial, dark-mode, dark

Preview image. Unlock full-res

Desktop website mockup of the DIA homepage with a giant DIA wordmark, a dark hours panel, and a bento grid of exhibition cards on a charcoal background.

Summary

A website application slide showing the DIA homepage on desktop: an oversized DIA wordmark and a dark hours panel on the left, a bento grid of exhibition cards on the right, all on charcoal.

Visual description

Cream slide, thin terracotta top band, left-margin bold sans-serif label "Web". A single large screenshot of a dark charcoal desktop homepage fills the slide. Top bar: "DETROIT INSTITUTE OF ART" left, a right-aligned nav reading VISIT / ART / EVENTS / LEARN / SHOP. The left column holds an enormous thin-serif "DIA" wordmark with a faint curve sweeping off it, an olive "HOURS" tab over a small opening-times table, then a black-and-white exhibition photo card with a titled caption bar and an orange corner arrow tile. The right column is a two-card stack: a silver concept car on a tan ground (top) and a contortionist figure (bottom), each with a dark caption bar, date range, and orange arrow tile. The bottom of the page shows social icons and the museum address. The slide's foot carries "41", "BRAND GUIDELINES" and a centered "APPLICATIONS".

Key takeaway

Anchoring a homepage with one oversized thin-serif wordmark and letting a bento grid of captioned exhibition cards do the rest, each card closed by a consistent dark caption bar plus a single orange arrow tile. The olive and orange accents stay tiny against the charcoal field.

Reuse notes

A directly reusable layout for a museum, gallery, or cultural-institution homepage where exhibitions are the content. The bento card grid scales to any number of shows. Demonstrates the dark-mode end of the identity. Pairs with the mobile and app slides that follow it in this deck.

From this deck: DIA website application

View deck

More like this