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.
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:
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:
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.