#2 - Player de Música

O segundo desafio foi para criar um player de música que contivesse obrigatoriamente os botões: play ou pause, faixa anterior, próxima faixa, modo aleatório ou modo repetição e adicionar aos favoritos.

Estrutura

Espaçamentos

Os espaçamentos foram definidos a partir da grade de 8 pontos, o que significa que todos os espaços entre elementos são múltiplos de 8.

Tipografia

Para a tipografia, escolhi a fonte SF Pro, por se tratar de um design baseado na linguagem do iOS, sistema operacional dos iPhones, a fonte padrão do sistema se encaixaria bem na interface. A tela feita neste desafio não possui muitos textos, contando apenas com o nome da faixa e o nome do artista.

Cores

Neste desafio, escolhi uma paleta de cores monocromática, com cinzas escuros e tons de branco. Para um design de produção, as cores de fundo da interface acompanhariam as cores das capas de album, como demonstro mais abaixo na seção de variantes.

Como plano de fundo temos um gradiente linear monocromático que vai de um cinza escuro (#3F3F3F) para o preto puro (#000000). Aqui, a ideia é que a metade inferior da tela seja caracterizada por uma cor com opacidade em 100% para possibilitar a legibilidade dos textos e controles, enquanto a metade de cima da interface conta com a mesma cor, porém com uma opacidade reduzida, mantendo o foco na imagem do album.

Em seguida temos a cor #707070, escolhida especificamente para esta capa de album, que foi aplicada num retângulo com o mesmo tamanho da imagem, abaixo dela, com um efeito layer blur para criar uma iluminação difusa por trás da capa, que reflete no resto da interface.

Por último temos a barra de progresso da música, que conta com um tom acizentado (#555555) para mostrar o tempo restante da faixa atual, enquanto a barra dinâmica é caracterizada por um tom off-white (#F5F5F5), bem como os demais ícones e tipografia.

Componentes

Os componentes consistem basicamente em ícones, com exceção da barra de progresso da faixa. Todos os ícones foram obtidos da biblioteca Phosphor Icons, nos estilos bold e fill e a capa do album, escolhida por ser uma das minhas bandas favoritas, foi retirada do site FloPedia.

Variantes

Durante o processo de design, criei outras versões até optar pelo design final mostrado acima, aqui estão algumas delas:

Com os botões modo aleatório e favorito ativados.

Com os controles auxiliares (anterior e próximo) em estilo outline.

Com o botão principal (play/pause) dentro de um círculo.