Último post da 1ª temporada trazendo reviews dos melhores Design System aqui do Dicas UX.

Ontem estava de bobeira e vi no grupo UXPerts Brasil um post do Filipe Samuel compartilhando o Spectrum, Design System da nossa querida mãe Adobe.

Eu falo “mãe” pois Adobe é uma das minhas empresas que mais tenho carinho na área de design. Muito disso se deve ao fato de ter sido a primeira ferramenta de design que brinquei na vida (no caso o Photoshop 7.0).

Esse Design System da Adobe é bem animal, como 90% das coisas que a Adobe faz. Confira o review!

Ficha técnica

  • Nome: Spectrum
  • Empresa: Adobe
  • Ano de desenvolvimento: 2019
  • Diferenciais:
    • Modo noturno 🌙
    • Lista com os últimos releases
    • Open source
    • Guidelines para design tokens (nunca tinha pensado nisso)
    • Preocupação com internacionalização
    • UI kit geral e em componentes específicos
    • E-mail de contato para dúvidas
    • Seção sobre CSS sensacional, inclusive com status de progresso em cada componente e live components
  • Pontos negativos:
    • A parte sobre design inclusivo poderia ter um tico mais de conteúdo

Imagens do Design System

Capa do design system da adobe menu na esquerda e uma grande ilustracao com alguns componentes, cor predominante na pagina é branco e na ilustracao azul
cores usadas no ecossistema adobe, na pagina cores como azul e vermelho, opcao para mudar de hexadecimal para rgb, mudar o tema para modo noturno
pagina sobre a tipografia usada na adobe, mostrando a preocupacao com internacionalizacao pois é mostrado alem da fonte adobe clean padrao, uma fonte chinesa tambem
pagina sobre as mensagens temporarias para ensinar o usuario a fazer algo, adobe chama isso de coach mark. Na imagem um exemplo em uma ferramenta
pagina sobre tom de voz do design system da adobe, se ve uma ilustracao retangular com um lapis no meio abrindo um leque de diferentes formas
Pagina sobre bidirecionalidade mostrando um exemplo do menu horizontal da adobe como ficaria em um pais árabe orientação da direita para a esquerda
botoes padroes usados no DS spectrum
pagina sobre campos de texto do spectrum. Logo no começo se ve a anatomia de um text field com varios pontos como label, contador de caracteres, placeholder

Comentei ali em cima do Photoshop 7.0, mas qual foi a sua primeira ferramenta de design?

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma