Se você estuda ou trabalha com UX já deve ter visto a fantástica ferramenta Marvel App. Utilizei-a bastante para protótipos de alta fidelidade uma vez que era de graça e a interface bem interessante.

Na época nem dava para criar layouts diretamente lá, mas hoje a ferramenta evoluiu bastante. Agora vamos conferir o Design System dela e sua ficha técnica.

Ficha técnica

  • Nome: Marvel Styleguide
  • Empresa: Marvel App
  • Ano de desenvolvimento: 2017
  • Diferenciais:
    • Indicação clara de categorias que ainda estão em desenvolvimento
    • Animações seguem um padrão
    • Preocupações pontuais com dark mode, importantíssimo hoje em dia
    • As modais e popovers são bem elegantes
    • Nos utiliários, classes para esconder elementos (inclusive para esconder apenas visualmente, a11y excelente aqui)
    • Uso de Sass e React na parte de front-end
  • Pontos negativos:
    • Faltou o arquivo inicial, mas talvez é exclusivo para o time da ferramenta
    • Fonte primária muito específica, apesar de reforçar o branding considero um ponto negativo por prejudicar levemente a performance
    • Brand primary color sendo usada nos CTAs (call to action) não é acessível do ponto de vista de contraste cromático (apenas 2.28 de contrast ratio)

Imagens do Design System

sistema de cores do design system do marvel, 3 tons de cada cor como azul, roxo, rosa e verde
boas praticas dos botoes, sendo o destaque da imagem os 5 diferentes tamanhos de botoes, todos azuis com texto branco
diferentes tamanhos da tipografia do ds do marvelapp, sendo o maior texto com 48px de tamanho
padrão de animação do ds do marvel, em destaque 5 bolinhas exemplificando cada time de animacao
ds do marvel mostrando os tipos de borda arredondada disponiveis, sendo 3 bordas arredondadas mesmo e uma formando uma bola

Você usa ou já usou o Marvel? O que tem achado da ferramenta?

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