Design for Developers

Interaction Exercise

Design for Developers

Check out a free preview of the full Design for Developers course

The "Interaction Exercise" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah sets up the exercise involving making two thumbnails and one story board of a possible interaction on your example site.

Preview
Close

Transcript from the "Interaction Exercise" Lesson

[00:00:00]
>> Sarah Drasner: All right, so we have another exercise. You know how before we did those compositions and some of you did it on paper where we kind of made two compositions or three compositions on paper. This time, I want you to make two thumbnails, meaning just notes to yourself, it doesn't have to be something really fantastic.

[00:00:18]
And take one of the thumbnails that you like and turn it into a storyboard. The bonus here, if you choose to accept it, is to take that composition that we made earlier. And implement that storyboard or thumbnail into that codepen, so make some sort of interaction. And you could make the interaction be really something small, so you could have just like an icon changing or something like that.

[00:00:43]
Or a menu opening, or it could be something big like those page transitions, it could completely changing the shape of those layouts. We know Grid now and we've worked a bit with things, like Flexbox and stuff. So you could change, with Transforms, the way that everything's laying out on the page.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now