Como construir uma estrutura de design eficaz (inclui uma estrutura de interface do usuário de esboço gratuita)

Publicados: 2022-03-11

Se você está no mundo do design há algum tempo, provavelmente já ouviu esses termos: estrutura de design, estrutura de interface do usuário, kit de interface do usuário ou biblioteca de padrões. Todos eles se referem à mesma coisa – um sistema de padrões de design, modelos, padrões de interface do usuário e componentes que são usados em todo o produto e atendem à sua linguagem de design.

Se você não criou uma estrutura de design antes, iniciar uma pode parecer cansativo e demorado, mas acelerará seu trabalho de design e o tornará mais eficiente em geral.

Vamos descrever os principais problemas que uma estrutura de design resolve, por que você precisa de uma e os componentes que você precisará criar ao construir uma. Você encontrará uma estrutura de interface do usuário do Sketch para download gratuito posteriormente no artigo que permite criar sua própria estrutura de design.

Animação de fluxo de trabalho do UI Framework — Uma estrutura de design no Sketch.

O que é uma estrutura de design?

Todo design de interface do usuário começa com uma prancheta vazia e todo designer tem um processo que usa para transformar essa tela em branco em um produto totalmente funcional. Esse processo inclui todos os pequenos componentes de design criados e as etapas pelas quais o designer passa para construir um todo coeso, de cores a botões e tudo mais.

Muitas vezes, esse trabalho é repetitivo e pode ser consolidado e tornado mais eficiente criando um sistema de padrões e componentes inter-relacionados. Em outras palavras, uma estrutura de design .

Os frameworks de design resolvem vários problemas, incluindo:

Eliminar inconsistências no design do produto.
Aumentar a colaboração, a eficiência e a comunicação entre as equipes de design e produto.
Tornar as atualizações de design posteriores no processo de design menos frustrantes.

O primeiro problema: inconsistência no produto

A consistência transforma um bom design em um ótimo design. A consistência melhora o UX, a usabilidade geral e a eficiência com que os usuários podem usar produtos digitais. Seja um pequeno site, um aplicativo ou um grande produto SaaS, as inconsistências no design comprometem a aparência, a sensação, a credibilidade e a experiência do usuário do produto.

As inconsistências geralmente acontecem quando uma equipe ou um designer faz as coisas muito rapidamente ou faz alterações em tempo real. Às vezes, um designer responde a um cliente ou stakeholder pedindo algo diferente, mostrando rapidamente como seriam essas mudanças. De repente, a equipe de design se encontra com quatro tons diferentes de verde e ninguém sabe ao certo qual é a cor primária do botão.

As estruturas de design resolvem esse problema estabelecendo padrões consistentes.

O Segundo Problema: Lacunas de Colaboração e Comunicação

Muitas vezes, durante o processo de desenvolvimento, quando há vários membros da equipe envolvidos com muitos trabalhando no design em diferentes pontos do processo, pode se tornar confuso se não houver um conjunto de padrões para orientar a equipe.

Uma estrutura de design aumenta a colaboração e a eficiência, simplificando o processo de comunicação e fornecendo padrões e orientações claras. Chega de perder tempo correndo para frente e para trás tentando descobrir qual cor ou fonte é a correta a ser usada.

Botões de interface do usuário inconsistentes como resultado de maus hábitos de design — Um problema comumente visto – três estilos diferentes no mesmo botão.

O terceiro problema: alterações de projeto em estágio avançado

Quantas vezes os designers precisam fazer uma única mudança de cor no arquivo de design com 120 pranchetas já desenvolvidas? Quantas vezes é necessário alterar um ícone que faz parte de 200 componentes?

A mudança é inevitável em todo o processo de design, é como o produto melhora, mas geralmente acontece mais tarde do que os designers gostariam. Uma estrutura de design torna essas mudanças de estágio final muito menos dolorosas, porque é construída em um sistema de componentes orientados a objetos. Mude-o uma vez e ondula por todo o design.

Como criar uma estrutura de design

