There are times when you may want to call attention to something on your website. It could be a special event, an new product or service, an upcoming redesign, or any other number of things. If we haven’t previously answered this question from a design perspective (such as including a special “breaking news” element in our preexisting design, how can we call attention to this without radically rethinking our design?
Ideally these solutions should fit within your current design (in other words, you should have thought about this scenario and incorporated it into your initial design). But you didn’t, that’s why you’re here.
You need a solution that is visually elegant, but simple (and quick!) to develop and implement on your site.
So, the question becomes, what design techniques are available to add a call out that would “fit” your current design?
Badges and Buttons
Badges? We don’t need no stinking badges!
An often over-used design element with “Web 2.0” designs is the “badge”. This is reminiscent to the physical-world equivalent of slapping a sticker on a product to call out “New and Improved!”, “Price Reduced!”, “Clearance”, etc.
These are often referred to as “star bursts”.
Ribbons
Just like the ribbons in the Miss America pageant that wrap around the contestants, web ribbons wrap around your web page. Ribbons typically “wrap” a band around one corner of your page, though sometimes they cover the entire corner.
A more elegant or “formal” looking ribbon hangs down from the top of the page like the banners you see hanging from castles.
Dog-ear or Page Curl
The librarian used to scold you when you’d dog-ear the pages of your books, now you can dog-ear your web pages, too!
If you don’t make a “crease” you’re left with a “curl”. Both look nice.
These are often implemented with some kind of motion to them, whether that means they “waggle” in the virtual breeze (to catch your attention) or animate open when you mouse-over them (or click and drag them), typically there is a larger message “behind” the page that you’re looking at that’s “opened” by interacting with the dog-ear.
Sticky, Pinned, Clipped, or Stuck Notes
From multi-colored sticky notes, notes “pinned” with push pins, “clipped” with paperclips, “dangling” from a string or dog-tag chain, “taped” in place, or just “stuck” behind the rest of your site, notes tend to grab your attention.
Real world notes usually contain short-hand or very brief snippets of information, exactly they type of message that you’re trying to convey to your web readers. The metaphor translates very well.
What now?
Do you have another method that I didn’t mention? Do you have an example of one of the techniques noted above?
Please share your comments!
