Web Engine migration · design samples

Three design directions

Each direction has a homepage and a Communication Department page. They share the current site's palette and type pairing (Noto Serif headings, Noto Sans body) and differ in structure, rhythm and the kind of interaction they lean on. Open any page and scroll: the animations only make sense in motion.

01

Editorial

Light and magazine-like. Asymmetric columns, generous white space, a hover-driven Explore list that swaps imagery, and a numbered accordion on the department page.

  • Word-by-word headline rise
  • Department marquee
  • Count-up statistics
  • Sticky in-page nav with scroll-spy
HomepageDepartment
02

Monument

Navy-led and ceremonial. Centered composition, square corners, full-bleed hero, a draggable departments carousel and a live countdown to the next meeting. Department page uses tabs and resource filters.

  • Header that turns solid on scroll
  • Drag-to-scroll carousel
  • Countdown to Spring Meeting
  • Team cards with slide-up captions
HomepageDepartment
03

Modular

Structured and tool-like. Split hero with a tilt-on-hover photo, a bento grid of entry points, a searchable department directory, and the department page closest to the mockup: sidebar nav, but decluttered.

  • 3D tilt hero card
  • Live directory search and filters
  • Year toggle on the schedule
  • Sidebar scroll-spy
HomepageDepartment

How to review

Every sample page has a floating bar at the bottom: switch between the homepage and department page, step to the previous or next design, or come back here with All designs. The Section names toggle labels each section of the page (for example “D2 · Hero”) so feedback can point at exact sections. Sections can be mixed and matched across designs; just name the section labels you like.

Shared foundations

Navy #04132BDenim #2F557FLogo blue #005480Sky #84ADFCBody #4A4A4APaper #F5F5F5Line #E5E7EB

Colors and fonts were read from the live site's computed styles. Flat surfaces only, no gradients; shadows are soft and used on hover. Photos are placeholders (the site's own aerial photo where available, otherwise stock) and team members are sample names. Statistics and event dates are illustrative and should be confirmed before publishing.