Agora que sabemos o que é uma estrutura de design e os problemas que ela resolve, vamos falar sobre a criação de uma (e o que está no download do kit Sketch UI fornecido mais adiante neste artigo).

A estrutura de design usada para este artigo é um único arquivo Sketch que é definido usando uma hierarquia específica de componentes, conhecida no Sketch como “símbolos”. Esses símbolos facilitam a implementação de alterações em todo o arquivo com um único clique. Uma mudança no componente “mestre” – o “símbolo” – é refletida instantaneamente em todas as outras instâncias.

Componentes de interface do usuário dentro da estrutura de design

Hierarquia da estrutura de design

Para criar uma estrutura de design que funcione bem, comece configurando uma hierarquia visual sólida. Projete os componentes mais onipresentes, como cor e tipografia primeiro. Em seguida, trabalhe para os menores, como botões e componentes de entrada. Pense nisso como construir uma casa – construa a fundação primeiro e depois adicione as outras peças à medida que o projeto avança.

Diagrama de hierarquia de uma estrutura de design — Sem cor e espaço – formas, sombras e tipografia são apenas um conjunto de parâmetros invisíveis.

Cor

A cor é o elemento mais importante em uma hierarquia de estrutura de design de interface do usuário – cada componente em um design usa cor. A cor provoca fortes reações e emoções nas pessoas e define a aparência geral, a sensação e o tom de um produto.

Uma boa prática é dividir as cores em grupos:

As cores primárias são as principais cores da marca, normalmente usadas para criar o esquema geral de cores de um projeto e para componentes cruciais, como botões.
As cores secundárias complementam a paleta primária — geralmente são diferentes tons, saturações ou matizes das cores primárias. A escala de cinza é comumente usada para tipografia ou planos de fundo. Algo entre cinco a oito níveis de cinza deve ser suficiente.
As cores de feedback do sistema são um grupo importante que os designers geralmente esquecem. Essas cores exibem mensagens do sistema, incluindo alertas, avisos e notificações.

Paleta de cores da interface do usuário — Cada cor é um símbolo separado no arquivo Sketch – isso garante que, quando uma cor é alterada, todos os elementos que usam essa cor também mudam.

Procuravam-se designers de UI freelancers em tempo integral nos EUA

Grade: o espaço de design

Uma vez que as cores são selecionadas, o próximo passo é configurar uma grade. Uma grade mantém todos os outros componentes da página no lugar e na ordem corretos. Este é o espaço de design geral.

Existem dois tipos de grades: vertical e horizontal .

A grade vertical é a mais utilizada e mantém tudo alinhado horizontalmente. Existem muitos sistemas de grade populares como Bootstrap ou a grade de 960px mais antiga.

Uma grade horizontal não é tão comum. Uma grade horizontal é usada para tipografia. Cria ritmo vertical para parágrafos e é comumente visto em jornais.

Grade vertical e horizontal na estrutura de design

Modificadores: regras estilísticas

Além da cor e da grade, há mais um componente que está no alto da hierarquia da estrutura de design: os modificadores. Eles não podem ser usados como componentes autônomos – eles são usados para modificar ou estilizar outros.

Este grupo traz estilo a um projeto e inclui componentes responsáveis pela estética, como formas ou sombras ; alterá-los individualmente nas fases posteriores do projeto pode ser complicado.

Trate os modificadores como parâmetros para todos os blocos de construção subsequentes. Crie símbolos de esboço de três formas diferentes: retângulo, retângulo arredondado e círculo. Use essas formas para criar todos os componentes de uma interface do usuário, incluindo botões, componentes de entrada, campos de formulário etc. e elementos de plano de fundo.

Essa técnica permite que os designers se concentrem mais na UX do que na aparência dos componentes da interface do usuário. Também facilita voltar à forma básica, alterar seu estilo (por exemplo, raio de canto) e tudo conectado será atualizado automaticamente.

