Sree Anirudh J Bhandaram

Web Design & Development • Midterm Project

Usability • Examples

Good Websites aren't always the ones that have an amazing amount of graphics and content. surprisingly, great websites are simple, usable and are organized. Infact, websites which have amazing graphics and animations need greater bandwidth and thus, from a usability perspective are a bad choice.

I use two examples from CSS Zen Garden to provide two examples of designs that, in my opinion, are usable and not usable.

Non-usable design: Retro Theater
Why? The first thing i notice about this design is the absence of content! None of the content shows up in this site, the links or example! This makes the site unusable! This CSS style also does not go with the "theme". If I'm looking at a site titled "CSS Zen Garden", I would expect to see a website thats pleasing to the eye, subtle and has fresh colors, not a black page with missing content and a distracting background! As we resize the window, the theater stage we see resizes itself! After writing this description, i now realize that the stage is actually scrollable and that all the content is in there! .phew. there was no scroll bar to indicate this feature! this CSS style is bad!!! Its also got a lot of images around and those two areas on the left of the site give an impression of being parts that should've had all the links as in the original site!

Usable design: Orchid Beauty
Why? The site is very simple which makes it look amazing! The colors used are minimal, all i see on the page is variations of the color pink! The fonts chosen are really pleasing to the eye and the various elements of the page are distinguished by a good use of font size, color and they draw the right amount of attention required. No part of the page is too flashy, neither is any element hidden! When compared to the previous design, this design has minimal use of graphics and images which makes the website pretty lightweight!

Click on the tabs above to see more examples of usable and non-usable designs