From the course: Interactive Animations with CSS and JavaScript

Storyboarding

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Storyboarding

“

- [Instructor] In this course, we're gonna build a very simple explainer presentation about deep learning, and it's just very cursory, but I want to show how a deep learning network can be fed a series of answers with feedback, and it can involve an understanding of a problem without actually having to specify what the problem is, and this is actually from something I was working on for one of my own projects, so that's where it evolved from, but we're gonna build that using HTML, CSS and Javascript. So my goals for this are to make the presentation interactive, I want the user to at least feel that they have some control over it at first, and then, I want it to look good on different devices. I want it to be responsive, and I also want to make it dynamic. I don't want to have a series of lock stepped slides where it feels like you're just being forced through a deck in PowerPoint, I don't want that PowerPoint feel for it. Now, something like this is pretty elaborate. I like to start with a mock-up rather than digging right into the code, so I use a tool called Balsamiq mock-ups. I've been using them for several years. It's great for building wire frame presentations that don't have any styling on them because particularly when you're working with clients, it's good to show them something that isn't too finished-looking, because then they'll get that locked into their minds, and so in this case, it's more that there are a lot of different moving parts, and I want to have a good overview of what's gonna happen, so let's go ahead and walk through my mock-up. Here are my wire frames. This initial slide is gonna prompt the user, they're going to want to click. I'm hoping they'll click on the circle, but it doesn't really matter, they're gonna click somewhere. When they do, I'll emphasize the circle and I'll de-emphasize all the other answers. From here on, the presentation will run on a timer. It won't require any more user interaction, although they can click to proceed. Now I want the incorrect answers to fade out, and the correct answer will now move to the center of the screen, and from here on out, instead of having a choice of answers, it's going to progressively move through a series of correct and incorrect answers. There will be a training montage. I want it to become progressively faster, until it eventually settles, and then we will finish the presentation with an animated the end graphic.

Contents