Op1

Op1

Since WNL, one of our current clients at Super Interactive, was familiar with us we got in contact with the creators of the Op1 talkshow. The project needed to be created in a short term, since there was a talkshow race coming up with their competitor Jinek on RTL4. The requirements of the website were fairly simple: it needed to show fragments, full episodes and information about the show and hosts. After the launch I also worked on the expansion of the website with new features like: news articles, “today at Op1”, a host overview with personal introductions and podcasts.

The initial style for Op1 was made by a video agency, which consisted of a set of colors, the background for the talkshow promo and the logo itself. The task for me: make a website for the talkshow Op1 based on the given assets in the style of the NPO website. So I went to work, starting with what I had: colors, fonts and a logo.

Client:

January 2, 2020

Review:
Date:

January 2, 2020

Site Link:

https://op1npo.nl

Services:

UI design

The process and reflection

The Op1 talkshow is a show which is being broadcasted fairly late in the evening, so a dark/black background color (which is also used within the style of the NPO website) would be a great start. Then I checked which of the preselected colors would match the best with this dark color, the choice was gonna be the dark pink. In the starting phase of Op1 there was a lot of use of a mustard yellow color aswel, but I tried to avoid this color due to the readability and the match with the NPO style.

Due to the lack of access to assets, the team could not provide me with the signature NPO Sans font. Instead I had to find an alternative to this font myself. I found out that the font DIN would match the aesthetics of NPO fairly well so I went with this font.

For the shapes I made use of the square which used quite a border-radius (rounded corners). I definitely found out that these shape are not easy to work with, but definitely worth it if you can make it work. This was also the reason why we did not implement this shape in every component, but only a few (otherwise it would be too much out of NPO style).

After creating this successful design there were some minor tweaks, which would be solved within the FED phase. We were able to launch the website just after a few episodes were aired, which was faster than the Op1 team expected. Like I mentioned before, I also executed the additional features which were implemented after the launch of the website.

The Op1 project is currently live and you visit it here.

animated shape

Archives

Categories

The world's most powerful website builder.

Purchase Niro