Typography

Fontcracker Suite: Teaching Typography

September 22, 2014 By Jackie Van Nice 16 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to teach some typography by creating a game or interaction. I dove in – excited that I could finally use Storyline’s new features out in the real world!

The Idea: Motion Paths & Dance

Motion paths are a huge plus in Storyline, so I wanted to feature them. Looking at proper typographic form got me thinking of proper human form, which got me to ballet, which led me to letters dancing to ballet music. Dancing letters using Storyline’s motion paths it would be!

Typography as the Star

The Typography

Many explanations of typographic anatomy use the word “Typography” as their example. I chose “very good form” so I could demo the concepts and stick with my theme.

Visual focus is on the typography throughout and it’s used on every screen. It engages the learner, introduces the concepts, acts as a progress meter, provides feedback, and wraps things up. I used one serif font (Book Antiqua) and one script font (Dancing Script). After settling on 12 typography terms to teach, I forged ahead.

Minimal Design

Minimal Visual Design

Rather than running wild with the theme by adding dancers, Christmas trees, snow, costumes, and scenes from the ballet I kept it simple – guided by the simplicity of the typography.

The main images are a ballet stage as the background and some ballet shoe ribbons. Rather than showing snow, I implied it on the opening screen by having each half of the word “good” fall gently into place.

Learner Control

The Interaction

Rather than announcing itself as an interaction where you’ll learn typographic terms, it starts with a fun bit of music and animation that sets the mood, theme, and topic before a small button appears that says “Teach me some terms”. Nothing is forced; you’re enticed to explore.

Feedback and Options

The learner also has enough options and information to feel they’re in control. If you choose “Challenge me!” for example, a message lays out clear expectations by letting you know what’s needed to succeed and gives you your options. Feedback is clear. If you make an incorrect choice you receive correction and can choose to review or continue.

Slider as Ballet Barre for Review

Best Slider Barre None

I used another of my favorite Storyline features – the slider – to create a ballet barre to review terms. (It features a lovely relative motion path, too!) It gives the learner full control and lets them focus on one item at a time.

Enjoy the Show!

If you have your audio ready, here’s the interaction in all of its very good form.

Select Image to Launch Demo

Help! Someone Abducted My Digital Tools!

July 6, 2014 By Jackie Van Nice 16 Comments

This week’s Articulate challenge is to create emergency-response instructions using non-digital means. This one nearly did me in. Where are the emergency instructions for when you’re caught in the middle of an Articulate challenge?

The Idea

I started by working on hurricane response instructions since we like that sort of thing in the Southeastern US. But once I got to pondering non-digital font equivalents I thought of non-digital scissor-and-magazine font creation, which made me think of ransom notes, which took me to kidnapping, which led me to wikiHow where they’re apparently well versed in that sort of thing. An abduction it would be!

The Design

I kept it simple with a main menu and corresponding detail pages. If it hadn’t been my second version in two days, I would have included more detail.

This design had to make the most of the cut-out letters, and that’s what I hated so much about the first version: I’d done an elaborate and detailed job on it, but the impact of the ransom-note effect was completely lost. I hated, hated, hated it.

I walked away thinking I’d start over again in a couple of days, when I glimpsed a cardboard box and flashed on the idea of just ripping it up, using black markers, and sticking paperclips in it to make bullets. Seemed like the perfect primitive treatment to make the most of the colors and shapes of the letters, as well as the ransom-note effect.

The Result

Here’s the result in all of its ransom-riffic simplicity. Hope you like it! You can click on each image to see it larger.

The Stuff That Résumés Are Made Of

April 22, 2014 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

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.

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.

See It In Action!

Enjoy the vintage-inspired goodness right here.

My Sketchy Life as an E-Learning Designer

April 14, 2014 By Jackie Van Nice 11 Comments

Click Image to Launch Demo

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

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!

You Can’t Escape Good Design

March 2, 2014 By Jackie Van Nice 2 Comments

Select Image to See Larger

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.