Ryan Boudreaux introduces the web design field called interaction design and a website that curates the best examples of its use.
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.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:
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.