Multimedia Project Planning: Design Melt Down: Study the Design Elements

Badges

Badges are so web 2.0. One simply can't be a modern site without a badge! These Badges are intended to be attention grabbers. It can certainly draw the eye if one has something new or exceedingly important to highlight.

Some sites put them to marvelous use and emphasis the most important elements. From the “Buy now!” to the “hire me” or the “Love design”. These badges serve a purpose and take a prominent place in the page. Remember there is a hierarchy to a page, and designer must work the scale of importance, to emphasize everything is to emphasize nothing.

This element carries so much more power and potential than some designers realize, a badge can easily be the first element to be noticed on the page. Putting something meaningless in it seems like a really bad idea. Many of the samples contain calls to action, a brilliant way to use the element to draw users to the action one want them to take.

McNeil knows if he had a product to sell he would either make it a "Buy Now" badge, or he would put the most compelling reason to buy his product in the badge. Reduce the sites purpose to the single most important point, do you want to be hired? Do you want to sell a product? Do users need to know the site is pure spam? These little badges not only look nice, but they serve a role and can be a powerful design tool.

Examples:

Decorative Animation

Decorative Animation is animation in an interface that is pretty much there for decoration. McNeil finds the use of decorative animation to be quiet inspiring. It is fascinating to see how a little (or a lot) of animation can really breath some life into a design.

Example:

http://www.lab25.com/ - this website has interesting decorative animation for its buttons and logo.

Icons

Icons are such incredible little visual devices. Their sole purpose is to communicate lots of information in the simplest possible way. Their usage on the web is of course no surprise. The web is an environment filled with impatience, wandering eyes, and easy distractions; a place in dire need of quick visual indicators. Icon can serve as great helpers showing users where to go for what they need. Instead of scanning text user can scan images, and often they will tell user what he or she needs. This is no different then street signs, where recognizable forms communicate quicker than text.

The key to successful usage of icons in a web design is integration. Not only should the style of the icons fit the site, but the color pallet as well. This seems obvious, but at the same time it can be so easy to not do this. The icons should really work to reinforce the design of the site and in many ways become the focus.

The use of icons in design is not likely to ever end. The practice of summing up lots of information in a little package will never go away. It all boils down to the most rapid form of communication possible. Design is in fact all about communication.

Examples:

http://www.cropix.ru/ - this website has amazing icons designs.

http://www.icozon.com/ - has many icons for its webpages.

Mascots

If there is one thing missing for the typical web site it is personality. Personality is hard to get across with out putting some "live" element into a design. Mascots are just such a tool. They imbue the design with a character which inevitable has some sort of personality. The amazing thing is that these characters need not be animated in any way to effectively fill this roll.

Not every site needs a mascot, but it can most certainly be a powerful tool to help set the mood designer wants his or her site to have.

Examples:

Ornate Elements

Ornaments have been around for ages and have long been used by typesetters and blacksmiths. They have decorated everything from park benches to wedding invitations, and now of course, web sites.

Ornaments are beautiful and can really enhance the feel of site. In others it is more subtle and it is simply used as decorative element adding an extra bit of flair to a page.

Ornate elements are one of those things that may gain more trendy status from time to time, but on the whole will never go away or be out of style. Ornament has always been really beautiful and will always have a place. What McNeil finds truly wonderful is when people use it in ways that feel fresh, new, and just look beautiful. Not just beautiful in a Victorian old school sort of way, but when the element is morphed into an uber-modern and stylish element.

Example:

Rounded Corners

The rounded corner. A mainstay in web design since the beginning of the Internet. Typically, rounded corners work well on sites that communicate technological design , but now, rounded corners can be used to communicate a variety of themes.

Rounded corners serve a secondary purpose as well. They break up the box-like nature of web design. With rounded corners.

Rounded corners should server as a communicative device first, and a decorative device second. Consider The Church at Bethany site. The rounded corners here serve a dual purpose, initially breaking up the box-like layout, but more importantly, giving the church an appeal to an audience accustomed to the rounded look, thereby inviting them in.

Example:

Scottsaw.com's use of rounded corners initially appears to be an arbitrary decision. Look closer at the art. It's full of organic shapes, would another framing device have been more appropriate? Doubtful.

Web Typography

Typography can be a beautiful thing, and sometimes it can be the most elegant part of a design. The sites featured below followed this model and choose to use the type as the primary focus. This reduces the need to rely on strong photography or illustration and forced them to resort to basic elements such as hierarchy, balance, and composition. The end results are elegant and very readable.