Pantone

Pantone’s Ultra Violet: Best Worn With Sunscreen

April 15, 2018 By Jackie Van Nice 6 Comments

Select Image to See Demo

This week’s Articulate ELH Challenge is to design a template or interaction featuring Pantone’s color of the year: Ultra Violet.

The Idea

The name, of course, made me think of ultraviolet (UV) light, and since it’s part of the light spectrum, a slider interaction to explore it seemed like a good way to go.

The Design

Attitude: One of Pantone’s suggested color palettes to use with Ultra Violet, and the one I used

The Colors

I used Ultra Violet for the titles, labels, other text, and everything in the UV section – but after that I was going to need a range of colors to create a whole light spectrum.

To the rescue came Pantone’s Attitude palette, which had a color I liked for the sun (Citrus), one I could use for the infrared spectrum (Raspberry), and other brights I could use in the visible spectrum.

For the UV spectrum I put Ultra Violet in the middle and used one Ultra Violet shade darker and one Ultra Violet tint lighter on either end.

The Slider

After inserting a sun icon from Storyline 360’s Content Library (love that so much), I colored it using a Pantone Citrus fill, then also used it as the thumb image on the slider.

Ultraviolet details revealed in Ultra Violet

Other than that, it’s a simple slider with light spectrum details I built on layers that are revealed as you slide the sun icon to each section. I also decided to make the larger sun’s arrow “rays” disappear when you’re viewing the layers to give it a cleaner look.

I added an Ultra Violet slider prompt using an arrow marker that shows up after a few seconds. Once you move the slider it’s programmed to remain hidden.

The Result

In the end it seems the ultraviolet spectrum is all about sunscreen for us, but you can view this Ultra Violet result just as well in the shade.

Dialing Up a Delicious Color of the Year

December 16, 2016 By Jackie Van Nice 13 Comments

Click Image to Launch Demo

This week’s Articulate ELH Challenge is to create an interaction using Pantone’s color of the year, and since I already wanted to do a catch-up challenge about working with dials I made it a two-fer.

The Idea

Green Anole

Chameleon

Greenery makes me think of the green anoles here in South Carolina. They change color to match their surroundings, but it turns out the chameleon has a larger color spectrum than the anole.

So I decided to make an interaction where your challenge is to match a chameleon’s color to his background (in this case Greenery) using dials to adjust the RGB levels.

The Design

Creating a 3-dial RGB interaction took some work, but figuring out how to build it in Storyline 360 was a piece of cake.

Visual Layout

Visual Design

Simplicity was the goal, with the word “Greenery” and the color itself always prominent. I didn’t want there to be anything you’d have to click on or find. The instructions are simple and on-screen, and the only action you have to take is to adjust the dials, which are the functional focus.

I also wanted the chameleon to have a little personality. It’s more fun changing a guy’s color if he’s cute and staring right at you. I purchased a vector line drawing of a chameleon and used Fireworks to change his colors.

Just Some of My 125 Chameleons

My Life-Saving Chameleon Spreadsheet

Functional Design

If I’d realized there were over 16 million possible RGB combinations I’d have started working on this awhile back. Fortunately I didn’t need that many combinations to convey the sense of exploration I was after. I settled on five dial stops for each color, all starting at 0 and ending at 255 with three uniform stops in between. That meant I only had to create 125 chameleons for all possible dial combinations. (Gulp.)

The only way to keep the color combinations straight as I created chameleons and dial triggers was to organize them in a spreadsheet. Nothing but love for a good spreadsheet.

Audio Design

I added some background birds to set the scene, but what brings the interaction to life is the actual goal: Having fly for dinner. To emphasize that, you see and hear him buzz in as the chameleon’s motivation is revealed at the beginning, and again when it’s dinnertime. Dan Sweigert graciously volunteered to impersonate the dining chameleon delivering the coup de gras. (Sorry, little fly.)

Ready for Some Greenery?

See if you can find Greenery’s RGB values (and feed the chameleon) right here.

See More Pantone Challenges!

This is actually the fourth Pantone color of the year interaction I’ve done for the challenges. Here are the others:

2016’s Rose Quartz and Serenity Challenge
2015’s Marsala Challenge (Still one of my favorite entries.)
2014’s Radiant Orchid Challenge

2016: Rose Quartz and Serenity

2015: Marsala

2014: Radiant Orchid

It’s Pantone Color-of-the-Year Bingo!

January 7, 2016 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week I took on two Articulate challenges: One featuring bingo, and one featuring Pantone’s new color(s) of the year.

The Idea

Pantone has been choosing a color of the year since 2000. I wanted to look back at all of them and make a game where you try to match each one with its name. Add the seductive allure of bingo and it’s “go” time.

The Inspiration Layout (Click to See Original Game)

The Design

Layout

David Anderson had supplied a few inspiration pieces in the bingo challenge, and I liked the way the LA Times laid out their Academy Awards bingo game. There was room on the side to add more info – or in my case quiz questions – in a nice, clean way.

Color Quiz Question

Colors

Since Pantone’s current-year colors are Rose Quartz and Serenity – and since featuring them was part of the challenge – I only used shades and tints of those colors to build the game. The only other colors are the subjects of the quiz questions.

Quiz Question

To keep it as sleek as possible, I only posed one question at the beginning. That sentence, along with the easily recognizable bingo layout, explains the entire interaction and doubles as the question for each quiz choice.

Quiz Bluffs

Unfortunately, I found Pantone’s idea of cool color names to be a big snooze. Too bad, because that meant my bluffs needed to be pretty middle-of-the-road too. (Though I worked in a few to keep myself entertained.)

Sometimes It Takes a Spreadsheet

Building It

It’s built in Storyline 2 on one slide with roughly a gabillion layers. I used a spreadsheet to keep the details of each color (name, year, Pantone number, RGB and hex values, where I used them in the grid, etc.) easy to find. It also helped enormously when tracking each one and creating triggers.

Ready to Color Your World?

Give it a try! I predict a colorful Pantone “Bingo!” in your near future.

Select Image to Launch Demo

Is Marsala a Good Color for George Washington?

December 22, 2014 By Jackie Van Nice 11 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to use marsala – Pantone’s color of the year – as the primary color in a template or interaction. (Is it my fault that was the only guidance we got?)

The Idea

First, marsala just looks like lipstick to me. I don’t get “cocoa” or “wine” or anything else from it. So I googled lipstick history to see if I could find something to play with.

That’s when I discovered that at least one prominent gentleman in our nation’s history used to wear it. Naturally I wondered what he’d look like in marsala, and the rest is – of course – history.

The Colors

In addition to marsala I used three colors inspired by the Pantone color pairings David Anderson supplied, but I made up new names for them. “Cherry tree” is my favorite, but I’m equally proud of “venison” and “war”.

Enjoy!

I hope you like it. This may be my favorite challenge entry so far. I’m also pretty happy that I have an interaction ready to go for Presidents Day! If you haven’t already, you can check it out right here.

Select Image to Launch Demo

Meaningful Comparisons in Action

August 23, 2014 By Jackie Van Nice 6 Comments

Select Image to Launch Demo

Since this week marks the end of the first full year of Articulate’s weekly challenges, I decided to go back to complete all of the ones I’d missed – and there were a lot. I still have two more to complete (almost there!) but yesterday I swung back to Challenge #1: How Would You Show Meaningful Comparisons?

Note the Maps of the US and Germany

Getting Things Into Perspective

In my earlier “virtual tour” challenge I showed maps of the US and Germany next to one another to show the places I’ve worked. They weren’t meant to be at the correct scale – but every time I look at that piece I snicker at how far off it is. So I decided to do a demo to show a size comparison.

Two Countries; One Monochromatic Scheme

My US-German Palette

Two reasons for the red palette: The flag of Germany and the flag of the US. Their only common color is red. What’s interesting is how different the reds are. So I created a palette that includes both of them in an intentional way.
The other reason I wanted to do this was because I’d just completed yet another older challenge using Pantone’s current color of the year and used a monochromatic scheme for that one, too. I liked it enough to try the approach again here.

My Monochromatic Pantone Design

What a Drag it is to Compare

The idea is that you simply click on the map of Germany and drag it to different US states to compare its size. Is it effective? You can take a look at the difference between this and the maps I showed in my virtual tour (see images above) and decide.

My truly brilliant fellow challenge participant Nick Russell suggested that it would be great to have comparative data for each US state come up as you drag the map of Germany over it. It would be, but that’s going to have to wait until I’ve added quite a few more hours to each day and quite a few more days to each week. But it’s a fantastic idea, Nick!

Select Image to Launch Demo

Enjoy it Here + There’s More on the Way!

Here’s my comparative demo if you’d like to mess around with it. My goal is to complete the whole first-year set of challenges within the next week. With only two to go I’m in good shape – and I’ll keep you posted!