IXD301 – Illustrating Element Stories, Developing Prototypes & Refinement

Stories

After sketching the narratives and stories of my elemental characters I was ready to make them digital. I decided to create/illustrate nearly all of my illustrations, iconography, etc on illustrator. The handy thing about using Adobe products is that you can drag and drop groups into each app without having to export them manually into PNG files. This saved a lot of time and just made me work fluidly. Everything below was either made from shapes, pen strokes and typography. Creating the stories was long and repetitive but I really enjoyed it as I haven’t made anything like this before and to see it come together was exciting.

Creating Polonium Paul’s Story

Story refresh: Paul was an ordinary scientist until one day he mixed a deadly chemical that turned him into a monster. 

I started on Paul’s story first as this was the elemental character I felt the most excited about. For his story, I used a darker/neon colour scheme to represent his crazy radioactive and mildly grotesque theme. Although, I tweaked the story from the original sketches to instead show the backstory of how he got his green radiated glow.

Creating Helium Heather’s Story

Story refresh: Helium heather is a hard-to-please girl. One day at a boring party she finds her best buddy; a balloon. She falls in love with it and quickly loses it. Fearing the worst she stays up day and night only for it to find her again.

This was the second story I started on. I feel like in this story I expressed her emotions extremely well through a set of Marvel-style implementations and through distorting/using visual hierarchy in typography. This was extremely important as I wanted to show this element as very soft and fragile so conveying emotion was a must.

Creating Mercury Marty’s Story

Story refresh: Mercury Marty was busy doing his daily activities until one day he left it too late. Suddenly the house got cold causing him to shrink. He finds a fireplace and lights it returning to normal.

Finally, the last story that I have created was Mercury Marty’s. This was the hardest one yet as it required a more 3D type illustration rather than the conventional 2D scenes. For him, I used a rustic colour scheme to represent his character.

UI Process

I decided to create mock-ups on illustrator. This made it easier for me as I could drag and drop layouts into XD from illustrator without losing any quality or the ability to edit shapes.

For the periodic table seen in the score tab below, I decided to create my own periodic table from scratch. This allowed me to edit it and customize it however I pleased.

I used these pages to also develop many of the character badges as well as the iconography for the element creator section. This made it extremely handy for me just to export into XD.

 

Adobe XD

Adobe XD was pretty easy as the illustrator and after effects did all the work, most of it was simply exporting it in. The only things that needed to be done on the application were most of the interfaces, typography, button, animations, mini-games and actually prototyping the app.

Linking it up…

 

Refinements

Logo 

On the day of the presentation, Kyle told me that my logo looked similar to the Snapchat logo. I agreed as it can be seen as a ghost that might frighten kids. So I decided to change it to a more round and less frightening design. Additionally, I feel like this change is more consistent and proportionate to the previous one.

 

Mini-game – User Accessibility 

While playing the app myself I saw a problem with Paul’s mini-game. It should three potions exactly the same as each other with different colours. This isn’t ideal for children who are colour blind. So I came up with an idea, instead of getting rid of the mini-game I should just change the potions to different unique shapes that way it is compatible for all. (Previous left – New right)

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *