In today’s post, I want to talk about the field of interaction design by looking at a website that highlights new and interesting examples of web design that emphasize motion and interaction. Here is how the Interaction Design Association describes this field:

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.

Hover States is a website dedicated to showcasing interaction design, and is curated by Chambers Judd, the London-based digital design and development team. Chambers Judd acknowledges that the Hover States blog is a place to curate examples of great sites that include the best examples of movement and interaction, and captures each within an HTML5 video element so you can experience the look and feel without having to leave their site. Watching the looping video is fine for introductory purposes; however, I like to view the original source of the examples, as it provides an understanding of the underlying styles and code that make them possible. I will briefly feature three of the ten websites that demonstrate creative use of hover states.

Limner Studios

The latest website on the Hover States blog highlights Limner Studios which emphasizes a portfolio of their selected works with an interactive slide show including examples of website builds and designs, promotional material, and business cards. A screen capture portion of the interactive site is displayed in Figure B as shown in Google Version 23.0.1271.64 m:

As you scroll down the page, the slides move from bottom to top and from left to right with description text that remains on the left side as the slides continue their movement based on scrolling and hover states. Upon inspection, we find several jQuery scripts including jquery.color.js for Color Animations by John Resig. The jquery.slideShow.js, which is a Cycle Plugin, by M. Alsup, is under a dual license with MIT and GPL licenses, and you can view documentation and examples of the plugin. A custom JavaScript document lim.js supports Limner Studio functions including animations, event direction, window height, and image offsets. The final script file is waypoints.min.js which is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element. Waypoints plugin makes a solid base for modern UI patterns that depend on a user’s scroll position on the page; it, too, is under a dual license with MIT and GPL licenses. The HTML and CSS web documents are based on the HTML5 boilerplate template.

Haus Der Kunst

The next example features the visual identity of the website as a fine example of how one can work across print and web. The “Haus Der Kunst” logo implies movement and flexibility, and so the website reinforces this by stretching and adjusting with the movement of the mouse. The screen capture is displayed in Figure C as shown in Google Version 23.0.1271.64 m:

Under the hood, this website utilizes a combined thirteen script files including JavaScript, jQuery, and JSON, including addthis_widget.js, core.js, jquery.jscrollpane.js, jquery.masonry.min.js, jquery.mousewheel.js, and user_timeline.json. The website uses five CSS documents and the HTML is xml based.

.APP.ICNS

This website is a project that highlights application icons with a simple UX and subtle interaction that exposes an animation on the download button. This is a for-fun project by Andrew & Kara, and uses software called CandyBar to manage their icons. To utilize the icons, open up the iContainer file and click Use These Icons for easiest install; however, some icons like iCal, require a manual installation. Icons include Finder, Dashboard, Mail, iTunes, iPhoto, Preview, Stickies, TextEdit, and Chrome to name a few of the thirty-two available. A screen capture of the website is displayed in Figure D as shown in Google Version 23.0.1271.64 m:

This website utilizes three jQuery script files including appicns.jquery.js, jquery.easing.js, and jquery.js. Three CSS document files include the 1280.css, which is a 1280 Responsive Grid from 960 Grid System, and screen.css both by Andrew McCarthy; the HTML utilizes the HTML5 document type.