Alura > Cursos de UX & Design > Cursos de Design System > Conteúdos de Design System > Primeiras aulas do curso Design System: projetando elementos

Design System: projetando elementos

Introdução - Apresentação

Olá, boas-vindas a mais um curso da Alura! O meu nome é André Lisboa e sou professor de Design Digital na plataforma. Tenho mais de cinco anos de experiência nessa área e ao longo da minha trajetória já desenvolvi diversos sites e aplicativos.

Esse é o vídeo que inaugura o curso de fundamentos de Design System. Ao longo dele vamos criar o nosso próprio Design System dentro da ferramenta do Figma. Digo “o nosso próprio”, porém vamos focar apenas na parte de fundamentos. Vou explicar um pouco mais para frente nesse vídeo o que isso significa.

Então vou passar rapidamente para nós entendermos todos os pontos que vamos abordar ao longo desse curso. Começando falando sobre o que é um Design System, já que esse é o curso inaugural dessa formação. Temos que entender os conceitos mais básicos, começando pelo que é esse Design System, o que significa essa palavra.

Então vamos ver o que ele é, qual a importância dele, quando utilizarmos um Design System e vamos ver a diferença entre um Design System e um guia de estilo. Depois vamos entender os tipos diferentes de Design System que existem e os modelos diferentes de equipes que podem trabalhar na construção desse produto. Vamos ver que o Design System é um produto.

E também vamos entender quais são os profissionais envolvidos. Esse curso é focado principalmente na parte do UI Designer relativo a um Design System, mas isso não significa que seja um único profissional que trabalha nesse produto. Temos "UI Designers", "UX Designers", "UX Whitter", “Desenvolvedores”. Enfim, diversos profissionais diferentes que atuam nesse produto.

Dessa forma, conseguimos ter um produto muito melhor com divisões diferentes. Então vamos até ver que o ideal é que seja uma equipe multidisciplinar que trabalhe na construção de Design System.

Então, passada essa parte mais conceitual, na parte mais ferramental vamos construir o Design System dentro da ferramenta do Figma utilizando as telas base como referência, um aplicativo do Alura Med. São algumas telas que já fiz para outros cursos, então vamos aproveitar e construir um Design System baseados nesse layout.

Isso não significa que você seja obrigado a utilizar esses elementos. Se você já tiver com você algumas telas que criou para outro produto, você está livre também. Você pode fazer com essas telas. Até é mais interessante porque você consegue ter uma visão diferenciada e não apenas seguindo exatamente o que está aqui com essas telas específicas.

Então na parte mais ferramental vamos entender como criar um Design System. Começando pelas partes dos fundamentos que são as cores, então vamos entender como incluir cores no Design System. Falando da cor primária, a cor secundária, cores neutras e cores semânticas.

Vamos aprender o que é um Design Token e vamos incluir esses elementos aqui também no Design System. Vamos aprender sobre os textos primitivos, então vamos pegar todas as famílias tipográficas, os tamanhos de fonte, os pesos de fonte e entrelinhas e vamos definir os Tokens relativos à tipografia também.

Por fim, vamos ver a parte dos ícones. Esse é um material textual, na verdade. Mas vamos entender como incluir ícones no Design System e depois vamos ver a parte da construção.

Então vamos falar como fazemos o funcionamento dos espaçamentos do Design System, como criar e vamos definir que usamos um grid de 8 pixels. Vamos falar sobre padding, tamanhos, alinhamentos e para todos os elementos, novamente, vamos criar os tokens.

Depois vamos ver sobre Grid. Qual é o Grid relativo a essas telas base que estamos trabalhando. Vamos falar sobre o ambiente, falando sobre as sombras e elevações e, por fim, sobre as formas arredondadas e tal, como utilizar esse arredondamento e incluindo os tokens.

Esse curso é feito principalmente para você que já conhece a ferramenta do Figma e agora quer se aprofundar entendendo como criar um Design System e fazer uma padronização dos produtos que você cria.

