Aprender sobre sistemas de design
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Identificar as características e os recursos de um bom sistema de design.
- Descrever como os designers e desenvolvedores usam, gerenciam e contribuem para sistemas de design.
- Explicar como o Salesforce Lightning Design System (SLDS) auxilia os desenvolvedores na criação de soluções na Salesforce Platform.
- Descrever como e de que forma o SLDS difere da maioria dos sistemas de design.
O Salesforce Lightning Design System (SLDS) tem agora duas versões.
O Salesforce Lightning Design System 2 (SLDS 2) foi lançado na versão Spring ‘25. O SLDS original agora se chama SLDS 1.
Esse emblema do Trailhead se concentra nos sistemas de design em geral, SLDS como um todo e SLDS 1. Para saber mais sobre o SLDS 2, siga a trilha Introdução ao SLDS 2.
O SLDS 2 foi criado com uma nova estrutura CSS que separa a estrutura do design visual usando placeholders de estilo. Os placeholders de estilo são propriedades CSS personalizadas que oferecem mais recursos de personalização e temas, permitindo que você crie experiências únicas com mais rapidez.
Você pode optar por usar o SLDS 2, escolhendo o tema Salesforce Cosmos na sua organização. Consulte Tema Salesforce Cosmos e disponibilidade do SLDS 2.
O que é um sistema de design?
Antes de nos aprofundarmos e explorarmos seus poderes mágicos, vamos definir sistema de design.
Definição de sistema de design |
Explicação |
|---|---|
|
Um sistema de design é uma coleção de elementos de IU reutilizáveis, chamados de componentes, e padrões de design que podem ser repetidos. Os componentes podem incluir botões, menus, sons, animações, padrões visuais e muito mais. Alguns sistemas de design incluem componentes totalmente funcionais que são criados em uma plataforma de IU. Outros sistemas de design, como o SLDS, oferecem componentes independentes da plataforma. Os componentes fornecem o HTML e o CSS, mas não o código funcional. Um padrão é uma solução reutilizável e documentada para problemas ou tarefas comuns dos usuários. Um padrão consiste em uma combinação específica de componentes, layouts e interações que criam uma experiência completa para o usuário. Ao contrário de um componente simples, um padrão oferece contexto e melhores práticas para um objetivo ou processo do usuário, como um formulário com várias etapas ou uma tela de login. Simplificando, os padrões da interface do usuário orientam a forma como os componentes são organizados e interagem para oferecer uma ótima experiência do usuário. |
Um sistema de design é um conjunto abrangente de padrões que orienta a criação de produtos. Ele abrange uma biblioteca de padrões, componentes, diretrizes e melhores práticas, além de garantir a consistência entre os designs. Os sistemas de design oferecem uma estrutura holística e um vocabulário compartilhado para as equipes, simplificando o processo de desenvolvimento do produto. Por outro lado, os padrões de design oferecem soluções singulares e são elementos individuais dentro da arquitetura mais ampla de um sistema de design. Pense nos componentes como blocos de construção e nos padrões, regras e diretrizes como instruções detalhadas para usar esses blocos de construção. |
Um sistema de design é orientado por diretrizes, padrões e princípios claros e acessíveis. |
Os componentes em um sistema de design são bastante padronizados, com aparência reconhecível. Os padrões oferecem planos estruturados e objetivos para combinar e usar componentes. |
|
Os designers combinam componentes e padrões para criar uma IU. Os desenvolvedores implementam os designs da interface do usuário criados pelos designers combinando os componentes do sistema de design de várias maneiras para criar aplicativos em HTML e JavaScript. As diretrizes de design servem como instruções para montar componentes como padrões para casos de uso específicos. Quando existe um código para os designs dos componentes, os desenvolvedores usam esse código. Caso contrário, os desenvolvedores criam a interface do usuário usando seu próprio código HTML e JavaScript. Eles usam os padrões e diretrizes do sistema de design para ajudá-los a criar o código. |
Os componentes não fazem muita coisa sozinhos, mas, quando unidos, podem criar quase tudo. |
Um bom sistema de design é:
-
Escalável. À medida que o sistema de design vai amadurecendo, menos tempo e dinheiro são gastos na criação de elementos fundacionais (blocos de construção). Os desenvolvedores reutilizam esses elementos em vários produtos e recursos.
-
Eficiente. Os sistemas de design economizam tempo e energia, liberando designers e desenvolvedores para se concentrarem na usabilidade e no significado.
-
Visualmente coeso. As instruções detalhadas de um sistemas de design (padrões, regras, diretrizes) são ligadas à finalidade. Seus elementos estéticos vêm das necessidades dos usuários. Os componentes padronizados reforçam tanto o estilo quanto a identidade visual, resultando em produtos e recursos que têm aparência consistente e oferecem uma experiência de usuário consistente.
-
Compartilhado. Elementos reutilizáveis, documentados e acessíveis permitem a colaboração, facilitando a divisão de partes do projeto ou criação entre pessoas.
Começar a criar agora
Assim como os blocos de construção, um sistema de design permite a você começar a criar imediatamente. O uso de componentes pré-criados permite a você se concentrar em resolver problemas complexos e oferecer a melhor experiência de usuário.
Outra grande vantagem de um sistema de design é que ele permite gerenciar o design em larga escala. A biblioteca de componentes, padrões, regras e diretrizes ajuda a manter a consistência entre designers, desenvolvedores, equipes e produtos. Um sistema de design evolui quando precisa de mudanças, permitindo que designers e desenvolvedores atualizem interfaces e ferramentas em uma plataforma complexa de maneira rápida e fácil.
Conhecer os jogadores
Um sistema de design é tão bom quanto suas partes interessadas.
-
Consumidores são os designers, desenvolvedores e partes interessadas que usam elementos do sistema de design para criar aplicativos. Os consumidores vêm tanto de dentro quanto de fora da empresa que criou o sistema de design quando a empresa, como a Salesforce, tem um ecossistema de clientes que criam aplicativos em sua plataforma.
-
Colaboradores criam elementos e padrões que compõem o sistema de design. Para cada lançamento, todos podem propor novos padrões, componentes ou diretrizes, ou sugerir alterações nos que já existem.
-
Curadores são guardiões do sistema de design. Essa equipe de engenheiros, designers de produto e designers visuais mantém o sistema de design, supervisiona o código e ensina a comunidade a usá-lo. Os curadores analisam as atualizações propostas e as incorporam para melhorar o sistema de design.
Se você está lendo este texto, provavelmente é um consumidor ou colaborador do SLDS.
O Lightning Design System na Salesforce
Na Salesforce, adoramos sistemas de design. Um motivo pelo qual a Salesforce Platform é tão poderosa é que ela se adapta às necessidades complexas de uma grande variedade de usuários.
Também estamos crescendo rapidamente, expandindo tanto nosso escopo de produto quanto número de funcionários. À medida que vamos crescendo, tratamos de mais necessidades de usuários. É essencial criamos uma experiência de produto coesa de forma eficiente e em larga escala.
O SLDS permite que as equipes do Salesforce façam isso. Os padrões específicos de casos de uso permitem que os designers iterem mais rapidamente e criem soluções coesas mais eficientemente. Os desenvolvedores de componentes sempre têm a estrutura mais recente, com marcações acessíveis e limpas e CSS perfeito até os pixels, para poderem trabalhar mais rapidamente e sem erros. Os clientes e parceiros criam personalizações na Salesforce Platform usando um sistema consistente, limpo e frequentemente atualizado que inclui explicações e exemplos de design claros, eliminando a tentação de fazer engenharia reversa nos softwares.
A maioria dos sistemas de design oferece código totalmente funcional. Mas, como o SLDS é compatível com tantas bases de código diferentes, como componentes Web do Lightning (LWC) e React, ele precisa se manter independente. O Salesforce oferece um código funcional que implementa muitos dos designs de componentes do SLDS por meio dos componentes básicos do Lightning. (Para saber mais sobre como o SLDS difere de outros sistemas de design, confira os Recursos ao final desta unidade.)
Em seguida, vamos voltar no tempo até o nascimento do SLDS.