I have been working on a conceptual, high-fidelity and interactive prototype in Sketch with the Craft plugin from InVision. I am planning to update this blog as the content is no longer effectively presented by the UI design which worked when I first went live a little more than a year ago.
I decided to try a UI with a limited colour palette and custom drawn flat-style illustrations in SVG lightly inspired by Material Design. This is to give a fresher effect than stock photography which can become stale and generic after viewing it across several different apps.
I did about 3 drawings I was happy with where no sketches were required. That is until I hit the robot. The first iterations were either too anthropomorphic (see Iteration 1.2 below) or seemed too toy-like. I eventually reworked them until I was happy with it. I’m sharing my process here to show how I overcame this little stumbling block.
Designing the Robot
Iteration 1.0: The Movie Mashup
The first iteration I did was derived purely from the ideas I had in mind without any external research. I drafted it out using basic shapes and the Vector tool in Sketch. It was inspired mainly by my memory of popular movie robots like Wall-E, C3PO, R2D2, and characters from Star Trek.
I was going for a more organic looking fembot that had less severe elements than a fully metal robot might have. The antennae came from a butterfly logo I made the previous day. I pasted it in to see what it would look like.
Iteration 1.1: Changing the Body
This was a minor change to the body inspired by the spherical Star Wars droid BB-8. I was thinking about mobility and a spherical base seemed like a good option.
Iteration 1.2: Trying the Colour Scheme
I added in the colour scheme to match the rest of the comp. It was a bit too human for what I was going for.
Iteration 2.0: The Hand Sketch
I looked on Google Search and got some new ideas. One example reminded me of the maid from The Jetsons called Rosie. This brought back fond memories and I based the new design on her. I liked the idea of hover bots so I incorporated this idea and came up with the sketch shown above.
I went with a more machine-like and androgynous character this time. I also added nodes for articulation at the joints. I did this with a 0.5mm mechanical pencil in my Zap Book then added in some definition with a 2B drawing pencil.
Iteration 2.1: The Final Bot
I liked this version and filled in the colours with some minor adjustments to reach the final. I went with one eye instead of two because it was more machine-like.
So that’s a walkthrough of my thought process when making illustrations. I am working on animating the bot with scrolling animations so that he/she hovers when the user scrolls to a certain point on the screen. I will post all the comps for the new proposed layout in the coming weeks.