Rounded Corners
1st edition — by Mel Hogan — Nov. 10, 2006
The Design Element
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. From ski instruction (
http://www.snowprobc.com
) to hotel sites (http://www.jqhhotels.com).
Rounded corners serve a secondary purpose as well. They break up the box-like nature of web-design. With rounded corners, we are not confined to table-like layouts as we can interlock rounded shapes invoking the blob-like feeling of Karim Rashid's product design. The downside is they can become a crutch in the same fashion as dropshadows and glows to the inexperienced designer.
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.
Mapable.com
uses the element extremely well. Note how all corners and shapes are enclosed or connected, a perfect visual metaphor for building community. While this could have been done using other elements, the use of rounded corners appears to be a conscience choice and aids in creating a fresh look, while still communicating an idea.
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.
Rounded corners are obviously here to stay. Have a care when using them however. In the words of Cameron Moll, don't decorate, communicate.
About Guest Writer Mel Hogan
Mel Hogan is an Interactive Art Director at MMGWorldwide in Kansas City, MO. When not designing luxury travel sites at work (http://www.oneandonly.com, http://www.silversea.com), Mel can be found updating his pseudo-blog-work-in-progress site at http://www.resolutionink.com/portfolio/.
Sample Usage
Links
Nifty Corners - Rounded corners with out images
Cool rounded corner script
Rounded corners in photoshop
More rounded corner commentary