Formas e sombras como modificadores para elementos de interface do usuário — Criar formas como símbolos do Sketch é uma prática sábia, pois elas podem ser usadas para construir componentes subsequentes. Qualquer alteração nas formas subjacentes será refletida imediatamente nesses componentes.

Tipografia: O Conteúdo

A tipografia é o último componente importante da estrutura de design. Pode ser dividido em dois grupos: cópia estática da página, como cabeçalhos e parágrafos; e cópia interativa de componentes, como botões, navegação ou campos de entrada.

Desenhe o estilo e tamanho de todos os títulos (H1, H2, H3, etc.) e parágrafos. A cópia de página estática geralmente não tem muitas variações estilísticas (cor ou peso). A única variação – relacionada ao estilo de cópia de página estática – é se está em um plano de fundo claro ou escuro. Portanto, é melhor criar dois conjuntos de cores para garantir que a cópia de página estática funcione em ambos.

Tipografia de texto de corpo estilizado dentro de uma estrutura de design — Texto de corpo estilizado em um fundo claro e escuro.

A cópia que aparece em componentes interativos, como botões ou mensagens de feedback do sistema, pode ter várias variações. Por exemplo, as mensagens de feedback do sistema podem ser mostradas em quatro cores de fundo diferentes com base no tipo de mensagem (aviso, erro, sucesso, etc.)—as etiquetas dos botões também podem estar em fundos diferentes.

Incluir esse grupo na estrutura de design é útil para pensar globalmente sobre tipografia. Primeiro, crie o texto regular do rótulo do botão e, segundo, crie suas variações; isso ajudará a evitar acabar com muitos tamanhos de fonte. Ao criar novos componentes de interface do usuário na estrutura, sempre verifique se existe um estilo de tipografia existente que se encaixe.

Diferentes variações de cópia que aparecem em componentes interativos — As cores como símbolos do Sketch não podem ser usadas com tipografia; no entanto, as alterações podem ser aplicadas por meio de Estilos de esboço. É uma boa prática usar a biblioteca de cores já criada e atualizar esses estilos de texto se alterar uma cor na biblioteca.

Ícones

Existem dois grupos de ícones em um sistema de design: ícones informativos e de interface do usuário. O primeiro grupo normalmente faz parte de um sistema de ilustração e não é usado para nenhum componente de interação da interface do usuário (como botões). O segundo grupo — ícones da interface do usuário — adiciona significado a componentes mais complexos: botões, rótulos ou tabelas, enquanto ocupa uma quantidade muito pequena de espaço. Os ícones na interface do usuário também podem ser usados como acionadores de funções, como “editar”, “copiar”, “baixar” e “remover”.

Comece com ícones simples usados para interações de interface do usuário, como setas, “adicionar” (+) ou “fechar” (x). Uma boa prática é projetá-los em tamanhos diferentes (12px, 16px, 24px 32px).

Conjunto de ícones de interface do usuário simples para um sistema de design de interface do usuário — Um conjunto essencial e simples de ícones de interface do usuário criados como símbolos do Sketch que ajudarão a criar outros elementos de interface do usuário na estrutura de design.

Componentes

Botões

Os botões são inquestionavelmente um dos componentes mais importantes no design da interface do usuário e, ao longo dos anos, eles passaram por muitas mudanças à medida que as tendências de design surgiram e desapareceram.

Ao projetar botões, certifique-se de projetar seus “estados” individuais. Como regra, um botão tem vários estados e fornece feedback visual aos usuários para indicar o estado atual (inativo, passar o mouse, pressionado, desativado, ativo etc.).

Há duas maneiras de fazer isso: a primeira é projetar a aparência dos botões separadamente para cada estado (regular, ativo, foco e pressionado). Essa solução pode ser demorada, mas posteriormente oferece muita flexibilidade. (Esse método foi usado na estrutura gratuita da interface do usuário do Sketch incluída abaixo.)

A segunda maneira é projetar todos os estados com base no inicial. Por exemplo, crie um símbolo de esboço que alterará a cor, a saturação ou o brilho de cada estado.

