Time in development: About 6 hours
Time searching for a way to autoscroll the page: About 7 hours.
More on that below.
In retrospect, what I developed isn’t quite as medical as it could be… There aren’t any direct images of organs, etc. [that’s a potential update for me] but I was thinking about sports-related training and client-facing training when I stumbled on the CDC Head’s Up series. I was intrigued particularly by the coach training and used that as the basis for my demo. The CDC training already has a really awesome graphic design. They also make good use of video to show some coaches in action doing the right thing and expressing the appropriate concern for young players that experience bumps and jolts to the head.
But I thought, this could stand to be a little more interactive. Articulate Supastar Linda Lorenzetti had already demoed a great short comic-book style entry inspired by a Cathy Moore article. The demo reminded my of the Broken Co-Worker course (I’m sure you’ve seen that stellar piece before) and I decided to blend all of these together into my demo.
Prototyping went fairly quickly. I had a specific idea and I prototyped on paper before beginning. Probably the most difficult bit was finding the images. I wanted some specific poses to build the drama and I wanted to use free resources. But that proved impossible. So, I settled and went to Shutterstock. From there I cobbled together a few different images.
I love the comic-book theme. There’s something so familiar and nostalgic about it. Furthermore, the frame layout is great for creating suspense and drama. So, once I got the images, I used an Ozono Studio Cartoonize photoshop action that I downloaded for free from Creative Market (now $4) to stylize them.
Pre-publishing, I had the buttons that went down or to the next page execute some jQuery from ScrollTo so that they moved the browser window.
The code has three parts:
top:'150px'tells the browser how far to go down. Calculate from the height of the first panel (or a little less, which is what I did).
left:'0px'tells the browser how far left to go. I didn’t use this because I didn’t need the window to go sideways.
500is the speed at which the animation will happen.
And that’s it. Check the demo below!