Student Work – Microinteractions

October 15th, 2017

In the summer of 2016 I taught a course on interaction design with an exceptional group of students who were really hungry to dig deeper into JavaScript and the kinds of interactions that can be created to make user’s experiences with products more delightful. Articles about microinteractions and conference talks on the topic were popping up all over the place, so as a final project, students created a mini portfolio of microinteractions.

Although other topics have since pushed microinteractions out of the spotlight, it remains one of my favorite topics and provides a really interesting lens into the creation of experiences for users.

The examples provided here are by Patsy Diaz, who did a particularly good job putting together a portfolio of microinteractions that we explored in class and she adapted to her own unique style.

Microinteraction #1 Sliding Boxes

This is a fairly common interaction seen around the web, where a hover or a tap reveals more information. Patsy did a great job exploring it and creating a functional example.

Microinteraction #2  Turn Box

The early days of the web and really boring contact forms are over. There are much better ways of achieving that interaction today. Patsy provides a great example.

Microinteraction #3 Shrinking Navigation

A useful technique for keeping navigation present but somewhat out of the way as you scroll down the screen. Check out Patsy’s implementation.

Microinteraction #4 Lazy Loading Images

Waiting for images to load is no fun. This is a modern approach to a problem that has existed since the beginning of the web. Load a low resolution blurry image, and as the full size version comes in, replace it. See it in action!

Microinteraction #5 Roll Over

Roll over interactions have been around for along time, but they have needed some serious updating in the age of touch devices where there is no mouse to roll over, and tapping with your finger is not at all the same interaction. It is fun to figure out all the permutations that need to work when you add just one more input device. Try it out in both a browser and on a mobile device.

Comments are closed.


Recent Comments

    Featured Projects

    1. ZAP Creative

      Responsive Design, HTML, CSS, JS, PHP and WordPress

    2. Animal Shelter

      Responsive Design, HTML, CSS, JS, PHP and MySQL

    3. Experimental JavaScript

      Responsive Design, HTML, CSS, and JavaScript


      HTML, CSS & JavaScript focusing on jQuery plugins

    5. Syllabus Generator

      PHP & MySQL Web Application

    6. CodeSnap Web Application

      PHP & MySQL web application

    More Projects

    1. 4.23 Microsite

      Experimental JavaScript Microsite

    2. Audio Space

      HTML, CSS & jQuery

    3. Bttrfly Productions

      HTML, CSS, JS, & WordPress

    4. Desktop Repainter

      HTML, CSS & JS

    5. Bluephant Dental

      HTML, CSS, & JS

    6. Zen Music Festival

      HTML & CSS

    About William Mead…

    William Mead Photo

    This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

    Find me on these networks

    Professional Qualities

    • Enthusiastic about teaching, learning, managing projects and building products for the web.
    • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
    • Thoroughly engaged in the design and web development industries.
    • A visual learner with an analytical mind.
    • Introspective and always striving for improvement.


    I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

    Contact Me…

    I look forward to hearing from you. Please contact me using the form or directly by email or phone.


      Your Name (required)

      Your Email (required)


      Your Message

      Anti Spambot Question