Crie um tema e uma marca acessíveis e personalizados com o Material Design 3

1. Antes de começar

Um moodboard é uma colagem de elementos, normalmente visuais, que representam o caráter ou estilo de um produto de design. Por exemplo, uma colagem de fotos e cores que expressam a aparência de uma marca.

Imagine que você precisa aplicar esses recursos a um app e projetar o restante do tema com atributos complementares, além de:

• Seguir as diretrizes de acessibilidade do app.
• Garantir baixa manutenção e fácil transferência.
• De preferência, criar um tema multiplataforma.

O Material Design 3 (também chamado de Material 3 ou M3) pode ajudar você a realizar essas tarefas. O Material Design é um sistema adaptável de diretrizes, componentes e ferramentas que seguem as práticas recomendadas de design da UI. Usando código-fonte aberto, o Material 3 é a versão mais recente do sistema de design de código aberto do Google.

Neste codelab, você aprenderá como as diretrizes de construção da sua marca e a aplicação de temas do M3 podem trabalhar juntas para criar uma experiência acessível e personalizada, que abrange desde a criação de um tema personalizado até a transferência para o desenvolvedor com ferramentas para ajudar ao longo do caminho.

Pré-requisitos

• Conhecimento de estilos e variáveis do Figma
• Opcional: codelab Visualização de cores dinâmicas no app

O que você vai aprender

• Como converter os atributos da sua marca em um tema de app acessível.
• Como usar o Material 3 para criar temas de UI do app.
• Como criar um tema de app personalizado ou de marca.
• Como visualizar seu tema e entregá-lo a um desenvolvedor.

O que é necessário

• Uma conta do Figma
• Um arquivo Figma Designlab

2. Visão geral da aplicação de temas

Os temas do Material Design consistem em três atributos de estilo que permitem personalizar a aparência dos apps. Esta seção analisa esses atributos.

Cor

A cor é usada para expressar estilo e transmitir uma mensagem significativa para o usuário, a marca ou a semântica. O sistema de cores lida com a variabilidade dos esquemas de cores que mudam dinamicamente e que surgem à medida que as entradas do usuário mudam.

A cor é aplicada à UI por meio de um esquema de cores ou de um conjunto de funções de cores agrupadas que são divididas em cores de destaque, de superfície e semânticas.

Tipo

Uma escala tipográfica é semelhante ao esquema de cores feito de funções de cores. Os estilos de fonte são atribuídos e agrupados por uso e em uma escala de tamanho. A escala tipográfica do Material Design é uma combinação de 15 estilos, cada um com uma aplicação e um significado pretendidos. Roboto é a fonte básica atribuída à escala tipográfica do Material, mas pode ser personalizada para sua marca.

Forma

A escala de formas do Material é uma gama de sete estilos de forma de canto que definem a quantidade de corte ou arredondamento: nenhum, extra pequeno, pequeno, médio, grande, extra grande e completo.

Funções e tokens

Uma função é qualquer nome semântico para uma propriedade de tema que ajuda a determinar ao que ela pertence ou para que é usada. Por exemplo, On Primary é o nome semântico da função para a cor usada em elementos da interface que estão acima dos elementos atribuídos com Primary. Essas funções são mapeadas para elementos específicos da interface em componentes. Embora possam ser remapeadas, elas ainda devem se ater às funções correspondentes.

As funções, assim como os tokens, proporcionam uma maneira de abordar propriedades sem especificar valores enquanto se referem ao caso de uso real da propriedade.

As funções têm casos de uso autoexplicativos que você deve manter. Não misture funções correspondentes, porque isso pode resultar em perda de acessibilidade.

Marca e temas

Ao começar a criar um app ou produto, você já pode ter uma definição de marca e elementos, como logotipo, paletas de cores e famílias tipográficas personalizadas.

Todos os elementos podem ser reunidos no Material Design para criar um app que expresse a identidade única da sua marca. Ao construir sua marca com o tema em mente, o app se beneficiará do seguinte:

• Transferência e gerenciamento mais fáceis por meio de propriedades, linguagem e entregas comuns de design e desenvolvimento.
• Uma marca e um tema coesos e acessíveis.
• Menos surpresas durante a implementação.

Os subsistemas do Material são semelhantes aos atributos encontrados em um guia de estilo, portanto, os dois podem ser compartilhados ou até mesmo criados juntos.

3. Criar um esquema de cores

Considerações e acessibilidade

No seu moodboard, apenas uma cor é fornecida, uma cor primária usada no logotipo. Se você observar o valor tonal, ou brilho, ele está em torno de 50. Como resultado, qualquer outra cor em que você usar a cor não terá contraste suficiente. Em vez de usar essa cor fornecida diretamente na UI, você deve analisar alguns métodos para encontrar cores relacionadas que sejam mais acessíveis e coesas no app. Para mais informações sobre acessibilidade em cores, consulte Design com cores acessíveis.

O Material 3 usa um algoritmo de cores que cria um esquema de cores acessível criando primeiro cores principais e paletas de tons alteradas para, depois, associar a um esquema de cores. Isso é usado para criar esquemas de plano de fundo do usuário. Sugerimos usar o mesmo processo para o tema do app, mas isso não é necessário, e as cores principais ou as cores do esquema resultante podem ser substituídas até certo ponto. Essa consideração é importante para tornar seu app o mais inclusivo possível e mais legível em diferentes contextos.

Aparência

A cor é uma linguagem expressiva poderosa que pode evocar diferentes vibrações e sentimentos e ajudar a caracterizar sua marca. Os arquétipos da marca muitas vezes podem utilizar cores semelhantes para evocar essas caracterizações. Dê uma olhada nos logotipos corporativos; a paleta de cores normalmente tem uma cor primária não muito saturada com tons neutros preenchendo o resto da imagem, o que dá uma aparência corporativa neutra.

Para ajudar a considerar as características do perfil na construção da sua marca: infantil, corporativa ou vanguardista. Você pode até justapor ou fazer o oposto para criar algo inesperado.

Por exemplo, a imagem a seguir contém um conjunto de cores com toque corporativo e cores com toque jovem:

Crie um esquema de cores

Agora você pode começar a construir uma marca e transformá-la em um tema de app.

Para criar um esquema de cores usando o moodboard fornecido, siga estas etapas:

1. Para criar uma cor primária, selecione a amostra de cor grande rotulada como primária e encontre o valor hexadecimal.

2. Abra o plug-in do Material Theme Builder. O arquivo já tem o valor de base do M3 inicial gerado para economizar tempo.
3. Role até a seção Esquema principal, clique no conjunto de cores primárias e atualize o valor hexadecimal. As outras cores principais já estão preenchidas.

Você poderia parar por aí. Um esquema completo já foi criado e derivado da cor fornecida, mas vamos ver o que o algoritmo de cores criará usando outras propriedades da marca.

4. Na seção Imagem de origem, clique em Escolher imagem e selecione uma das imagens do moodboard. Da mesma forma que no acréscimo de uma cor principal primária, adicionar uma imagem preenche todas as cores principais.

5. Nas configurações, marque a caixa de seleção Correspondência de cores e adicione a imagem novamente ou a cor principal primária. Isso resulta em um esquema de cores mais próximo das suas entradas, em vez da variante pontual tonal.

6. Opcional: atualize as cores secundárias e terciárias para refletir a aparência da marca. Você pode ajustar a cor secundária para algo mais análogo ao matiz primário em uma roda de cores. Cores secundárias ou terciárias com maior saturação resultam em cores que ofuscam a cor primária.
7. Clique em Atualizar. Isso aplica as alterações feitas no plug-in ao esquema de cores gerado.

Depois de atualizar as cores, os seguintes elementos serão atualizados automaticamente:

• Esquema de cores: este é o esquema de cores usado para seu app que é associado a funções de cores.
• Paletas tonais: são apenas para referência e usadas para derivar o esquema de cores. As paletas tonais exibem um matiz em diferentes etapas tonais.
• Estilos: estilos do Figma, que você pode acessar nos painéis de propriedades para atribuir.
• Variáveis: variáveis do Figma, que você pode acessar nos painéis de propriedades para atribuir.

Embora seja bom ter as paletas de tons como referência, elas não são necessárias para o tema do app nem são usadas para implementá-lo.

4. Aplicar cor a uma UI

Hierarquia de cores

Ao aplicar funções de cores aos modelos, considere a ordem de importância, ou hierarquia, dos elementos. Esse conceito ajudará a atribuir as cores da marca às respectivas funções e também a mapeá-las dentro da UI.

As cores são aplicadas em uma hierarquia com a cor primária e as respectivas funções atribuídas a calls-to-action (CTAs) cruciais. Recomendamos componentes de alta ênfase, como botões de ação flutuantes (FABs, na sigla em inglês), para assumir as funções principais. Cores mais vibrantes podem ajudar a indicar ações de maior destaque na hierarquia visual do app, porque chamam a atenção primeiro. Considere a ordem em que você quer que os usuários interajam com sua UI e conteúdo para ajudar a atribuir funções de cores. Nem todos os componentes devem usar primário.

