Omni-Directional Sprites Add Vibrance, Animation, and Speed to a Website

An Omni-Directional Sprite is really one image file that is a collection of images.  By combining all these images into one file you decrease page load size and calls resulting in a faster load time.  An example of a Omni-Directional Sprite is shown below:

Social Icons

By using either jQuery or standard CSS manipulation you can move around the Omni-Directional Sprite to show the particular image you want.

A common use of this is to make a button dynamic.  A button has 3 states: up, down, and hover.  To make a button give a more dynamic feel and to let the user know something can happen when they click on it you can show one image for the button when it is up and then show another image when it is hovered over.

Making a button dynamically active like this results in a better user interface allowing the user easier more confident navigation and giving them a more appealing site.  Thus inviting more returning users and resulting in higher conversion rates for actionable buttons.

Tagged As:

Saco Design | Web Design | Graphic Design | Dynamic Content

Read more of Saco Design's Blog.  Don't miss out on what's going on at the Saco Design Workshop.

Posted on 07/31/2012 at 11:12 am Viewed 4,767 times
Copyright Saco Design
Visit Site Avenger

Mobile Site | Full Site