Character Selection
Articulate Storyline | Adobe Photoshop
This is a demo made in Articulate Storyline, for the E-Learning Heroes Challenge. For this challenge we were asked to create an Avatar Selection interaction.
Thought Process
The inspiration for the design came from various games that I have played throughout my life.
Instead of the usual and uninteresting way of picking a character while all the other characters are crowding the screen, I decided to add a little flair and have each one animate in and out of
the screen.
Furthermore, to make it visually more appealing, each character got its own color scheme derived from the character itself.
Design and Development
Designing this was fun! The freedom from having to stick to brand colors or pre-defined color palettes was a welcome relief.
Quite early in the design process, deciding to have a different color scheme for each character allowed some room for cool experiments.
In the end, I decided to go with the current design as it helped the characters stand out against the background. I found inspiration for the name field while using one of the mobile apps.
Development was quite straight forward as the design itself was supposed to do the heavy lifting. I thought of two ways to do this – States or Layers. I decided to go with the layers option as it seemed to be the most flexible in terms of animation.