Os componentes do Material têm funções de cores pré-atribuídas, mas você pode usar tokens de cores em toda a UI e em elementos personalizados.

Ao atribuir cores, considere as funções e os agrupamentos de cores. As cores de destaque geralmente exibem mais expressividade em uma UI, seja para branding, ações de destaque, expressão pessoal ou expressão do usuário.

Cores semânticas são aquelas às quais foram atribuídos significados específicos. Por exemplo, erro é uma cor semântica.

As cores de superfície são projetadas para elementos de fundo, como contêineres de componentes, planilhas e painéis. Elas representam a maioria das cores do app. Não tenha vergonha de usar muito espaço na superfície; o olho humano precisa de espaço para relaxar. As superfícies também ajudam a delimitar o conteúdo e direcionar o leitor.

Aplique cor a uma UI

1. Navegue até os mockups rotulados como exemplos de temas.
2. Selecione o plano de fundo do app e atribua Superfície.
3. Use o restante das funções do Contêiner de superfície, de baixo para cima, e as atribua aos fundos dos componentes maiores em relação ao tom de cinza atual. Isso inclui todos os cards.
4. Para cores de destaque, atribua Contêiner primário e Sobre contêiner primário ao contêiner do elemento de maior prioridade.
5. Repita com funções de cores secundárias e terciárias. Você pode descobrir que a maioria dos elementos na tela tem funções de cores secundárias ou terciárias, porque não são o foco principal.
6. Opcional: confira como o uso da função de destaque principal em comparação com a função de contêiner de destaque muda a aparência da UI e a hierarquia.

5. Criar uma escala tipográfica

Cada plataforma vem com um conjunto padrão ou integrado de fontes que podem ser acessadas, chamadas de fontes do sistema. Embora as fontes do sistema possam ser personalizadas na maioria das plataformas, pode ser bom usá-las devido a alguns recursos integrados. No Android, a fonte do sistema é a família tipográfica Roboto, o que significa que qualquer app pode usar Roboto por padrão. Você substituirá a fonte do sistema por um tema de tipo e uma escala tipográfica personalizada.

Considerações e acessibilidade

Para tornar sua escala tipográfica legível para que os usuários possam ver o texto sem esforço, lembre-se do seguinte:

• A escala tipográfica do Material foi criada para ser uma experiência de base ideal.
• Ao fazer ajustes no tamanho, sempre teste e não defina nada com menos de 10 pixels escaláveis (sp).
• Defina o texto com sp para que os usuários possam personalizar o tamanho da fonte usando as configurações do sistema.
• O texto pode aparecer de forma diferente em diferentes contextos de usuário. Por exemplo, em fundos escuros, tipos finos podem ser difíceis de ler, por isso é importante fornecer uma espessura maior.

Aparência

Da mesma forma que a cor, o tipo pode evocar diferentes sentimentos, que podem ser usados para caracterizar sua marca na sua UI. Seja uma fonte Serif séria para um visual corporativo ou uma exibição escrita à mão para um toque artesanal. Considere as características da família tipográfica para combinar com o moodboard.

O tipo foi historicamente classificado em grupos para facilitar sua distinção. Por exemplo, Sans Serifs (sem serifas) são agrupados como Geométrico, Humanista e Grotesco. Classificações mais descritivas incluem exibição, escrita à mão e monoespaçada.

Uma família tipográfica pode ser a escolha mais segura se você não se sentir confortável com a tipografia. Também pode vir com muitos estilos para uso ou mesmo pode não ser necessária. Mas você pode se deparar com contextos aprimorados ou até mesmo precisar de uma segunda família tipográfica. Ao parear uma segunda família tipográfica, pense no caso de uso. Exemplos:

• Escolha uma família tipográfica mais característica para funções de exibição maiores e uma com serifa ou sem serifa altamente legível para funções de corpo menores.
• A família tipográfica secundária pode ser usada em casos especializados, como numerais em dados.

Crie uma escala tipográfica

Agora, adicione tipografia ao seu guia de estilo personalizando a escala tipográfica do Material. Você usará o Material Theme Builder novamente.

Você começa com a fonte de exibição. Como o maior texto na tela, os estilos de "display" são reservados para textos ou números curtos e importantes. Aqui você pode escolher uma fonte mais expressiva devido ao tamanho maior.