Então esse curso é importante salientar que ele não é ferramental para você aprender a mexer no Figma. Vamos, ao longo dele, puxar várias coisas prontas e vamos apenas incluir nesse layout. Então vamos focar muito mais em entender a metodologia de construção do que realmente o ferramental para construirmos o elemento do zero dentro do Figma.

Espero que você tenha gostado de todo o conteúdo que está preparado e te espero na próxima aula, onde nós vamos entender um pouco sobre esse universo que vamos adentrar sobre o mundo dos Design System. Vai ser uma aula bem legal e eu espero você lá!

Introdução - O que é um Design System

Nesse vídeo vamos falar sobre os Design System, já que vamos adentrar sobre esse tópico ao longo dessa formação. Antes de qualquer coisa, temos que entender o que é isso que vamos estudar, começando falando sobre o que eles são.

Podemos pensar com esse nome que Design System é algo relacionado a design? Sim e não! Porque ele é relacionado a design sim, só que não é apenas sobre design. Ele também envolve profissionais UX, de UX Writing, por exemplo, de donos de produto que é Product Owner, de desenvolvedores. Enfim, todo mundo que trabalha nesse meio do produto digital.

Então podemos dizer o que ele é. Ele é um produto onde contém componentes reutilizáveis, estilos também. Então, por exemplo: botões, cores, tipografia. Mas não apenas mostra esses elementos, ele também mostra como aplicar e como aplicar cada um desses elementos.

Então por meio desse produto chamado Design System nós conseguimos criar vários produtos diferentes que contém o mesmo padrão similar, o mesmo estilo visual, um estilo de funcionamento similar. Qual é a importância principal de um Design System? Vou listar três principais.

A primeira é que as equipes envolvidas, que trabalham nesse produto digital podem utilizar os padrões existentes, que estão documentados na Design System para criar novos elementos, novas funcionalidades e novos produtos.

Dessa forma nós conseguimos ter uma consistência visual muito grande. Isso é muito importante para as marcas que trabalham sempre com a consistência, com a padronização.

Também, dessa forma, o time consegue colaborar mais. Então nós conseguimos ter diversos times diferentes trabalhando nesse Design System e mostrando funcionalidades diferentes, usos diferentes.

Então é bem legal a utilização de um Design System. Pense no seguinte cenário: fomos contratados para desenvolver um site dois anos atrás e agora o cliente do nada veio conversar querendo uma nova funcionalidade para esse site.

Se eu tiver feito um Design System no projeto anteriormente, isso vai ser muito fácil para mim, porque vou ter documentado lá, por exemplo, quais são as cores, como utilizar as cores, quais são as tipografias, como utilizar as tipografias e os componentes. Enfim, é só pegar essa documentação e criar a nova funcionalidade.

Ao passo que se eu não tiver um Design System, vai ficar um pouco mais difícil de criar essas coisas porque vou ter que relembrar tudo porque faz dois anos que não mexo nesse site. Então vai ficar um pouquinho mais complicado, eu vou ter que relembrar qual é a tipografia, qual é a cor, como é os padrões de componentes e como aplicar eles. Então posso ter um trabalho novo nesse caso.

Esse gráfico explica como é o funcionamento do Design System. Temos esse produto central, que é o Design System e por meio deles conseguimos criar o produto 1, 2, 3 e 4. Todos com a consistência visual muito grande.

Esse outro gráfico também mostra no Design System que tem, por exemplo, componente 1, 2, 3 e 4. Por meio deles consigo criar o produto 1, 2, 3. Cada um, por exemplo, utilizando componentes diferentes e que mesmo assim tem uma mesma cara.

Quando nós fazemos para utilizar um Design System? Quando isso faz sentido? Principalmente para empresas grandes que trabalham com múltiplos produtos. Então, por exemplo: tem uma empresa gigante que tem um site, tem um aplicativo Android, tem um aplicativo iOS, tem um aplicativo para geladeiras, por exemplo. Eu preciso de uma padronização visual em todos esses locais, em todos esses dispositivos.

