À medida que as interfaces de produtos digitais se tornam mais sofisticadas, torna-se cada vez mais difícil para os criadores de software proprietário aderirem ao mesmo conceito de design. Sistemas de design são usados para resolver este problema. Em essência, são conjuntos de regras e ferramentas para criar um design que reflita a filosofia de um produto ou empresa como um todo. Seu humilde servo, o Old Snake YUI , o ajudará a entender os sistemas de design com mais detalhes.
O que é um design system?
O sistema de design é responsável pela uniformidade da interface para vários produtos de software. Do ponto de vista formal, isso, como escrevi acima, é um conjunto de princípios para compilar o design do usuário (cores, fontes, estilos, etc.) e a experiência do usuário. Este é um padrão unificado para desenvolvedores e designers de front-end.
Soa moderno, não é? No entanto, os sistemas de design já existiam muito antes da definição do termo. Assim, todos os que se interessaram pela história da arquitetura certamente poderão distinguir como são os edifícios em estilo barroco. Da mesma forma, na era digital, hoje podemos distinguir facilmente os produtos da marca Apple. Assim, o sistema de design pode ser considerado kits prontos para “construir novas interfaces”.
YUI explica por que você precisa de um sistema de design
De um modo geral, os sistemas de design são criados para que designers e desenvolvedores de API possam reproduzir novos produtos repetidamente sem ter que reconstruir padrões comuns.
Quanto ao propósito global, os sistemas de design são usados por empresas que atualizam e lançam regularmente novos serviços de software, exemplos disso são Google, Apple, etc. A propósito, aqui você pode ler uma opinião de especialista em primeira pessoa sobre como especificações e design requisitos são formados.
Benefícios do Design System
Obviamente, o design system traz muitos benefícios para as empresas – desde a eliminação da necessidade de criar templates do zero (para descrever os princípios básicos da interação do usuário com a interface) até o fornecimento de amplas perspectivas de contratação de designers terceirizados e especialistas em front-end (já que eles receberá uma “carta” pronta sobre a criação de novas interfaces).
Para os fãs da marca, eles reduzem o limite de entrada padronizando a interface do usuário, para as próprias marcas, eles aumentam o reconhecimento e fornecem uma vantagem competitiva significativa.
Quanto aos benefícios a longo prazo, o desenvolvimento de sistemas de design ajuda a reduzir significativamente os custos associados à fase de design e desenvolvimento da interface do usuário. Além disso, o design do sistema acelera o lançamento do produto e reduz o número de edições, devido às especificações mais rígidas, que literalmente impedem que as equipes que trabalham no projeto “toquem o dedo no céu” (especialmente se trabalharem separadamente das uns aos outros).
Um pouco de história dos sistemas de design
Como você já entendeu, os sistemas de design existem há muito tempo e são usados por grandes marcas em todos os lugares. Quando a YUI era jovem e cabia na palma de uma criança, em 1975, a NASA apresentou sua própria lista de especificações de design. Quanto aos sistemas de design que são usados em nosso tempo, um dos primeiros sistemas unificados para criação de interfaces pode ser considerado o Material Design do Google, que foi proposto pela primeira vez em 2011 e finalmente formado em 2014.
O design do sistema de nossos dias difere de seus protótipos, levando em consideração todos os parâmetros dos dispositivos de mídia modernos. Estamos falando, em primeiro lugar, de gadgets móveis (e, em geral, multiformatos) e do design adaptável necessário para eles.
Quem Precisa de Sistemas de Design?
Obviamente, do ponto de vista prático, os sistemas de design são mais úteis para os designers. Especialmente para quem trabalha no projeto separadamente das equipes de desenvolvimento.
Tais sistemas são obrigatórios para empresas que lançam um após o outro produtos de software de marca e buscam aumentar seu reconhecimento junto ao público-alvo. Assim, pode-se argumentar que qualquer empresa de desenvolvimento de software que busca:
acelerar o tempo de colocação no mercado para cada produto seguinte;
simplificar a interação entre equipes de especialistas;
aumentar o reconhecimento da marca,
precisa de um sistema de design.
Quem desenvolve sistemas de design?
Essa responsabilidade geralmente é atribuída a equipes de design, equipes de desenvolvimento ou equipes de front-end. Além disso, às vezes os designers estão envolvidos nesse procedimento. Observe que é impossível completar a lista de especificações do sistema de design, pois à medida que novos elementos da interface do usuário aparecem, ela se expande.
Elementos do sistema de design
Primeiro, vamos descobrir em quais elementos o sistema de design consiste.
Componentes
Esses são elementos abstratos da interface do usuário que não são detalhados e, portanto, podem ser adaptados para diferentes produtos. Estes são botões, formulários, campos de entrada, caixas de mensagens, etc.
Padrões
Essas são as regras e especificações que unificam UX e experiência do desenvolvedor (DX). Isso facilita a criação de novos elementos de interface do usuário. Quanto a exemplos específicos, eles estão coletando, filtrando e classificando dados.
Linguagem visual
Isso é tudo o que é responsável pelo design estilístico da interface do usuário: cores, tipografia, fontes etc.
Artefatos
As interações entre os três elementos acima são definidas por artefatos — os fluxos de trabalho que ocorrem na interface do usuário. Eles ajudam os desenvolvedores front-end a implementar a parte do código da interface.
Como Criar Design System: Dicas e Truques
Agora é a hora de aprender a criar um sistema de design. Aqui está meu próprio guia passo a passo para sua atenção.
#1 — Crie o conjunto de “blocos de construção”
Antes de começar a criar um sistema de design, você precisa decidir sobre os elementos multitarefa que podem ser reutilizados.
#2 — Coordene seu conjunto de componentes e linguagem visual com a equipe de desenvolvimento
Para entender o quão corretamente você escolheu um conjunto específico de elementos do sistema de design, você deve concordar com a equipe de desenvolvimento para não complicar sua tarefa e não tornar o projeto excessivamente caro.
#3– Recrute uma equipe com as habilidades que você precisa
Sua equipe deve interagir com desenvolvedores e outros especialistas que trabalham em projetos em todas as fases de seu desenvolvimento. Isso significa que cada um dos membros de sua equipe deve ser competente o suficiente para entender as recomendações dos desenvolvedores. Portanto, antes de contratar pessoas para sua equipe, defina claramente a lista de hard skills para cada uma delas.
#4 — Defina uma lista de tecnologias
Decidir sobre as tecnologias básicas que farão parte da construção do sistema de design. Você também pode especificar um dos produtos acabados, que no futuro funcionará como protótipo para as seguintes soluções de software.
#5 — Escolha um esquema de cores e tipografia
É hora de escolher uma paleta de cores (tons e regras aceitáveis para seu uso em certas partes da interface do usuário) e tipografia - fontes e os princípios de sua coordenação com elementos de interface (não se esqueça de sua adaptabilidade para diferentes parâmetros de tela). Isso é fácil de fazer quando você tem um conjunto pronto de componentes do sistema de design.
#6 — Crie seu próprio conjunto de ícones
Os ícones são uma linguagem gráfica de comunicação entre desenvolvedores de software e usuários, o que torna as interfaces compreensíveis, independentemente do idioma que um determinado usuário fala.
7 — Formule os princípios básicos do trabalho com o espaço
Esta etapa de elaboração de um sistema de design inclui o desenvolvimento de princípios para o layout do espaço e a colocação de elementos individuais da interface do usuário (é claro, levando em consideração a adaptabilidade para diferentes tamanhos de tela).
#8 — Construa seu primeiro modelo
Por fim, construa alguns modelos que reflitam todas as especificações formuladas nas etapas anteriores. Concentre-se na consistência do sistema - isso simplificará sua tarefa. Lembre-se também que os templates precisam ser constantemente refinados, com o advento de novos produtos e funcionalidades em soluções já existentes.
Ferramentas para usar
Três das ferramentas mais populares para construir componentes e a linguagem visual dos sistemas de design são:
Sketch
Comentários