Tag Archives: mockups

Offices, a couple mockups for you

We have a few remaining designs to put in front of you, and I wanted to post these designs for administrative offices so that they can get circulated ASAP.

As always, some accompanying reading:

– I noticed that time after time, offices were using areas of their pages to post ephemeral campus/weather/springtime photography. It makes a lot of sense because they want pizazz, and their services aren’t always so photogenic – so I built some scenery into these templates. I think it’s a great way to get the feel of Colorado Springs, both on- and off-campus, without requiring too much upkeep.

– This template uses many of our previous design elements, so that we can keep the family resemblance pretty tight in this case – since users will be coming from landing pages, search, and from within departments.

– “Offices and Services” tag at top left would lead to the offices & services homepage.

– Content, as you can see, is variable! Blog feeds and videos can all be accommodated on these pages, as well as some very helpful lists, or a localized Quick Search box.

Great! Let me know if you have additional questions,


President's OfficeHuman Resources

Okay, departments: here are three options!

Performing all on one stage for the first time ever!

These three different options allow departments to push three different amounts of content.

  • Placemat is pushing the least amount of content, and has the most “ooh la la” photo-excitement.
  • Bikini is the middle ground – note that these three bikini examples use the spaces in various ways.
  • And three-column (Boo, Naming Committee!) is by far the newsiest of the designs, with lots of content – it depends on a photo really only for texture.

One additional note about color:

You’ll notice a few different highlight colors on these mockups. I like to let folks choose from an approved set of highlight colors – ones that we have agreed upon (and coded) in advance. Sometimes this is just the thing that makes page editors feel awesome, other times they just want it to be the school colors, darnit! Well, both are very possible… 🙂

Looking forward to hearing your thoughts about all of these!





More designs for your perusal

White Whale has produced some updated mockups which incorporate much of our feedback from Round 1. This bouquet includes two departmental home pages. The specific content and features of the pages are not final and will be chosen when we’re actually putting the pages together. Take a look at them here: http://coloradocollege.babywhale.net/bouquet/

Changes to note (since the first round designs):

  1. Admission has been moved to the right to make the navigation more intuitive (to reflect the order of the discovery process).
  2. Added “& Aid” to the admission heading
  3. Instead of “In this Section” the section navigation is labeled by the section name.
  4. The semi-transparent background behind the block dates was removed.
  5. Subtle changes to the backgrounds (main navigation and page body)
  6. “CC” removed from “The CC Curriculum” and “CC Newsroom”

Your comments are welcome here, or by email to me.

First Round Site Designs

Hello again!

You’re here to see the very first mockups for the new coloradocollege.edu – and we’ll get right to it! There are a few things to know about the following links:

  1. First, these are flat images, and not real, live Web pages. We have to simulate some interactivity at this stage, but we think it’s pretty easy to figure out the basics.
  2. Second, we’re only looking at a few variations on a homepage design, and some sketches of possible inside pages. Some of you who manage pages might not see something in here that fits your needs – but rest assured, there will be piles and piles of page designs to come!
  3. Finally, we need your ideas, enthusiasm, and feedback! Do you know a great course to feature, or an under-the-radar student photographer? Make sure to let us know.

So let’s go!

Home page mockup open

We’ll start with the most important part: how to get around.

Right now, much of the architecture of the CC site is based around its institutional structure. This can be confusing even for internal users, not to mention first-time visitors looking for the big picture. To help with this problem, none of the top 25 pages that tell you about Colorado College represent any one office or administrative unit. Instead, they are meant to be an introduction to that section, and to then guide users to relevant information and offices.

Full size: Navigation only

Next, emphasizing what makes us different.

Above the navigation band, there will be a space dedicated to highlighting the Block Plan, in real time. This area will feature a current course, related photograph, and links to learn more about the Block – including student-curated events and stories!

Full size: Homepage: Romanticism and Nature

Full size: Homepage: Featured Course expansion

Seconds after the page loads, the photos on the bottom split in the middle to reveal a few campus happenings.

Full size: Homepage: Romanticism and Nature – Photos Open

Full size: Homepage: Neuropharmacology – Photos Open

Full size: Homepage: Student Activism in the Civil Rights Movement – Photos Open

Full size: Homepage: Rocky Mountains as a Chemical System – Photos Open

Full size: Homepage: Hip Hop and Ya Don’t Stop – Photos Open

Any photo can be clicked, and it will move to the top of the pile and show a caption. Any of these photos could also be play-in-place videos.

Full size: Homepage with photo caption

A special page, eight times a year.

On only the first day of the block, the area doubles to reveal more of the photo.

Full size: Homepage: First day of Block Five

And of course, adjusting accordingly for Block Break.

Full size: Block Break 1

Full size: Block Break 2

Styles and sketches for possible inside pages:

Full size: Student Activities

Full size: The Application Process

UPDATE: The video of the unveiling presentation is up — you can view it here: http://vimeo.com/17887527. Thanks to the students who helped with the video: Zane Bridgers and Sarah White for videography and editing and Ryan Loeffler for help with sound.