Visual Mockups for Our New Website

Our website redesign project is progressing quickly! We’ve taken everything we’ve learned from assessing our information architecture blueprints and our lo-fi wireframes, and have created a few visual mockups of simple interior pages that we’re ready to share for feedback.

The Designs

Our designs strive for a more modern look than our current site, and a closer resemblance to the main Duke website. While these versions use a common color palette, the main differences lie in the weight of the masthead, the way the pages are framed, and the fonts that are used within.

Design 1

Design 1: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Design Two

Design 2: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Design Three

Design 3: Click to Enlarge Image or See Interactive Version (Duke IPs only)

Megadropdown Navigation

In the interactive designs (Duke IPs only), you’ll see the submenus drop down when mousing over the global navigation options in the masthead. The images within are likely just temporary placeholders.

Responsive Design

Since we know an increasing percentage of our website traffic comes via mobile devices, we’re designing the site so its display is optimized in different ways depending on the size of the viewport. You can test out the responsiveness by dragging your browser window to make it narrower or wider.