From the early sketching and wire framing stages of this project, I was clear that I wanted a distinctive illustrated interface in the home page of this app. In many ways, I left finishing the design of my home screen to the very last, which is unusual for me. However, I felt it really helped me to create a home screen that encapsulated the content of this app. It’s an approach I will definitely replicate in future projects.
I began sketching what way I wanted this to look. I felt very confident going into this as I had already created strong illustrations to be used in other screens in the app. This definitely made it easier to design the illustrations for the home screen as I was confident in the style I was working in.
I wanted to take advantage of the modular layout of the home UI and have the illustrations overlap the buttons to create harmony amongst the different components. I began by experimenting with the brand’s star of life motif in iteration 1.
Iteration 1
I decided I wanted something with a bit more visual interest for the home screen. I used some of the elements from my other illustrations and adapted them to the frames of the buttons, focusing on hands.
Iteration 2
<aside> ⭐ REFLECTION: I loved the idea of iteration 2, however I was worried it might be over crowded if I wasn’t careful. I felt that if I use the right colours then it wouldn’t be overpowering. I also quite liked the way each component felt developed in it’s own right yet they all blended together to form one larger illustrated interface.
</aside>
I had all of the elements already created for most of the illustrations for my home screen in other illustrations, apart from the question mark illustrated icon. I followed the same process as the other illustrated icons I created, by sourcing an icon from iconify and layering it up to match the illustration style. This works really well I thought.
Original Iconify Icon
Illustrated Question Mark Icon