When David Anderson tasked the Articulate community with designing an elearning interaction using Pantone's 2015 color of the year, I jumped on it. While many do not like the color choice, I happen to be the opposite. I LOVE this color. However, it must be said that I do not love the color swatch, I love this color in images, on people, and in food, etc.
After struggling for a while to figure out how I wanted to design my layout, I remembered digital magazine layouts I screen captured for future inspiration from National Geographic Traveler.
After struggling for a while to figure out how I wanted to design my layout, I remembered digital magazine layouts I screen captured for future inspiration from National Geographic Traveler.
Screen captures from my iPad. Photo Credit: National Geographic Traveler, September 2014 edition
I decided to remake their ingenious quiz with the marsala influences. I found an article by Stylyze that used Pantone's lovely styled photoshoot and added a color scheme.
Here's my color scheme inspiration from Stylyze:
Here's my color scheme inspiration from Stylyze:
Photos captured from Stylyze
After nailing down my color scheme, I began the task of figuring out the dimensions of my final layout and creating the 9 placeholder shapes. This took a considerable amount of time until I found the perfect blend. The final dimensions of the layout is 600x800.
Filling the shapes with the pictures was the easiest task. I decided to use 9 images from the Pantone photoshoot mixing images found on Stylyze's article and on Pantone's article so that the images would match by color/tone/style.
The OCD perfectionist in me loves symmetry and in my final output, you'll see that I let that go when numbering the individual boxes. It was very tough, let me tell you.
Each image simply has a state that changes once it is clicked on with a box filled with the marsala color. The biggest hurdle was trying to figure out how to get the selected state to stop showing the numbers on top of the state change.
Filling the shapes with the pictures was the easiest task. I decided to use 9 images from the Pantone photoshoot mixing images found on Stylyze's article and on Pantone's article so that the images would match by color/tone/style.
The OCD perfectionist in me loves symmetry and in my final output, you'll see that I let that go when numbering the individual boxes. It was very tough, let me tell you.
Each image simply has a state that changes once it is clicked on with a box filled with the marsala color. The biggest hurdle was trying to figure out how to get the selected state to stop showing the numbers on top of the state change.
It took a little bit of thinking, but then it hit me (after leaving the file alone for a time) that all I had to do was change the state of the number to hidden when the user clicked each box.
All that was left was to sit back and really enjoy how the final product turned out.
All that was left was to sit back and really enjoy how the final product turned out.
View the demo by clicking on the picture, or going here.
If you'd like your very own version of this file, download here.
If you'd like your very own version of this file, download here.
RSS Feed
