Design System: criando componentes e documentando

Definindo os componentes - Apresentação

Se você está querendo aprender a criar um Design System você está no curso certo. Boas-vindas ao segundo curso da formação em Design System da Alura, onde vamos trabalhar neste aplicativo, o majestoso AluraMed.

Pegaremos todos os elementos de fundação que são: tipografias, cores, sombras e vários outros que foram estudados no primeiro curso aqui da formação e vamos juntá-los, incrementá-los para criar maravilhosos, lindíssimos componentes.

Ao longo deste curso vamos aprender como começar a criar os componentes, como definimos uma lista por onde começamos, também vamos aprender uma metodologia sensacional para poder passar por todo esse produto, por todo o design system, também vamos aprender a como nomear os componentes, como identificá-los da maneira certa e o que fazer depois que finalizamos todo esse processo, como continuamos o design system após terminar todos os componentes.

Por último, mas não menos importante, vamos criar lindíssimos componentes como esse botão, que está na minha tela, e vamos criar não só o visual, mas toda a questão de animação, interação, vamos definir interações que melhoram tanto a interface visualmente, quanto enriquecem muito a experiência do usuário enquanto ele estiver usando o produto.

Eu, Mateus Villain, vou ter a honra de passar por todo esse conteúdo ao longo do curso. Conte comigo para o que precisar, nos vemos no próximo vídeo.

Definindo os componentes - Componentes de um Design System

Vamos começar o nosso curso de verdade. O curso anterior foi trabalhado esse aplicativo que vocês estão vendo que é o AluraMed, onde vocês desenvolveram todos os elementos básicos, os elementos de fundação de interface que são: tipografia, cores, sombra e vários outros elementos que são muito importantes de serem criados para que cheguemos nesse curso e desenvolvamos os componentes de fato. Porque são esses elementos que irão nos ajudar a criar os componentes.

Você já parou para pensar o que é de fato um componente? Por exemplo: esse botão aqui, porque eu acabei de falar, os elementos de fundação são muito importantes. Temos que definir primeiro uma paleta de cores, depois temos que definir a tipografia, dentro da tipografia tem várias coisas que definimos, como: a fonte, o tamanho do texto, a altura da linha, etc.

Tudo isso é relevante para criarmos esse componente e todos os outros, eles são a base para os nossos produtos. Eu trouxe uma referência maravilhosa de um dos, senão o mais famoso, design system que temos hoje no mercado que é o Material Design.

Esse aqui é o design system criado pela Google que eles utilizam nos produtos deles, tipo: Gmail, o Google Fotos, o Android, sistema operacional de celular que eu e muita gente no mundo tem. O que eu quero mostrar para vocês podem encontrar aqui em cima nessa barra do topo, nesse menu chamado Components.

Vindo aqui vamos para uma listagem de todos os componentes que a Google tem, eles têm muitos componentes. Vamos tratar, por exemplo, vamos olhar o componente Botão. Antes de tudo, antes de eu clicar ali, vamos parar e pensar o que é o componente botão.

Basicamente é uma caixinha que tem uma cor aleatória, vai ter um texto em cima, clicamos com o cursor, com o mouse e gera uma ação na interface. Uma ação qualquer, depende do designer o que ele vai aplicar. Esse é o botão, bem simples.

Vamos clicar aqui e vamos abrir esse componente e repare que na minha barra de navegação que essa página é imensa, ela tem muito conteúdo, tem muito texto, imagens, ilustrações, muita especificação. Você me pergunta: "Como esse componente simples que acabamos de falar tem tanto conteúdo para ser dito?"

É o seguinte: os designers, os programadores, a equipe de criação da Google não simplesmente pegaram uma caixinha roxa, colocaram um texto em cima e pronto, temos um componente. Eles sentaram, discutiram sobre como criar um componente que trouxesse melhor ênfase para interfaces, eles definiram estilos diferentes, definiram opções com ícones.

Tudo isso encontramos aqui nessa documentação, vamos descendo e encontramos os tipos de botões que podem existir, temos uma anatomia, a definição certinha de cada um dos elementos que vai ter dentro desse componente, dentro desse botão. Temos até mesmo regras de como usar e como não usar um botão.

Já parou para pensar que existem maneiras erradas de utilizar um botão? Nesse exemplo aqui, por exemplo, a Google está mostrando que eu não posso quebrar a linha do botão ele tem que está sempre em uma única linha, se não couber aí eu vou ter que procurar outra nomenclatura que seja menor para que caiba dentro dessa interface.

Conforme formos descendo aqui vamos encontrando cada vez mais informações, informações que até mesmo acabamos não sendo relevante para criação de botão. Tem toda parte de comportamento, eles explicam tudo sobre os estilos dos botões que eles têm, quais são os casos de uso, a diferença entre eles, onde é o melhor lugar para usar, quando tem que usar cada um deles.

