Corner Treatments

Problem

You have a plain-Jane UI that you want to spruce up with simple design elements.

Solution

Use rounded, odd-angled, or cut off corners on rectangular elements to liven up your UI and add visual interest.

Context

• Since this applies to corners, you need to have corners—usually rectangular items like frames, buttons, tabs, boxes, etc.
• You’re not intentionally sticking with sharp corners as part of the intended style.

Rationale

Using corner treatments is an easy way to make your UI look and feel more interesting to users. Because rectangular elements are by default expected to have sharp, right-angle corners, it is more noticeable when they don’t. Similarly, using corner treatments shows an attention to detail that most will appreciate.

Curves and rounded edges are also often perceived as more elegant, smooth, and comfortable. If you’re going for that look and feel, then treating your corners is a relatively easy way to get part-way there.

Using unusual angles on corners can provide a more techie, edgy, or energetic feel. They’re sharp like right-angles, but because they’re non-standard, they still add that element of visual interest and detail.

Using some combination of curves and angles can lead to an interesting theme as well. No matter what you choose, you need to be consistent to establish an overall consistent look and feel that doesn’t appear jumbled (unless that is the effect you’re after—not usually!).

Implementation

You should base your choice of corner treatments on the overall feel that you are after. Probably the most common treatment is slight rounding—it’s an easy, unobtrusive way to simply make things look a tad more styled. If you don’t know what else to do, that’s a good place to start. You’ll usually want to try different things, with different fonts, to see how it feels combined with all of the visual elements in a view.

Some technologies make this easier, such as corner radius on WPF and Silverlight elements; for standard Web technologies, you’ll likely need to use a graphics program of some sort to create the style and then export it as images or slices.

Often you won’t want to use the same corner treatment on every rectangular element. For instance, you might use them on buttons and tabs but not on boxes and frames, or you can have the top corners treated but leave the bottoms right-angled. As with any style technique, don’t go overboard or it risks sticking out and feeling amateurish. Show the different options to different folks to gauge their reactions.

Whatever you do, be consistent across different views within your app or site. Corner treatments can play a big part in establishing your overall Visual Framework.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinToolbarsManager (Window Style) or all Windows Forms Control with a border style of “rounded” to implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF XamRibbon’s Window. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser calledXamRibbon Window to see it in action.

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Consistency, Visual Design.