Sistemas de desenho: Tornar o design e o código reutilizáveis, escaláveis e consistentes

O Design Atómico é útil na definição dos componentes, mas é apenas uma forma de descrever os elementos de um sistema de design.

Os sistemas de concepção permitem às equipas conceber e desenvolver melhores produtos digitais mais rapidamente. Porquê? Porque a reutilização de estilos bem definidos aplicados a componentes e padrões proporciona escalabilidade e consistência. No entanto, o principal valor de um sistema de concepção é o apoio a um trabalho de equipa próximo e a divulgação dos valores e princípios da empresa em toda a equipa, o que também se traduz em benefícios claros para o utilizador.

Os sistemas de desenho permitem às equipas conceber e desenvolver melhores produtos digitais mais rapidamente. Porquê? Porque a reutilização de estilos bem definidos aplicados a componentes e padrões proporciona escalabilidade e consistência. No entanto, o principal valor de um sistema de desenho é o apoio a um trabalho de equipa próximo e a divulgação dos valores e princípios da empresa em toda a equipa, o que também se traduz em benefícios claros para o utilizador.

Um problema comum no desenho

Se trabalhar em ou com UX design, com programadores e designers em uma ou mais equipas, provavelmente já encontrou o seguinte problema:

Designers e criadores passam um tempo notável tentando encontrar os padrões para um simples elemento de um produto digital, tal como um botão. As questões mais comuns são:

  • Qual é exactamente a cor do botão?
  • Qual o tamanho do texto se o botão tiver de ser utilizado num ecrã de secretária e qual o tamanho se tiver de ser utilizado num tablet ou num dispositivo móvel?
  • Qual é o espaçamento entre o texto e o recipiente?

Os desenhadores e criadores fazem-se estas perguntas quando criam os seus produtos digitais e perdem tempo a procurar o estilo de um elemento ou componente. Naturalmente, eles procuram padrões. Isto pode facilmente acumular-se quando se procuram componentes e padrões mais complexos. Isto pode levar a frustrações dentro da equipa, inconsistências e atrasos na concepção e desenvolvimento. O resultado: um produto digital que é frustrante para o utilizador, para não mencionar o custo para a empresa ou organização que produz o produto deste tempo perdido.

O que é um sistema de desenho?

Ou dito de outra forma: o que NÃO é um sistema de design? Não é certamente um software; não é uma aplicação que possa ser instalada, e não é um projecto com um início e um fim. Então, o que é?

Vamos descrevê-lo como a forma como designers e criadores trabalham em conjunto com uma visão partilhada, princípios claros e valores fortes. Trabalhar com um sistema de concepção traz benefícios tangíveis às empresas e organizações e, portanto, a todos os seus utilizadores, sejam eles clientes, cidadãos ou empregados.

É um projecto contínuo que permite às empresas e organizações inovar e desenvolver os seus produtos digitais.

Um sistema de design compreende uma colecção de componentes e padrões padronizados e reutilizáveis, guiados por uma linguagem visual clara. Vamos chamar a esta linguagem visual um guia de estilo. Estes componentes e padrões podem ser reunidos para criar qualquer número de websites e aplicações.

Cada elemento, componente e padrão é concebido e criado uma vez, o código corresponde ao desenho, e juntos representam a personalidade da marca do produto. Uma aplicação ou website optimizado e consistente traz benefícios claros aos utilizadores, tais como aprendizagem rápida, maior produtividade e menos erros durante a utilização.

Elementos chave de um sistema de desenho

Elementos chave de um sistema de desenho
Elementos-chave de um sistema de desenho – Fonte: Relatório sobre o Estado do UX 2020

Algumas outras questões relevantes de um sistema de desenho são:

  • Princípios de concepção
  • Linguagem visual
  • Normas e especificações
  • Conteúdo: Edição e Tom
  • Convenções de nomenclatura e estrutura de ficheiros
  • Pilha de tecnologia
  • Kit de ferramentas, bens e modelos
  • Normas e convenções de acessibilidade
  • Governação e Metodologia

Um designer = uma solução

