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.

12 thoughts on “First Round Site Designs

  1. Karen

    For anyone who would like to watch the unveiling presentation, the video should be up tomorrow afternoon.
    Please post your comments on the designs to this post, or email me directly.

  2. ntrujillo

    I think these initial designs are pretty brilliant!

    I’m very interested and excited to see how this design will apply to administrative office pages like Office of Alumni and Parent Relations, etc.

  3. Weston

    Really enjoy the new design. I especially like the idea that the wider the screen/window is, the more photos we’ll see. Also looking forward to simpler web editing. I think I’d like to see how the design would scale to smaller mobile screens. Curious to see how we can create a ‘tech services’ page, which would include the help desk, instructional technology, media services and library tech stuff, as well as computer labs and departmental computers available for check out.

  4. Owen Cramer

    It’s cleaner to look at. It’s much more marketing-oriented–I think I’d mostly tune out the whole page and go to the “for us” column way over to the right. But “us” ought somehow to include alums and even prospective students to the extent they start to feel identified.
    I don’t yet get from the photo montage all that much sense of place: a lab is a lab, and words like “down in the valley” don’t take me to any valley I recognize.
    So I’m still confused, a bit, by what I’m seeing here.

  5. Jorge

    The organization of the website in terms of navigation would make a lot more sense this way. The homepage is certainly a better reflection of what makes CC so unique. However I would just question how practical it would be to feature a new picture that often, or how you would manage to make sure people took pictures of everyday happenings in class. If the student body were to not be as committed to keep the website fresh and current we would see the same pictures over and over again. I also noticed that you have a section to show the course in detail, where you display things like “course syllabus” or “professor profile”, something that would only work if the faculty actually made profiles about themselves and were willing to have their syllabi published online. Don’t get me wrong, I think it is an absolutely brilliant idea, and it would do the block plan a lot of justice, but they are just a few things to consider.

    Whilst I really like the color scheme of the website in general, I feel that the beige used in the student activities “well this is a good way to start…” (http://coloradocollege.babywhale.net/design/?image=studentactivities), is not a color usually seen in CC,it is not very nice, it is quite quite boring, and it reminds me of the Kenyon college website. It just takes a way the fresh and exciting look that the rest of the website has.

    I think you are doing a great job!

  6. James

    What happens if the school ever gets rid of the block plan? This seems to be the major focus of the redesign and yet there’s more to life at CC than the block plan.

    After a user navigates into the site, say to the application process, the text/navigations tabs should roll up and become drop down buttons under different headings.

  7. Jason Pontius

    Hi everyone! Jason here from White Whale.

    I’m sure you’re all caught up in end-of-block craziness, but I wanted to make a few responses to some of these points before the holidays take over. We all really appreciate your responses, and please keep it up!

    Jordan: Gosh, thanks!

    ntrujillo: Thanks! We’re already starting on designs for office pages of the type you describe. Obviously they might not be as image-driven as the homepage, but they’ll still have a lot of energy and dynamism to them. Do you work for Alumni and Parent Relations? Feel free to let us know the sorts of things you think would work on pages like that and we’ll try to incorporate them.

    Weston: Once we get into the buildout stage, we’ll plan out the design’s downscalability (is that a word?) to mobile devices. And regarding your “tech services” page: Tags, baby!

    Owen: Certainly we do expect that some audiences will bypass the homepage and go right to those “For Us” pages, which will be much more nuts-and-bolts, with lots more links to everything of interest to those particular audiences. Alumni are already included in that list; you’re right that prospective students aren’t, but that’s because the specific information they need is going to be found in the Admission section of the site (“Introduce Yourself,” for example) and we’re trying not to create any confusion about where they should go. But we’d also expect them to visit the Current Students page, just to get a sense of what real-life CC students are interested in. Regarding sense of place: We could of course show big pictures of Pikes Peak (and some of these screens do), but what we’re really shooting for is more of a *cumulative* sense of place; when you’ve seen a lot of photos, many of which were taken outside, you’ll develop a more realistic sense of what CC looks and feels like. If there are particular suggestions you have for imagery or text that would meet your expectations better, we’d love to hear them— of course, these words and photos are essentially placeholders, and the CC community will be filling in those blanks once the site’s live.

    Jorge: Thanks for the comments! It’s true that the new site will require more ongoing attention to be sure the photos stay fresh. We’ve met with some students in the CC Photo Club, and we’re hoping to work with them (as well as student, faculty and staff photographers across campus) to let them know their work is welcome on the new site. Regarding the featured courses, with their high level of detail: You’re right that we can’t expect that from every professor of every course. In fact, there might only be a few featured courses per block, with faculty who’ve agreed ahead of time to participate.

    James: We haven’t heard anything about the block plan going away, fortunately. But in any case, only the top of the page is devoted to the block; everything from the navigation and down is really about all of CC in general. Your idea about the navigation rolling up on inside pages is a great one; we’ve been thinking about something like that already, so your suggestion is especially welcome. Thanks a lot.

    Have a great holiday break!

  8. arielle

    Loving everything I’m seeing so far. I think it showcases the things that make CC distinctive–the Block Plan, its students, its location, and more–terrifically. Also, as a CC student, I’m really happy to see the opportunities for the student body to be involved in curating the website and lending our voice to it in such an immediate way. Excited to see more as it moves forward.

    I will say: I’m not a particular fan of the font for “The Basics/Admission/Academics.” It looks too much like a Bank Gothic to me. (I’m not sure if that’s even something to consider at this point.) Also, I’m on a 13-inch laptop and the collage of photos feels too large for the size of my browser. It crowds the photos and makes looking at them overwhelming.

  9. Ann-Marie Manning

    Overall I want to say that the new pages (Home page options and internal pages) look great. Here are some specific comments that I have.

    The Full Size: Homepage: Romanticism & Nature is the page or option I like the best. However, for a Homepage and internal pages for student activities and the application process page, it would be nice to see kids of color. It may be easier for a student of color to see himself or herself at CC if they see students of color.

    I like the Full Size Student Activism and Hip Hop and Ya Don’t Stop photos the best.

    Having something for Block Breaks is a great idea and I think it would be good to change it up.

    The Full Size Student Activities and The Application Process for styles and sketches was solid. The subject lines to click on made sense and felt user friendly to me.

    I hope this is helpful. I know this is a lot of work and I think you are doing a great job on this.
    Ann-Marie

  10. Pingback: » Strategic Recommendations CC Web Overhaul & Redesign

Comments are closed.