Level Page Design Comps
Since the approval of the new home page design, we’ve been working with BarkleyREI on designs for lower level page templates. You will see several recognizable design elements that are being carried over from the new college home page design — the color palette, the blue page background gradient, header and global navigation, and the super footer.
Please keep in mind that the photos used in these design comps are only placeholders as is the Latin text used for filler. Also, we’ve overfilled the right sidebar to show multiple options available for displaying column call outs.
At this stage, BarkleyREI presented us with two unique design approaches for the level page templates. One design saw the color red introduced to the color palette (the same red used on the current site). After seeking feedback from several offices, we decided that the introduction of red to the color palette was a sharp departure from the color palette used for the new home page. So we have stayed with a mostly blue color palette in the level page designs.
Other Design Options We Considered
- Page Photo
Have the photo at the top of the page extend just across the main content area (single column) or also across the right sidebar (two column). We chose to display a wider photo. The page tracked better with a wider photo. - Navigation
We chose to go with navigation presented in a larger font with a subtle divider between each page name. The other option we considered featured navigation in a smaller font and in a more boxy style. - Right Sidebar
Present the right sidebar in a more boxy style separated from the main content area or go with the blue to white gradient we ultimately chose.
Tour of the Level Page Designs
Header
The header, which includes the college logo, global navigation, and search engine are carried over from the home page design.
Department Name
This will be text generated. Initially we had some concerns about how longer department names would list in this area, since the font size for this area was quite large. So we asked BarkleyREI to play with the font size and also try some larger site names in this section as can be seen in the second design comp “Institutes, Centers, and the Arts.” We are satisfied that this area can handle short and longer department names.
Department Site Navigation and Page Titles
We opted for a larger font size for department navigation. We really like this. It presents and reads much better and should make getting around the site easier. With that said, the new site will allow navigation to extend down into the site five levels, which is a real plus. Our current Web site extends to five levels deep, but the navigation moves to the right sidebar and can be confusing. We addressed this shortcoming with the new site.
You’ll also see that we are using breadcrumb navigation in the new site (above the main content area). This will also allow for an additional means of navigating lower sections of the site.
Presented just below the breadcrumb trail within the blue bar is the page name. For added flexibility, the page name can differ from the name used within the site navigation. This is a real plus.
Large Photo
Each lower level site will have the ability to display a large two column photo (or to not display the photo). This photo will include a space for a caption as well. We’ve also asked BarkleyREI to provide us with a second option where we can display a static photo with caption and 3-4 thumbnails that will allow site visitors to click through multiple photos at the top of some department pages.
Middle (Main) Column
As noted above, each page name will be presented in white over the blue bar that extends from the main column over the right sidebar.
Also within the main column you will see a department news section and an events section. Each department site will have the ability to bring in college news and events within their sites. We will be developing a site-wide keyword taxonomy or categories for all site content that will permit the site-wide sharing of content. Gone will be days of having to enter content multiple times in multiple places – this will hold true to department news items and events. RSS feeds will also be displayed within the news and event areas.
Right Sidebar
Faces of Saint Anselm is a multimedia feature. When visitors click on the “Faces” call out, a Flash overlay presentation (aka lightbox effect) will open over the page and visitors can view profiles of students, faculty, and alumni. The profiles will be presented similar to how the stories are on the new home page – text and multiple photos or text and a video.
Videos and photos will also open up as an overlay and a Flash video player or photo gallery will be presented.
Super Footer
The super footer will be carried over from the home page and used site-wide. Included within the super footer is the “My Links” area, which will allow frequent site visitors to display their own custom links that they access often.
What’s Coming Next
- Several more page comps will be generated for additional lower pages and site features, including the Flash video player and photo gallery overlays.
- Usability Testing – we will be preparing to host BarkleyREI on campus in late October to conduct two days of on-site usability testing. We will be testing the site designs with prospective students, current students, and faculty/staff.
- Evaluation of the Active Data Exchange calendar, the new calendar application we will most likely implement in the new site. You can see an example this calendar in action on the NC State Web site.
- Purchase of a Google Mini Search Appliance – this will provide site visitors with a more robust search experience.
- Discuss and select site hosting – do we host at the college or with an external hosting provider?
- Ingeniux CMS training – I will be attending a week-long developers training in Seattle in mid-October
- Content writing, content writing, and more content writing… not to mention site photography and video production
- Finalizing site migration plan (from our current site to our new site)
- Lots of other big stuff and little stuff, which we won’t bore you with…
Until next time…
Comments
Leave a Reply