UI design for ArtConnect Berlin, an online networking platform for creatives based in Berlin.
I was initially asked to design a system of icons for ArtConnect Berlin’s website’s landing page. Ultimately, I was asked to expand the range of icons for use throughout the website.
Here you can see the final look of the icons, followed by a brief breakdown of how we arrived at this:
Using a grid system to streamline the sizing and styling of the icons, I initially worked in reverse, white-on-grey, to develop the strongest designs I could:
In the context of the website, which made a feature of its white space, I reversed the designs out for the landing page:
My job was done – or so I thought. The client was so happy with the look of the landing page, I was asked to develop more icons for use throughout the website. I discovered very quickly that working in strictly monotone for the icons would limit my options – so I introduced a second tone to the existing icons…
… which immediately opened up possibilities for new ones:
Sticking with the vocabulary of simple, mostly geometric shapes, the newer more greyscale approach allowed me to build a grammar into the icons for more symbolic user recognition:
And, as the client requested more icons for use deeper into the site, this vocabulary and grammar became more important for helping to generate drill-down categories or “families” of icons:
And here’s a taste of the designs in the context of the website:
