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.
-
- Desktop Wireframe
-
- Tablet Wireframe
-
- Mobile Wireframe
What is Responsive Web Design?
With the increased use of mobile devices, including tablets and smart phones, gone are the days when you can afford to design Web sites for only desktop browsers. The new Davidson Web site will feature a responsive design, which as the name implies, is a method of Web development where the design of a site adjusts or is optimized to the screen size or platform on which it is displayed. So what you see when viewing on a tablet or smart phone may appear slightly different from what you might see on a desktop computer. The written content generally appears the same across all devices.
Responsive Web design, as the name implies, is a style of Web development where content responds to the device on which it is being rendered. So, while a Web site viewed from within a traditional desktop browser might be rendered one way, a tablet or smartphone browser will be smart enough to render that same code in a different way—one that takes into account the size and resolution of a smaller screen. Text is reflowed, navigation is simplified, and images are shrunk, or even hidden entirely, and the code to do it all needs only be written once. — Matthew Braga, Ars Technica - May 17, 2012
Going the responsive design route means additional hours will need to be dedicated to wireframing various Web views for desktop, tablet and mobile screen sizes. It will also require additional design iterations for each. We believe the extra time required at the front end will pay dividends down the road as Web visitors will be presented with a more optimized Web experience on tablets and mobile phones.
We will post the responsive designs for tablet and mobile once they are finalized.
Additional Information on Responsive Design
- Responsive Web Design (A List Apart)
- Responsive Web Design: What It Is and How To Use It (Smashing Magazine)
- What’s Responsive Web design all About?: Code once, display nicely on any device (Ars Technica)
Featured Content Themes
During the discovery and strategy phases of the redesign project we identified a set of overarching content themes. Each of the top-level themes may be considered as a means to focus content throughout the site. The subpoints beneath each are simply examples of the types of articles/stories that can be included within each, and is not meant to be all-inclusive or to imply that these examples would not also fit within another category.
All themes include multiple types of content (news, events, spotlights), while focusing on a variety of people (primarily students, but also focusing on faculty, staff, alumni, coaches).
- Faith & Religion
- Honor code
- Facilities
- Leadership
Opportunity
- The Davidson Trust
- First-generation students
- Academics
- Diversity
- Study Abroad & Global Classroom
- Student successes
- Awards
- Alumni accomplishments
Student Life
- Facilities
- Activities
- Clubs / organizations
- Division I athletics
- Facilities
