Horizontal hero system, desktop and mobile

Summary

A worked example of the horizontal hero format shown responsively: one wide desktop web layout on the left and two phone screens on the right, all built around a photo of a small-town football team with a green "Play New" script lockup.

Visual description

Black background with a yellow "Horizontal" label top-left. Three device mockups sit in a row. The left mock is a desktop Nike.com page with a full-bleed photo of a yellow-jerseyed football team celebrating, a green hand-lettered "Play New" lockup laid over the crowd, an eyebrow "New Possibilities / They Put Their Hope In Us", and a body paragraph below. The two right mocks are iPhone screens: one a "Discover" feed card showing the same team photo with "THEY PUT THEIR HOPE IN US" and a white "Dream on" pill button plus a bottom tab bar; the other a Nike-app article view with the headline, the green Play New lockup and supporting copy. The utility header runs across the top ("BRAND DEFINING / EMPOWER", "APPLICATION", swoosh, "DIGITAL", "2021 CREATIVE / GUIDELINES"). "©2021 NIKE INC." bottom-left.

Key takeaway

Demonstrating one layout idea across desktop and two mobile contexts on a single page, so the reader sees the responsive system rather than one screenshot. Reusing the exact same hero image and headline across all three keeps the comparison about layout, not content.

Reuse notes

A clear template for "here is this pattern on web and app" pages in a digital guidelines deck. The dark canvas makes the bright product mocks read as the subject. Needs real, consistent UI mockups; the green script lockup and athlete photography do the emotional work.