As designers, we are always trying to new things. Experimenting continually and never stopping. We look for trends before they start and create our own. One trend that I’ve noticed is on the rise is the “hang-over effect.”
So what is the “hang-over” effect?
The “hang-over” is simple. It’s the illusion that the logo on a site hangs down on top of the header.
Usage
The hang-over effect can be used for several reasons. Most of the time, it is used to bring the viewers attention to the logo, add depth and help square off the site. Here are some of my favorite examples:
Top to bottom: ctlonline.org, designworklife.com, darrenhoyt.com
As with any stylistic decision, there are some things to keep in mind when implementing this effect:
- Make sure your logo doesn’t drop down too far. It can lead to a confusing and unorganized design. You’ll know it hangs to far down if it breaks your grid or starts competing with your main content.
- If you’re going to use shadows, don’t over do it. Having shadows that are too strong or spread too far can take away from the design. Your design will be most effective when it’s subtle.
- Consider what is behind your logo. Both designworklife.com and darrenhoyt.com have their logo hang-over in their headers. Because of this, they don’t have to worry about images being covered up. On the other hand, ctlonline.org has almost no header forcing them to hang their logo over into the main content area of the site. This is going to force the designer to take very page into consideration before making any changes or additions to to the site.
Without a doubt, the “hang-over” effect is both beautiful and functional. It allows the designer to bring visual interest to the site as well as help reinforce the logo. But, as with any tool that can be used for good, the “hang-over” effect can also be used for evil (in terms of design). It can take a way from the design and bring clutter to the site. No doubt hover, it is a trend that will continue to grow.