Sakai screenshots

Information

This is a collection of Sakai screenshots from the community

Instructions

Please attach your screenshots to this page. Include 1 shot of your portal, 1 shot of the announcements tool in any course, and 1 shot of the gradebook (do not take a picture of student grades which should be private!). Name your images using your institutional abbreviation and then an underscore and then either portal, announcements, or gradebook (e.g. VT_portal.jpg).
Add a note about who you are and what institution you are from. Also, please add any design rationale as appropriate to help us understand your design decisions.

Note: You need to attach the image under the 'Attachments' tab first. Then from the 'Edit' tab you can use the 'Insert Image' link to choose it.

Institution: Virginia Tech
Name: Aaron Zeckoski
Screenshots:
!VT_portal.jpg|thumbnail! !VT_announcements.jpg|thumbnail! !VT_gradebook.jpg|thumbnail!

Institution: Virginia Tech
Name: Aaron Zeckoski
Screenshots:

Institution: Foothill College
Name: Vivie Sinou
Screenshots:

Institution: Rutgers University
Name: Joe Delaney
Screenshots:

Institution: UC Berkeley
Name: Daphne Ogle
Screeenshots:

Institution: University of Michigan
Name: Gonzalo Silverio
Screeenshots:

Flat, sparse, minimalist look that intends to blend with other UM enterprise systems such as webmail (http://mail.umich.edu), web-afs (http://mfile.umich.edu), etc.

Use of whitespace and alignment to separate blocks (instead of color and lines). Different treatments for site types - light blue highlights for workspaces and admin sites, yellow for courses and brown for projects - a few hover touches that only DOM1 and CSS1 compliant browsers will notice.

Institution: Boston University School of Management
Name: Kathy Moore
Screeenshots:

Links are consistently underlined or, for some action-related links, modified to simulate buttons.

Top tabs are modified to look like file-folder tabs.

Toolbar is treated very differently from tabs to emphasize different navigational logic--note different color as well as styling.

A lot of this has worked its way into the default skin over the last year. (Yay!)

Institution: Universidade Fernando Pessoa
Name: Luis Borges Gouveia
Screenshots:

Comments:
The UFPUV skin needs to go along with the traditional green flavour that rules the identity of the UFP university (the additional UV in the sakai service, stands for Virtual University). The main idea is to provide a more colourfull environment for the platform using a contrast background and a series of more three colours with
some varieties of green. Most of the graphic elements remain the same, but the area tabs have been worked to improve legibillity.

Institution: Texas State University | San Marcos

Name: Steve Lux
Screeenshots:

Unfortunately, I don't have access to gradebook, so I posted an email archive screen capture instead.

Summary

Our current brand personality was meant to portray: slightly traditional (color palette), high tech, forward looking and a dash of fun. We're confirming the brand personality choice with user testing (yes, we put the cart before the horse), so it could change. We're trying to lure the entire Texas State University user base from our existing Blackboard implementation. We just had an SAP rollout that most faculty and staff loathed, so that was our 'what not to do' metric. With those two user segments, we're hoping to offer sakai (TRACS) with enough superior features that they'll migrate voluntarily. We've had a pretty successful pilot thus far with only a few glaring gaps to fill.

The following links were precursors to this branding effort. It might give you guys/gals some context as to where we're coming from:

http://www.txstate.edu - Our home page
https://synergy.txstate.edu - Our Outlook Web Access - rebranded as Bobcat Mail the first branded utility the university has seen. Its predecessor was WebMail and was pretty much out of the box skinned by my guess.

Brand identity breakdown

Color: Our current university brand is very conservative so we had to give a strong nod as a sub brand. The design had to really work towards pulling it back to high tech because of this.
Web Type: Verdana, because it's a fun typeface and helps offset the conservative brand that the university owns. Arial or Helvetica were too conservative.
University Logo Type: Garamond, a conservative typeface created circa 1400? not sure, but its pretty old and casts the a deeply traditional shadow onto any page. Its hierarchy is top of the page, so it proved to be a little challenging.
TRACS logo type: Officina Sans, sans-serif face, making it post modern, but a little more fun because of its nuanced handling by the face designer. Officina is a friendly typeface that is well proportioned and had a moderately deep family of faces to choose from.
Imagery: angles were used in a way that's not circa 2000 web design, but conservative tech. It's a little difficult to implement via CSS and that was intentional to communicate: tech prowess, professional image and uniqueness from other SAKAI implementations. We wanted our users to feel like this is special, part of the university and not right out of the box.

alpha level, latest UI design

As a point of interest, I'll also post where we want to take our User Interface. We're still confirming user responses so it's not 100% concrete. I realize it's a little beyond the scope of this page, but is closely tied to design decisions:

DISCLAIMER: very very alpha level UI design.

I was told by our programmer extraordinaire Zach A. Thomas that this wouldn't require any core code mods. That was a relief because while UI and GUI ideas are great, they ALWAYS have a reality of programming.

We're proposing to move out class name and description into the page. This moves the name out of the tab based schema and brings in a site description for each page. Also, we're toying with the idea of letting someone have the ability to edit up to 5 main tabs with proprietary names. i.e. instead of "courses" and/or "projects" they could control it themselves and possibly categorize each class.

Another very important discussion we're having about UI is the tool list on the left. On more than one of our sites there are 15+ links. It gets VERY monotonous and we're looking into a way to allow categorization of those links with titles. Our UI group is still in its infancy, but there are some really interesting ideas we've come up with so far to solve sakai UI idiosyncrasies.

Again, HUUUUUUUUGE disclaimer, but thought others in the Sakai UI workgroup might benefit in some way from our UI brainstorming sessions.

Institution: Portland State University

Name: Nate Angell
Screenshots:

The Sakai instance at Portland State is called "Samla", after the Norse word for to "collect" or "gather", given our mascot, the Viking. We are currently in the process of updating our visual identity for both print and web, so we launched Samla with this interim design that echos our current main university website design. We expect to revise our design to match our new visual identity by Fall 2006.

Institution: Albany Medical Center

Screens:

Basically just a mix of concepts we've seen in Sakai skins and other websites. We haven't done much to the tool skins (e.g. links, borders, buttons) - pretty much just the wrapper at this point.

Institution: Oregon Health & Science University

Name: Maggie McVay Lynch

Screens:

We use the rSmart CLE skin with changes to reflect our institutional branding. I particularly like the portal page because it provides important information for the day as well as a number of links to help. We regularly update the faqs and tutorials based on helpdesk tickets. I also like the way the menus are grouped into larger categories. It makes it easier to locate exactly what is needed and its easy to point out to faculty which categories they see compared to which categories their students will see.