Noções básicas sobre sistemas e padrões de design
Publicados: 2022-03-11Embora possa parecer uma nova maneira de abordar o fluxo de trabalho digital, o conceito de um sistema de design não é “novo” para as indústrias criativas. No centro de qualquer sistema de design está uma linguagem de padrões de design que resolve problemas comuns que um designer pode enfrentar.
A ideia de uma linguagem de padrões originou-se da arquitetura e do design urbano há mais de 40 anos e pode ser aplicada a praticamente qualquer disciplina de design.
Sistemas de design como o Material Design são um tópico da moda, mas uma abordagem sistemática do design tem sido parte integrante dos editores de revistas há décadas. Ao folhear as páginas de qualquer revista importante, é fácil ver que cada seção é definida exclusivamente como um modelo com layout, fontes, cores etc.
Os padrões de design usados para as seções de página permitem que o texto e as imagens sejam organizados de forma consistente e eficiente de forma a complementar a visão criativa de uma publicação.
Ao olhar para as revistas da concorrência, é fácil ver como a linguagem de design de uma se compara à da outra.
Se ainda não o fizeram, designers de vários setores em breve incorporarão uma linguagem de design e modelos em seu fluxo de trabalho. Para designers de produtos digitais, esse tópico está evoluindo e muitos estão aprendendo a projetar a partir de bibliotecas de padrões em sistemas complexos pela primeira vez (ou até mesmo ajudando a defini-los).
Há uma complexidade adicional ao alinhar padrões de design de software com uma base de código de front-end, o que pode tornar o aprendizado de uma linguagem de design esmagador.
As linguagens de design são holísticas
Uma linguagem de design, como qualquer outra linguagem, é intrincada e contém nuances que podem parecer confusas para aprender a princípio. É por isso que ajuda pensar em uma linguagem de design como um sistema complexo “composto de muitos componentes que podem interagir uns com os outros”.
Para entender um sistema complexo, é importante pensar sobre a linguagem de design de forma holística :
- Comece com uma visão geral de como o design impacta uma marca ou negócio.
- Em seguida, contemple o papel do design com equipes multifuncionais e outros designers.
- Finalmente, considere como o design afeta o produto e os usuários em um determinado momento.
Essa perspectiva holística enfatiza uma maneira sistemática de pensar sobre fluxos de trabalho de design e permite que uma linguagem de design seja facilmente aplicada ao resolver problemas específicos.
Na prática, uma linguagem de design é um recurso usado para ajudar a reduzir a redundância e melhorar a continuidade na maneira como os designers abordam problemas comuns de design. Por exemplo, um problema comum enfrentado por designers de produtos é: “Preciso colocar uma chamada para ação para que os usuários cliquem”.
Isso é algo que já foi resolvido antes, então, em vez de reinventar a roda (ou o botão), a linguagem de design definiria um “padrão de design” de botão reutilizável com propriedades predefinidas, como cor e forma, juntamente com diretrizes para as melhores práticas.
Uma linguagem de design de produto digital geralmente é um recurso multifuncional com o objetivo de melhorar a eficiência do fluxo de trabalho e a colaboração das equipes.
Em alguns casos, a linguagem é estendida para uma biblioteca de padrões ativa que é conectada diretamente à base de código front-end e à análise métrica de padrões. Esse tipo de sistema complexo com várias dependências torna bastante necessária uma abordagem holística para a solução de problemas.
O incrível de aprender uma linguagem de design é que os colegas de equipe geralmente são bastante apaixonados pela interface e pelas interações usadas para definir um produto. Aprender um novo idioma geralmente é um desafio, mas também pode ser uma experiência imersiva que une uma equipe!
Perguntas comuns para “projetar” o pensamento sistêmico
A fluência com uma linguagem de design garantirá a qualidade do sistema por meio do evangelismo - que pode incluir:
- Formação de novos designers;
- Mentoria de funcionários juniores e gerenciamento de contratados; ou
- Trabalhando diretamente com engenheiros para refinar o front-end do produto antes de um lançamento.
Por meio desses esforços colaborativos, um projetista poderá garantir que as diretrizes para o sistema sejam mantidas ou refinadas com base na necessidade.
Seja qual for o dever, há algumas perguntas comuns sobre os sistemas de design pensando que um designer pode ser responsabilizado por:
O que devo pensar ao projetar dentro de um sistema de design?
Dependendo da complexidade do sistema de projeto, é importante começar com uma abordagem abrangente do problema que está sendo resolvido. Considere o exemplo do botão de antes.
Se a cor for predefinida para ser #1f9efc e um designer fizer com que seja #1b3e9b sem antes consultar outros designers usando a mesma biblioteca de padrões, isso pode causar um erro no sistema.
Ao trabalhar em um sistema de design, pense em como o problema que está sendo resolvido afetará todo o ciclo de desenvolvimento do produto. Em muitos casos, não haverá, e não deve haver, muito impacto porque a biblioteca de padrões já foi validada.
Se um problema que está sendo resolvido é novo no sistema de design, pode haver uma oportunidade de desenvolver a biblioteca de padrões e ajudar a definir um novo padrão de design.
Quando o sistema está evoluindo, ele é novo no fluxo de trabalho de uma equipe. Aqui, a flexibilidade é necessária porque os padrões de design irão iterar ao longo do tempo. No entanto, embora seja fácil alterar a cor de um botão, a maior complexidade do sistema deve ser sempre considerada.
Para isso, é útil definir uma taxonomia para organizar o sistema de design e a biblioteca de padrões. A terminologia utilizada deve ser de fácil compreensão multifuncional.
Clique para ver a imagem em tamanho real.
Ao agrupar artefatos de design em tópicos comumente compreendidos, a biblioteca de padrões permite que o sistema opere em fluxos de trabalho de equipe e desenvolva comunicação da maneira como os padrões de design são falados.
Como sei quando preciso quebrar um padrão ou criar um novo padrão em um sistema de design?
A necessidade de quebrar ou criar um novo padrão de projeto geralmente depende da maturidade do sistema. Quando um sistema de design está evoluindo, os padrões mudam frequentemente. À medida que o sistema se estabelece, deve haver um processo de solicitação de mudança em vigor para ajudar a garantir a continuidade e a qualidade.
A complexidade de um sistema também é importante a considerar. Se a alteração de um padrão afetar outros designers e equipes, o processo pode demorar mais para ser implementado e geralmente requer algum nível mais profundo de esforço ou recursos (por exemplo, atualização de diretrizes de linguagem de design, bibliotecas de padrões ou base de código front-end).
Geralmente, uma biblioteca de padrões não deve ser rígida. Pense nisso como uma caixa de ferramentas que pode resolver problemas e concluir tarefas. Se todas as tentativas de projetar dentro dos limites da biblioteca de padrões não atingirem os objetivos do projeto, a intuição pode levar à busca de uma nova ferramenta – ou talvez uma mudança no padrão existente.
Dê uma olhada no diagrama abaixo. Uma regra geral é que identidade e elementos , que são os blocos básicos de construção da marca, raramente mudam porque ajudam a definir a marca e os artefatos de design.
A maioria das grandes organizações tem guias de estilo separados para elementos relacionados à marca, especialmente logotipos, cores e fontes, que não mudam com frequência. Para elementos como botões, isso pode ou não iterar dependendo da evolução da linguagem de design, mas estes também têm mudanças menos frequentes devido à sua conexão com todos os aspectos do produto.
Mudanças no padrão de design ou novos padrões geralmente surgem no nível de componentes e interações porque definem os fluxos do usuário e os conjuntos de recursos. É comum que novos fluxos de usuários sejam definidos em um roteiro de produto, especialmente ao lançar recursos.
Novos padrões de design terão propriedades semelhantes aos padrões já definidos na biblioteca (como fontes e cores), mas podem exigir atualizações de interface ou estados interativos adicionais à linguagem de design.
O gerente de produto ou proprietário do produto trabalhando com um designer fornecerá requisitos para novos recursos que se alinham com os objetivos de negócios. Ao decidir quebrar ou criar um novo padrão de projeto, lembre-se da teoria dos sistemas complexos e garanta que a solução seja uma decisão compartilhada.
Aqui estão algumas etapas a serem consideradas ao pensar em como quebrar ou alterar um padrão de design:
Garantir o Controle de Qualidade e Continuidade
Lembre-se de que a qualidade é uma meta de produto compartilhada. Todos são responsáveis por garantir que o sistema de design esteja fazendo seu trabalho.
Sempre adote essa abordagem holística e pense no impacto potencial de quebrar um padrão ou criar um novo padrão.
Pergunte a si mesmo:
- A quebra de um padrão é a única maneira de resolver meu problema?
- Como outras equipes seriam afetadas se eu quebrar esse padrão?
- O que aconteceria com a biblioteca de padrões se eu quebrar esse padrão?
Comunique-se com os Colaboradores
Converse com designers e membros da equipe multifuncional para ver se mais alguém está tendo as mesmas restrições. Saiba tudo sobre os requisitos da plataforma e como um padrão proposto funcionaria em toda a família de produtos.
Pergunte a si mesmo:
- Quem mais já trabalhou neste produto ou plataforma?
- Quais são as melhores práticas da plataforma para a qual estou projetando?
- Com quem posso falar que possa ajudar na minha decisão e recomendações?
Entenda os recursos de front-end
Saiba o que é possível para implementação de front-end. Se a alteração for simplesmente uma atualização das propriedades HTML/CSS/JavaScript, geralmente não será necessário quebrar um padrão ou criar algo totalmente novo.
Em vez disso, pode ser uma simples atualização da diretriz de linguagem de design. Como designer, é importante trabalhar em estreita colaboração com o front-end e potencialmente encontrar maneiras de colaborar semanalmente ou diariamente.
Pergunte a si mesmo:
- A equipe de front-end foi inserida nesta atualização de design?
- A mudança que estou considerando é uma atualização de front-end?
- Há algo faltando nas diretrizes de melhores práticas?
Validar a decisão
Se for determinado que um novo padrão é necessário, a decisão deve ser validada com colaboradores e usuários finais e alinhada com os objetivos do negócio.
Se os componentes de front-end estiverem vinculados a métricas, um teste A/B rápido ajudará na validação. Caso contrário, realizar testes de usabilidade funcionará muito bem.
Pergunte a si mesmo:
- Nossa equipe tem um processo de solicitação de mudança para validar novos padrões de design?
- O que preciso fazer para validar minha decisão?
- Essa decisão cria um novo fluxo de usuários ou é um recurso adicional?
Mesmo trabalho, mentalidade diferente
Ao projetar dentro de um sistema, é crucial que os designers de produto adotem a mentalidade de visão geral necessária para a tomada de decisões. Os princípios de um sistema complexo e o pensamento sistêmico ajudarão os designers à medida que crescem em suas carreiras. O mesmo vale para o processo de construção a partir de uma biblioteca de padrões.
Essas abordagens são úteis para iniciar uma nova linguagem de design ou contribuir para uma já existente, porque uma vez que a mentalidade está em vigor, os métodos sistemáticos se tornam, bem, “sistemáticos”.
Saber que outros setores e disciplinas de design usaram métodos semelhantes de simplificação de fluxos de trabalho por muitos anos fornece aos designers de produtos um excelente ponto de referência para as melhores práticas.
No final das contas, projetar dentro de um sistema não transformará completamente a maneira como o trabalho é feito. Claro, haverá algumas novas ferramentas para conectar e gerenciar complexidades, mas, em última análise, é uma mudança para uma mentalidade holística que realmente ajudará a melhorar os fluxos de trabalho.
• • •
Leia mais no Blog Toptal Design:
- Como criar um guia de estilo de esboço, biblioteca e kit de interface do usuário
- Declarações de problemas de design - o que são e como enquadrá-las
- Use sua inspiração - um guia para quadros de humor
- Design Colaborativo - Um Guia para o Design de Produto Empresarial de Sucesso
- Projete o futuro: as ferramentas e os produtos que nos esperam