Como nós podemos fazer isso? Por meio de um Design System. Então principalmente para empresas grandes que tem múltiplos produtos e que também tenha necessidades de documentar essas escolhas.

"Por que é assim? Por que é daquele outro jeito?" E não só mostrar. "É assim e não explico o porquê". Não, no Design System tem toda a explicação de uso e porquê é dessa forma.

O próximo tópico é a mesma coisa que um guia de estilo? Não, ele é mais do que um guia de estilo. Enquanto o guia de estilo somente lista os componentes reutilizáveis e os estilos visuais, o Design System tem essas coisas também, mas ele também tem a padronização e documentação. Então ele fala como que utiliza, porquê é assim e como faz para utilizar cada um dos elementos.

E não simplesmente mostra "é assim. É desse jeito aí. A minha cor é essa e não fala como utilizar essa cor". Então essa é a diferença primordial. Agora vou mostrar esse artigo principal.

Todos esses links que vou mostrar agora vou deixar no texto abaixo para você ter um fácil acesso, mas primeiro vou mostrar esse artigo do Spotify, mostrando qual era o problema do Spotify e porquê eles adotaram a criação de um Design System.

Então antes do Design System, o Spotify tinha essa cara. No browser ele tinha essa cara, o aplicativo para Apple, para o Mac ele tinha essa outra cara. Aí para Android tinha essa cara. Está vendo? Não tem muita padronização. Então eles tinham a necessidade de ter uma consistência visual maior, por isso criaram um Design System.

Aí depois da criação desse Design System começou a ter essa cara. Você vê que múltiplos dispositivos com o mesmo padrão visual. O Spotify é um bom exemplo do que comentei de quando utilizar um Design System, porque eles até mostram que tem para iOS, tem para Android, para Desktop, para TV, para o carro, para o Watch e para a geladeira.

Então eles tinham muito essa necessidade porque tem muitos dispositivos diferentes nesse aplicativo, então tem uma grande necessidade da criação de um Design System, de documentar essas decisões visuais e de documentar como utilizar essas decisões. Então muito importante nesse caso.

Agora eu vou mostrar alguns exemplos de Design System importantes e é bom darmos uma olhada porque são boas e ótimas referências. Vou começar pelo que acredito ser o maior de todos, que é "Material Design", o Design System do Google, dos produtos que são utilizados para Android principalmente.

No "Material Design" ele mostra várias áreas. Podemos, por exemplo, clicar em "Design" e aqui tem esse ambiente, "Sufaces", por exemplo. Então ele mostra como que utiliza esses elementos. Ela fala que tem três eixos principais, ele mostra não só como fazer, o que é certo, mas também tudo o que é errado.

Dessa maneira, ele mostra com uma documentação bem profunda as utilizações do "Material Design". Vamos clicar em um outro para termos uma noção. Nessa área de "Componentes" no topo ele mostra vários componentes, como utilizar e tal.

Vamos ver, por exemplo, esse "Buttons" que são os botões. Ele mostra como criar, como é a implementação. Vamos voltar para a parte de "Design", ele mostra os tipos diferentes de botões.

Como é a anatomia deles, como utilizar e como não utilizar. Lá para o fim tem uma coisa bem legal que é nesse "Specs". Ele mostra como é a criação para você criar esse elemento. Ele tem 36 de altura e 64 de largura. Enfim, então é um Design System bem completo e vale muito a pena ficar de olho.

Esse outro que vou mostrar é da IBM. O nome dele é IBM Design Language e podemos ver que ele mostra todos os elementos também que acabamos de ver, a tipografia, cores, grid, ícones, vários elementos e também mostra a filosofia.

Então não fica apenas mostrando como que são os componentes, os estilos de Design; mas também qual é a filosofia da empresa, como faz para a galeria, como faz a animação "Emotion".