Para fazer isso, coloque o símbolo como uma sobreposição do botão com um dos modos de mesclagem do Sketch: matiz, saturação ou sobreposição. Use um retângulo preto com modo de mesclagem de matiz sobre o botão normal para alterar sua saturação. Alterar a opacidade da sobreposição posteriormente o torna um botão mais ou menos saturado.

Diferentes estados de botão e alternativas estilísticas — Cada botão é composto por símbolos previamente criados. Se o raio do canto for ajustado em um símbolo subjacente, afetará todos os botões.

Componentes de entrada

As entradas permitem que o usuário se comunique com o aplicativo e carregue os dados. O uso de componentes como campos de entrada junto com botões permite a criação de um aplicativo web simples. Assim como os botões, é melhor criar componentes de entrada com estados diferentes. Depende da estrutura de design, mas, no mínimo, considere a criação de estados vazios, preenchidos e de erro.

Componentes Complexos

Nesta fase, a estrutura de design pode ser considerada completa porque possui tudo o que é necessário para criar um produto funcional. No entanto, geralmente vale a pena gastar mais tempo criando componentes de interface do usuário mais complexos para a estrutura de interface do usuário, como cartões, tabelas, seletores de data, gráficos e formulários.

Seções

Nesta fase, a estrutura de design pode ser desenvolvida ainda mais criando as seções mais comuns de aplicativos ou sites. Ao projetar itens como navegação, cabeçalhos, uma seção “sobre nós” e galerias, um designer pode economizar tempo nas fases posteriores de um projeto. A criação de várias variações de diferentes seções do produto facilitará o ajuste a diferentes projetos no futuro.

Práticas recomendadas da estrutura de design

Teste constantemente a estrutura de design

Os testes devem ser incluídos em qualquer processo de design ou desenvolvimento. Evite erros e componentes ausentes criando pequenas peças de design e “testes de estresse” delas. Por exemplo, verifique se a alteração de um componente criado no início também altera um componente adicionado recentemente.

Criar componentes de interface do usuário simples

Mantenha os componentes simples enquanto pensa no maior número possível de casos de uso de design, para que, no futuro, qualquer estilo possa ser coberto. É melhor criar componentes de interface do usuário com formas simples, mantendo-os flexíveis o suficiente para se ajustarem facilmente a qualquer projeto.

Não se concentre em um único estilo

Uma estrutura de design deve ser universal, portanto, em vez de se concentrar em um estilo específico, concentre-se em componentes que podem ser usados para criar um estilo.

Crie sua própria estrutura de design

Em seu próximo projeto, reserve um tempo no início para construir cuidadosamente uma estrutura de design. Você verá que melhora o processo geral de design, aumenta a eficiência e aprimora a consistência do design do produto, o que melhora a usabilidade. Você economizará tempo, comunicará ideias de design com mais eficiência e deixará clientes e partes interessadas felizes quando essas ideias forem trazidas à vida em apenas alguns segundos em uma prancheta do 120 Sketch.

Você está pronto para iniciar sua própria estrutura de design?

Baixe o arquivo Sketch aqui. As instruções estão incluídas sobre como usá-lo.

Sistemas de design inspiradores e estruturas de interface do usuário

Uma das melhores maneiras de entender mais sobre estruturas de design é examinar como empresas grandes e estabelecidas as utilizam. Siga esses tipos de empresas e aprenda sobre sua abordagem.

Material Design do Google – atualmente um dos frameworks de design mais populares do mundo. Saiba como o Google faz camadas de todo o processo de design e constrói uma hierarquia útil de componentes.

Linguagem de Design da IBM – A IBM compartilha todo o seu processo de design, incluindo uma explicação detalhada de cada detalhe. Eles também compartilham muitos recursos de sua linguagem de design, de ícones simples a uma biblioteca de animação de interface do usuário.

Atlassian – outro ótimo recurso de aprendizado. Seu guia de estilo de produto é um ótimo sistema de design para estudar. Eles compartilham seu pacote Web GUI, um arquivo Sketch com vários componentes e conceitos.

• • •