Revealing the purpose:
The graphic (orange hive) and text (welcome to hive. modern design for the home) on the top in every page convey the purpose of the website.

Hierarchical structure:
The navigation bar on the top and the left-to-right menu on the left of the page explicate the structure of the entire site.

Font:
There is only one font type with different size, color and boldface. Bigger texts are titles and subtitles. The green text implies where we are. When visitors mouse over a hyperlink, the texts become bold.

Gridding:
The content is perfectly aligned within a table.

Color:
The color scheme is simple, white background with grey and apple green text color. Such that visitors would pay more attention on the colorful images.

I believe http://www.sroown.com/ has a very successful design. It is the professional portfolio site of Ivan Aleksić, a new media designer, so I guess one would expect/hope that it would be good. At first I thought the site was flash but it’s all javascript. I believe he does a very good job of clearly and concisely using graphics to explain who he is and, especially, what he does.

He begins by clearly conveying the site’s purpose. He uses a descriptive window title, “Web Design Belgrade - beograd, serbia, srbija, yugoslavia, development, flash, dynamic, usa, canada, dubai, italy, experience,” clearly with the intention of being indexed by search engines. He also has a nice descriptive tag line, “professional portfolio of a new media designer ivan aleksić,” at the top of his site in red, which is very bold and eye catching on top of the white sroown text and black background.

He guides people to relevant content (i.e. his portfolio pieces) by grouping them together in a rigidly defined 4-column grid, which works well for him in this case. He also uses visual emphasis to draw the viewer’s attention to new pieces, revealing recency, with the red new star/badge in the top left corner of one of the images.

The images are a nice way to capture the viewer’s attention and to intrigue him/her. Once the viewer hovers over an image it fades out (as does the image below it)and is replaced by the information about the piece including “personal activities,” “project methods,” “client,” and “address.” I feel this animation is a very nice method of revealing the important information without having to make the viewer click through to a subpage about each individual project. This way a viewer can quickly scan the grid of images representing portfolio pieces and mouseover the ones he/she is interested in learning more about without having to continually navigate back and forth between the subpages of individual portfolio pieces and a main page listing all of the available portfolio pieces.

I also really like how he uses the text at the top, sroown (the title of the site), as a border. The right side of the n continues all the way down past the baseline and becomes a long descender running all of the way down the right side of the page, nicely framing/grouping all of the content within it. There is even a nice red rectangle with two ^ on it which travels down the side of this line as you scroll down the page. When you click on it, it automatically jumps you up to the top of the page no matter where you are. Since Ivan’s design is all within one page, vertically oriented, this is very useful.

It is a bit harder to get to Ivan’s other information (i.e. his contact information, resume/biography, recognitions, etc) but they are still easily accessible if you just scroll down. The layout he has chosen highlights his portfolio pieces and enhances their prominence. His work is clearly the most important part of his site. This indicates, to me at least, that he cares a lot about his work and that he lets it describe him.

SAME PAGE NAVIGATION
All of their content is entirely on the same page which sounds terrible at first, but being quite graphic-based in content, it reads more like a magazine or even a film negative rather than a webpage. The first part of the page presents who they are, a creative directing collective, with a very bold and clear logo. As one scrolls down, the browser window cleverly frames together every set of information, showcasing what the Saline Project does with actual examples of their work. What is also interesting is the alignment/placement of each video’s title. Your eye actually follows it diagonally across the space of the page, and back again, in a zig-zag pattern. Somehow this seems to be more effective and enables them to capture more information in less space, than if they chose to align all their videos/titles to the left. Each video opens up in its own separate quicktime pop-up window (with a layout consistent to the main page), making it convenient for viewers to access the meat of the page without having to go very far. At the very bottom are contact info, and thanks.

USER-CENTERED APPROACH
This is a different take from the usual hierarchy seen on most webpages that have separate tabs/header links which organize the website into Home About Content Links Contact, etc. The Saline Project’s page assumes the information the user desires to know, in the order that the user would want to know it, and displays it in such a way that sells their product.

BLACK SPACE FRAMING
Although we’ve been discussing the use of white space in class, it’s the use of black space which provides the framing or centering element and keeps the eye from wandering or being distracted.

PURPOSE=FUNCTION?
Overall, the complexity of highly visual graphics matched with a simple layout scheme and user interface makes this a successfully designed website. If there were multiple layers of navigation beneath this main page, I think it would become too convoluted and the user would be lost in a lot of unnecessary clutter. I also think a huge part of good design is the congruency between purpose and function, and the Saline Project’s webpage serves to introduce who they are, showcase their “products” and provide a way for clients to reach them to hire them for future jobs. The fact that they can get this done in less than 30 seconds (presuming that one simply scrolls and does not click to view a video) is efficient and impressive.

