Design System: criando um produto digital

Introdução - Apresentação

Olá, bem-vindo a mais um curso aqui da Alura! Meu nome é André Lisboa, e eu sou designer focado em produtos digitais, isso significa que no meu dia a dia, eu trabalho criando experiências para esses produtos. Eu tenho mais de 5 anos de atuação nessa área, e ao longo da minha trajetória eu já desenvolvi diversos sites e aplicativos.

Esse daqui é o vídeo que inaugura o nosso curso de Design System criando um produto digital, nesse curso daqui o que que vamos fazer? Nós temos aqui as telas do AluraMed, que foram base para criarmos todos os cursos ao longo da formação aqui de Design System.

Então você pode notar que a partir dessas telas aqui nós definimos o nosso Design System, com as cores, com as tipografias, com os ícones, espaçamentos, grids, enfim. Também uma parte aqui com os componentes, os botões utilizados, os campos de texto, enfim.

Então agora a proposta do curso é pegar todo esse Design System que foi construído e realmente aplicá-lo em um produto já existente, chegando ao final com uma característica similar a essa daqui que é a que vamos chegar ao final desse curso.

Então, o que vamos entender? Como criar a padronização aplicar de fato, a padronização aqui das cores, então se você for notando aqui, nós estamos por exemplo aqui nesse elemento utilizando uma cor que foi definida no Design System, aqui uma tipografia, um estilo tipográfico que foi definido, aqui os componentes que foram definidos com suas cores.

Então você pode vir em um elemento chamado botão que ele tem aqui os estados, tem aqui a sua hierarquia. Enfim nós temos esses elementos aqui que vamos começar a incluir nas nossas telas já existentes.

E não vamos apenas repaginar com o que já foi criado, ao longo do curso também, nós vamos criar novos componentes, então por exemplo, esse elemento do título com descrição, é algo que vamos notar que se repete em locais diferentes, vale a pena ser componentizado.

Então isso porque como foi comentado ao logo de toda formação o Design System é um produto que está sempre escalando e sempre melhorando.

E por fim, então depois de padronizadas todas essas telas aqui iniciais do AluraMed. Mós vamos também então criar uma nova funcionalidade, não vamos apenas repaginar o que já foi feito, vamos entender como utilizar o Design System para criar uma nova funcionalidade, uma nova área desse produto que estamos trabalhando.

Então nesse caso aqui vamos fazer uma área de evolução de saúde, então mostrando quais foram, que tipo de quadro esse meu paciente tem, se houve melhora, se houve piora e também a possibilidade da criação de um novo histórico de entrada, uma nova entrada. Então essas duas telas exemplificam essa nova funcionalidade.

Por fim, nós vamos pegar novos componentes que foram criados aqui ao longo dessa nova funcionalidade e também vamos componentizar esses elementos.

Esse curso daqui é para você então que já está assistindo a nossa formação de Design System, já criou aqui toda a parte aqui dos princípios de Design, do core, da construção, dos componentes. Agora, desejamos entender como que fazemos para aplicar tudo isso produzido, o produto já existente em um novo produto que esteja sendo desenvolvido.

Espero que você tenha gostado de todo o conteúdo que foi preparado e eu te verei então no próximo vídeo, onde vamos ver um pouco melhor sobre toda a ementa, dissecar um pouco melhor toda a ementa que foi preparada para você ao longo desse curso. Vai ser um vídeo bem legal e eu espero você lá!

Introdução - Overview

Nesse vídeo nós vamos entender um pouco sobre a ementa que está preparada aqui para você ao longo desse curso aqui de criando um produto digital.

Então aqui na primeira aula introdutória que nós estamos, nós já vimos o primeiro vídeo de introdução e estamos nesse aqui que estamos olhando um pouco mais a fundo a ementa e os próximos dois vídeos vão ser conteúdos mais teórico em relação a esse universo que estamos trabalhando aqui de aplicação e manutenção de um Design System.

Então vamos entender primeiro sobre a vida de um Design System e também sobre o versionamento, vamos passar rapidamente aqui, nós vamos entender um pouco aqui sobre como fazer essa manutenção de um Design System.

Como testar os componentes que estamos criando, fazer auditoria desses elementos e também como versionar aqui dentro da ferramenta do Figma todas essas melhorias que vamos criando ao longo da vida de um Design System, então é tudo isso aqui que vamos falar aqui nessa primeira aula, onde nos encontramos nesse momento.

Na próxima aula nós vamos falar um pouco sobre o core, então nós vamos começar a meter a mão na massa nessa aula daqui e vamos pegar as telas antigas que nós temos aqui do AluraMed e começar a mexer nessa parte aqui mais fundamental, das cores, da tipografia e dos componentes.

Então aqui nós temos cores, estilos tipográficos e componentes, então nós vamos aqui já começar nessa segunda aula a incluir por exemplo, aqui na lateral direita, se pudermos selecionar aqui, podemos ver que as cores utilizadas são aqui as cores que já definimos no nosso Design System.

