Olá! Meu nome é Thiago Marques, sou UX designer, pesquisador em interação humano-computador e instrutor na Alura. Convido todos a participar do curso de Design System.
Audiodescrição: Thiago é um homem de pele branca, com cabelos, bigode e barba castanhos escuros. Ele veste uma camiseta azul-marinho. Está no estúdio da Alura, com um cenário futurístico ao fundo, composto por luzes azuis e alguns quadrados que formam um padrão tridimensional. À sua direita, há um microfone preto.
Sejam bem-vindos! Este curso foi planejado para aqueles que já possuem algum conhecimento ou atuam na área de design, ou que desejam aprofundar seus conhecimentos. Organizamos o curso de forma que começamos desde o início, entendendo o que é um Design System, para que serve e qual é sua importância como produto no processo.
Além disso, exploraremos mais a fundo variáveis, tokens (fichas) e estilos dentro do Figma. Em seguida, abordaremos a UI Kit de um Design System, discutindo cores, tipografia, sombras e espaços. Preparamos um projeto interessante para ser seguido ao final de cada aula, permitindo que realizem seus próprios experimentos e aprendam na prática.
Fizemos um equilíbrio entre teoria e prática, pois sem prática o conhecimento pode se perder. A ideia é que, durante as aulas e com a prática, possamos começar do zero a criar nosso Design System. Ao longo das aulas, perceberemos a importância disso e também criaremos nosso próprio Design System.
Por exemplo, aprenderemos a criar paletas de cores, trazê-las para o Figma e criar variáveis, tokens e estilos dentro do Figma. Além disso, trabalharemos com espaçamentos, tipografia e toda a parte de estilos de texto. Aprenderemos sobre tokens semânticos e componentes de tokens.
Nossa ideia aqui é ampliar nosso conhecimento. Vamos aprender a criar um botão, entrando mais na parte da componentização de fato do nosso Design System. Após isso, aprenderemos a animar esse botão, realizando microinterações. Por exemplo, quando uma pessoa usuária passar o mouse sobre o botão, o que acontecerá? Precisamos dessas microinterações para fornecer feedback aos usuários nas interfaces.
Além disso, criaremos diversos tipos de componentes, pois quanto mais exemplos tivermos, melhor será a qualidade final do nosso Design System. Trabalharemos com sombras e, pensando no design atômico, não nos limitaremos apenas aos componentes. Vamos evoluir e criar outros tipos de padrões para o Design System.
No final, chegaremos a uma interface que possui, por exemplo, a mesma versão em dois tons diferentes: o modo escuro e o modo claro. Isso é o Design System. Muitas pessoas podem pensar que poderíamos parar por aqui, considerando que Design System é igual a um kit de interface, mas não é. Design System é muito mais do que isso, e é isso que vamos explorar neste curso.
Design System também envolve documentação. Veremos boas práticas de documentação e o que o mercado está utilizando. Traremos alguns casos reais. Além disso, trabalharemos com a governança, estruturando todo o nosso Design System. Por fim, pensaremos em processos e métricas, pois Design System é um produto. Quando olhamos para um produto, precisamos criar processos. Vamos discutir sobre feedback loop (ciclo de feedback), métricas e o retorno de investimento do Design System para as organizações.
Esse conhecimento é essencial para designers que estão evoluindo em suas carreiras. É importante entender que Design System é muito mais do que apenas uma biblioteca, um sistema de cores, sombras e tipografia. É muito mais do que isso.
Essa é a ideia do curso. Convidamos você a participar do curso de Design System. Vamos juntos nessa jornada, que certamente será muito enriquecedora. Até mais!
Para começarmos a falar sobre Design System (Sistema de Design), é importante olharmos para o passado e entendermos por que estamos aqui hoje. Quando falamos de Design System, existem várias definições, mas o objetivo desta aula é que compreendamos como o Design System pode nos ajudar em nosso trabalho, seja para quem está começando agora ou para quem já tem experiência com o tema.
Vamos refletir sobre como a tecnologia está evoluindo. Há cerca de 15 anos, não se falava tanto em profissionais de UX (Experiência do Usuário), UI (Interface do Usuário) e Research (Pesquisa) dentro das organizações. À medida que as tecnologias avançaram, foi crucial que as empresas também evoluíssem. Assim, surgiram diferentes profissionais de diversas áreas. Uma das áreas que ganhou destaque foi a de UX, Design e Product Design (Design de Produto). Com a evolução das tecnologias e dos produtos digitais, tornou-se necessário organizar como esses sistemas se comunicam e como seu desenvolvimento pode ocorrer. Dessa forma, o Design System surgiu juntamente com a evolução tecnológica.
Vamos analisar um organograma comum de composição de times de tecnologia. Temos um time de desenvolvimento, um time de design e um time de produto ou negócio. Cada time é composto por profissionais de diversas áreas: no desenvolvimento, temos pessoas desenvolvedoras; no design, designers, UI designers e product designers; em produtos e negócios, temos PMs (Gerentes de Produto), Product Owners (Donos de Produto) e gestores de produtos. No centro, está o que é comum entre esses três grandes times, muitas vezes chamado de times balanceados ou a tríade de produto. Nesse centro, temos um software ou produto.
Vamos imaginar um produto no centro, com diferentes pessoas desenvolvendo-o, seja escrevendo código ou criando telas. Imagine que somos designers e nossa empresa utiliza um azul como botão primário. Mas qual azul é esse? Se cada designer utiliza um tom diferente de azul, isso pode gerar confusão se não houver padronização. Quando falamos sobre Design System, referimo-nos a formas de organização.
Gosto de fazer referências e trazer casos reais do dia a dia. Pense no Lego, um brinquedo que fez parte da infância de muitas pessoas. Ao montar o Lego, seguimos um guia e, no final, temos um produto. Na segunda vez que desenvolvemos algo, como já lemos a documentação anteriormente, não precisamos lê-la novamente. Podemos criar e chegar ao produto final. Mesmo que queiramos criar algo diferente, os blocos e as cores são os mesmos. É isso que queremos que entendamos: como o Design System pode fazer parte do nosso dia a dia.
A partir de 2013, começou-se a falar muito sobre Design System. Um autor que será mencionado durante este curso é Brad Frost, que introduziu o Design System na indústria de software. Brad Frost redefiniu as estruturas e como o Design System deve ser organizado. Provavelmente já tivemos uma aula sobre Atomic Design (Design Atômico), e esse autor é familiar para nós. A partir de 2013 e 2014, o Twitter Bootstrap se popularizou. O Twitter Bootstrap é um framework criado para ajudar tanto designers quanto, principalmente, desenvolvedores a estruturarem suas interfaces e códigos.
Durante o período em que os smartphones começaram a se popularizar, tornou-se necessário criar interfaces expansivas para dispositivos móveis. O Twitter Bootstrap, por exemplo, desenvolveu uma série de padrões para auxiliar na criação dessas interfaces. Um dos principais elementos dessa época foi o grid de 12 colunas, que permitia organizar todo o conteúdo de forma eficiente. Para dispositivos móveis, era possível ajustar para apenas 4 colunas, facilitando a visualização para o usuário. O foco central sempre foi o usuário, para quem desenvolvemos.
O Design System se insere nesse contexto, auxiliando na organização e nas diretrizes, tanto na parte visual quanto na experiência e interação do usuário. Muitas pessoas acreditam que o Design System é apenas a parte visual, mas ele é muito mais abrangente. Durante as aulas, vamos explorar como o Design System vai além do visual.
O que não é um Design System? Ele não é apenas uma biblioteca no Figma, embora o Figma seja uma ferramenta popular e útil para designers. O Design System não se limita a um guia de estilos e componentes, como cores, formatos de botões ou tamanhos de texto. Ele abrange várias áreas. Antes de definir o Design System, pesquisamos o que autores renomados dizem sobre o tema. Uma definição encontrada é que um Design System é a história de como uma organização constrói um produto digital.
Refletindo sobre essa definição, percebemos que o Design System de um projeto ou organização será diferente de outro. Existem recomendações e padrões, mas não devemos nos prender a eles. Ferramentas como o Figma evoluem, e precisamos nos atualizar constantemente sobre tendências. Antigamente, não falávamos sobre tokens, mas hoje eles são um tema relevante, que abordaremos mais adiante no curso.
O Design System é uma forma de organização. Além de ser um guia de estilos e biblioteca de componentes, ele é documentação, estratégia de conteúdo, ferramentas, processo de desenvolvimento, sistema para rastrear bugs e feedbacks dos usuários, que podem ser designers ou pessoas desenvolvedoras. É um modelo de colaboração entre todas as pessoas envolvidas, com fundamentos e processos de design. Também inclui educação e aprendizagem, ensinando os usuários a utilizar o que criamos e a conhecer mais sobre o Design System.
Nas próximas aulas, vamos explorar mais a fundo o Design System. Não há uma regra única; ele é aberto, mas vamos desmistificar algumas áreas. Vamos entender sobre Style Guide, padrões de bibliotecas, padrões de componentes, Design System e Design Language, que é um tema atual no mercado. Nos encontramos na próxima aula. Até mais!
Agora que já entendemos o que é um Design System (sistema de design), vamos expandir nosso entendimento sobre os componentes que formam esse grande sistema. Nesta aula, abordaremos o Style Guide (guia de estilo), a Pattern Library (biblioteca de padrões), o Design System e a Design Language (linguagem de design). Às vezes, misturamos inglês com português, pois são termos comuns nas documentações que encontramos na internet. Não se preocupe, essas palavras logo se tornarão familiares.
Vamos começar pelo início, falando sobre o Style Guide. O que é o Style Guide? É o que a maioria das pessoas conhece, sendo muito focado na parte visual da tela do nosso software. Na definição, incluímos princípios visuais como tipografia, paleta de cores, uso de logotipos e exemplos de aplicação. Dependendo do Design System, o logotipo pode não estar no Style Guide, mas em outra seção, o que é comum. No Style Guide, encontramos guias de estilos, como cores, tipografia, formato e tamanho da tipografia. Este é o nosso básico, o ponto de partida.
Avançando um pouco, temos a Component Library (biblioteca de componentes), que são elementos que compõem uma interface, como botões, badges (emblemas), elementos e campos de texto. Utilizamos os princípios vistos anteriormente nos estilos dentro dos nossos componentes. Por exemplo, se definirmos que nossa cor primária é azul, usaremos esse azul nos componentes, como em uma badge.
Algumas empresas, como a Dell com seu Design System e a Adobe com o Spectrum, possuem, além da biblioteca de componentes, uma Pattern Library. Componentes isolados são insuficientes; precisamos de conjuntos de componentes. Por exemplo, um formulário é mais do que um componente; é um conjunto de vários componentes, como campos de texto, botões para confirmar, cancelar ou limpar o formulário, títulos e checkboxes (caixas de seleção) para confirmar ações na tela. Outros exemplos incluem o drag and drop (arrastar e soltar), que pode envolver cartões e botões, dependendo da interface. O Spectrum também possui um exemplo de card, que é composto por imagem, título, botão e campo de texto.
Percebemos que estamos apenas ampliando o nível em relação ao que vimos anteriormente no Style Guide (Guia de Estilo). Passamos pelo componente e agora estamos abordando um padrão de uma biblioteca de padrões. O próximo passo é o nosso Design System (Sistema de Design). O Design System é composto por tudo isso que já mencionamos, além da documentação, dos tokens (símbolos) que ainda veremos durante as aulas, e do código. Estamos, portanto, ampliando nosso escopo.
O Design System é bastante comum e varia bastante entre as empresas. Algumas consideram que possuem apenas um Style Guide, o que está perfeitamente aceitável, pois é até onde conseguiram chegar e é o que é importante para elas no momento. Outras empresas já pararam no Design System. Atualmente, há uma nova tendência no mercado, que é o Design Language (Linguagem de Design). Este conceito ainda está sendo explorado, pois as pessoas estão tentando entender até onde podemos chegar com isso.
O Design Language é uma expressão conceitual estratégica da marca através do design. Algumas empresas incluem apenas o logotipo no seu Style Guide, enquanto outras estão incorporando toda a parte conceitual da marca no Design Language. Isso representa uma linguagem de como comunicamos nossas crenças em relação ao design para nossos produtos e para o que estamos desenvolvendo. Além de cores, princípios e personalidade visual, o Design Language pode incluir outros aspectos, como ilustrações, animações e até fotografia.
Dois exemplos famosos no mercado são a Microsoft, que aborda a questão do Motion (Movimento), definindo como os elementos devem se movimentar nas interfaces e comunicações do produto, e o Carbon, da IBM, que traz a filosofia de design da empresa, incluindo fotografia, ilustração e tipografia desenvolvida exclusivamente para a empresa.
Estamos, portanto, cada vez mais avançando no entendimento do que é um Design System e até onde ele pode ir. Essa é uma tendência atual do mercado, e talvez em um ou dois anos isso já esteja diferente do que é hoje. Vamos acompanhar essa tendência e continuar a discussão.
Para resumir, trouxe uma imagem ilustrativa que demonstra como um elemento, representado por um círculo, está dentro de outro, formando o nosso Design Language. Temos o Style Guide, a biblioteca de padrões, a biblioteca de componentes, branding (marca), ilustração, fotografia e animações.
No nosso curso, vamos focar no Design System. Queremos que todos aprendam sobre documentação, aprendizagem, fundações, acessibilidade, conteúdo, ferramentas, taxonomia, componentes, padrões e Style Guide. Tudo isso será abordado nas próximas aulas, que aprenderemos juntos.
Foi essa a aula de hoje. Nos vemos na próxima.
O curso Design System: padronização e gestão de interfaces digitais possui 307 minutos de vídeos, em um total de 70 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:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Mobile, Programação, Front-end, DevOps, UX & Design, Marketing Digital, Data Science, Inovação & Gestão, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Para estudantes ultra comprometidos atingirem seu objetivo mais rápido.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
