Over the last five years we've taken a keen interest in how our customers'-customers interact with interfaces in the digital channel. Interface design, like all design, is a subjective thing that can be difficult to get right aesthetically and in the correct perception of content.

We've learned that understanding the trends and styles imprinted on your user can go a long way to getting there 'visually' but the 'perception' part is a little harder.

When it comes to perception, I've always considered Interface Design to be very different from general Graphic Design. It's a controversial issue among design nerds, but I've met a lot of creatives out there who tend to agree with me. Where things meet are in the principals, these are universal and knowing how to apply them in a medium is where the success/failure lies in a project. In design school you are taught the basic principals of design (Balance, Gradation, Repetition, Contrast, Harmony, Dominance, and Unity). When it comes to developing interactive interfaces for large chunks of content I've always found the following 4 principals to be essential:

1 : Harmony ... all about keeping things 'the same'. Applying this to interface design, achieving Harmony involves things like type and colour blocking. The rule here is to keep your numbers small. Limiting your project to two fonts, two block styles, etc. is a good start.

2 : Contrast It's important in all this blending and repetition to have a few anchors that stick out to provide contrast. This can be achieved by having an item in a stark juxtaposition of colour or texture, even breaking an alignment pattern intentionally. These elements are usually the first thing a reviewer wants to remove (as they 'stick out'), but as a good web designer they are what you need to defend the most. In a design, these can be elements such as logos, headlines, icons, etc. If you've done your job right, they should 'stick out'.

3 : Repetition/Pattern Everybody understands this one. We're taught at a young age to understand patterns, the human brain is wired to find them in everything (and we're very good at it too). The Harmony principal helps here a lot, as by keeping your numbers down you inevitably create patterns in type and colour. However, good designers are masters of 'pattern hiding'. Keeping patterns subtle and not so literal is pretty key. Let's all promise to forget stripes.

4 : Emphasis/Dominance This one borrows from Contrast, except in web design it's achieved through common 'Layout Patterns'. Patterns are about about placing your contrast items in strategic locations to create read flow. Good designers will nest patterns to create hierarchy reading/scan flows as the user's eye moves from one anchor item to another.

• Types of Interface Patterns •

C-Pattern

The C-Pattern is by far the most popular interface pattern on the web. Likely because it is really good at delivering 'emphasis' (see the 'Nest' area) while still maintaining a sense of structure. A (Header) and D (Footer) are tied together with 70%/30% split giving emphasis on most content inside the C (Content Area) with B (Auxiliary Content) offering carry-through. These layout types usually test very well as users are able to quickly decipher what content stays the same and what changes page-to-page.

Reverse C-Pattern

The Reverse C-Pattern is what you would expect and is becoming more popular on the web today. I find this pattern to be more difficult to digest but it does create a larger nest area. The BBC uses this technique well to pull in a ton of content as lead-ins with mostly equal weight. The real trick behind C patterns is having an element such as a colour or blocking repeat in both the header and footer that isn't used heavily in B or C.

Z-Pattern

The Z-Pattern is rare, and is more common in other mediums. It's not good with large blocks of content but when used illustratively it can be incredibly powerful. Anchors in this pattern can shift a bit. As you can see in this Vimeo capture, something seemingly silly like the floating cloud is essential to the layout working. Also there is no anchor in the bottom right, otherwise this would feel like a failed C layout attempt.

Top-Down-Pattern

Top-Down is a common start for web developers. CNN is using it here to give emphasis to numerous headlines which works alright. Top-Down requires some centred content, along with a visually consistent A and D. This works well for high-impact homepages but can be difficult to pull off on multi-page sites. I've used it for a few one page microsites and blog posts.

In my opinion, the ubiquity of the content management system has created a themed homogeny even in the professional interface design field. I think it's critical to give design as much attention as the platform on which it resides.