Então é bem legal também. Esse outro é do Shopify, é o Polaris. O Polaris é um temos para Shopify. O Shopify é um criador de e-commerces e um desses temos se chama Polaris e ele tem um Design System que fala não só a parte do Design, mas dos componentes, também tem o conteúdo – então, como criar essa parte do conteúdo, como faz para criar os nomes e como faz para criar a parte dos conteúdos dos produtos.

Como é a documentação, como é a voz e o tom. Então você vê que não fica limitado apenas a criação visual dos elementos, mas muito mais além disso. Por isso eu comentei no início da aula que vários profissionais diferentes podem atuar na criação de Design System.

No caso desse curso, nós vamos focar mais em UI porque é o caso do curso, mas você tem que ter muito em mente que nós não estamos restritos apenas a isso.

Vou mostrar esse outro também que é do Atlassian. Atlassian é a dona do Jira e o Trello e eles têm um Design System também que mostra a mesma coisa que eu mostrei.

As "Fundações", no caso desse curso, é o que vamos trabalhar principalmente que são as cores, tipografia, iconografia. Mas veja que ele tem personalidade da marca, a missão da marca, como é o vocabulário, o jeito de escrever e muitas coisas extra.

Bibliotecas de ilustração, biblioteca do Figma, fontes e tal. Tem vários elementos. Por fim, eu vou mostrar esse que é bem interessante do Lightning Design System do SalesForce, que tem essa área do "Design Tokens", que até vamos ver mais para frente nesse curso, mas eu já vou dar uma prévia do que vamos aprender.

Nesse exemplo do "Design Tokens", não só mostra os componentes e os estilos de Design, mas ele também cria Tokens que são nomes para cada um dos elementos. Por exemplo: ele tem uma cor principal, que o nome dessa cor não é asterisco e o hexadecimal "0176D3". Não, ele fala que o nome dessa cor é brand accessible, ou seja, a “marca acessível”.

Dessa forma, depois quando estamos desenvolvendo Design System fica muito mais fácil quando referenciamos essa cor ou qualquer outra coisa. Tem texto, fonte, tamanho de fonte e opacidade.

Dessa forma, nós referenciamos esse elemento com o nome próprio. Então depois se eu quiser mudar no meu código essa cor, simplesmente eu vou onde está referenciado o brand accessible e diz qual é o hexadecimal dele, eu posso apenas mudar o hexadecimal e vai se atualizar para todos os restantes dos componentes onde essa cor é utilizada.

E não só cor - como mostrei, a opacidade. Tenho o nome para a opacidade "0,5". Tem um nome para o radius 50%. Enfim, então é bem legal essa parte do "Design Tokens".

Espero que você tenha gostado de todo o conteúdo dessa aula. Eu te espero na próxima, onde vamos aprender um pouco sobre modelos diferentes de Design System. Vai ser uma aula bem legal e espero você lá!

Introdução - Diferentes modelos

Nessa aula vamos falar sobre modelos diferentes para criação de Design System e para organização de equipes. Começando pelos tipos diferentes de Design System que existem. O primeiro deles que vou comentar é o modelo "estrito", onde ele não é flexível e tem extensa documentação.

Então por meio, no Design System "estrito" os padrões descritos devem ser mantidos a todo custo. Por isso mesmo ele deve cobrir muitos cenários diferentes.

Porque se não tenho nenhuma possibilidade de criar algo novo, tem que seguir à risca o que está nele, ele tem que cobrir todos os cenários possíveis. Então esse modelo "Estrito" tende a ser um pouco mais extenso do que os outros modelos.

O segundo que vou falar é sobre o Design Systems "Solto" onde ele tem um uso opcional e dessa forma temos maiores possibilidades para maior experimentação, criar coisas diferentes que não estavam previstas no Design System.

