The Stuff That Résumés Are Made Of

I’d recently been admiring some examples of graphic résumés, but couldn’t imagine how I could ever do one. Turns out Articulate’s resident nudger, David Anderson, keeps an eye out for that sort of thing and his challenge this week is to come up with an interactive résumé or portfolio. So time for me to figure it out.

I haven’t had much call for a résumé since I’ve been independent, but creating an interactive graphic where I could play with the idea of a résumé sounded like fun, so off I went.

Click Image for Demo

Inspiration

My friend and talented freelance e-learning designer Donna Carson gave me edits for a bio I submitted with my DevLearn speaking proposals on Friday. The phrases she used made me want to both laugh and go conquer the world at the same time. Her description of my “fearless flair” in designing training inspired me to come up with “Fearless Designs!” “Bold Voiceovers!” and “Daring Development!” to describe what I do.

For graphic inspiration I turned to old movie posters. They had the expressive graphics and cool details I wanted, plus they could handle the dramatic phrases I had in mind.

My Graphic Inspiration

Design

Graphics: To start, I pinned old movie posters I liked and chose a color scheme that resonated with me. You can clearly see I used the colors and rough layout of the Charlie Chan at the Wax Museum poster. For text callouts and credits I used elements based on other posters including The Beast From 20,000 Fathoms.

Theme: I chose a detective theme because I was drawn to the idea of Humphrey Bogart’s Sam Spade. He’s on the right side of the law, but still seems a little shady. (His line that the Maltese Falcon is “the stuff that dreams are made of” inspired this post’s title.)

More Graphic Inspiration

The Theater: I wanted an entry screen so that, once clicked, the user’s full attention is on the initial visuals, music, and animation when they hit the main screen – and having them click a ticket to get inside made sense.

The way the overall flow works is based on the little theater I practically lived at as an undergrad at Humboldt State University in Arcata, California. The Minor, off the little town square, was an old art house movie theater that changed its double or triple features at least three times a week. I spent a few thousand of the happiest hours I’ve ever spent in my life there, and got to see a gabillion classic movies like the ones that inspired this piece.

The Minor Theater

When it was cold out, you’d come off the street through a thick red curtain, get popcorn and admire the old movie posters in the lobby, then go through another red curtain to enter the theater. So I was seeing my résumé as one of those old posters in the lobby.

Audio: I wanted to bring it to life with sound. There are effects for audience buzz, curtains being pulled aside, cheers, applause, police whistles, sirens, screams, breaking glass, etc., but I wanted a theme song. The whole time I was working on this I kept hearing a driving theme somewhere between Peter Gunn and James Bond. Lucky for me I’ve got an “in” with talented songwriter, musician, and freelance e-learning guy Dan Sweigert who was able to write and produce the theme song in no time flat.

Content

Résumé Elements: I kept it simple and included my (boldly-phrased) skill set, education, experience, and the main software I use. The sections for education and experience were by far the biggest creative challenges, but in the end I was happy to find a quick way to blow through them that still maintains the tone and theme.

Brevity: I find it endlessly entertaining that each of the links from the main screen shows just one screen of content (at best) that makes the audience go wild. I wanted to get in, show a glimpse of just a morsel of my work, and get out. The full versions of each piece are in my online portfolio, and the link to it is in the player tab at the top.

External Links: I renamed the player’s “Resources” tab to “UNCOVER MORE!” and had fun coming up with suspicious-sounding titles for the links to my blog, online portfolio, LinkedIn profile, and Twitter account. They make me laugh every time.

See It In Action!

Enjoy the vintage-inspired goodness right here.

 

 

My Sketchy Life as an E-Learning Designer

Since so many people are sketchy about what we do as e-learning designers, it seems appropriate to answer this week’s Articulate challenge in a similar vein.

This week’s challenge is to answer the question “What do e-learning designers really do?” using the architecture of a visual meme supplied by David Anderson.

Design

Click for Larger Image

I considered doing something interactive in Storyline, but went for a simple image instead. I’ve been playing with sketches lately and it seemed like a good sketching exercise. I created the finished image in PowerPoint.

Sketches: I made these on an iPad with an app called Pencilicious and a generic cell phone stylus. It would have been hugely easier with a stylus that wasn’t shaped like a big fat pencil eraser, but they don’t call this a “challenge” for nothing.

My process to go from scribbling to having usable PNG files: Sketch on iPad > email to self as PDF > export images as PNGs > use ’em! I was impressed with Pencilicious. It was the simple, easy-to-use app I was hoping for at only $2.99, and I’m looking forward to using it more.

Colors: I tamed the all-black frame of David’s example to more of a graphite color to work with the pencil-like theme. The only other colors are in the carrot garden, and that was because I didn’t think my carrots would look like carrots without color. I tried balancing that color with color elsewhere, but didn’t like it. So it’s an unbalanced design in favor of my bunny’s carrots.

Fonts: I’ve been in love with the header font, Cabin Sketch, since we first met. I’ve not had a chance to use it until now, so color me happy. The caption font is Cabin (brother of Cabin Sketch), and the three fonts in the first frame are Cedarville Cursive, Chocolate Windows, and Sneakerhead BTN Shadow.

