Desenho atômico e esboço - melhorando o fluxo de trabalho - Ferramentas E Tutoriais
Sketch e Atomic Design são um conjunto poderoso de ferramentas e metodologias que os designers podem usar para criar sistemas de design que permitem a padronização e um fluxo de trabalho mais eficiente.
Sistemas de Design: Um Primer
PARA sistema de design é um conjunto de componentes reutilizáveis ​​e diretrizes que ajudam as equipes a se unirem em torno de uma linguagem comum durante a criação e a vida de um produto.
Na maioria dos casos, os sistemas de design são compostos por um guia de estilo e uma biblioteca de componentes. Eles também podem incluir elementos como voz e tom, bem como valores da marca. O objetivo de ter um sistema de design é criar um conjunto de padrões que atuem como uma única fonte de verdade para um produto ou uma marca.
O material design do Google é um sistema de design estruturado que fornece um conjunto de padrões e diretrizes de IU reutilizáveis.
calculadora empregado vs contratado independente
Do Google Design material é um exemplo de sistema de design de IU estruturado. O material design foi introduzido em 2014 como uma forma de projetar e desenvolver aplicativos Android coesos.
Outro exemplo é o de Mailchimp Voz e tom . Descreve como a voz de uma pessoa é sempre a mesma, mas o tom muda dependendo do contexto. Estar ciente disso ajuda a potencializar o conteúdo e dar personalidade à marca.
Embora existam muitos métodos diferentes que podem ser usados ​​para criar um sistema de design, é uma boa ideia escolher uma estrutura que permita que a equipe se unifique em torno de uma linguagem comum e um conjunto de padrões. O Atomic Design é um ótimo exemplo de estrutura que atinge esses dois objetivos.
Projeto Atômico: Sistemas de Projeto de Construção
Atomic Design, uma metodologia introduzida por Brad Frost em 2013, parte da ideia de que todo sistema de design pode ser definido como uma série de blocos de construção que coexistem.
Aqui está uma visão geral rápida dos componentes do Atomic Design:
Átomos . Representam os blocos de construção básicos de um sistema de design. Um exemplo é um botão ou um estilo de texto.
Moléculas . Um grupo de átomos trabalhando juntos como uma unidade. As moléculas são elementos tangíveis da interface do usuário. Por exemplo, um botão e um campo de texto podem ser agrupados para criar um formulário de pesquisa.
Organismos . Átomos e moléculas trabalhando juntos em uma estrutura complexa. Um campo de pesquisa agrupado com uma barra de navegação forma um organismo de cabeçalho em um site.
Modelos. Objetos de nível de página que colocam componentes em um layout que define a estrutura do conteúdo. Por exemplo, pegar um organismo de cabeçalho e colocá-lo em um modelo de página inicial.
Páginas. Instâncias de modelos que representam o produto final.
Uma ótima estrutura e metodologia para um sistema de design é o Atomic Design, que inclui componentes de design reutilizáveis ​​e elementos de interface do usuário.
"Temos a tarefa de criar interfaces para mais usuários em mais contextos, usando mais navegadores em mais dispositivos com mais tamanhos de tela e mais recursos do que nunca. Essa é uma tarefa assustadora, de fato. Felizmente, os sistemas de design estão aqui para ajudar. "- Brad Frost como uma introdução ao Design Atômico e sistemas de design .
Usar o Atomic Design para criar e manter um sistema de design ajudará os designers a trabalhar com mais eficiência e se comunicar melhor com suas equipes. Há uma infinidade de ferramentas e métodos para criar e manter sistemas de design, mas geralmente as melhores ferramentas são aquelas com as quais estamos mais familiarizados.
Como usar o design atômico com Sketch
Para desenvolver um sistema de design usando o Atomic Design, uma ótima (e já conhecida) ferramenta é o Sketch. Ele fornece uma tela para criarmos átomos, moléculas e organismos: os elementos necessários para definir o núcleo de um sistema de design.
Começamos criando três tipos de átomos no Sketch: símbolos, estilos de camada e estilos de texto.
Símbolos. Os símbolos nada mais são do que componentes reutilizáveis. Eles são definidos uma vez porque podem ser instanciados em todo o produto. Por exemplo, um flecha símbolo (átomo) pode ser definido com propriedades como cor da borda, tamanho, etc. Podemos então reutilizar este símbolo sem ter que recriá-lo todas as vezes.
Estilos de camada . Estilos de camada são os elementos de estilo visual reutilizáveis ​​que permanecem consistentes em todas as camadas. Por exemplo, a cor de preenchimento da seta definida anteriormente.
Estilos de texto. Estilos de texto, semelhantes aos estilos de camada, são elementos reutilizáveis ​​que garantem consistência em objetos de texto semelhantes. Por exemplo, definir o tamanho da fonte e a cor de um elemento h1. Funciona de forma semelhante aos estilos de texto no Google Docs ou Microsoft Word.
Quando definimos símbolos, estilos de camada e estilos de texto, o Sketch pode dividi-los em categorias hierárquicas em seus menus de símbolos e estilos de texto com o uso de uma "/" (barra). Seguir as convenções de nomenclatura e ter um conjunto bem definido de categorias principais dará aos arquivos uma estrutura organizada, reduzindo confusões e inconsistências.
No Sketch, podemos usar o menu do painel de inserção para arrastar e soltar componentes reutilizáveis ​​que foram criados.
Aqui estão algumas maneiras de criar categorias hierárquicas para símbolos, texto e estilos de camada no Sketch.
Podemos representar símbolos usando a seguinte convenção de nomenclatura sugerida em Átomos / :
Podemos criar átomos de símbolo de forma rápida e fácil no Sketch, que formará a base para um sistema de design usando o Atomic Design.
Não converteremos estilos de camada em símbolos, portanto, identificá-los por seu grupo semântico é suficiente. Novamente, usando o Átomos /:
Os átomos de estilo de camada podem ser definidos no Sketch, que serão usados ​​em todo o sistema de projeto.
Semelhante aos estilos de camada, veja como podemos criar estilos de texto em Átomos /:
Os átomos de estilo de texto no Sketch ajudam a construir a base de um sistema de design usando a metodologia Atomic Design.
Uma linguagem de design unificada não deve ser apenas um conjunto de regras estáticas e átomos individuais; deve ser um ecossistema em evolução. - Airbnb no Construindo uma linguagem visual .
Criação de moléculas
Os átomos definem a parte básica das diretrizes de design de um produto, mas por si só não são totalmente úteis. Para obter alguma funcionalidade, juntamos átomos e criamos moléculas.
Unir um rótulo (átomo) a um botão de entrada (átomo) para criar uma função de pesquisa é um bom exemplo de um elemento de molécula comumente usado.
Unindo átomos no Sketch para formar moléculas funcionais.
Uma palavra de cautela, pois pode haver um pouco de área cinzenta aqui. Um botão, em um nível de código , é considerado um átomo, mas um botão em um nível de design é considerada uma molécula, pois estamos agrupando um átomo de estilo de camada e um átomo de estilo de texto. Para evitar qualquer confusão, é uma boa ideia pensar apenas nos elementos de nível de código.
As principais categorias que se enquadram Moléculas / está:
Como as moléculas começarão a moldar nossos produtos de forma interativa, é uma boa ideia definir melhor as categorias acima. Neste caso, vamos definir um conjunto de subcategorias que representam uma biblioteca de padrões:
Unindo átomos no Sketch para criar moléculas funcionais.
Criando Organismos
Organismos são grupos de átomos e moléculas. Eles também podem fazer parte de outros organismos.
Ao contrário dos átomos e moléculas, os organismos não têm uma inclusão abstrata nos produtos que estamos projetando; são componentes concretos e reutilizáveis ​​que podem ser facilmente identificados com ações específicas. Sua estrutura é mais complexa do que um átomo ou molécula.
Se o campo de busca definido anteriormente for agrupado com outros componentes, como uma barra de navegação (molécula) e um logotipo (átomo), um organismo é criado. Um exemplo é uma barra de navegação ou um calendário.
Organismos, como moléculas, podem se enquadrar nas mesmas categorias e subcategorias:
Aqui estão as principais categorias que criaremos para Organismos /:
No Sketch, organismos de Design Atômico podem ser criados combinando átomos e moléculas. Da esquerda para a direita, temos um organismo de bate-papo, um organismo de cabeçalho e dois exemplos de organismos de navegação móvel.
Tal como acontece com as moléculas, também criaremos subcategorias para os organismos:
Até este ponto, a maior parte da IU já foi projetada, então agora é tão simples quanto chamar as instâncias de nossos componentes quando eles são necessários para o design.
É fácil localizar cada um desses componentes por seus grupos semânticos, procurando por eles diretamente usando o painel de inserção na barra de ferramentas Sketch, onde encontraremos um conjunto bem organizado de 3 categorias principais, ou usando um plugin como Runner for Sketch .
Os componentes do Atomic Design no Sketch podem ser encontrados usando o painel de inserção na barra de ferramentas Sketch. Isso permite que os designers usem os componentes de forma rápida e fácil em todo o design.
Runner for Sketch otimiza o fluxo de trabalho de um designer, fornecendo um conjunto de comandos de teclado que eles podem usar em vez de encontrar coisas em menus infinitos. Por exemplo, eles podem digitar a palavra inserir , Acerte o aba chave e procure os componentes de que precisam.
Digitando átomos , uma lista suspensa nos mostrará todos os elementos que se enquadram nessa categoria. Se átomos e moléculas compartilharem categorias, apenas átomos serão vistos e todas as moléculas serão ignoradas.
Plugins como Runner for Sketch fornecem uma maneira de usar atalhos de teclado para pesquisar componentes em vez de navegar em menus intermináveis.
Sketch e Atomic Design são um conjunto poderoso de ferramentas que podem ser usadas juntas para melhorar os fluxos de trabalho de design e facilitar uma estrutura de sistema de design eficaz.
Usando o conceito de átomos , moléculas e organismos como base de componente, o Atomic Design ajuda os designers a se unirem em torno de uma linguagem comum durante a criação e a vida útil de um produto.
Designers podem usar ferramentas como Sketch para implementar Atomic Design proporcionando um fluxo de trabalho mais eficiente e um conjunto de padrões que são adotados por todos na equipe de design, incluindo desenvolvedores durante as fases finais do projeto.
Como construir uma estrutura de design eficaz
O que é uma biblioteca de padrões?
Bibliotecas de padrões são uma coleção de padrões de design de interface do usuário. Eles fornecem uma linguagem comum para pessoas que criam interfaces de usuário. Bibliotecas de padrões não especificam requisitos, elas apresentam soluções recomendadas para problemas de projeto.
O que é um padrão de IU?
Os padrões da interface do usuário são descrições das melhores práticas no design da interface do usuário. Eles fornecem soluções reutilizáveis ​​para problemas comuns. Os padrões de interface do usuário consistem nos seguintes elementos: problema, contexto de uso, princípio, solução, por que, exemplos e implementação.
Quais são os componentes da IU?
Os componentes da interface do usuário são usados ​​para representar elementos distintos da IU, como tabelas, botões, caixas de diálogo e outros. Eles encapsulam uma unidade de interação da interface do usuário e são usados ​​em estruturas populares como React, Magento e Oracle.
O Atomic Design é uma metodologia de sistema de design criada por Brad Frost em 2013. Quando implementado, ajuda a acelerar o processo de criação de designs modulares. O Atomic Design ajuda os designers a criar e manter sistemas de design digital, permitindo que as equipes produzam interfaces de usuário mais consistentes e de maior qualidade.