New Davidson College Homepage

New Homepage Design

Davidson's new homepage design is the culmination of months of work on project discovery and research, strategy, information architecture, and user experience. The design was the near unanimous choice of alumni and student focus groups.

Read More

Responsive Design - Desktop, Tablet, and Mobile

Tablet and Mobile Designs

Site visitors who access the new site on a tablet or mobile phone will see a slightly different design that is optimized based on screen size. Known as responsive design, the site will adjust automatically to the resolution of the device.

Read More

Lower Level Page Design

Lower Level Page Design

Lower level pages are designed with flexibility in mind featuring two- and three-column layouts, multiple masthead, callout, and main content area options, as well as news, events, and social media feeds.

Read More

Homepage Wireframes

Homepage Wireframes

Before any design work begins, wireframes are created for every iteration of the homepage and lower level page types. Since Davidson is doing a responsive design, wireframes need to be completed for desktop, tablet, and mobile views.

Read More

Inside Davidson Upgrade

Inside Davidson Gets an Upgrade

Over the summer Information Technology Services and College Communications have been working on an upgrade and design refresh of Inside Davidson, the college's intranet site.

Read More

Subscribe

Sign up to receive Web Redesign Project updates by e-mail whenever we post something new to this blog.

Tablet and Mobile Homepage Designs

Tablet ViewAs noted in previous posts, the new Web site will feature a responsive design where visitors who access the site on a tablet or mobile phone are served a slightly different design optimized for the screen size of each device.

For example, when viewed horizontally on an iPad, visitors might see the desktop homepage view but when the iPad is flipped to a vertical view the site would automatically adjust to accommodate the smaller screen size.

On an iPhone or Android phone, visitors would see a narrower view of the site with content optimized for display on a mobile phone. Navigation would be presented in drop-down menus and as buttons rather than long text-based lists.

The same site content will be seen across all devices — desktop computer, tablet, or mobile phone.

We recently approved homepage designs for tablet and mobile views. Included below is a gallery of the designs. Click on a thumbnail image to see a larger view of each design.

 

New Homepage Design Concept

New Davidson Homepage

Click image to view gallery

At last, we have a new homepage design! BarkleyREI presented us with four design concepts, which we quickly narrowed to two concepts that were selected for further modification.

The designs were tested with three focus groups: (1) current students, (2) alumni, and (3) faculty and staff. The chosen design was the near unanimous favorite of our student and alumni focus groups.

Features of New Homepage Design

  • Clean, traditional design that utilizes the Davidson red and black colors
  • Large, very visual featured content area focused on key themes and messaging
  • News and events area shown “above the fold” so will be easily viewable on smaller monitors
  • Callout area for important college initiatives. In the example, the callout area is represented by “The Arts” and “The Davidson Trust”
  • A social media streaming scroll, which pulls content from the college’s social media sites
  • Super footer with commonly accessed links
  • Drop-down navigation with an optional featured content area within the navigation area
  • Internal college audiences have been combined under a single Inside Davidson link, which is noted with a “lock” noting authentication is required

Responsive Design for Tablet and Mobile Devices

As noted in a previous post, the new website will feature a responsive design that will allow for better viewing on tablet and mobile phones. View also our homepage tablet and mobile designs.

Home Page Design Gallery

Homepage Wireframes

Before any work begins on developing design concepts, wireframes are created for the homepage and all lower level page templates. Wireframes are basic illustrations of the structure of pages and they help clarify the various elements that will go on every Web page — navigational elements, page functionality, content blocks, and page display scenarios. During the wireframe process you begin to see months of work on research, strategy, information architecture and user experience come together.

Since we are undertaking a responsive design for our project we need to create wireframes for desktop, tablet and mobile views as shown below. Click on each image to view a larger slideshow.

Home Page Desktop Wireframe

Page 5 of 9« First...«34567»...Last »