Content

What my family thinks I do. This is dead accurate. My sister-in-law just sent me a job post, happily noting that it sounds “just like you!” It was for a publishing job. My brother suspects I do something with computers, and my lovely mother excitedly tells everyone she can that I’m an extraordinary businesswoman. (She’s sweet like that.)

What my rabbit thinks I do. All she knows is that I come up with endless feasts of carrots and kale, and she knows you get carrots by digging them up, so she probably thinks this is what I’m up to all day.

What my neighbors think I do. There’s no way they’d even have a guess. Best case, they think I spend all my time goofing off between vacations.

What my clients think I do. I adore them because they think I make magic happen.

What I think I do. I love what I do as an e-learning designer (don’t tell anyone), and between that and getting to work for myself from home, it’s hard not to be happy.

What I really do. I do what we all do: I work with clients; take in a gazillion project details; organize, analyze, and process them; dream up attractive, effective, and fun training solutions; and build them. (In a computer! So my brother was right.)

Hope you like it!

This is Why Freelancers Need Floaties

This week’s Articulate E-Learning Heroes Challenge is to create a photo collage that tells a story.

I’ve just gotten home from a (great!) week at the E-Learning Guild’s Learning Solutions Conference in Orlando, and the theme that kept coming up was freelancing. Not just in sessions, but in countless random conversations, and I found myself offering a lot of advice to hopeful freelancers.

I Smell a Theme

So because there’s only so much space in my head and this is the topic currently on tap in there, my photo collage story this week is about a guy who wants to freelance. The points I’ve included are a summary I quickly put together for this piece, but it’s similar to what I was sharing all week.

The Story

If I’m going to tell a story, I need a starting point. So I overlaid our (miserable) hero on top of the rest of the photo collage so that I could establish his yearning-to-go-freelance motivation. The underlying photos and their content, each of which reveals a portion of our hero’s journey, can be visited in any order. And of course you get to see the result of his efforts at the end.

Visual Design

I kept the visual design pretty simple. The photos are framed in a pseudo-Polaroid fashion. The caption font on the top photo is Dawning of a New Day. The title font on the pop-ups is Swiss921 BT, and the main pop-up font is Candy Round BTN Condensed.

I reused a beach and palm tree from a recent post about freelancing, mostly because I wanted the tree for the end scene.

And I reused poor Ian again. I’ve forced that poor man into service as an airline pilot and a beer-guzzling traveler in recent weeks and wanted to give him a rest, but I needed someone who could fit into the outfit at the end, and he had the perfect figure. (Sorry, guy.)

Storyline Design

When clicked, each photo in the collage pops up on a slide layer with more info. Then I have each photo disappear after viewing it. That way I was able to set up a new layer of interest below. (Not unlike my approach to this menu.)

That interest includes having each photo, in miniature, drop down into the palm tree and hang there like an ornament. You can then click on those ornaments to review their content. I did this by adding a second slide layer for each collage photo.

And, of course, I had to show Ian’s transformation after he’d followed his own plan, but I could only show that after all photos had been viewed. To do this, I created a variable for each photo. After all of them have been visited, Ian and his final outfit are triggered to appear.

See the Result!

You can see Ian in all his freelance glory here.

I’ve not had this happen before with Storyline, but I found I got very erratic results in getting Ian to show up at the end when viewing the published files. I published to Web and included HTML5 and Articulate Mobile Player on iPad output.

Ian always came in just fine when viewed on the iPad – but on Chrome, Internet Explorer, Firefox, and Safari it would sometimes work and sometimes not – even after endless rounds of cache clearing.

But I’m hopeful you’ll see Ian at the end just fine. Enjoy!

A Revealing Submenu

You’ll see this simple-but-fun submenu when I post a portfolio sample for another course – but I like it, so its getting its own post.

I created it for a subsection covering the nine parts of this organization’s code of conduct. I wanted it to be attractive, responsive, kind of fun, meaningful to the organization, and track which sections had already been visited, while still making each one easy to revisit.

The Idea

I thought it would be fun to have it look a bit like a game board. As the learner clicks on each section, it reveals part of a photo.  Once the photo is fully revealed, you’ve finished that section. I had lots of photos to choose from, but narrowed it down by looking for one that:

• I could make square to fit the tic-tac-toe/Brady Bunch layout I had in mind,
• Included people from the same general part of the world that learners would be from,
• Would show people involved in an organization-related activity, but I didn’t want to reveal what they were doing until the learner had visited almost all nine sections of the code.

The Pieces and Parts

The Grid: I used the bright course color palette to create the nine boxes. Since the organization refers to their Code sections by number, it was appropriate to label them with each section’s number, as opposed to a description or image. Looks more like a game that way, too.

The Basic Grid Design

The Side Reveal: So learners could see the name of each Code section before visiting it, I added a trigger to each square in the grid. When you hover over each one, a slide layer shows the section name on the right side.

Side Reveal on Right With Mouse Hovering Over Grid Section #5

