logo

Mead.Design

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.

Categories

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

  4. KITTENS FOR SALE!

    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.

Skills

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.

bill@mead.design
530-219-8998

Your Name (required)

Your Email (required)

Subject

Your Message

Anti Spambot Question