Site · Artista de lo-fi hip hop
menin0
Um site para o meu projeto musical que atravessa um dia inteiro: começa na cidade à noite, sobe para o céu, desce na praia e termina no mar. Do jeito que uma playlist lo-fi acompanha o dia.
- Projeto
- menin0, meu projeto de lo-fi hip hop
- Meu papel
- Identidade, design no Figma e desenvolvimento
- Contexto
- Curso de HTML e CSS da Coder House
- Resultado
- Nota máxima na avaliação final
01 · O desafio
Dar uma casa para a música fora das plataformas.
As faixas do menin0 estão espalhadas por Spotify, Apple Music, YouTube, Amazon e Deezer. O site precisava juntar tudo em um lugar só e ainda abrir espaço para o que as plataformas não fazem: liberar a música para criadores, receber apoio, captar e-mails e falar comigo.
02 · A ideia
Rolar a página é passar o dia ouvindo lo-fi.
Cada seção ganhou uma cena ilustrada, da noite ao fim de tarde, e um bichinho que respira devagar no seu canto. Os títulos são manuscritos, como o logo, e as caixas brancas translúcidas deixam a cena aparecer por trás do texto. A estética é de propósito um pouco crua, como o próprio gênero.
03 · Identidade
A marca do menin0
Também criei a identidade do projeto: o logo escrito à mão, a paleta e o par de fontes que o site usa.
Logo
Um "menin0" escrito à mão, em traço contínuo, com o zero no lugar do "o" final. Solto e um pouco irregular, como um beat lo-fi.
Paleta
-
Areia
#FFE6B5
Fundos claros e calor das cenas de dia
-
Céu
#49B0ED
Céu e mar, o lado fresco do dia
-
Vinil
#DB3E51
Destaques, traço dos títulos e botões
-
Musgo
#2B3F3D
Superfícies escuras e detalhes
-
Névoa
#F3FEFB
Textos sobre o escuro e caixas claras
-
Noite
#152524
Fundo base da marca
Tipografia
Hertine
Manuscrita nos títulos das seções, conversando com o logo.
Listen now
Heebo
Sem serifa para o resto: nome do lançamento, textos, formulários e botões.
Rainy Coffee
04 · O site
Role e passe o dia
A página inteira, no computador e no celular. Role dentro de cada tela.
05 · As cenas
Um dia em quatro cenas
Depois do lançamento mais recente no topo, cada cena sustenta uma parte do conteúdo.
-
01 · Noite
Ouça agora
Prédios no escuro para o convite principal: escolher a plataforma e dar o play.
-
02 · Manhã
Use a música
Céu aberto para liberar as faixas para criadores e rádios lo-fi.
-
03 · Tarde
Newsletter
Areia vista de cima, para quem quer saber do próximo lançamento.
-
04 · Fim de tarde
Contato
A onda chegando na areia fecha a página com o formulário.
06 · Bastidores
Do Figma para o HTML, sem framework de design.
Criei a identidade e desenhei o layout no Figma e construí a página com HTML e CSS, usando Bootstrap só no menu. O projeto foi a entrega final do curso de HTML e CSS da Coder House e recebeu a nota máxima.
- FigmaLayout, cenas e responsivo
- HTML e CSSEstrutura, cenas em fundo e animação dos personagens
- BootstrapMenu com versão recolhida no celular
- GitHubCódigo aberto no repositório menin0-lofi
Projeto pessoal. Música, design e código por Jonathan Menino, o menin0.