1
resposta

[Projeto] Consistência visual do apicativo Spotify

Um ótimo exemplo de consistência, inclusive citado nas aulas, é o aplicativo Spotify. Nele, podemos notar diversos grupos de componentes que se repetem na própria tela inicial:

Print da tela inicial do aplicativo Spotify com destaques coloridos em cada grupo de componentes

  • Vermelho: filtro para localizar os diferentes tipos de faixas salvos na biblioteca;
  • Verde: Playlists criadas/salvas na sua biblioteca na barra lateral para acesso mais rápido;
  • Laranja: outro tipo de filtro para a tela principal;
  • Azul: recomendações de playlists criadas pelo próprio spotify com músicas salvas e músicas parecidas a elas;
  • Amarelo: faixa que está tocando no momento, com informações básicas e úteis, como de qual playlist essa faixa é, capa do álbum, nome da música, artista e se está salva ou não;
  • Roxo: uma barra fixa de navegação rápida entre as faixas, com um “layout universal” e outras funcionalidades, como visualizar a letra da música, o volume e o tamanho da tela, etc.

Todos esses grupos de componentes possuem um padrão único, mas que se repete. Perceba que na listagem de playlists (destacado em verde) não precisou criar um layout diferente para cada playlist: cada uma tem o mesmo alinhamento, tamanho de texto, título destacado, mesmo tamanho da capa… Criou-se uma consistência e é fácil de identificar que são várias divisões das mesmas coisas (grupos de músicas).

Além disso, a fonte de todo o texto encontrado na tela inicial não varia muito: é a mesma fonte, mas em negrito para textos de destaque e outros menos chamativos para informações adicionais, que não requerem tanta atenção.

Em conclusão, todos os grupos de componentes, inclusive os que não citei nesta atividade, possuem uma consistência e um padrão que se perpetua em todas as telas, gerando maior confiabilidade e menos carga cognitiva do usuário, onde ele consegue se localizar muito bem nas funcionalidades e telas do aplicativo.

1 resposta

Olá, Emilly, como vai?

Seu olhar para a consistência visual do Spotify está muito bem desenvolvido e você articulou de forma clara como cada grupo de componentes reforça a experiência do usuário. A leitura da tela que você apresentou demonstra boa percepção dos padrões e da relação entre elementos, algo essencial para quem está avançando no entendimento de Design System.

É interessante notar como você conectou a repetição dos componentes ao ganho de previsibilidade e redução da carga cognitiva. Esse tipo de análise reforça o quanto decisões aparentemente simples, como alinhamentos, pesos tipográficos e organização das listas, fazem diferença na navegação.

Continue trazendo suas percepções desse jeito, pois isso ajuda muito no desenvolvimento de uma sensibilidade mais fina para padrões e sistemas visuais. O fórum está à disposição para o que você precisar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!