DailyUI 023 – Onboarding

This was a bigger one than last time. Onboarding. Since I got the email with the challenge I’d been thinking of what to do, but one thing was clear: I wanted it to be in the style of how Google usually does it, as I’ve always admired the look of them. The final inspiration came from when my dad called to help me set up his new phone, and the idea to have the onboarding process be about setting up a device struck me.

Here I wanted to play with a grainy kind of shading that you can often see in Google’s illustrations. I quickly searched for a tutorial online to see if I could find something that creates a similar effect and I hopped on the first one I could find. It was quite simple, and I kind of achieved the effect I wanted.

The shading on the frame of the device is the biggest annoyance of mine. It looks great up top, but I could not for the life of me get it to smooth out all the way to the bottom, and I have this harsh edge. It’s disturbing me to no end. No matter what I tried I couldn’t get it. Due to time I had to leave it be.

I didn’t want to leave the screen of the device empty either, so I did a simple landscape, with an ethereal cogwheel floating in the front. The cogwheel itself could’ve been much improved I think though. I also feel like I overdid it with the graininess there too. In the end I’m not even sure the illustration makes sense, and a dark screen with a simple cogwheel might have been best.

The text explaining what’s going on was sort of slapped on quickly as I started nearing the end of my allotted time (one of my rules, no more than 1 hour) and I needed at least something there. So it became a simple explanation, with a skip and next button flanking pagination dots indicating there are more screens. Something I’m very keen on is having a distinct skip button for these types of onboardings. I hate having to sit through something I’ve already seen.

I think I’m getting more of a sense of how Illustrator works now, but much still needs to be learned. Like how to properly align things…