First round of visual design.
No video this week guys (sorry). But I do have some juicy eye-candy.
From a visual design perspective, my goals were as follows:
1. Create a modern (web 2.0) look and feel.
2. Create a skin that's fairly easy to dissect and modify. In other words, the visual elements should be simple, but not so simple as to lose all personality.
3. Create a concept that takes a step forward in branding Sakai. As of today, Sakai lacks any visual ownership beyond its logo. What I tried to do is expand on the playful elements (strokes of the type and symbol, colors, etc.) while still retaining an enterprise application UI.
The initial stages of the visual design were actually formed during the interaction design work I had presented earlier. I added color, refined various elements, and introduced some conceptual messaging (meet the Sakai Owl).
Important: Please do not focus too much on the content in the widgets. While the content suggests a social network environment, it is only a concept and used purely to foster the visual design exercise.
Also, it's worth mentioning that this visual design is prepared primarily for default Sakai. Your campus will have the option to customize the style to meet your branding requirements.
Enjoy!
|
|
|
Comments (2)
Apr 22, 2008
Mathieu Plourde says:
Hi Nathan, It's definitely an improvement from our current Sakai skin. But i ha...Hi Nathan,
It's definitely an improvement from our current Sakai skin. But i have some concerns about navigation:
1) I feel like the screen is getting really busy. I see four zones where i can navigate the site.
Here are some questions/concerns:
Mathieu
Apr 22, 2008
Nathan Pearson says:
> What makes a tool be a button (C) instead of a sidebar item (D)? The primary ...> What makes a tool be a button (C) instead of a sidebar item (D)?
The primary sidebar navigation is "pages" not tools. That's not to say that the sidebar couldn't contain a widget that presents navigation for tools. But that's something that will need to be designed out and built later as an enhancement.
> How many buttons (C) are you planning on making available, given the lack of space?
Not sure. Obviously in the mock-up, there are 5 quick links. But that should probably be a configuration option.
> Why is there a Edit under Assignments? Showing and extra option like that implies, in my mind, that I am viewing that tool or hovering the button with my mouse.
If you clicked on the Edit link, you would be presented with options to change which tools are displayed in your quick links.
> I had a hard time understanding where it was indicated that I was viewing the Home page of this course. If you're going to use the top of the sidebar as the title of the page area, you might want to make it more obvious, or to give it more breathing room. And what about getting rid of this title there and using a breadcrumb instead under the colored area? you could even get rid of the A) zone by doing so (by making the Dashboard the top link of the breadcrumb, like the following example: My Dashboard > Joe's New Site Home
This implies that the Dashboard is your home page, which it is not. The Dashboard is a site with its own home page. This is an example of another site, with its own home page. The "Return to Dashboard" link is just a handy way to get a user back to his or her "main" site if you will.
As for crumb trails – they're value is rather contentious. Certainly they make sense in some situations where navigation is fairly linear (ex: navigating from a home page to a piece of content or navigating from a home page to a product). But once the navigation jumps around a bit, you really run into more confusion with crumb trails than they're worth. There's actually quite a bit of information online about this issue aside from my own empirical observations.
As for the home page not being clearly marked... it's possible that you're right. But keep in mind, you're viewing 1 screen rather randomly. In a real-world situation, you're most likely entering this view by deliberately clicking on a link to access this site. So landing on this page – whether explicitly denoted as "home" or not certainly implies "home". Alternatively, you arrive at this page by navigating back from some other section of the site (ex: some tool or some other page). In this latter case, you had to click on a page link which are in visual proximity to the home link, so likely it would register in the user's mind that to return home, they just need to click on the home link again. The visual interplay of the tab metaphor would certainly help codify the idea also.
> I know the sidebar would be movable to the left, but i really feel it should be to the left in this prototype. It should be the primary course navigation in my mind, so it should be the first zone at the left of the screen.
At your campus, you can set the default in your theme to the left. But think about this:
a) Not all cultures read from left to right.
b) Blogs (which arguably are now the dominant type of online CMS) most often have the navigation on the right. So it's a fairly powerful convention that's developed to expect the navigation on the right.
c) I'm sure you've heard of "banner blindness" before. If not, it basically means that users tend to block-out certain things on a UI that offers them little value (ex: banner). Left hand navigation falls into this category since users generally navigate "content" rather than "structured navigation" – thanks to Google (and others). Therefor, users develop a bit of a myopia that doesn't include navigation – at least when its positioned in extremely predictable ways (ex: on the left). In fact, this could be one of the reasons most blogs have switched to the right column navigation, in that they're trying to cleverly trick the user into seeing and thereby using the navigation rather than ignoring it, but that's probably just a coincidence.
d) To the previous point, some of this has to do with emphasis and logical hierarchy of information. I think its safe to assume that "content" is king. Therefor, the supporting navigational structures around the content should fall off into the periphery. Forcing the user to be aware of the navigational crutches could be more of an annoyance, albeit a small one, than anything else.
e) And while I don't want you to get discouraged, as I value your input, this is likely a personal preference. Your opinion on the subject could be different from that of other (and maybe even "most") end-users, so it's important to keep that in mind.