As escolhas tipográficas também, então aqui nós estamos utlizando os padrões que criamos, mesma coisa aqui. Então essa aula vai ser voltada mais para essa criação, para essa inserção de elementos criados no Design System aqui nas nossas telas principais.

E não só os estilos tipográficos e cores mas também os componentes, então aqui os botões, os inputs de texto, os itens de navegação aqui no rodapé, nós vamos começar a já incluir esses elementos na segunda aula.

A terceira aula é voltada para inserção de componentes, então vamos fazer o seguinte nessa aula, nós vamos pegar, analisar essas telas aqui do AluraMed. Então vamos entender que, por exemplo, ainda existem elementos que não foram componentizados ainda, então vamos começar a fazer essa nova componentização.

Então aqui, por exemplo, esse elemento aqui do cartão, desse card, ele se repete em vários locais e não está componentizado, o floating button também, e também não só novos componentes, mas também organismos que são agrupamentos de componentes diferentes.

Então, por exemplo: esse elemento é um floating button com o elemento do lado, ele é um organismo, essa listagem aqui com vários floating buttons é um organismo. Vamos poder ver isso aqui nessa parte aqui dos componentes.

Vamos criar o floating button de tamanhos diferentes, status bar, elementos de chat, fundos, enfim; e também os organismos aqui que são elementos um pouco mais complexos. Então aqui tem um avatar, que eles juntos formam depois com outros elementos um componente maior, então tudo isso vai ser feito aqui na aula de número 3.

Na quarta aula, nós vamos então começar a criar uma nova funcionalidade, então vamos fechar aqui a parte da criação, da inserção do Design System nessas nas nossas telas aqui já produzidas. Vamos criar uma nova funcionalidade, que é justamente essa evolução de saúde.

Então nós vamos primeiro entender o briefing para essa criação dessa nova funcionalidade, depois vamos começar a criar ela de fato, então vamos fazer aqui a primeira tela que é a evolução de saúde e depois uma outra tela aqui que é da nova entrada, de uma nova entrada de um elemento que vamos entrar ali no histórico de entrada, podemos até mudar aqui 4.2 na verdade.

E por fim, vamos entrar na aula de conclusão, é a última aula do nosso curso, onde vamos então incluir esses novos componentes criados para essa nova funcionalidade no Design System. Vamos entender como exportar e por fim vamos então concluir o nosso curso, recapitulando tudo o que foi aprendido ao longo dele.

Então eu te espero no próximo vídeo onde então vamos começar a entender um pouco sobre esse universo um pouco mais teórico de manutenção de Design System, próximo vídeo, é a vida de um Design System. Vai ser um conteúdo bem legal, então eu espero você lá!

Introdução - Manutenção de um Design System

Nesse vídeo aqui vamos falar um pouco sobre a manutenção de um Design System, vamos começar falando sobre o teste de componentes. Como vimos ao longo da formação, o Design System não é um guia que uma vez fechado ele não sofre alterações. Está escrito em pedra o que está escrito ali, não.

Como vimos, é um produto podemos até chamar de produto porque ele está em constante evolução, nunca vai ficar fechado, sempre vai ter algo para incluir novo, algo para atualizar, algo para ser revisitado que não foi visto antes.

Então quando estamos criando esses elementos e principalmente os componentes que também vamos criar ao longo desse curso aqui novos componentes do nosso Design System. É muito importante que, primeiro, verifiquemos as aplicações desse componente.

Ou seja, é importante que, por exemplo, eu estou criando aqui um botão que vai ser utilizado ao longo do meu Design System, em diversas telas, faz sentido testarmos ele, jogar em uma tela mesmo para vermos como ele se comporta em uma outra aplicação diferenciada, para vermos se está tudo funcionando direito e ele está dentro das exigências que pedimos no dia a dia.

Porque por várias vezes vamos utilizar esse elemento aqui no dia a dia, e temos que ter certeza que esse elemento ele está funcionando para diversos cenários que vamos aplicar.

Então é importante verificarmos essas aplicações todas antes de fato deixar ele no Design System. Mesmo que deixemos ele que revistemos depois, possa melhorar esse elemento, esse componente. Por que eu estou falando isso também?

Porque muitas vezes mudanças estruturais podem ser problemáticas em componentes, eu vou mostrar até aqui agora um pouco como que isso pode funcionar, como que essa mudança estrutural pode afetar a vida do meu Design System.

E para isso, também é muito importante que façamos testes de validação para ver se realmente esses componentes criados estão funcionando, se a estrutura dele está bem construída e dessa forma conseguir prosseguir.

Eu vou explicar um pouco sobre essas mudanças estruturais, por exemplo, digamos que eu tenha aqui alguns componentes, eu desenhei aqui nesse elemento para entendermos.

Digamos que eu tenho aqui um elemento chamado menu no topo, onde ele tem essa configuração aqui, um texto, uma seta para voltar, eu tenho um outro componente aqui chamado botão fixo no rodapé, que é um botão que fica no rodapé da página, o nome está explicativo.