My eyes are first drawn to the photos of crafts; they are large, colorful, and placed appropriately (evenly and consistently spaced out, near the center). The grid used for the website is simple and elegant. Color is used wisely (I really like that under each photo, the item is listed in black, the seller in grey for less emphasis, and the price is in a bright green). Following website convention, panel navigation is shown on the lefthand side, though a search bar is placed at the top. I also like that the designer paired a serifed font (for “Etsy”) with sans-serifed font (everything else) - I think this really helps make what’s important, the title of the online store, stand out in an elegant way.

The various components of the site really could have made it a nightmare to use if not for the excellent design. This is accomplished in a number of ways:

Strong Grid Use
There are five columns on the page and they are clearly delineated by the color swatches across the top. They are well spaced and all aligned left, making them easy for the eye to follow. The entire site is built around this structure of five columns, allowing consistency of design. Further, since this mirrors the swatches at the top, focus is kept on them. The swatches remain at the top on all but one page on the site, and even then they remain large and a central feature.

Ease of use
All fonts are easy to read. Bright and interesting tooltips appear during mouseover to provide users with information. The consistency of the design, as mentioned above, makes navigation easier, as does the consistent position of the navigation menu. Because the scroll menus are embedded within the page design, the page position stays consistent (except on the create page). The only time this is broken is on the create page, making this page more confusing than others on the site. However, it maintains grid and focus (on the swatches) consistency. Even the highly complex swatch creation interface is well designed and relatively intuitive.

Color
Color is kept to a minimum and consistent. This works doubly well as it allows the color swatches which are the focus of the site to be really shown off. The use of both white and grey for the text allows highlighted text to stand out and remain readable. The only problem with the color scheme is that the words which are links are not immediately clear.

The current site kept a good search engine from the earlier blog which makes it easy to track down old articles. New articles are posted up front beneath their associated category. Overall I believe the usability of this site to be very good, with the assumption that everyone understands what the tabs at the top entail. If one doesn’t, the site does provide a description of them when clicked on.

The site can be seen on computers with few graphic abilities and with software for those with disabilities.

Aesthetically, this site is all shades of green but their cool layout is extended by the many pictures that dot each blog posts and keep the reader awake. They use color to effectively denote the domain of the subject by varying the tone of the hue.

Overall I find the site simple, true to its purpose and point: what more can one ask for?

The initial drop page mixes imagery and a simple color palette with text content in a way that is easy to understand and read. The design of the site makes a point to not use colors that are associated with the larger University organization. By doing so, it distinguishes itself and stands on its own merit as a school and as a website. (The UC Berkeley general website happens to be badly designed in my opinion).

Upon looking at the site, my eyes are drawn immediately to the prominent iSchool logo and name at the top of the screen. In my opinion, I would have preferred a Sans serif font for the name of the school at the top, but this font seems to work for this site. There is also a simple search box with a sans serif ’search’ option balancing the title on the page.

Slightly below that, there are small and elegant links that lead to other pages such as the intranet, the alumni network, and the larger Berkeley community. The grid seems to divide the page into four columns, and two row although the layout of the imagery overlaps the grid. This seems to encourage the viewer to ‘think outside the box’.

Each content box has rounded corners to give the overall appearance a softer look. The menu and navigation functions of the page are mainly in the column on the left side of the page. I also like the fact that the content on the front page appears within images, which leads to a greater level of interactivity between text content and the people at the school. I also like the choice of colors that have been used in this page as they stand on their own and give the school its own identity.

While Cesar’s doesn’t have a tagline on the page, so it’s not evident immediately that it’s a restaurant, I think this is made up for by the fact that 1. its pretty clear from the pictures, and 2. most people will not go to the website unless they know already that it’s a restaurant.

All their fonts are easy to read and sans serif.

I like how they use a simple three-part grid with sections and spacing in between to show their different restuarants and services. The colors are nice as well, using the three most contrasting colors already evident in their logo. The pictures are useful and not simply for show, since if you are not sure which Cesars you want, but you’ve been to one, you can glance at the picture to see if it’s the one you’re thinking of.

I also like how they have the contact info and hours for each restaurant on each square, so it’s easy to quickly see which address goes to which location, instead of looking down a list.

When you click on one of the restaraunts, it shows you a new page with a menu in the color of the restuarant you chose. This allows to user to clearly see where they navigated to.