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

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

Design Two
Design Two

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

Design Three
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.


One thought on “Visual Mockups for Our New Website”

  1. Great new design. Social Media buttons are there which is crucial in this day and age. Like the rounded buttons and primary/secondary button colours. It is very clean, lots of white space which is nice and easy to read….and most importantly, you have considered responsive design. So your mobile users are taken care of!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>