E um componente chamado input, que nós temos aqui um título e um input de texto que criamos ao longo dessa formação.

E ai digamos que com mais esses componentes aqui criamos um novo aqui chamado input com campos, que é o que tem um menu no topo, tem uma chamada input e tem um menu no rodapé.

E ai eu criei esse componente master, e aí digamos que eu esteja aqui trabalhando em um fluxo aonde essa tela se repete, esse padrão se repete várias vezes. Isso aqui no caso seria um template, que é uma tela já produzida com informações genéricas que podemos digitar posteriormente.

Então, digamos que eu tenho um fluxo, onde eu tenho aqui que fazer um cadastro e esse cadastro aqui eu tenho que inserir um nome, tem que inserir um e-mail e um telefone.

E aí o meu elemento, o meu componente master que está salvo no Design System tem essa formação aqui. Nós temos que tomar muito cuidado que é o seguinte, quando vamos modificar alguma coisa no Design System, devemos modificar as propriedades de um componente já criado.

Porque se criamos uma nova versão, um novo elemento, mexermos de fato na estrutura total do nosso elemento, ele pode quebrar. Eu vou mostrar aqui na prática como isso pode funcionar.

Digamos que aqui eu tenho um input de texto, tenho esse título aqui e eu não gostei desse título, eu acho que ele está esquisito, não gostei dele e aí eu vou sei lá, duplicar ele aqui, apertei as teclas “Ctrl + D”, eu tenho um novo título aqui, onde esse aqui eu sei lá, eu vou editar para ser um, sei lá, um H2.

E aí, é tranquilo. Eu criei um novo aqui e agora no caso eu quero deletar esse meu elemento antigo, se eu apertar o delete aqui, ele atualiza para mim, está vendo?

Porém, olhe o que aconteceu nas minhas telas que eu já tinha feito, isso aconteceu por quê? Vocês viram que aqui antes estava escrito nome, e-mail e aqui telefone? E tudo agora virou título, por que isso aconteceu?

Se eu apertar as teclas “Ctrl + Z”, você pode ver. Olhe, vou apertar as teclas “Ctrl + Z” aqui. Você pode ver que esse meu elemento aqui eu deletei ele e criei um novo para substitui-lo, ao invés de eu vir aqui e de fato eu mudar aqui a forma que eu quero.

Então dessa forma você vê que eu mudei ali e ele se atualizou certo, mantendo as minhas propriedades, então temos que tomar muito cuidado quando estamos construindo um Design System, para não deletarmos elementos que já estamos utilizando.

Porque imagine que eu aqui fiz essa alteração, e ai quebrou em todas as telas que estavam usando esse meu padrão, que pesadelo! Como é que eu vou fazer para reestruturar isso!?

Então temos que tomar cuidado com essa, a formação quando estamos construindo um elemento no Design System para termos certeza que depois no futuro começarmos fazer uma mudança muito brusca na sua estrutura. Então é isso que aqui estamos vendo sobre o teste de componentes.

Agora vamos falar um pouco sobre auditoria de elementos que significa o que? Que temos que entrar periodicamente nesse nosso documento, nosso Design System, para ver se as coisas estão atualizadas, não só no Design System, mas também nas telas que que estamos produzindo.

Então digamos que já estou produzindo aqui algumas telas, algum fluxo de uma experiência específica e ai eu me deparei com um elemento que não estava no Design System, e ai eu criei esse elemento, e aí eu trabalhei algumas formas com ele e tal, depois de um certo tempo eu vi que esse elemento que eu criei começou a se repetir - e eu inclui ele no Design System.

Então temos que tomar cuidado nesse caso, que depois temos que revisitar para ver se está tudo atualizado, se não tem elementos que estão com tamanhos diferentes do que são atualizados.

Então é muito importante que façamos essa auditoria com periodicidade, volta e meia revisitemos aqui o nosso Design System, os nossos elementos para ver se está tudo funcionando certo.

E também sempre verificando se está tudo atualizado de forma fidedigna para que dessa forma tenhamos sempre produtos escaláveis, que vão sempre manter a padronização que são temas que estamos abordando bastante ao longo dessa formação toda; e que estamos abordando também nesse curso - afinal o Design System, ele é também um produto que ajuda na padronização de telas de experiências digitais.

Espero então que você tenha gostado de todo esse vídeo. No próximo vamos falar um pouco sobre o versionamento, é um tema que tem também uma certa semelhança, tem haver com o que discutimos nesse vídeo. Então vamos falar no vídeo que vem, vai ser bem legal e eu espero você lá!

Sobre o curso Design System: criando um produto digital

O curso Design System: criando um produto digital possui 144 minutos de vídeos, em um total de 38 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:

• Introdução
• Aplicando o Design System
• Inserção de novos elementos
• Incluindo uma nova funcionalidade
• Conclusão