Leia o raciocínio por trás de um componente do sistema de design

Painéis modulares vermelhos e sombras repetidas na fachada de um edifício

Acerca de esta selección

Quatro referências públicas para estudar componentes como decisões sobre conteúdo, comportamento e acesso, em vez de uma galeria de controles atraentes.

Uma captura de ecrã de botão informa pouco sobre validação, navegação pelo teclado ou o que acontece quando um rótulo fica mais longo. Uma boa documentação de componentes explica as decisões relacionadas. Esses sistemas e artigos oferecem diferentes escalas de explicação, desde padrões de serviço público até fundamentos de produtos e comportamento detalhado de interface. Estude um problema entre eles antes de tomar emprestado um tratamento visual.

Tente isso primeiro

Escolha um padrão que seu projeto realmente precisa, como uma mensagem de erro ou uma divulgação. Compare sua finalidade, texto, comportamento de foco e tratamento de ecrã estreita. Escreva uma pequena lista de verificação de aceitação e teste sua própria implementação com um teclado e conteúdo realista. Mantenha a documentação fonte ao lado da decisão que o leitor toma.

Lembre-se

Um padrão governamental ou específico de um produto carrega seu contexto original. Não copie cegamente seu texto ou marca. Os artigos mais antigos continuam sendo explicações úteis, mas verificam os detalhes da implementação em relação ao comportamento atual do navegador e às orientações de acessibilidade.

4 enlaces/En el orden elegido por el curador

Enlace 1inglés

Sistema de Design GOV.UK

Estude estilos, componentes e padrões de serviço juntamente com orientações de uso. Leia quando um padrão é apropriado antes de copiar seu exemplo.

design-system.service.gov.uk

Enlace 2inglés

Sistema de Web Design dos EUA

Compare as orientações dos componentes do setor público e as considerações de acessibilidade. Procure as regras de conteúdo e interação por trás de um controle familiar.

designsystem.digital.gov

Enlace 3inglés

Componentes Inclusivos

Leia discussões detalhadas sobre padrões como notificações, tabelas e menus. Use o raciocínio para revisar o comportamento, enquanto verifica o código antigo em relação à prática atual.

inclusive-components.design

Enlace 4–

Espectro Adobe

Explore os fundamentos e a documentação específica da plataforma do sistema de design da Adobe. Compare os princípios compartilhados com os requisitos do seu próprio produto.