assignment 12
Post a website with successful design below by Sunday, April 20. Drawing from the guidelines discussed in class, describe the elements that make the website successful.
33 Responses to “assignment 12”
Leave a Reply
You must login to post a comment.
I am using my personal website as my homework submission for this week. I am doing so because I am most familiar with the site, there isn’t much content (at the most, links go down two-levels deep), and I would like to use the opportunity to get comments that I can use to improve the site.
You can view it here:
http://people.ischool.berkeley.edu/~mikaly/
[Quick comments: I am looking for a photo of myself to put in the blank gray area of the home page. Also, descriptions for all portfolio items are all currently work-in-progress.]
First, I will briefly describe the site:
The site was made for potential employers to visit after receiving my resume.
I used some techniques learned in class to improve the design of the site. The main lesson applied was that of alignment. I went down to the pixel to make sure things were (left- and bottom-) aligned properly with other elements on the page. I also made sure that I didn’t “break the line” with pages with lots of text (e.g. check the bulleted section in the “resume” page). Here are some of the grid lines I used for the site:
http://people.ischool.berkeley.edu/~mikaly/classes/ia/explanation01.jpg
I tried to keep the main palette simple:
————————–
I usually use/adapt Nielson’s 10 Usability Heuristics to evaluate websites and since the slides from the last lecture are currently down, I’ll continue to do so here.
1. Visibility
Since the site is very simple, I tried to make the navigation and navigational cues simple as well. The navigation bar is on the top right, with the current page highlighted (css: bolder). All pages contain the “branding” of my logo, along with a large photo loosely-related to where the user is (e.g. network plugs for “contact” page, classroom chairs for “courses” page, etc.).
Links to internal pages and external websites are clearly differentiated – links to external sites have a icon pointed outwards. Both types of links are colored blue to contrast the regular, unlinked text. On mouse-overs (css: a:hover), links get an underline, and on click, change color to orange.
2. Matches between system and real world
Language is kept relatively simple for all types of visitors. However, since the site’s primary function is to show resume and portfolio items, there might be some domain-specific vocabulary.
3. User control and freedom
Links are clearly marked so that users can (hopefully) navigate through the site easily. Although the main layout of the site is fixed, font sizes can be modified by the user for better accessibility.
4. Consistency and standards
Consistency and standards were very important for my design. The convention of separating content from presentation was used (XHTML and CSS). By having the content (XHTML) adhere to the presentation (CSS), all pages have the same look-and-feel.
PHP was used to generate the XHTML. On the server-side, it makes it easier for me to keep track of and add new pages.
XHTML 1.0 Strict was used to ensure compatibility with all computer browsers (mobiles excluded) and improve accessibility.
CSS 2.1 was used to keep everything consistent.
5. Error prevention
Due to the simplicity of the site (and lack of interactivity), this heuristic is not fully applicable to my website.
6. Recognition rather than recall
As I mentioned, I tried to keep the navigation of the website simple so that users can recognize where they are by looking at the current page, without having to recall their path from the home page.
7. Flexibility and efficiency of use
Due to the simplicity of the site, this heuristic is not fully applicable to my website.
8. Aesthetic and minimalist design
I tried to keep everything relatively simple while making it look aesthetically pleasing (everything lines up, and the color palette is simple). The large images were used to bring some more color and liveliness to the site.
9. Help users recognize, diagnose, and recover from errors
Due to the simplicity of the site, this heuristic is not fully applicable to my website.
10. Help and documentation
Due to the simplicity of the site, this heuristic is not fully applicable to my website.
The webcomic sites I have seen vary widely in their design. In most cases I have seen, the site is far too “busy” with activescript dropdown menus and flashing banners everywhere. Generally on the comic page there is a comic and some commentary by the artist, however, trying to find either of these requires scrolling past useless info and ignoring many ads (e.g. http://www.sluggy.com).
Although not perfect, the AppleGeeks webcomic site is much better:
http://www.applegeeks.com/
Front page utility
They do not put too much on the front page, but they successfully convey all the information most visitors would want (both comics, the previous comic in thumbnail for continuity, when the next comic is expected, and if you scroll down they also have the commentary in depth).
There are links to the other parts of the site, but while they are towards the top as many websites have adopted as standard, they are de-emphasized by using a small font. Additionally, they indicate the current location by changing the text color of the link to the current area.
Alignment/Grid
Every item on the page is carefully aligned, both top-aligned with elements across the page and left aligned with elements within their grouping. The page clearly follows a well-defined grid.
Grouping/Association
All elements on the page are grouped by elegant and understated, rounded gray boxes. The elements are roughly broken into three sections: the header with links and the site name, the large left box with the comic and commentary, and the smaller right box with additional information about the current comic and the ads (again, simple google ads rather than flashing text or images).
Color
Aside from the images, the entire site is done in shades of gray and a single shade of orange. Within the site itself, the layout remains constant. Allowing the user to navigate through and keep a sense of position.
Use of whitespace
Lastly, all throughout the site, the artists have chosen to leave a nice, balanced, large cushion of whitespace (grayspace as it were) at either side, thus drawing the eye to the central column and giving a sense of simplicity despite the large amount of content.
The website I choose is http://www.hulu.com The site offers a vast selection of premium content on demand. You can watch short clips, trailers or even whole movies.
Utility
The main reason why I like the site is the great combination of nice design and easy navigation. Although it is a very modern site, the designer did not build a too fancy and flashy homepage, where the user gets distracted. The site conveys a clear message and is able to transport its purpose and value within seconds.
Alignment/grid
The homepage provides a very simple hierarchy and uses the same grid throughout all screens. The page is divided into the clear navigation bar, the “main screen”, where the movies are displayed and an additional section where the content is divided by category, which also leads to a great usability.
Color
Besides the main screen, which is a big eye-catcher, the whole homepage is done in gray and white. Only the hulu-logo is in a light green.
As an example of successful web design, I choose the Apple website at http://www.apple.com. The design of the website has been lauded by designers over and over again, and it may seem like a very obvious choice, but I thought this might provide an opportunity to deconstruct the design decisions that went into making of the website.
Drop Page :
The drop page hardly tries to explicate what the site or the company is about, but rather assumes that the user already knows what the company is about, and that knowledge is what led them here. In fact, the drop page does not even mention the company by name, it just has the ubiquitous symbol as the introduction to the site. Most of the emphasis seems to be on latest developments from the company, assuming that would be the content that most visitors would be interested in.
Gridding:
THe grid used is simple, symmetric and elegant. Shown in the picture is the grid of the iPod tab. The whole grid is centered on the page, further adding to the symmetry. The hierarchical breakdown into threes, while maintaining the width component, adds to the aesthetic quality of the page. The grid does a nice job of emphasizing the grouping too.
Color:
There are two distinct color palettes used on the page. One derived from gray, that occupies the header & footer of the page, and the other derived from Bluish Gray, that is used in the content of the page. Links leading to important actions are contrasted well on the page.
The grid doesn’t show up in the blog post. Here it is:
http://picasaweb.google.com/demaws/AEST01/photo#5191453934803972290
I like Cesar’s website (http://www.barcesar.com/)
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.
The website that I used as an example of good design is the iSchool website (http://ischool.berkeley.edu). This is not surprising and seems to be an obvious choice but I would like to elaborate on the elements that I find appealing about this site.
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.
I am nominating the worldchanging.com site for a well-designed website. (http://www.worldchanging.com/cities/). They recently redesigned this site from a basic blog to correlate to their recently published book. I think the more corporate, subject-oriented feel works better to entice new readers to the site…although I have to admit that for practical usability purposes I was happier with the old design. However, I think this new design serves its purpose; to attract new readers and keep their submissions organized as their editorial staff grows.
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?
For this assignment I returned to a site that we presented earlier in the semester.
http://kuler.adobe.com/
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.
I chose http://www.klickstudio.com as an example for successful web design. It’s the homepage of a design and advertising agency with a in my opinion great flash interface. Hence it requires the flash plugin and is not designed for every resolution.
But the animation are great and there is just as much information as necessary on the website.
I think http://www.etsy.com is a good example of successful web design. The website is a place for users to buy and sell handmade crafts, and while their tagline clearly states this, everything else about the website supports it.
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.
I chose the Saline Project (music video/commercial production house) http://salineproject.com/ as my example.
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.
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.
I choose http://hivemodern.com/ as the successful website design. As an architectural student, I regularly visit this website to discover some new design idea. It is not a fancy website, but it is simply, clean, and information is well-organized.
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.