noon radio

Radio station web app
UI visual design Prototyping Day mode/Night mode

Wireframe and screens

Mid-fidelity wireframes provide a more detailed representation of a design compared to low-fidelity wireframes. They include basic styling, typography, and spacing, offering a clearer view of the layout and functionality without full visual design elements.

Style guide

For the background, I created two themes -day and night- using muted colours.

For the headers, I chose Neue Machina.
This geometric, powerful typeface imparts a robotic, machine-like, and playful personality, which aligns well with radio and music content.
For the body text, I selected Work Sans. While it shares similarities with Neue Machina, it is more straightforward and enhances readability while maintaining consistency.

Day mode / Night mode

I created day mode and night mode.
For the desktop version, I designed textured colour backgrounds to add a playful personality. Users can choose a warm, orange/pinkish theme for day mode or a cool, dark blue theme for night mode, depending on their preference.
I believe that the combination of music and these carefully selected colours enhances the user's emotional experience, making the interaction with the radio station more immersive and enjoyable.

For the mobile version, I opted for simple white or black backgrounds.
On smaller screens, textured backgrounds can hinder accessibility, so I avoided using them.