Nessa aula, focamos na criação de um sistema de espaçamento consistente para o nosso design system. O objetivo é garantir que os componentes se encaixem de forma organizada no layout, trazendo coerência e consistência nas decisões de design. Aqui estão os pontos importantes que abordamos:
Incrementos de Espaçamento: Definimos que os espaçamentos são criados a partir de incrementos de quatro, o que proporciona um dimensionamento consistente.
Relação entre Elementos da UI: Discutimos a importância da relação entre os elementos da interface do usuário, como texto, ícones, moléculas e organismos, e como eles se relacionam com o grid do design.
Escala de Espaçamento: Começamos com o valor zero (que não tem representação visual) e seguimos com incrementos de dois até o valor oito. A partir daí, passamos a incrementar de quatro em quatro até o valor 24.
Definição da Base: Estabelecemos que o valor 16 é a base do nosso sistema de espaçamento. Esse valor será um ponto de referência para a escala e será usado em diversas aplicações no design.
Escalamento Proporcional: Começamos com uma escale menos de 2 em 2 até o número 8, em seguida vamos de 4 em 4 até o número 24. Após o valor 24, passamos a incrementar de oito em oito até chegar ao valor 128. Isso nos dá uma escala que cresce proporcionalmente e oferecerá a flexibilidade para o design no próximos passos.
Aplicações da Escala: Os valores definidos na escala de espaçamento serão usados como referência não apenas para o espaçamento entre elementos, mas também para definir tamanhos de bordas, curvaturas, ícones e outros elementos do design.
Flexibilidade e Densidade: A escala de espaçamento precisa ser flexível para acomodar diferentes densidades no design system, incluindo modos "padrão", "compacto" e "expandido".
Documentação e Refinamento: Enfatizamos que, embora a aula se concentre na construção da escala de espaçamento, haverá uma fase posterior para refinamento visual e documentação do design system, incluindo modos de uso e exemplos práticos.
Lembre-se de que nem todos os valores da escala serão utilizados em todos os designs, e será necessário avaliar a necessidade de cada um conforme o projeto avança. A ideia é ter uma gama de opções para garantir a flexibilidade e a consistência no design.
Data de lançamento
21/04/2025
Duração
Legendas
Português [PT-BR]
Tags
espaçamento, design, UI, escalabilidade, consistência
Title Example
Message Example