Enquanto o desenvolvimento está muito avançado na invenção de formas de reutilização de componentes, o design luta para dimensionar as aplicações que suporta – porquê? Porque as aplicações por medida são normalmente concebidas para cada solução específica. Os desenhadores estão muito interessados em resolver problemas e tendem a desenvolver soluções específicas. Esta é uma boa qualidade, não me interpretem mal, eu próprio sou um designer.

Torna-se problemático quando estas soluções específicas se tornam mais extensas, aplicam-se a múltiplos produtos ou múltiplas equipas. Depois surgem problemas de escala, tais como inconsistências que atrasam o processo de concepção e desenvolvimento e se tornam difíceis de manter ao longo do tempo.

Se houver mais do que um designer na sua empresa, pode começar agora a construir um sistema de design. Mesmo que haja apenas um designer, ele/ela pode começar pelo caminho da construção de um sistema de design. Isto significa que pode adoptar uma mentalidade ou filosofia de sistema de concepção, uma abordagem específica na estruturação da sua concepção e organização

Filosofia do Sistema de Design

Uma forma de alterar a estrutura do desenho e permitir a reutilização de componentes é torná-lo escalável através da aplicação da filosofia de desenho atómico em que os sistemas de desenho se baseiam.

O desenho atómico utiliza uma analogia prática da química:

A analogia atómica decomporia o desenho nos seus elementos individuais que ainda são funcionais, tais como um botão.

Depois pode combinar estes átomos em grupos mais pequenos que trabalham em conjunto, estes são chamados moléculas. Pense num campo de entrada.

Os organismos são um pouco mais complexos e combinam moléculas e/ou átomos; um exemplo poderia ser um cabeçalho.

Depois há modelos e páginas que estão fora da analogia mas que ainda são utilizadas pelo Atomic Design

Estrutura atómica simplesmente ilustrada depois de Brad Frost:

Ilustração de desenho atómico de acordo com Brad Frost
Ilustração design atómico – Quelle: http://atomicdesign.bradfrost.com/chapter-2/

O desenho atómico é útil na definição dos componentes, mas é apenas uma forma de descrever os elementos de um sistema de desenho. Não é necessário utilizar a mesma terminologia e nome exacto para elementos e componentes, mas é importante utilizar o mesmo princípio e compreender como funciona. Também se pode utilizar blocos de construção reutilizáveis ou outra analogia como os tijolos de Lego.

Resumo sobre sistemas de concepção

Os principais benefícios e valores da utilização de sistemas de desenho na criação de produtos digitais são:

  • Reutilização de estilos bem definidos em elementos, componentes e padrões que proporcionam escalabilidade e consistência para produtos digitais.
  • Melhorar a consistência = melhorar a qualidade da interface do utilizador = melhorar a usabilidade do produto digital
  • Promover uma visão partilhada no seio da equipa
  • Tornar o processo de concepção e desenvolvimento mais focalizado e eficiente
  • Estabelecer e documentar um vocabulário comum, uma linguagem visual, para fornecer uma orientação clara e reconhecível que seja fácil de usar
  • Poupar tempo na procura de componentes e especificações para a sua utilização
  • Os utilizadores recebem um produto digital bem concebido e optimizado que melhora a capacidade de aprendizagem, a percepção da marca e a redução de erros.

 

Autor: Laura Chavarria

Keen Design ist eine reine UX Agentur und bietet seit 2003 maßgeschneiderte UX Lösungen auf großen Projekten, u.a. für das Redesign der Online-Steuererklärung in den Niederlanden. Wir bieten Unternehmen UX Services, mit denen Innovation ermöglicht, Digitalisierung vorangetrieben und User Journeys hochwertig erlebbar werden. Damit sind wir Vorreiter bei den spezialisierten UX Lösungen. Keen Design hat UX-Design-Spezialisierungen in verschiedenen Branchen entwickelt und dedizierte Geschäftseinheiten für den Finanzsektor, Software, den öffentlichen Sektor und das Gesundheitswesen eingerichtet. Weitere Informationen unter www.keen.design

Comentários estão fechados.