É uma comunicação muito clara. Está em inglês aqui, sei que nem todo mundo entende inglês, mas é uma documentação que qualquer pessoa na internet no mundo pode entrar aqui, ler e se interessar. O link está disponível para qualquer pessoa acessar, é um site público, é como se fosse uma Wikipedia, uma grande Wikipedia da biblioteca de componentes de guias também da Google, sobre como eles aplicam isso para os produtos deles.

Qualquer pessoa pode vir aqui, mas não significa que tenha a comunicação voltada só para todos. Também temos comunicações voltadas para nós, da área de criação do produto, por exemplo, vamos aqui no menu chamado Theming e temos especificações um pouco mais complexas. Por exemplo: nessa seção aqui de cor, temos a definição de elementos, categorias, temos os valores da cor de opacidade também.

Tipografia, temos a definição do tipo de tipografia que está aqui dentro, a fonte, o peso dela, o tamanho da fonte, 14 pixels. Está tudo em maiúsculo, tudo muito bem especificado. Temos especificações mais complexas ainda aqui na seção Specs onde ele mostra distâncias, espaçamentos entre um elemento e outro aqui dentro do Botão.

E tudo isso aqui basicamente faz que nós entendamos que o componente, o menor dos componentes por mais simples que ele pereça, ele tem todo um estudo por trás porque queremos trazer a melhor experiência para o usuário independente do componente que ele seja e independente da interface que ele esteja navegando.

Agora nos vemos no próximo vídeo onde vamos falar sobre uma metodologia essencial para podermos criar Design Systems. Ela vai nos nortear bastante ao longo do curso, que é o Atomic Design. Nos vemos lá.

Definindo os componentes - Aprendendo o Atomic Design

Vamos supor que te dê uma lista de afazeres para o seu Design System como, por exemplo, um botão, um campo de texto, uma paleta de cores e o efeito sonoro. Qual desses você faz primeiro? Qual vem depois? Qual é o último elemento?

Não existe uma regra, uma norma que diga: "Não, você tem que fazer, depois você faz esse daqui." Esquece. Porém, é legal seguir uma linha de raciocínio para não nos perdemos no futuro. Design System é um produto que leva meses de construção e, como você já deve fazer, ele não para, ele não tem fim.

Se cometemos algum erro no início a dor de cabeça no futuro pode ser muito grande. Vamos pensar, vamos dizer que o Botão é o primeiro item da lista que temos que criar na construção do Design System. Só que ainda não definimos cor, temos que definir a cor primeiro, não temos cor para esse botão.

E tipografia, tipografia também que define primeiro. E aí não temos um botão sem cor e nem tipografia. Por isso, o Brad Frost em um dia ensolarado decidiu pegar elementos da química, da física, da biologia e juntar com o design de interface para criar o famoso Atomic Design.

Que é essa linha de raciocínio, essa metodologia que vocês estão vendo aí na tela formada por átomos, moléculas, organismos, templates e páginas. Vamos passar por cada um desses elementos que são importantes para construção de um Design System, mas também não só para isso como para um dia a dia de trabalho normal.

Átomos são os primeiros elementos e ele é o elemento mais simples de uma interface. Ele pode ser os elementos da fundação: cor, tipografia, sombra, mas ele também pode ser elementos simples de código HTML como, por exemplo, o input de texto que estou mostrando para vocês.

Ele não tem como ser dividido igual a todos os outros elementos. Lembra: os átomos não podem ser divididos. E quando temos várias moléculas ou várias moléculas e átomos juntos, criamos um organismo. Seguindo aqui, é o mesmo exemplo, temos um átomo de imagem, temos um átomo de tipografia, Home, About, Blog, Contact, e temos a molécula de campo de busca. Juntando tudo isso criamos um cabeçalho, um header de um site.

Depois disso fugimos totalmente dos elementos da química, da biologia. Entramos nos templates que são nada mais, nada menos, como você pode ver pela imagem, que são wireframes interfaces de baixa fidelidade. Nesse caso aqui temos toda estrutura de uma página pronta, mas ainda não definimos conteúdo, não definimos imagem, não definimos a identidade, está tudo preto, branco, cinza.

Só quando definimos isso tudo que temos as páginas finalizadas, que é a última etapa do Atomic Design que são os pages. São aquelas páginas que já estão publicadas na web ou no aplicativo, enfim. Se você quiser aprender mais sobre Atomic Design aqui na descrição do vídeo e no material de apoio também, vai ter um link onde eu explico para você muito mais sobre essa metodologia e como você usa não só para o Design System, mas como também para o seu dia a dia de trabalho.

Porque isso daqui pode servir muito bem para construir sites, aplicativos, fora o Design System também que é o nosso grande foco durante esse curso.

Agora que entendemos melhor essa metodologia para construção do Design System para organizarmos melhor as nossas ideias, no próximo vídeo vamos definir uma lista de afazeres com todos os componentes que vamos construir ao longo desse curso. Nos vemos lá.

Sobre o curso Design System: criando componentes e documentando

O curso Design System: criando componentes e documentando possui 152 minutos de vídeos, em um total de 36 atividades. Gostou? Conheça nossos outros cursos de Design System em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Definindo os componentes
• Componentes base
• Componentes complexos
• Finalizando os componentes