Design de produto digital: crie um sistema de design que dura

1. Introdução: Meu nome é Brad Frost, e sou um web designer, palestrante, autor e consultor baseado em Pittsburgh, Pensilvânia. E a aula de hoje é sobre a criação de sistemas de design bem-sucedidos, e a introdução da metodologia de design atômico. Um sistema de design é a história canônica de como sua organização projeta e constrói produtos digitais. Os sistemas de design permitem que as equipes lancem trabalhos de maior qualidade mais rápido do que nunca. Muitas e muitas organizações estão investindo nisso, o que é ótimo. Mas, ao mesmo tempo, agora que é uma espécie de palavra de voz própria, você vê muitas e muitas equipes saindo para estabelecer botões, cartões e cabeçalhos, e todos os tipos de outros componentes isolados. Então, depois do fato, eles tipo de conectá-los em seus produtos reais apenas para encontrá-los cair em seu rosto. O design atômico é uma metodologia que criei para ajudar a mim e às equipes com quem trabalho a pensar na interface do usuário como um conjunto pensativo de peças interconectadas. Ao longo dos últimos cinco anos, design atômico surgiu como uma onda bastante sólida para certamente meus próprios projetos, mas também organizações em todo o mundo para ajudar a estabelecer seus sistemas projetados e pensar sobre sistemas de design em um maneira conectada. Esta aula é para designers e desenvolvedores e realmente qualquer pessoa envolvida no sucesso de produtos digitais em uma organização. Depois de fazer esta aula, você vai entender como iniciar com sucesso uma iniciativa de sistema de design. Você estará armado com a metodologia para criar cuidadosamente componentes de sistemas de design que podem ajudá-lo a levantar seu sistema de design inicial, bem como governança ao longo do tempo. Então, obrigado por se juntar a esta aula, e vamos mergulhar. 2. O que são sistemas de design?: Então, a primeira coisa que vamos fazer é ter uma atualização rápida do que exatamente é um sistema de design. Isso é coberto por muitos lugares em outros , mas na verdade é uma coisa difícil de fixar exatamente. O que é um sistema de design? A definição que eu costumo usar é que um sistema de design é a história canônica de como sua organização projeta e constrói produtos digitais. Gosto de colocar isso na lente de um novo contratado. Você contrata uma pessoa inteligente e talentosa e eles inevitavelmente vão perguntar assim, como fazemos as coisas aqui? Como projetamos como? Nós desenvolvemos? Quando você tem um sistema projetado, você pode responder a essa pergunta dirigindo-os na direção do sistema de design. Você pode dizer, “ Aqui está a história de como fazemos as coisas aqui, aqui está a linguagem de design que usamos, aqui estão minhas convenções de código que usamos, aqui estão todas as outras coisas que ajudam a pintar o quadro para qualquer pessoa projetando e construindo produtos digitais na empresa. Há muitos ingredientes diferentes para um sistema de design e geralmente eles tomam a forma de um par de coisas diferentes. Há os artefatos tangíveis de um sistema de design. Os componentes reais da interface do usuário que são o pão e manteiga de um sistema de design, bem como recursos de design, ícones e coisas assim. Mas há também as diretrizes gerais sobre como usar esses artefatos. Pense nisso como móveis Ikea. Você tem as partes reais da mobília Ikea que você jogou para fora na mesa e eventualmente montar no produto acabado. Mas sem um manual de instruções, vai ser difícil. Então, tecnicamente você pode fazê-lo com apenas um kit de peças, mas, ao mesmo tempo, esse manual de instruções ajuda a fornecer algum contexto e orientação sobre como colocar essas coisas cuidadosamente juntas para salvar seu cabelo e sua sanidade. Em quais ingredientes seu sistema de design inclui dependerá do que sua organização, que suas equipes precisam para projetar e construir produtos com sucesso. Então, seu sistema de design pode incluir coisas como princípios de design, tokens de design, diretrizes de UX, diretrizes de escrita, diretrizes de voz e tom, diretrizes desenvolvimento, os componentes de interface do usuário codificados reais, recursos de design como um kit de interface do usuário esboço, sistema de ícones, recursos internos e externos para outras coisas vinculando as melhores práticas em sites de recursos populares como a revista Smashing ou CSS-truques coisas como essa. Modelos de página, fluxos comuns e padrões de UX, diretrizes de marca. Há tantos ingredientes diferentes para um sistema de design e, novamente, quais ingredientes o seu sistema de design contém vai depender muito da sua organização e das necessidades das equipes. Não é surpresa por que tantas organizações estão investindo em sistemas de design porque oferecem uma tonelada de benefícios diferentes. Eles fornecem benefícios para o usuário final ao fornecer experiências mais consistentes e coesas. À medida que os usuários viajam de uma parte do site para outra ou de um produto para outro, eles são recebidos com uma experiência de sentimento muito semelhante e isso é importante por muitas razões diferentes, porque sempre que um usuário tem que reaprender um novo padrão de interface, digamos que eles encontram um seletor de datas em quatro seções diferentes de um site e cada vez que esse seletor de data é diferente, eles precisam reaprender. No entanto, um pouco, reaprenda as convenções de interface do usuário para selecionar uma data. Mas por ter um seletor de data fornecido pelo sistema de design, a cognição envolvida em tomar essa decisão, escolhendo essa data diminui o que lhes permite fazer o que precisam para ser feito mais rápido, que é claro que é bom para eles mas também bom para o negócio porque eles podem talvez fazer check-out mais rápido, reservar um voo ou reservar um hotel. Seja qual for a tarefa em mãos é bom para os resultados da empresa, bem como respeitar o tempo e a atenção do usuário. Enquanto os benefícios para os usuários são grandes, os benefícios reais de um sistema de design são principalmente internos. Eles são para o benefício das equipes realmente produzindo o trabalho. Os designers, os desenvolvedores, as pessoas de QA, as pessoas de produtos, todas essas pessoas se beneficiam muito de ter um sistema de design. O primeiro grande benefício de ter um sistema de design para uma equipe é que ele permite que eles lancem o trabalho mais rápido, e por que este é o caso, é porque historicamente tivemos que repetir um monte de trabalho redundante desnecessário. Temos uma unidade de herói para a nossa página inicial e temos estes três tauts ou estes três cards e cada vez que temos uma nova página que precisa desses componentes, heróis ou aqueles tensos, tivemos que reinventá-los de novo e de novo e de novo e de novo muitas vezes com detalhes de implementação sutis ou mesmo às vezes completamente diferentes. Então, em vez de ter que reinventar o componente da placa pela 15ª vez, a equipe poderia, em vez disso, pegar o componente da placa existente do sistema de design, conectá-lo e, em seguida, concentrar seus esforços em tarefas maiores e melhores. Os sistemas de design fornecem o benefício de lançar trabalhos de maior qualidade, porque novamente, eles não estão reinventando as coisas, reinventando a roda uma e outra vez, o que significa que eles podem, em vez disso, iterar sobre esses mesmos componentes da interface do usuário nesses mesmos padrões cozimento em melhor acessibilidade , flexibilidade, material responsivo, localização, animação, tudo isso significa que a qualidade do trabalho, a qualidade desses componentes da interface do usuário são elevados com cada novo iteração. Os sistemas de design fornecem um vocabulário compartilhado que ajuda a reunir diferentes disciplinas e diferentes equipes de produtos para que eles estejam todos na mesma página e todos falando o mesmo idioma. Então, em vez de o desenvolvedor chamar um componente de barra de utilitários, o designer está chamando de barra de administração, e a equipe de produtos chamando-o de barra cinza na parte superior, você é capaz de estabelecer um vocabulário comum para o que coisa é realmente chamada. Permitindo que as equipes pulem ter que ter uma reunião para discutir a nomenclatura para ter certeza de que estamos todos na mesma página. Os sistemas de projeto também facilitam o teste, permitindo que as equipes isolem um componente individual e o testem em relação às melhores práticas de design responsivo, práticas recomendadas de acessibilidade, práticas recomendadas de desempenho e assim por diante. Então, testando coisas no nível do componente e cozinhando essas práticas recomendadas no nível do componente, em qualquer lugar que esses componentes sejam incluídos, obterá automaticamente esses benefícios gratuitamente. Os sistemas de design e seus guias de estilo que acompanham também fornecem uma referência útil para equipes, designers e desenvolvedores se referirem ao trabalho diário. Quando você escolhe um acordeão versus abas? Você pode consultar seu guia de estilo para ver quando usar um componente ou outro ou o nome de um componente ou quais convenções você deseja usar. Ao ter esse recurso compartilhado para acessar, ele ajuda todos os fluxos de trabalho das equipes a serem mais suaves. Então, por último, um sistema de design fornece uma base amigável futura para construir nos próximos anos. Isto é uma grande coisa sobre sistemas de design, é que é muito fundamental. Você não vai resolver todos os problemas da sua organização e v1 do seu sistema de design. Mas o que ter um sistema de design permite é melhorar a iteração ao longo do tempo, estabelecendo convenções , estabelecendo componentes, e construindo sobre eles com o passar do tempo, a equipe e a qualidade do trabalho são capazes de subir e subir e para cima como o tempo passa. Mesmo se você fosse fazer um grande redesenho de toda a sua organização, identidade visual, paleta de cores , e tudo isso, você ainda vai ter botões, você ainda vai ter cartões, você ainda vai ter topografia e iconografia e coisas assim. Então, você não tem que jogar fora o bebê com a água do banho. Assim, o sistema de design pode permanecer à medida que sua linguagem de design em curso evolui. Obviamente, há tantos benefícios para projetar o sistema, então não é surpresa que tantas organizações estão investindo fortemente em seus próprios sistemas de design. Alguns exemplos famosos incluem Design de Materiais do Google, Sistema de Design de Carbono pela IBM e Heck até mesmo o Governo dos EUA tem um sistema de design para alimentar os mais de 30.000 sites produzidos pelo Governo Federal. Então, isso é apenas uma atualização rápida do que é um sistema de design e quais os benefícios que eles oferecem. Na próxima lição, vamos falar sobre como iniciar uma iniciativa bem-sucedida do sistema de design. 3. Começando uma iniciativa de sistema de design: Então, como diabos você começa uma iniciativa de sistema de design? Há tantas facetas diferentes para projetar o sistema que pode se tornar quase paralisante até mesmo começar. Descobri que um grande primeiro passo é apenas obter uma posição da terra do que seus produtos digitais são feitos. Qual é o DNA dos seus produtos digitais? Existem algumas ferramentas e táticas diferentes para arredondar todos os diferentes componentes e estilos de interface do usuário contidos em seus produtos digitais. O primeiro é um site chamado cssstats.com. O que o CSS STATS faz é imprimir todas as diferentes regras de estilo contidas na folha de estilo do seu site. Então, você pode ir para cssstats.com e simplesmente conectar seu URL ou para qualquer domínio de seus produtos digitais e apertar o botão ir e o que ele vai fazer é cuspir todas as suas regras de estilo. Então, se você olhar para esta página, você pode realmente conectar vários sites populares, vamos ficar com o Facebook por enquanto e o que ele vai fazer é que ele vai cuspir todas as regras de estilo que está no facebook.com, que como você pode Imagine que são muitos. Então, isso não só lhe dá todas as diferentes regras de estilo e seletores, mas também aponta todas as 85 cores únicas, incluindo o que parece 50 tons de cinza e diferentes sabores de azul do Facebook. O que isso faz é que isso dá às equipes a oportunidade de arredondar essas cores diferentes e começar a normalizá-las. Tenha conversas sobre o que deve estar lá e o que talvez deva ser modificado para reduzir esse número. mesmo acontece com cores de fundo, qual é a cor certa de vermelho para estados de erro ou verde para estados de sucesso? Novamente, qual o azul do Facebook é o azul certo do Facebook? Quais são as cores neutras em nossa paleta de cores? Quais são os diferentes tamanhos de fonte? Quais são as diferentes famílias de fontes e como podemos reduzi-las. Como todas essas famílias de fontes, as declarações são um sucesso de desempenho. Então, como reduzimos cuidadosamente esses números e todo o caminho. Então, esta é uma ótima ferramenta. Estamos apenas a obter um instantâneo do que as suas UIs são feitas e ajuda a equipa a facilitar uma conversa sobre quais propriedades de design devem permanecer e o que deve estar a acontecer. A próxima tática para conseguir uma posição da terra é conduzir o que eu chamo de inventário de interface. O que é um inventário de interface, é um exercício de captura de tela que, basicamente toda a equipe vai em uma caça ao ovo de Páscoa em todas as suas propriedades digitais, e ele arredonda e coleta e exibe toda a interface única padrões e coloca-os todos sob um mesmo teto. Vou percorrer os diferentes passos da realização de um inventário de interface. O primeiro passo é reunir todas as tropas, reunindo todos os diferentes membros da equipe que são responsáveis pelo sucesso do seu sistema de design. Este é um primeiro passo importante, porque às vezes um designer individual assumirá sobre si mesmos para sair e arredondar todos os estilos exclusivos de botão e componentes de cartão e coisas assim, mas não é muito útil isoladamente um dos principais benefícios dos sistemas de design é estabelecer esse vocabulário compartilhado. Assim, ter diferentes perspectivas na sala ajuda a galvanizar esta iniciativa do sistema de design e inicia esse vocabulário compartilhado entre os diferentes membros da equipe. Então, inclua designers e desenvolvedores e pessoas de controle de qualidade e gerentes de produto e gerentes de projeto e todas as pessoas responsáveis pelo sucesso de seus produtos digitais. Então, essencialmente um exercício de inventário de interface é realmente apenas captura de tela um monte de coisas. O segundo passo está se preparando para captura de tela. Eu gosto de ter certeza de que todos estão usando a mesma ferramenta para capturar capturas de tela. Digamos que este pode ser um modelo do PowerPoint ou um modelo de keynote ou Google Slides ou algum outro mecanismo que permite que a equipe para jogar todas as suas capturas de tela em um só lugar, que você possa combiná-los todos no final do exercício . Criei um modelo do Google Apresentações que você pode usar para iniciar seu próprio exercício de inventário de interface. Agora, para o evento principal. Etapa três é realmente captura de tela todos esses diferentes componentes distintos da interface do usuário. Então, a maneira que isso tende a funcionar é atribuir uma categoria diferente de componente de interface do usuário para um membro da equipe diferente. Então, quanto mais pessoas você tiver na sala, melhor, mais globos oculares você tem em suas propriedades digitais. Há um monte de categorias diferentes para captura de tela. Há componentes globais da interface do usuário, como cabeçalhos e rodapés diferentes. Então, alguma pessoa ou uma equipe de pessoas pode ser responsável por percorrer e capturar todos os diferentes tipos de cabeçalhos e rodapés e estados desses componentes em suas propriedades digitais. Outra equipe pode ser responsável por capturar diferentes tipos de imagem. Outras pessoas podem encontrar ícones, como ícones de botões de aumento diferentes ou ícones hambúrguer ou ícones de seta em suas diferentes propriedades digitais. Outras pessoas podem ser focadas na tipografia. Outras pessoas podem ser focadas em blocos, como heróis e cartas e coisas assim. Outra pessoa poderia estar em controles de formulário, como áreas texto, entradas de texto e botões de opção e caixas de seleção e coisas assim. Outra pessoa pode estar em serviço de botão. Você começa a idéia, mas a idéia é novamente ir longe e largo em todas as suas propriedades diferentes, às vezes mesmo incluindo suas propriedades nativas, em suas propriedades web, em propriedades de revestimento interno, em propriedades de revestimento externo. A idéia é que ele realmente rasteja para os cantos escuros de suas interfaces de usuário para capturar todos os diferentes componentes que tendem a aparecer. Eu achei este exercício para ser útil como um exercício cronometrado. Você poderia facilmente passar dias ou até semanas rastejando pelas selvas de suas UIs. Mas, por uma questão de tempo, é útil apenas obter uma foto do DNA de suas UIs. Descobri que uma hora ou duas é suficiente para obter uma pegada ampla o suficiente do que suas UIs são feitas. Depois de realizar o exercício de captura de tela, etapa quatro envolve apresentar suas descobertas. Então, cada membro da equipe que foi responsável por dizer que encontrar os botões vai até a frente da sala e apresentar o que eles encontraram. Esta é uma parte realmente útil do exercício, porque é aqui que todos são capazes experimentar a dor de todos esses componentes de botões diferentes em suas propriedades digitais diferentes. Também é aqui que o vocabulário compartilhado começa a surgir, certo? Diferentes membros da equipe ou disciplinas diferentes terão nomes diferentes para os mesmos componentes. Então, é nesta apresentação e discussão que as equipes capazes de começar a refletir sobre o nome desses componentes, por que esses componentes parecem um certo caminho ou se essa coisa ficar ou começar a ir. Tudo bem. Então, isso fornece uma conversa realmente útil para toda a equipe para ficar por trás da iniciativa do sistema de design e começa a antecipar todo o projeto do sistema de design que virá mais tarde. Em seguida, a última etapa de um inventário de interface é reagrupar e estabelecer as próximas etapas. É óbvio que só se pode fazer em algumas horas juntos. Então, a equipe de trabalho que está criando o sistema de design poderia então começar a pegar as descobertas desse exercício e descobrir como fazer a transição para o roteiro de sistemas de design. Uma das melhores coisas que você pode fazer no final do exercício de inventário de interface é encurralar todos os resultados desse exercício sob um mesmo teto, em um PDF gigante. Isso é realmente ótimo porque isso se torna uma ferramenta para ajudar a vender a iniciativa do sistema de design para o resto de suas equipes, bem como para as pessoas que controlam as finanças, certo? Você não precisa ser um designer para entender que ter 70 estilos exclusivos de botões é uma má idéia. Então, você pode literalmente soltar um PDF ou uma impressão do exercício de inventário de interface em sua mesa de CEOs e eles entenderão por que um sistema de design é necessário. Então, em resumo, um exercício de inventário de interface ajuda a apontar a inconsistência e obtém essa posição da terra do que suas UIs são realmente feitas. Ele aponta essas inconsistência para que a equipe do sistema de design possa começar a cortar e descobrir o que precisa ficar e o que precisa ir. É o começo desse vocabulário compartilhado entre os membros da equipe que será codificado no próprio sistema de design. Ele também ajuda a estabelecer qual será a forma do projeto do sistema de design, quais componentes da interface do usuário precisarão ser contidos no sistema de design e qual é sua prioridade geral? Há muitos fóruns, há muitas tabelas de dados, há muitos cartões, e coisas assim. Talvez isso possa ajudar a ter uma noção de qual deve ser a prioridade dos componentes. Então, uma vez que você obtém uma posição da terra do que suas UIs são feitas, é super tentador para designers e desenvolvedores simplesmente mergulhar nas ervas daninhas e começar a projetar e construir. Mas é importante não agir de acordo com esse instinto e, em vez disso, dar um passo atrás e falar com as pessoas para descobrir o que o sistema de design precisa fazer. Qualquer bom projeto de design começará com pesquisa e o mesmo se aplica a uma iniciativa do sistema de design. Quando tendemos a pensar em pesquisa de usuários, tendemos a pensar sobre as pessoas que estão usando nosso software. Enquanto isso é verdade e eles devem estar envolvidos em uma pesquisa de sistemas de design, os usuários reais de um sistema de design são os designers e os desenvolvedores, e as equipes reais construindo essas interfaces de usuário. Ao falar com essas pessoas, você é capaz de ter uma noção de quais trabalhos o sistema de design precisa fazer para ser bem sucedido na organização. Novamente, é por isso que é tão importante não apenas mergulhar na construção de componentes e projetar componentes porque honestamente você não sabe se esses componentes que você acaba projetando e construindo estão realmente indo para enfrentar os desafios organizacionais reais que os membros da equipe real estão enfrentando. Há um equívoco de que a pesquisa precisa ser coisa formal enorme, mas na verdade é falar com as pessoas. Então, você pode sentar um a um com diferentes membros da equipe, seja eles um designer, desenvolvedor, pessoa de controle de qualidade, gerente de projeto, proprietário do produto, e ter uma noção de como é seu fluxo de trabalho, quais partes de seu fluxo de trabalho eles não são exatamente feliz com, o que as coisas os frustram, o que eles gostariam de ver fora do sistema de design? Quais são as coisas que eles vêem como aspectos importantes do sucesso da iniciativa do sistema de design? Quais são as ameaças potenciais à iniciativa do sistema de design? Em outras palavras, o que vai afundar o navio se não acertarmos. Todas essas conversas ajudam a pintar o quadro dos trabalhos que o sistema de design precisa fazer para lidar com sucesso com frustrações das pessoas e levá-las a um melhor design e desenvolvimento de produtos. Depois de terminar sua pesquisa, você pode fazer a transição imediata para um workshop de lançamento formal para a iniciativa do sistema de design. Costumavamos cometer o erro de dar início a uma sessão sem fazer uma pesquisa primeiro. Essas sessões de lançamento acabaram se transformando nas vozes mais altas da sala, dominando o resto de todos, e deixando as coisas fora dos trilhos com projetos de animais de estimação de um monte de pessoas. Fazendo pesquisa primeiro e depois fazendo um workshop inicial, você pode usar a sessão inicial para reunir um amplo consenso para a iniciativa do sistema de design. Portanto, o workshop de lançamento envolve reunir todos os detentores da iniciativa do sistema de design em uma sala. A partir daqui, você pode apresentar os resultados de sua pesquisa. O que você tende a descobrir é que falando com um monte de pessoas, diferentes equipes vão emergir, certo? Talvez o fluxo de trabalho do designer e do desenvolvedor seja difícil e eles estejam em seus próprios silos. Talvez os desenvolvedores estejam frustrados com muitas pilhas de tecnologia concorrentes diferentes. Talvez os designers estejam usando para muitas ferramentas diferentes e torna-se difícil colaborar juntos. Todos esses insights diferentes ajudam a pintar o quadro do que o sistema de design precisa fazer. Então, nós tendemos a pegar esses aprendizados de nossa pesquisa e colocá-los nesses temas amplos. Nós tendemos a acabar com cerca de 12 a 20 temas para o sistema de design, resultados potenciais para a iniciativa do sistema de design. O que fazemos é pendurar esses temas na parede e, em seguida, todos os participantes votam sobre quais temas são mais importantes. De todos os resultados da iniciativa do sistema de design essas 10 a 20 coisas, quais são as coisas que ele realmente precisa pregar? Quais são as coisas que realmente precisam dar certo? O que fazemos é dar a todos três notas post-it e fazer com que todos votem sobre os três objetivos do resultado que consideram ser o mais importante. O que é ótimo neste processo é que ele é muito democrático. Você não tem que se preocupar com as pessoas mais extrovertidas ou mais bem pagas na sala enrolando a conversa e distraindo todo mundo. Todos votam sobre o que acham que é o resultado mais importante da iniciativa do sistema de design. No final deste exercício, você é capaz de dar um passo atrás e realmente ter um mapa de calor das prioridades do sistema de design, certo? Se essa coisa tivesse que fazer três coisas muito, muito bem, quais são essas três coisas? Certo? Qual é a dor e a frustração que este sistema de design precisa resolver? Não quer dizer que os outros objetivos ou resultados na iniciativa do sistema de design não são importantes ou que a equipe não vai abordá-los, é só que quando empurrar vem para empurrar com recursos de tempo limitado e dinheiro, Você tem que acertar algumas coisas. Você não vai ser capaz de cobrir tudo com igual prioridade. Então, ao realizar esta pesquisa e esses exercícios de lançamento, a equipe é mais capaz de entender o que é o sistema de design e quais trabalhos ele precisa fazer. Na próxima lição, vamos falar sobre como traduzir as aprendizagens desse exercício inicial na escolhade desse exercício inicial na escolha projetos-piloto para definir o seu sistema de design para o sucesso. 4. O projeto piloto: Então, você já conduziu um inventário de interface que lhe dá uma idéia do que suas UIs são feitas, e você realizou pesquisas e fez um exercício inicial que ajuda a ter um amplo senso das prioridades do sistema de design. Então, o próximo passo é realmente mergulhar e começar a construir o sistema de design. Pode ser tentador entrar e começar a construir componentes individuais, como botões e cartões, cabeçalhos e coisas assim. Mas um sistema de design verdadeiramente bem sucedido não é criado no vácuo. Ele está conectado aos produtos que serve, e essa é a importância dos projetos-piloto. Os projetos-piloto oferecem uma oportunidade para construir o sistema de design através da lente de software de trabalho real. É apenas usando projetos-piloto que somos capazes de realmente ser capaz dizer que o sistema de design pode realmente alimentar produtos de trabalho reais. Então, por exemplo, um projeto-piloto pode ser um redesenho da página inicial para o seu site ou pode estar redesenhando a tela do painel aqui ou pode estar redesenhando a página de perguntas freqüentes ou algo assim. Essas fatias de produtos dão a você a oportunidade de estabelecer todos os componentes que são necessários para construir essas telas. Então, como você escolhe com quais projetos-piloto iniciar sua iniciativa de sistema de design? Há muitos critérios diferentes envolvidos na escolha de um projeto-piloto e um dos principais é onde esse projeto está em seu roteiro. Se o trabalho de concepção e desenvolvimento já aconteceu e eles são iniciados, esse navio provavelmente já está navegado. Então, você quer estar neste ponto ideal onde você sabe que o projeto está acontecendo e a equipe está planejando construir este projeto como um redesenho de página inicial ou algo assim, mas eles realmente não começaram o design e ainda, isso se torna uma oportunidade para a equipe do sistema de design para se agarrar a esse projeto e ajudar a criar esse projeto, bem como os componentes do sistema de design nascente. Há muitos outros critérios envolvidos na escolha de projetos-piloto e meu amigo e colega Dan Moll escreveu um ótimo post explicando esses diferentes critérios. Alguns desses critérios incluem o potencial para componentes comuns. Então, falamos sobre a realização um inventário de interface que lhe dá uma idéia melhor do que seus produtos Uls são feitos e então você quer que o projeto-piloto seja capaz de pegar algumas dessas caixas. Se o inventário de interface mostrou que sua organização tem cargas e cargas de formulários e tabelas de dados, então você provavelmente deseja ter um projeto piloto que lhe dará a oportunidade de criar componentes de formulário e componentes de tabela de dados . O âmbito do projecto-piloto também é muito importante. Você não quer redesenhar o site inteiro como um projeto-piloto, isso é muito grande. Você quer algo que você possa colocar suas mãos em torno de e completar em algumas semanas ou alguns meses. Você também quer ter certeza de que é possível do ponto de vista técnico. Você não quer ter que morder uma nova plataforma de CMS inteira ou atualizar para uma estrutura totalmente nova como um projeto piloto que pode ser um pouco pesado demais para superar nestes primeiros dias do sistema de design. Você também quer pensar sobre o potencial de marketing para o seu projeto piloto. Isso é algo um projeto que você poderia realizar no final deste processo para o resto da organização? todos olhem para ele e digam “Hooh, eu quero fazer isso também”? Juntamente com isso está a idéia de ter um campeão disponível, certo? A equipe de produtos com a qual você está trabalhando, você quer que eles estejam de acordo com o conceito de um sistema de design porque eles podem se tornar uma líder de torcida e um evangelista para o resto da organização. Neste início do sistema de design, você precisa ter pessoas a bordo conosco e pessoas que são capazes de rolar com os socos, porque nos primeiros dias do sistema de design, você está lentamente construindo o avião como Você está voando. Então, você precisa de pessoas dispostas a vir nessa jornada com você. Você não quer fazer parceria com o mais cético difícil trabalhar com as pessoas para seus projetos-piloto iniciais. Então, novamente, escolher projetos-piloto ajuda a conectar o sistema de design ao software de trabalho real e isso é absolutamente crítico para o sucesso do seu sistema de design. Então, uma vez que você tenha seus projetos piloto escolhidos, agora você pode começar a trabalhar e realmente construir seu sistema de design, que nos leva à metodologia de projeto atômico. 5. Metodologia Atomic Design: O coração e a alma de um excelente sistema de design é um conjunto de componentes reutilizáveis, flexíveis e resilientes. A maioria das pessoas entende a importância de um projeto orientado por componentes no processo de desenvolvimento. Mas como exatamente você chega a esses componentes específicos que estarão contidos em seu sistema de design? Entre no projeto atômico. O design atômico é uma metodologia para pensar em UI como um conjunto pensativo, hierárquico e interligado de componentes que constroem telas reais. A fim de entender o design atômico, vamos fazer um desvio rápido de volta para a sua aula de química do ensino médio. Toda a matéria no universo é composta por um conjunto finito de elementos atômicos; hidrogênio, carbono, ferro e coisas assim. Estes átomos combinam-se para formar moléculas e , finalmente, estruturas mais complexas para criar toda a complexidade em nosso mundo e em nosso universo. É um conceito incrivelmente poderoso. Como acontece, podemos aplicar esse mesmo conceito às nossas interfaces. No mundo do design da interface do usuário, qualquer interface do usuário pode ser dividida em um conjunto finito de elementos atômicos. Coisas como rótulos, entradas e botões. Todos esses outros elementos que não podem ser divididos mais, servem como a base, os blocos básicos de construção de nossas IU. Mas o design atômico é mais do que apenas átomos. Na verdade, há cinco estágios discretos do projeto atômico. Há átomos, moléculas, organismos, modelos e páginas. Vamos passar por cada estágio. Como acabamos de mencionar, os átomos são os blocos de construção básicos da nossa interface do usuário. Então, coisas como rótulos, entradas, botões, topografia, cabeçalhos, imagens e outras coisas, eles servem como nossa matéria-prima. Mas é abstrato por si só para ver um monte de botões ou rótulos flutuando em torno do abstrato. Então, no próximo estágio, no estágio da molécula, pegamos esses elementos atômicos e os combinamos juntos. Assim, por exemplo, um rótulo, uma entrada e um botão podem se unir para formar um único formulário de pesquisa de campo ou um formulário de inscrição de boletim informativo. Agora, de repente, esses átomos têm um propósito, certo? Esse rótulo está definindo essa entrada, clicando nesse botão enviará esse formulário. Então, agora você tem este bom componente encapsulado que você pode soltar em qualquer lugar que você precisa do formulário de campo único. Um organismo é um componente mais complexo que compreende moléculas menores. Assim, um organismo de cabeçalho, por exemplo, pode ser composto de um logotipo átomo, uma molécula de navegação primária, e uma busca por uma molécula. Todas essas coisas se unem sob um mesmo teto para formar esse pedaço discreto de interface do usuário. Subindo para o estágio de modelo, o que fazemos lá, é pegar nossos organismos e combiná-los e deixar tudo em um layout de página. Então, aqui você está começando a ver uma página inteira tomar forma. Mas é importante enfatizar que, no nível do modelo, estamos realmente definindo o andaime de conteúdo ou o sistema esquelético de uma página em vez do produto final ou da saída final. No estágio de página, podemos pegar esse andaime de conteúdo ou esse sistema esquelético e seguida, colocar conteúdo e dados representativos reais nele. Agora, o estágio de página é super importante porque obviamente é com isso que seus usuários finais vão ver e interagir. Eles vão ver sua página inicial com imagens reais e apelos à ação reais e manchetes reais envolvidos neles. Mas também é no estágio de página que somos capazes de testar a resiliência do sistema de design subjacente. Nós somos capazes de ver se um tipo específico de imagem é derramado em uma unidade de herói, essa unidade de herói se levanta? Certo. E se for uma imagem de montanhas, é agradável e pacífica, e há muito espaço em branco e há algum texto sobrepondo aquelas montanhas? Isso pode ser bom e fácil de ler esse texto. E se substituirmos a imagem das montanhas por um grupo barulhento de pessoas? Agora pode ser muito mais difícil ler o texto que está sentado em cima dessa imagem. Então, ele está jogando fora cenários de produtos reais que nós somos capazes de chegar a soluções robustas para os componentes subjacentes. Também é no estágio de página que podemos reproduzir diferentes cenários de um modelo. Assim, por exemplo, você pode fazer login em um painel de seu aplicativo da Web e, para um novo usuário, ele pode querer ver algo diferente. Convém apresentar um tutorial ou uma mensagem de alerta a um novo usuário que os usuários veteranos talvez não vejam. Seu sistema de design precisa ser capaz de lidar com esse cenário real. Então, é nesta fase de página que somos capazes de jogar fora cenários de produtos reais que irão informar e influenciar o sistema subjacente. Então, o design atômico poderia ser aplicado a qualquer interface de usuário. Seja um site ou um aplicativo nativo ou um software nativo como Sketch ou o Photoshop ou até mesmo o quiosque de caixa eletrônico do seu banco ou qualquer coisa assim. Então, vamos aplicar design atômico a um aplicativo com o qual muitas pessoas estão familiarizadas, Instagram. Então, Instagram, como todos sabemos, é um aplicativo de compartilhamento de fotos, e se aplicarmos design atômico a essa interface, e explodirmos a experiência do aplicativo Instagram em seus elementos atômicos, ficamos essencialmente com um punhado de botões de ícone, um punhado de textos átomos, e um para a foto real em si. No nível da molécula, você pode ver esses elementos atômicos se juntam para formar algumas peças utilizáveis da interface. Mas realmente no nível do organismo é onde as coisas, a carne e as batatas da experiência do Instagram se unem. Porque é aqui onde o organismo fotográfico que inclui todos os metadados do usuário, a foto em si, bem como as ações e comentários para a foto onde tudo o que vem junto. Claro, este organismo fotográfico é a coisa que está empilhada um em cima do outro e nós percorremos para o infinito, certo? Então, pudemos ver que se juntam no nível do modelo, que é um modelo bastante simples só porque é um aplicativo móvel. Então, são apenas essas coisas empilhadas uma em cima da outra. Então, no nível da página, é onde podemos levar nosso sistema de design e realmente despejar conteúdo representativo real nesse modelo. Então, é nesta fase que somos capazes de testar todas as diferentes variações, todos os cenários de produtos reais que vamos encontrar como uma equipe de design. Então, por exemplo, o que acontece se seu identificador de usuário tiver 10 caracteres? Como é que isso funciona? Mas o que acontece se alguém tentar inserir um identificador de usuário com 50 caracteres? O que acontece então? Será que se encaixa em duas linhas, você tem uma conversa com a equipe de backend para limitar o número, o comprimento das contas de usuário? O que acontece se uma foto tiver zero gostar dela? O que acontece se na foto tem 100 milhões de gostos? O que acontece se não houver comentários? O que acontece se houver 14 camadas de comentários aninhados nele? O que acontece se a foto for um quadrado, uma paisagem ou um retrato ou uma apresentação de slides ou um bumerangue? Todos estes são cenários de produtos reais que a equipe de design e desenvolvimento do Instagram precisa atender. Para outro exemplo, vamos dar uma olhada no Facebook. Então, anteriormente, falamos sobre como você poderia aplicar design atômico a qualquer interface de usuário. Uma interface com a qual todos estamos familiarizados, é o Facebook. Então, o que vamos fazer, é pegar a interface do Facebook e literalmente cortá-la em pedaços. Isso é chamado de exercício de corte do componente, documentado pela web designer Charlotte Jackson. Então, o que estamos olhando aqui, é o estágio de página de projetos atômicos, certo. Estamos olhando para uma instância específica de uma interface de usuário com dados reais derramados dentro dela. Então, a primeira coisa que vamos fazer, é desconstruir esta página em seus organismos menores. Estamos pulando sobre o estágio de modelo só porque no modelo é essencialmente esta tela apenas com alguns dos dados abstraídos, certo. Em vez dessas pessoas específicas neste blocos de perfil e essas histórias específicas no meu feed, seria essencialmente apenas acinzentado tipo de dados de detentor de lugar. Então, já que não podemos articular isso no papel, vamos pular direto para extrair nossos organismos desta página. Então, o que eu vou fazer, é começar a trabalhar. Tudo bem. Então, o que nós fizemos, é que nós cortamos isso em pedaços de componentes menores nesses organismos mais amplos. Então, vale a pena salientar que os organismos também podem conter outros organismos. Então, digamos que os organismos da barra lateral, por exemplo, ainda contém algumas peças bastante complexas de interface do usuário como a parte da história e o convite deste evento em nossas páginas em nosso anúncio aqui. Então, o que poderíamos fazer, é pegar esse organismo e quebrá-lo ainda mais. Então, vamos em frente e fazer isso. Tudo bem. Então, agora, nós temos organismos ainda menores, mas eles ainda são organismos. Então, agora, a partir daqui, podemos pegar um organismo específico e realmente começar a extrair nossas moléculas dele. Então, eu vou escolher o organismo das histórias e realmente desconstruir isso ainda mais. Então, vamos em frente e fazer isso. Então, agora, nós desconstruímos o organismo das histórias e o explodimos em alguns componentes menores. Então, você verá que temos alguns botões pendurados no canto superior direito, temos um título para este quarteirão aqui em cima. Vamos deixar isso em paz por enquanto. Na parte inferior, temos este botão para ver mais de seus amigos. Mas o que eu vou fazer é, eu vou me concentrar neste componente específico aqui. Então, podemos chamar isso de molécula de perfil, ou poderíamos chamá-lo de bloco de mídia, que é um nome mais genérico para esse componente específico. Mas essencialmente, o que estamos vendo é uma imagem à esquerda e um nome ou um título de algum tipo e alguns metadados abaixo dela. Esta é uma peça muito importante do quebra-cabeça UI do Facebook. Você pode ver que temos nossa lista de contatos aqui usando algum sabor deste mesmo componente. Nós temos usado aqui, nós temos isso pendurado em nosso cabeçalho aqui em cima, nós temos aqui em nossa barra lateral, e ele é usado um monte de lugares diferentes em seu site. Então, você pode ver como é importante ser capaz de abordar este componente porque ele é enganosamente simples. Se olharmos para ele e considerarmos que existem 2,2 bilhões de usuários, este componente aqui tem que fazer muito trabalho pesado. Então, estamos falando de nomes de todas as formas e tamanhos, diferentes idiomas, diferentes direções de leitura, coisas como árabe ou mandarim ou alemão ou outras coisas que tendem a não seguir o estilo ocidental da escrita. É muito importante para esta parte da interface do usuário ser capaz de lidar com todos esses cenários diferentes. Eu não invejo sua equipe no mínimo por isso porque esta é uma peça enganosamente complexa de IU. Então, agora que temos nosso componente de bloco de mídia ou uma molécula de bloco de mídia ou uma molécula de perfil, o que quisermos chamar isso, podemos agora até desconstruir isso ainda mais. Então, o que eu vou fazer é cortar isso em seus pedaços atômicos. Então, nós desconstruímos nossa molécula de bloco de mídia ou nossa molécula de perfil para baixo em seus elementos atômicos. Então, temos este ícone de imagem circular reutilizável que estamos usando em todo o site do Facebook. Estamos usando este átomo de título que é usado para exibir nomes de pessoas, mas também chamadas à ação, bem como muitas, muitas outras coisas em todo o site, bem como este tratamento geral para algo que vamos chamar metadados, ou é algo que é um pouco mais sutil. É para indicar um carimbo de data/hora, ou aqui, é um pouco de um texto de descrição. Mas você pode ver que mesmo neste nível de átomo, há muito trabalho acontecendo aqui. Então, o que acontece se foto do perfil de um usuário for cortada estranhamente e ela cortar parte da cabeça, ou o que acontece se eles não tiverem uma imagem de perfil? Qual é a coisa padrão? E se quisermos usar algum tipo de ícone ou imagem diferente para isso? Tudo isso, mesmo no nível do átomo, há tanta complexidade acontecendo aqui. Mas o espírito disso é, controlando tudo isso neste nível de átomo, sendo capaz de resolver problemas muito complexos e difíceis no nível atômico, sempre que essas coisas se juntam para formar essas moléculas e depois se juntam mais para formar esses organismos, então se reúnem para eventualmente formar essas telas finais, todas essas melhores práticas que acontecem todo o caminho no nível atômico bolham e se expandem em toda a interface do usuário como um inteiro. Então, o Atomic Design pode ajudar as equipes a pegar esses grandes espinhosos problemas de interface do usuário, na verdade dividi-los em pedaços menores e mais digeríveis, permitindo que eles projetem e construam coisas de forma mais sistemática e , em seguida, construam esses componentes até formar produtos muito flexíveis e resilientes. Pensar em sistemas de design de interface do usuário através da lente do Atomic Design oferece muitos benefícios. O primeiro e maior que tenho repetido ao longo desta lição é que é tão incrivelmente importante conectar design e desenvolvimento de produtos com design e desenvolvimento de sistemas. O Design Atômico fornece uma ponte entre esses mundos porque não apenas os componentes que vivem em um vácuo para o lado em uma abstração e, em seguida, seus produtos vivem em outro lugar, é tudo isso alimentando-se uns aos outros. O design e o desenvolvimento do sistema informarão e influenciarão os produtos que saem do outro lado, e os próprios produtos informarão e influenciarão o sistema. Então, por exemplo, você pode ter uma página inicial de marketing que tem alguns cartões, uma unidade de herói, e coisas assim, e então, você pode ter outro produto que usa cartões de outra maneira diferente, ainda usando a mesma molécula de cartão ou organismo, mas está sendo aplicado a diferentes produtos para diferentes fins. Aplicar o projeto atômico ao fluxo de trabalho do seu sistema de design permite você construa o todo e as partes desse todo ao mesmo tempo. Você não desenha um carro começando com a calota ou uma porca e, em seguida, construindo a partir daí, ele começa a partir de uma imagem inteira, coesa do que esse carro será, e você chegará às partes que compreendem aquele carro ao mesmo tempo. Outra vantagem Atomic Design oferece é, ele fornece uma separação clara entre a estrutura de seus componentes de interface do usuário e o conteúdo que vive dentro deles. Então, por exemplo, você pode ter um componente de cartão reutilizável. Em uma instância, esse componente de cartão pode abrigar um monte de dados de produto. Em outra instância, ele pode conter um monte de dados de eventos. Ao criar essa separação clara entre uma estrutura de componente e o conteúdo dentro dela, você pode criar componentes de interface de usuário mais reutilizáveis, agnósticos e flexíveis. Outra coisa que o Atomic Design fornece é uma linguagem comum para pensar sobre componentes como uma hierarquia. Termos como componente e módulo e elemento são um pouco abstratos demais, e não há sentido de hierarquia implícita aqui. Mas termos como átomos, moléculas e organismos contêm esse senso de hierarquia, onde os átomos são incluídos em moléculas e moléculas estão incluídas dentro dos organismos. Agora, se você encontrar sua equipe tropeçando nos termos átomos, moléculas e organismos, não é grande coisa. Atualize seu idioma e sua nomenclatura para algo que faça sentido e ajude todos a embarcar com esses conceitos. Você é capaz de praticar o Design Atômico sem usar os termos átomos, moléculas e organismos. A equipe da GE que trabalha no Sistema de Design Predix decidiu adotar a metodologia de Design Atômico e ajustar o vocabulário e adicionar alguns passos extras. Isso ajudou a fazê-los passar por toda a iniciativa do sistema de design. Então, agora, nós cobrimos o que é o Design Atômico. É um modelo mental para pensar em nossas UIs como um conjunto hierárquico e interconectado de componentes que ajuda a construir telas de produtos reais. Mas como aplicamos o Design Atômico no mundo real? Na próxima lição, vamos falar sobre como designers e desenvolvedores podem trabalhar com o Atomic Design em seus fluxos de trabalho. 6. Ferramentas de trabalho: Então, no seu núcleo, o Design Atômico é apenas um modelo mental. Então, como designers e desenvolvedores realmente aplicam esse modelo mental ao seu fluxo de trabalho? forma como você aplica o design atômico ao seu fluxo dependerá do papel que você desempenha em uma iniciativa de sistema de design. Os designers tendem a trabalhar em ferramentas como Sketch ou Envision Studio ou Figma ou Adobe XD ou outros ambientes de design estático. Felizmente, essas ferramentas evoluíram ao longo dos últimos anos para incluir coisas como símbolos e componentes que podem ser aninhados um no outro. Então, somos capazes de realizar o Design Atômico nessas ferramentas de design estático. Então, em um esboço de ferramenta, somos capazes de definir nossos átomos, definir nossas moléculas, e também definir que nossos organismos são componentes mais complexos, e o que somos capazes de fazer com isso agora é fazer uma conexão entre esses átomos, moléculas e organismos. Então, por exemplo, se quiséssemos mudar, digamos que o raio da borda de nossos botões, eu poderia vir aqui atualizar nosso valor de raio de fronteira e pressionar “Salvar”, e o que eu sou capaz de fazer é ver como fazer essa mudança afetou nosso componente teaser que está usando nosso átomo de botão, e você pode ver que essas bordas estão agora arredondadas, e então se entrarmos em nossos organismos que estão fazendo uma lista de teaser que é uma coleção de elementos teaser, nós somos capazes de ver esses botões atualizados como Bem. Então, tudo o que quer dizer, você é capaz de criar este sistema interligado de componentes desses símbolos e fazer mudanças em um só lugar e fazer essas mudanças se espalharem para qualquer lugar que esse componente esteja incluído. Assim, enquanto os designers estão usando ferramentas como Sketch e Figma e Adobe XD e Envision Studio, os desenvolvedores tendem a criar componentes em um tipo diferente de ambiente. Eu costumo chamar isso de ambiente de workshop front-end, e o que um ambiente de workshop front-end é um lugar onde você pode definir componentes e colocar os dados dinâmicos reais nesses componentes sem necessariamente ter que conectá-lo para o aplicativo em funcionamento real. Há um monte de ferramentas diferentes lá fora que fornecem esses ambientes de workshop front-end. Nós reunimos uma coleção dessas ferramentas de workshop front-end em um site chamado StyleGuides.io, que é uma coleção de recursos sobre sistemas de design. Há um monte de ambientes de workshop front-end lá fora que são bastante populares, incluindo livros de histórias, laboratório de padrões, fractal, visualização DS e muito mais. O que vamos fazer é mostrar uma demonstração do uso de laboratório de padrões para criar um sistema de design componentes e projetos-piloto telas. Então, o que fizemos foi criar um site fictício de e-commerce no laboratório de padrões. Então você pode ver que a página inicial aqui tem algumas fotos de perto de sapatos com algumas imagens promocionais e um rodapé e todas essas coisas boas, e então podemos clicar em nossas categorias de produtos para ver sapatos femininos e homens sapatos e sapatos infantis e, em seguida, podemos clicar em uma página de detalhes do produto que mostra o produto específico que um usuário deseja comprar, toda a experiência do cartão de compras e fluxo de trabalho de finalização da compra. Então, este é um ótimo exemplo de um site que tem muita coisa acontecendo com ele. Temos mais coisas de marketing. Temos páginas de detalhes de produtos mais utilitários e, claro, alguns fóruns para os usuários consultarem. Então, tudo isso é criado com 100 sistema de design mentiroso, e o que laboratório de padrões nos permite fazer, é visualizar os sistemas de design componentes subjacentes. Então, pulando para a página de índice, você é capaz de ver todas as peças subatômicas como nossa paleta de cores da marca e são cores neutras e utilitárias, bem como nossa topografia e tamanhos de fonte e cabeçalhos e outras coisas como essa, e à medida que percorremos aqui você verá coisas como ícones em diferentes tipos de imagem e blocos diferentes como nossa unidade de herói e bloco promocional que entraremos em um pouco. Mas você pode ver todos os átomos, moléculas e organismos subjacentes desnudados para que a equipe seja capaz de ter conversas sobre eles. Então, o legal é que somos capazes de usar o laboratório de padrões para atravessar esses diferentes padrões. Estes átomos, moléculas, organismos, modelos e páginas. Então, por exemplo, somos capazes de ampliar um átomo individual que nos ajuda a ter uma conversa sobre esse componente específico da interface do usuário. Então, este é um lugar útil onde designers e desenvolvedores são capazes de se reunir para falar sobre quais dimensões essas imagens de produto serão. Então, você pode ver que esta é uma imagem de 600 por 400. Mas, novamente, como falamos sobre esses átomos não são muito úteis por conta própria. Então, o que somos capazes de fazer é usar o recurso de linhagem de laboratórios de padrões para mostrar onde esse padrão realmente se acostumar. Então, ele diz que a Stack Block Image é usado em nossa molécula Stacked Block. Então, podemos clicar aqui, e na verdade agora ver este componente bloco empilhado que é um cartão de produto ou algo onde poderíamos colocar informações sobre o produto, mas também talvez algumas outras informações na estrada. Então, a partir daqui, somos capazes de dizer que temos o cartão de bloco empilhado, onde isso é usado? E ele diz que isso está incluído em nossa lista de blocos de pilha que é uma lista desses componentes que todos se juntam para formar essa grade que pode ser usado para algo como uma classe de produto ou algo assim. Agora, a partir daqui, podemos dizer que as listas de blocos de pilha estão incluídas nestes padrões a seguir até o modelo de categoria. Então, agora, nós somos capazes de ver este tipo de produto começar a ganhar vida. Podemos ver que essas listas de bloqueios empilhadas começam a ser aplicadas a algo muito específico. Agora, a partir daqui, se olharmos para onde este modelo está sendo usado, está dizendo que estamos usando para nossa categoria de crianças ou categoria masculina e assim por diante e assim por diante. Então, se eu clicar em uma página específica, seremos capazes de visualizar como esse modelo se parece com dados de sapato masculinos derramados nele. Então, novamente este é um cenário de produtos reais. Esta empresa precisa vender sapatos masculinos e esta IU está conseguindo isso. Mas também podemos navegar para diferentes áreas que estão usando exatamente o mesmo modelo, mas despejando conteúdo diferente dentro desses modelos de interface do usuário. Então, se você é um designer usando símbolos aninhados são componentes em um esboço ou sigma, ou você é um desenvolvedor usando uma ferramenta como laboratório de padrões ou livro de histórias para aninhar componentes dentro um do outro em código, você está construindo este conjunto de componentes interligados e interdependentes para construir telas reais, e essas telas serão ditadas por seus projetos-piloto. Se o show está construindo uma nova página inicial, então ótimo que vai fornecer-lhe a oportunidade de criar um componente herói e alguns componentes de cartão em seu cabeçalho, em seu rodapé e coisas assim. Se você é o show está redesenhando o fluxo de check-out que vai lhe dar alguns campos de formulário e algumas outras coisas. Então, a idéia é que estamos usando esses projetos-piloto para projetar e construir todos os componentes que acabarão por alimentar esses produtos. Usando um ambiente de workshop de front-end e usando as ferramentas de design estático e eles são componentes aninhados, você é capaz de realizar sistemas de projeto atômico bem ali estão todos sob o mesmo teto. Então, esse processo pode ser usado para construir seu sistema de design inicial, mas uma das coisas cruciais sobre um sistema de design é certificar-se de que ele resiste ao teste do tempo. Como você define seu sistema de design não para o sucesso a longo prazo e lida não apenas com os cenários atuais de seus produtos, mas também com os resultados futuros de seus produtos. Na próxima lição, vamos cobrir como fazer isso. 7. Usando seu sistema para trabalhos futuros: Assim, construir um sistema de design através da lente de um punhado de projetos-piloto é uma ótima maneira de estabelecer um conjunto de componentes reutilizáveis e flexíveis que poderiam ajudar a construir produtos reais. Mas os projetos-piloto são exatamente isso. Eles são pilotos. Eles não abordarão todos os cenários que sua organização vai encontrar. Às vezes, você vai se encontrar procurando por um componente, conectando-o, e descobrindo que ele leva talvez 90 por cento do caminho até lá. Mas, a fim de realizar algo, você precisa desses 10 por cento extras para que ele realmente funcione corretamente. Então, o que vamos fazer é falar sobre o trabalho contínuo do produto e como incorporar isso com a evolução contínua do seu sistema de design. Então, vamos voltar para a nossa hipotética empresa de sapatos. Digamos que o chefe sempre foi um pouco relutante em oferecer coisas que estavam à venda. Então, tudo o que vemos na nossa demonstração é um item de preço total, certo? Então nossa categoria masculina, nossa categoria feminina, nossa categoria de crianças não tem nada além de itens de preço total. Mas os tempos mudaram. E digamos que, essa estratégia não estava funcionando, então, relutantemente, o chefe aparece, e ele diz, “Ok. Temos que incluir uma seção de vendas em nosso site agora.” Então, como é que isso funciona? Porque isso realmente envolve atualizar nossa interface do usuário para abordar esse novo cenário de negócios. Então, o que precisamos fazer é atualizar nossa navegação para incluir uma seção de vendas. E nós poderíamos atualizar nossa página inicial e incluir uma nova seção abaixo de nossos principais itens promocionais, com essa seção de tout “On Sale”. Então também podemos clicar em nossa página de categoria de venda, que é exatamente a mesma página de categoria que as categorias de mulheres, homens e crianças, mas temos algumas diferenças de interface do usuário que se tornam claras. Então, nós temos uma mudança para o nosso padrão de blocos empilhados onde estamos incluindo e adicionando esta pequena bandeira de venda no canto superior direito do nosso componente e nós também temos esta atualização para o nosso preço. Que você pode ver o preço original nocauteado, eo novo preço de venda aparecendo em seu lugar. Então, o legal é que ainda somos capazes reutilizar os bits principais deste componente, mas vamos criar uma variação desse componente que nos permite abordar este cenário de vendas. Então, você verá que em nossa biblioteca de padrões, agora temos um bloco empilhado. E então fazemos uma variação desse padrão, escrevendo um pouco de HTML e um pouco de CSS, e fazendo essas alterações para abordar esse cenário. Agora, este bloco empilhado poderia lidar não apenas com produtos normais, mas também produtos de venda. O resultado é um componente mais resistente, um componente mais flexível que é capaz de viajar para mais lugares em todo o site. Então - isso é ótimo - com apenas alguns ajustes em um componente, somos capazes de abordar um novo cenário de produto. Isto é o que Yesenia Perez-Cruz chama de Sistemas de Design Orientados por Cenários. O negócio tem um problema, tem um objetivo, que eles estão tentando alcançar, e o sistema de design precisa ajudar a atingir esses objetivos. Então, é através da lente do trabalho contínuo do produto que o sistema se torna mais forte e flexível ao longo do tempo. Vamos usar outro exemplo de um guia de presentes de férias. O chefe entra e diz: “É quase hora de férias. Esta é uma época importante do ano para nós. Fazemos muito da nossa receita. Mas, sejamos honestos, nossas páginas de categoria atuais não são tão brilhantes quanto gostaríamos que fossem.” Então, o que queremos fazer é resolver isso. Então, se você olhar para nossas páginas de categoria de produtos existentes, é possível criar um guia de presentes de feriado como o título e, em seguida apresentar os diferentes produtos que estarão à venda para os feriados. Mas poderíamos fazer algo melhor. Como temos esses componentes reutilizáveis - alguns dos quais estão em nossa página inicial - que são maiores e splashier, talvez pudéssemos reutilizar alguns desses componentes para criar uma seção de guia de presentes de férias mais elegante e elegante. Então, o que vamos fazer é pegar esse componente herói, e vamos conectá-lo acima de nossa grade de produtos. E vamos chegar a um novo design, usando componentes existentes em nosso sistema de design. Então, isso é realmente, muito poderoso porque isso nos permite misturar e combinar componentes existentes para alcançar uma experiência totalmente nova, tudo em questão de minutos. Historicamente, criar algo como um guia de presentes de férias levaria semanas ou talvez até meses para ser realizado. Mas uma vez que você tem um conjunto de componentes reutilizáveis, flexíveis e resilientes que você poderia reorganizar de várias maneiras diferentes, você poderia literalmente conectar essas coisas em questão de minutos. Isso é um grande ganho para toda a equipe. Agora, é claro, isso não quer dizer que, “É tão fácil que tudo o que precisamos fazer é arrastar e soltar alguns componentes lá e ir almoçar mais cedo.” Ainda há, obviamente, um monte de trabalho duro de design de produto que precisa acontecer. Mas aqui está a coisa. Agora, que os designers e desenvolvedores não precisam reconstruir os componentes do herói a partir do zero cada vez, eles são capazes de se concentrar em problemas maiores e melhores. Talvez seja sobre traduzir esse componente de herói em duas línguas diferentes, talvez esteja obtendo obras de arte diferentes ou talvez seja sobre passar mais tempo brincando com animação ou outras coisas, certo? Esta é uma oportunidade para liberar designers e desenvolvedores para um trabalho mais valioso. Ao conectar seu trabalho contínuo de design de produto com a evolução do seu sistema de design, cada iteração sobre os componentes do seu sistema de design resulta em um sistema mais resistente, mais flexível, resiliente e mais poderoso. É um conceito incrivelmente poderoso. 8. Considerações finais: Então é isso. Você chegou ao fim do curso. Esperemos que agora você entenda como os sistemas de design ajudam a alimentar produtos reais e como você poderia usar a metodologia de design atômico em seus fluxos de trabalho de design e desenvolvimento para criar seu sistema de design inicial, mas também para ajudar a orientar os esforços contínuos do sistema projetados. Eu adoraria ouvir como você está usando o design atômico em seu próprio fluxo de trabalho, e eu também gostaria de saber se você está ficando preso ou frustrado ou preso em qualquer parte de sua iniciativa de sistema de design. Portanto, sinta-se à vontade para entrar na seção de discussão abaixo e manter a conversa em andamento. Muito obrigado por se juntar a mim nesta aula, e eu realmente espero que isso ajude você em sua própria jornada do sistema de sinais. 9. Explore mais cursos no Skillshare: [ MUSIC]