Porém, temos que tomar um pouco de cuidado com isso, porque se ele é solto demais, para que existe um Design System, já que não preciso utilizar ele? Então ele fica meio sem sentido. Então tem que ter um equilíbrio entre estrito e variável demais.

O terceiro modelo que vou comentar é o "modular", onde nele temos partes reutilizáveis e intercambiáveis, ou seja, dessa forma crio um componente que é para Android, mas pode ser utilizado para outro elemento, para outro produto, para outro dispositivo.

Então ele tem essa documentação de elementos que podem variar os seus usos. É por causa disso ele tem maior dificuldade de ser implementado e também é ótimo para produtos extensos.

Porque pensa na aula passada que comentei sobre o Spotify que tem até na geladeira. Como uso? Vou ter no meu Design System falando todos os usos da minha interface para geladeira? Pode ser que não, então às vezes posso pegar um elemento que esteja lá documentado para Android e adaptar para a minha realidade.

Então esse daqui é o modelo "modular" de Design System. Agora vamos falar sobre diferentes modelos de equipes para trabalhar com esse produto. Começando pela equipe "solitário" onde um time, por exemplo, em uma empresa grande podemos ter diversos times. Um time de Android, outro time de iOS e outro time para sites.

Nesse caso do "solitário", o time de Android fez um Design System e aí compartilha depois com o time de iOS, o tipo de sites. Então uma equipe é responsável pela criação e compartilha com as demais equipes.

Porém, é necessário cuidado, porque com o passar do tempo, pode ser que não funcione, pois o Design System é feito para suprir as demandas de cada uma das equipes e de cada um dos times.

Então se um time só é responsável pela criação dele e depois compartilha com outros times, pode ser que com o tempo não funcione. O "centralizado" é um pouco diferente. Tem um time que é focado especificamente em criar esse Design System e aí ele compartilha com todas as outras equipes.

Então a principal atribuição dessa equipe é pegar feedbacks de todos os outros times e por meio desses feedbacks implementar no Design System. Então esse é o modelo "centralizado", que também é um pouco diferente do modelo "federado".

Porque no modelo "federado" nós temos várias equipes e aí pesamos: "caraca, aquela pessoa daquela equipe de Android é muito talentosa, aquela outra da equipe de iOS é muito talentosa e aquela outra da outra equipe é muito talentosa".

Então nesse modelo junta essas pessoas de equipes diferentes para participarem da equipe de Design System, só que eles não ficam focados 100% no Design System. Eles continuam com os trabalhos originais dos seus times, mas também têm essa dupla atribuição de também ter que trabalhar com o Design System. Então esse é o modelo "federado".

E agora vamos falar um pouco sobre os profissionais que estão envolvidos na criação do Design System. Como já vimos na aula anterior, o ideal é que seja uma equipe multidisciplinar que não tenha apenas profissionais de UI, mas também profissionais de UX, profissionais de UX Writter, profissionais de desenvolvimentos e product owners que são os donos do produto.

Enfim, todo mundo que esteja trabalhando no produto digital porquê dessa forma tem diferentes visões, diferentes pessoas com diferentes habilidades. Dessa forma, tem visões diferentes trabalhando nesse produto e ele fica muito mais completo.

É interessante também falar que o Design System nunca é um produto que está 100% fechado, ele sempre vai crescendo conforme o tempo. Ele pode começar pequeno e aí, conforme o produto for escalonando e surgirem novas necessidades, nós vamos incluindo essas novas necessidades, novas soluções para as necessidades dentro desse documento.

Então ele vai sempre crescendo, sempre se expandindo e sempre melhorando para atender cada vez mais equipes diferentes, profissionais diferentes. Eu espero que você tenha gostado dessa aula. Na próxima vamos ver um pouco sobre as principais ferramentas para a criação de um Design System. Vai ser uma aula bem legal e espero você lá!

Sobre o curso Design System: projetando elementos

O curso Design System: projetando elementos possui 127 minutos de vídeos, em um total de 37 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:

Aprenda Design System acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas