Minimalism in UI illustrations
Quest for the simplest tree
Oh, all the things UI illustrations can do. They can clarify complex or abstract ideas. They’re generally perceived faster than text. They deliver bite-sized brand experiences that ask for engagement in an elegant way.
They can go boldly where no photograph has gone before.
Illustrators out there, I salute you!
Apart from the eye-candy quality, they have to have a purpose and while researching potential areas where I could apply them, I looked specifically at the theme of the location. Of course, Berlin or Cologne have memorable architectural symbols.
But what about a rural area in Germany?
Cha-cha-challenges
My main challenges were simplification and style adherence. Since we already have a set of small illustrations in place, it was crucial to adapt their no-bullshit quality.
Larger physical space means more detail, but how much detail is too much detail? There was a real temptation to go very realistic and lose the simplicity of the original set.
Sticking to the originally established rules was a real help. Those included a consistent stroke weight, universally beloved rounded edges, use of perspective and grid, among others. No cheating allowed.
In many cases, I forced myself to go as minimal as possible and limit visual clutter whenever necessary, which is why I drastically limited the number of windows on the Hamburg City Hall.
It’s also why I tried to create the World’s Most Basic Tree™.
Symmetry naturally played a large role, since my subjects were mostly architectural. The human eye loves the balance of symmetry. It makes for tidy designs, where users can find elements more easily.
Iterations
I tried out a bunch of potential background treatments for the illustrations. As a stand-alone idea, I liked the simpler rounded edges…
…but within a design I favored the ever-popular blob. Big thanks to the good people behind Blobmaker — the source for beautiful blobs you never knew you needed.
A matter of representation
I mentioned that it’s easy to visualize big cities like Hamburg or Berlin, but trouble comes with more rural or plain areas in Germany. This is why I worked on the wheat illustration.
After finishing, it occurred to me that the illustration has a lot to do with location (especially if a realtor deals predominantly with plots of land) but it could be more precise when it comes to properties. This is when I googled “traditional German house” and went on a Wikipedia spin and this is how this bad boy came to be.
At this point, of course, I realized Homeday is probably not selling a whole lot of medieval houses and created a tamer version of a “modern house”.
Miscellaneous Fun
I experimented with some seamless pattern making, finding alternative uses for the illustrations.
Last but not least, I drew a dog.
Apart from my location odyssey, I wanted to have a look at our recruitment benefits page and since, primo dogs are cute and secondo, they’re allowed and welcome in our office, the dog was born. I went through a bunch of iterations, mostly to find out that ears matter.
If you’re tired of vectors, have a look at the drawings in my portfolio at https://magdalenadraws.com/ or on Instagram @magdalenadraws (there be horses).
Homeday is hiring, so if you want to experience the thrill of Product Engineering Week, apply post-haste!