1. Conheça fontes de exibição no Google Fonts. Considerando as características do seu moodboard, use os filtros para refinar e inserir o nome do app para encontrar uma família tipográfica que corresponda à sua aparência.
2. No plug-in do Material Theme Builder, selecione a guia Tipo. Em seguida, selecione Fonte de exibição e procure a família tipográfica escolhida.
3. Conheça fontes de corpo no Google Fonts. Considere que as fontes do corpo, que incluem corpo, rótulo e funções de título, precisam ser altamente legíveis devido aos tamanhos e funções menores.
4. No plug-in do Material Theme Builder, selecione a guia Tipo. Em seguida, selecione Fonte de corpo e procure a família tipográfica escolhida.
5. Clique em Atualizar. Isso atualiza os estilos de tipo do Figma junto com a escala tipográfica na seção do guia de estilo.

6. Aplicar fontes à UI

Hierarquia

A hierarquia é comunicada por meio de diferenças na gramatura da fonte, no tamanho, na altura da linha e no espaçamento entre letras. A escala tipográfica atualizada organiza os estilos em cinco funções nomeadas para descrever as finalidades: exibição, manchete, título, rótulo e corpo. As novas funções são independentes de dispositivo, permitindo uma aplicação mais fácil em vários casos de uso.

Aplique fontes à UI

1. Vá até os mockups rotulados como exemplos de temas. Atualmente, apenas os tamanhos são aplicados aos mocks, mas não aos estilos.
2. Atribua tamanhos de fonte maiores aos estilos de exibição e manchete.
3. Repita no título, no rótulo e no corpo. Ao definir a função, considere qual é o uso do elemento.

7. Forma

Escala de forma do M3

A escala é uma gama de sete estilos de forma de canto que definem a quantidade de corte ou arredondamento: nenhum, extra pequeno, pequeno, médio, grande, extra grande e completo.

Por padrão, todas as funções usam a família de formas arredondadas. A maioria dos valores é expressa em medidas absolutas de dp, exceto para o estilo completo, que é expresso em porcentagem.

A forma pode ser definida pela família de formas (arredondada ou cortada) e pelo valor (1 a 7).

Essas regras de forma podem variar dependendo dos componentes que se ajustam. Por exemplo, ter um raio de borda maior nos elementos do contêiner em comparação com valores menores nos elementos internos.

Características de forma

Assim como acontece com a cor e o tipo, a forma pode ajudar a expressar a aparência de uma marca. A família e o valor da forma podem mudar a aparência.

Arredondado é frequentemente visto como uma aparência amigável ou mais suave.

Cantos cortados podem dar uma aparência distinta ou tradicional dependendo do grau.

É claro que deixar o valor em 0 será mais difícil, mas pode fornecer uma abordagem moderna.

Considere como a cor e o tipo combinam com a forma. Confira um exemplo sem arredondamento de cantos, mas com cores e fontes diferentes usadas para criar visuais diferentes:

Defina a forma

1. Defina a família de formas e os valores para desenvolvimento atualizando os componentes para que sejam refletidos nos mockups. Não se esqueça dos componentes personalizados!
2. Atualize o guia de estilo para incluir a forma, anotando os componentes pequenos, médios e grandes fornecidos.

8. Movimento

O movimento torna a UI expressiva e fácil de usar. Ele pode ajudar a direcionar a UI, indicar ações e fornecer feedback aos usuários. A flexibilização e a duração podem adicionar expressão de marca a esse movimento.

O Material inclui slots de facilitação e duração para personalizar a biblioteca de movimentos por meio de tokens. Esses tokens devem ser expressos por meio de notação e prototipagem para transferência ao desenvolvedor.

9. Transferir para um desenvolvedor

Para usar o plug-in do Material Theme Builder para exportar um arquivo de tema implementável para cor e tipo, siga estas etapas:

1. No plug-in, clique em Exportar e selecione sua plataforma no menu. A forma e outros atributos de estilo podem ser fornecidos para implementação por meio das especificações do Figma, mas certifique-se de que estejam documentados!
2. Compartilhe os arquivos baixados com o desenvolvedor.

10. Parabéns

Muito bem! Agora você tem um guia de estilo de marca, mockups temáticos e arquivos de tema implementáveis.

Saiba mais

• Siga youtube.com/MaterialDesign para conferir mais conteúdo de design e tutoriais.
• Expanda seu guia de estilo com design de conteúdo, ícones e elevação.
• Se você tiver dúvidas, entre em contato conosco pelo @MaterialDesign no X.
• Implemente o tema do Material 3 no Compose.