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

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

Process

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

Moodboards

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

Sketching

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?

Sketches — the more, the better

Fine-tuning

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

Bonus

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.