http://headfirstlabs.com/books/hfhtml/chapter12/lounge/lounge.html
This is a web page set up to demonstrate basic web development with HTML and CSS and demonstrate good web design. True to its purpose, the page is slick, polished, and aesthetically pleasing, and a true testament to what can be done with only basic web development tools. There are a lot of subtle touches, with its smart implementation of font colors and sizes, the effective use of space, the clean look, and the overall symmetry, that click together and add up to make a great-looking web page that avoids many of the missteps of web design.
Many websites fall into several bad habits, one of which involves the use of overly flamboyant colors, whether it's for graphics, text, or backgrounds. This page eschews that mistake by opting for a more understated color scheme, in the form of a magenta logo and aqua-colored headings. This allows for a nice "Goldilocks effect". There aren't too many colors to make the page seem overbearing, but there aren't too few colors either so as to make it come across as bland or uninteresting. Instead, there's a good balance between having just enough color both to maintain a simple and polished look and to maintain users' interest.
Another common misstep in web design is putting too much content on a single page, making the page cluttered and disorganized. This page avoids that problem as well with its streamlined look and feel. There's not a lot of content on the page, but there is just enough to keep things interesting, proving once again that simple is sometimes better.
One of the big reasons why the page is so well-made is because of its simplicity. But as wonderful as simplicity can be, when overused, it can lead to another infamous design misstep: oversimplification. Sometimes, a website can be too simple to the point where users feel like it's boring or dumbing things down. No problems here, though. Although simple and streamlined, this web page manages to remain vibrant and interesting, thanks to a smart color scheme and thoughtful implementation of font sizes and styles, spacing, and margins. One particularly nice touch is the addition of the "Weekly Elixir Specials" section in its own border on the right-hand side of the page. This allows the elixirs to remain visible on the page but without it intruding on the rest of the content. Furthermore, I also like the "guarantee" text indented in its own aqua-colored border in the middle of the page. While some might be a little put off by its arguably intrusive position in the middle of the "Welcome" section, I think it works because its subdued color and text keep it from being to overwhelming or abrupt.
Overall, this web page is practically a textbook example of good web design in action, presenting understated colors, clean organization, effective use of stylistic elements, and a skillful balance between simplicity and complexity.
Saturday, October 3, 2009
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment