A “mouse over” is whenever the cursor moves over an element on a webpage. This element could be a link, button, section, you name it. Styling this action can help create a more interactive web design and usable website when done well.
Some benefits of styling mouse overs are:
- adds “movement” to an otherwise flat design
- helps the user know they have moved over an area that they can interact with
- adds a touch of design element that doesn’t have to be existing all the time
- can create a delightful “Easter egg” moment when the user interacts with the element
Take for instance, the icons that appear over each menu item on the navigation of Design Made Better, each help explain the action or information the user is going to find on the next page, not to mention they’re super cute.
Great, now how do I get them into my flat PSD file?
You can do this by simply creating a new layer (or layer group to keep everything tidy) in your photoshop document and styling that layer as you would like to see the mouse over when the user interacts with the trigger area.
Use the word “mouseover” or even simply “over” in addition to the original layer name in your new mouse over layer name to tell quickly which layers are the mouse overs and which are the originals.
Really handy if you’re handing your designs to someone else to implement, but can also help you remember what’s what in a complicated file.