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
Você usa ou já usou o Marvel? O que tem achado da ferramenta?