Website · Lo-fi hip hop artist
menin0
A website for my music project that moves through a whole day: it starts in the city at night, rises to the sky, comes down to the beach and ends at the sea. The way a lo-fi playlist keeps you company all day.
- Project
- menin0, my lo-fi hip hop project
- My role
- Identity, Figma design and development
- Context
- Coder House HTML and CSS course
- Result
- Top grade in the final evaluation
01 · The challenge
Giving the music a home outside the platforms.
menin0’s tracks are spread across Spotify, Apple Music, YouTube, Amazon and Deezer. The website had to bring it all together in one place and also make room for what the platforms don’t do: clear the music for creators, receive support, collect emails and get in touch with me.
02 · The idea
Scrolling the page is like spending the day listening to lo-fi.
Each section got an illustrated scene, from night to late afternoon, and a little creature breathing slowly in its corner. Titles are handwritten, like the logo, and translucent white boxes let the scene show behind the text. The aesthetic is deliberately a little raw, like the genre itself.
03 · Identity
The menin0 brand
I also created the project’s identity: the handwritten logo, the palette and the pair of typefaces the website uses.
Logo
A handwritten "menin0" in a continuous stroke, with a zero in place of the final "o". Loose and a little irregular, like a lo-fi beat.
Palette
-
Sand
#FFE6B5
Light backgrounds and the warmth of the daytime scenes
-
Sky
#49B0ED
Sky and sea, the cool side of the day
-
Vinyl
#DB3E51
Highlights, title strokes and buttons
-
Moss
#2B3F3D
Dark surfaces and details
-
Mist
#F3FEFB
Text on dark and light boxes
-
Night
#152524
Brand base background
Typography
Hertine
Handwritten for section titles, echoing the logo.
Listen now
Heebo
Sans serif for everything else: release name, text, forms and buttons.
Rainy Coffee
04 · The website
Scroll through the day
The whole page, on desktop and mobile. Scroll inside each screen.
05 · The scenes
A day in four scenes
After the latest release at the top, each scene holds one part of the content.
-
01 · Night
Listen now
Buildings in the dark for the main invitation: pick a platform and press play.
-
02 · Morning
Use the music
Open sky to clear the tracks for creators and lo-fi radios.
-
03 · Afternoon
Newsletter
Sand seen from above, for those who want to hear about the next release.
-
04 · Late afternoon
Contact
The wave reaching the sand closes the page with the form.
06 · Behind the scenes
From Figma to HTML, with no design framework.
I created the identity, designed the layout in Figma and built the page with HTML and CSS, using Bootstrap only for the menu. The project was the final assignment of the Coder House HTML and CSS course and got the top grade.
- FigmaLayout, scenes and responsive design
- HTML and CSSStructure, background scenes and character animation
- BootstrapMenu with a collapsed version on mobile
- GitHubOpen source in the menin0-lofi repository
Personal project. Music, design and code by Jonathan Menino, aka menin0.