How I designed an icon set for Berlin Philharmonic app from scratch

Zuzanna Rajewska
Feb 16, 2018 · 3 min read

In 2017 I made a full icon set for Digital Concert Hall — a multi device app designed by Ox Collective. Digital Concert Hall gives their subscribers access to Berliner Philharmoniker’s concert archives, interviews, documentaries and live concert streamings.

DCH Icon Set


The goal for the icon set was to improve the overall experience by adding a touch of elegance and customization to the application.


I started out getting familiar with their branding: current materials, upcoming ones, I even checked out the actual building of the Philharmonic (the inspiration for their logo). Then, I wrote down keywords for the main menu icons, researched possible visual representations for those words and created a moodboard.

Moodboard for DCH Icons


Inspired by that visual research, I made multiple sketches for each icon and drew my favourite ideas in Illustrator. Having a digital version helped me to combine them and see how they looked next to each other. At this point I started thinking about two states of the icons — normal and active; what should those look like?


Together with Ox, we choose the best set and fine-tuned it. I redrew them pixel-perfectly in Sketch and placed them on the app mockups for proofing. Here’s a great article that explains how to prepare perfect icons.

We presented the mockups to the client, addressed their feedback, made more fixes. Once they approved the main icons, I created the variations in a similar way.

Mockup with icons


The last step was to create the picture placeholders for missing content: musician, conductor or concert photography. Those illustrations had to be the same style as icons, but a little more detailed since they appear bigger on the interface. I did some additional research for line illustration and placeholders and reused some of the drawings that I did for icons.

Since context here was crucial, I made those illustrations directly on the mock up files where they would appear.

Picture placeholder mockups

What I Learned

Designing an icon set for a complex application was challenging but also rewarding. It taught me how to plan and work on a bigger project, step by step. How to tweak and reuse my own designs, collaborate with other designers. And what I loved the most — the importance of the details.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store