Web / UI: ArtConnect Berlin

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:

ArtConnect Berlin - UI / Web Design

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:

ArtConnect Berlin - UI / Web Design

In the context of the website, which made a feature of its white space, I reversed the designs out for the landing page:

ArtConnect Berlin - UI / Web Design

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…

ArtConnect Berlin - UI / Web Design

… which immediately opened up possibilities for new ones:

ArtConnect Berlin - UI / Web Design

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:

ArtConnect Berlin - UI / Web Design

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:

ArtConnect Berlin - UI / Web Design

And here’s a taste of the designs in the context of the website:

ArtConnect Berlin - UI / Web Design