The Photo Reveal: The photo is on the slide master. I created each square as an inserted object on the slide, then keyed the text directly into it. When the learner clicks, the visited state is revealed. The only difference between the normal and the visited state is that I removed the fill color for the square. I still wanted the number to be visible after the square was visited so that it would be easy to go back and revisit the section, and I liked the different-colored outlines that remained after the fill color was gone.

Clicking Reveals a New Piece of the Photo

See it in Action

This is just a demo of the menu, of course. The section header slides it branches to in the real course take you off into scenarios and all kinds of fun stuff. But you can see the menu sample here.

Thank You, Tim!

By the way, in this sample you’ll briefly see the section header slides I used in the course. These slides are heavily based on Tim Slade’s lovely – and free! – template that he so kindly shared on his site.  Tim’s a gifted and generous designer and you should check out the rest of his site while you’re busy getting the template. (Thanks, Tim!)

Section Header Slide Based on Tim Slade’s Design

You Can’t Escape Good Design

I started this week’s Articulate E-Learning Heroes Challenge by creating this poster, based on a design quote I like. But it’s a general design concept not specific to instructional design, so I thought I’d try for something that feels a little more on-the-nose.

A Bull in an Instructional Design Shop

I found a quote from Bernard Bull that resonated with me, and created the illustrative poster you see here.

The Truth

The funny thing is, throughout this challenge I’ve kept thinking “I don’t refer to quotes; I refer to Michael Allen’s Context, Challenge, Activity, Feedback (CCAF) design model.” It’s not an inspirational quote, but it’s what’s always on my desk and it inspires me every time I design.

Funnily enough, it was only after I’d completed the poster that I realized that this quote is a good example of the CCAF model in action:

The Context: You’re imprisoned and the walls are closing in.
The Challenge: Get out.
The Activity: Use that book I gave you to figure out how.
The Feedback: Either you set yourself free or you subject yourself to the standard walls-closing-in conclusion.

So I was kind of happy about that.

Poster Design

Section 1: Boredom; Lack of Engagement. Clearly I made this as dull as I could. Small black type on a white background to evoke the feel of most 600-page books. The font is Arial Black.

Section 2: The Nefarious Context. Pretty self-explanatory colors and layout. The fonts are Block It Out, Chocolate Windows, and Arial Black.

Section 3: The Big Bang of Engagement. I hand-drew the splashy yellow thing in the background, and the font is, appropriately, Bangers.

The Attribution: Mr. Bull is wearing Arial Black.

Again, I just created it quickly in PowerPoint; though the fuzziness of the Arial Black bugs me. If I can’t take it anymore I’ll put it into Fireworks and convert the text to paths so it’s clearer.

You Can Quote Me

After running us ragged lately, Articulate’s David Anderson gave us a design challenge that was a relative walk in the park this week. His humble request was to take a favorite instructional design quote and create a poster making good use of typography to express it.

The Quote

Since I believe that design (instructional and otherwise) rules all (and that solving design problems is the biggest kick there is), I chose architect Stephen Gardiner’s quote “All problems are solved with good design.”

The Idea

I tried to think of a visual expression of “all problems” that could somehow resolve itself in “good design” and, as you can see, pretty quickly came up with a storm-cloud-laden sky giving way to raindrops and then to the new growth of earth below.

To keep it quick and easy, I mocked it up in PowerPoint. Since I needed vertical sky-to-ground space, I changed the layout to portrait orientation by going to Design > Slide Orientation > Portrait.

Typography

Fonts: I found all fonts on dafont.com.

“All”: After trying out a good number of cloud-like fonts, I wasn’t happy. Once I placed a basic cloud shape and tried out fonts on top of it, I got happy with, appropriately enough, KG HAPPY. Something about the shadow made me think of storm clouds and rain.

“Problems”: This had to look like lightning, and I got lucky with Ride the Lightning. It was clean enough and bold enough to work, and it gave the visual sense of lightning bolts coming down from the clouds that I wanted.

“Are Solved With”: I wanted these words to have the feel of raindrops, but literal raindrop fonts were just too much. This is Blue Chucks, which the designer says was “inspired by my wonderful shoes”. (Well done, Sir.) I like that his baseline and topline are uneven and it looks sort of loose, like rain. I tried messing with it by puttting each letter into its own text box so that I could make it even more uneven and rain-like, but I wasn’t crazy about that. I was happier letting this nice font be true to itself.

“Good Design”: This one worried me a bit. I wanted it to look like new growth coming from the earth, but the plant-like fonts I found weren’t clean enough. I liked this one because I thought it was suggestive of buds starting to come out of a plant; though oddly enough it’s called Rain.

The Attribution: Well, hopefully Mr. Gardiner would have had a sense of humor about this, because I wanted the font to look like worms deep in the ground helping to start new life. I went with Blue Chucks again for the same wriggly, uneven, yet clean feel. And, of course, using the same font again gives a little more unity to this font-heavy design.

Background

I went with simple blue and green gradients. For the sky, I liked that it looked more like a storm to have the sky darker near the clouds and lighter near the ground, and I thought the green gradient made the ground look a little more alive – worms and all.

The Result

Here it is, full-size.