Design digital: criando sistemas de design para um design mais fácil, rápido e melhor

1. Vamos começar!: Sou Dan Mall, designer e diretor criativo e fundador e diretor de design colaborativo SuperFriendly na Filadélfia. A aula de hoje é sobre sistemas de design, como criá-los, como trabalhar com eles e como colocar todos os seus colegas a bordo. Um sistema de design é uma ferramenta para ajudá-lo a se tornar mais eficiente e eficaz em seu trabalho. Deve ajudar você a se mover mais rápido. Deve ajudar-te a trabalhar melhor com outras pessoas, e honestamente, devias divertir-te mais. Uma coisa que vejo designers e desenvolvedores fazendo e outra vez é apenas reinventar a roda. Quantas vezes você quer projetar esse botão ou aquela forma, ou apenas as coisas que estão realmente secas sobre um projeto. Vamos tirar essas coisas do caminho. Um sistema de design deve cuidar dessas coisas, que você possa ser libertado para fazer todas as coisas divertidas que você normalmente não tem tempo para fazer, mas você realmente quer fazer o contrário. Depois de fazer esta aula, você terá todo o conhecimento e as ferramentas necessárias para poder trabalhar com um sistema de design, criar o seu próprio e trabalhar com outras pessoas. Meu objetivo para você é fazer você pensar mais e mais sobre sistemas de design, experimentando um, e então realmente usando um em seu projeto. Nenhuma boa aula é completa sem dever de casa, então vou te dar algumas coisas para fazer também. O que vamos fazer é criar uma lista de verificação de coisas que irão ajudá-lo a descobrir por que você precisa usar um sistema de design e realmente deixá-lo animado em fazer isso. Você poderá compartilhá-lo na galeria do projeto, comentar sobre ele e ver o que outras pessoas estão fazendo também. Obrigado por fazeres esta aula. Vamos começar. 2. O que são sistemas de design?: Se você pensar em um sistema de design, eu não sei se temos uma definição canônica para ele, mas deve ser algo que ajude você a fazer facilmente as coisas que você quer fazer. A maioria dos sistemas de design tem muitas coisas em comum. Eles têm componentes ou padrões que são realmente as pequenas peças que você vai usar para montar no que você está fazendo. Depois, há também a orientação e a referência de como você vai usar essas coisas. Essas coisas geralmente são colocadas juntas em um site de referência. Esse site de referência tem todo tipo de instruções para você. Coisas como como começar, como faço para baixar isso e começar a usá-lo quando estamos falando de um produto digital. O que eu faço com ele? Onde é que consigo os ficheiros? Onde consigo todas as coisas que preciso? Então, uma vez que os tenho, como posso usá-los? Quais são as melhores práticas em termos de práticas recomendadas do setor, bem como as práticas recomendadas deste sistema em particular. Essas coisas geralmente são as coisas que vêm com um sistema de design. Eu acho que também é importante falar sobre o que um sistema de design não é. Isso eu respondo fica super matizado porque o que um sistema de design não é dizer um arquivo de esboço. Um arquivo de esboço pode ser parte de um sistema de design, mas em si mesmo, não é um sistema de design. Da mesma forma, uma biblioteca de padrões ou uma biblioteca de componentes não é um sistema de design por conta própria porque falta a parte de orientação, apenas as peças. Uma biblioteca de padrões e uma biblioteca de componentes fazem parte de um sistema de design, mas não é a coisa toda. Então eu realmente acho que o que é importante sobre o sistema de design é que ele é a combinação dessas coisas. Não é apenas uma dessas coisas por conta própria. Essa combinação de novo, tem que ter um resultado também. O sistema de design tem que nos ajudar a colaborar melhor. Como designers, desenvolvedores, pessoas de produtos, pessoas de conteúdo, o sistema de design deve ser uma ferramenta que todos nós podemos reunir e usar para nos ajudar a fazer um trabalho melhor. Se faltam partes disso, o nosso trabalho não pode ser melhor. Há muitas coisas boas sobre sistemas de design. A primeira coisa boa é que um sistema de design economize tempo e economize dinheiro. Pode ser você como freelancer ou uma pessoa solteira trabalhando em algo. Ou pode ser toda a sua organização. Como isso economiza tempo? Bem, pense em quantas vezes você projetou um botão, ou quantas vezes você projetou um formulário. Digamos que leva um dia inteiro para projetar uma página de formulário e você faz isso para cada projeto. Agora imagine ter uma ferramenta que faz isso passar de um dia a dez minutos. Isso já é um dia que você salva. Esse é um dia em que você pode fazer outra coisa. Se você está cobrando o seu tempo, é um dia inteiro que você não tem que cobrar por essa coisa. Você pode realmente cobrar por outra coisa. Ajuda você, ajuda seus clientes, ajuda sua organização. Isso ajuda você a economizar tempo fazendo as coisas que você não precisa mais fazer. Poupa dinheiro a todos porque eles não têm que se preocupar com essas coisas. Ele também economiza dinheiro de forma um pouco indireta também, na medida em que lhe dá consistência. Uma das coisas que quebra organizações e quebra projetos em um nível de nuances é realmente sobre como algo é consistente. Quando as coisas estão inconsistentes, deixa os usuários desconfortáveis, deixa os designers desconfortáveis. Isso faz com que os desenvolvedores têm que construir coisas ligeiramente diferentes. Consistência realmente ajuda você a construir algo uma vez e saber que ele se propagará por todo o resto do seu sistema. Outra maneira que um sistema de design ajuda é que ele deve ajudar todas as pessoas em uma equipe a colaborar. Eu sei que quando estou trabalhando em meu trabalho com uma equipe, às vezes eu sou o designer e vou estar trabalhando com um desenvolvedor. O que eu amo em ter um sistema de design é que podemos usá-lo como uma referência compartilhada. Sabemos a mesma língua. Podemos sentar em torno de um quadro branco e poderíamos dizer, “Oh, vamos usar o componente suspenso.” Todo mundo sabe o que quero dizer. O que isso fez foi me economizar tempo e economizou nosso tempo de colaboração onde eu não tenho que ir embora, fazer um arquivo do Photoshop ou do Sketch entregue a um desenvolvedor e então eles têm que construir isso. Podemos esboçar isso juntos. Às vezes, nem preciso entrar no Photoshop para fazer essas coisas. Vamos esboçar juntos. O desenvolvedor pode construí-lo, e então eu posso voltar depois disso e dizer, “Tudo bem. Vamos ajustar isto. Vamos ajustar o espaçamento” e coisas assim. Na verdade, ajuda a colaboração ao fornecer uma linguagem compartilhada que todos vocês estão usando a mesma palavra, dizendo as mesmas coisas sobre as coisas que você está tentando projetar e construir. Talvez a minha maneira favorita que um sistema de design irá ajudá-lo é que ele realmente deve liberá-lo para fazer as coisas que você realmente quer fazer que normalmente você não pode sequer chegar em um projeto. Sei que tenho uma lista de todas as coisas que não posso fazer em um projeto às vezes. Ter um sistema de design ou algo para me ajudar e me dar alguma eficiência lá, me ajuda a chegar a essas coisas. Como exemplo, se eu não tivesse que projetar esse botão uma e outra vez, ou que forma ou esse cabeçalho ou esses elementos globais. Em vez disso, eu poderia ter tempo para fazer aquela animação que eu realmente queria chegar, ou talvez aquela ilustração, ou talvez tentar uma nova técnica ou aprender uma nova tecnologia, ou talvez aprender sigma ou um novo aplicativo ou algo assim. Se você tem essas coisas já na lata, se você tem os componentes, se você tem os principais e você está usando-os, isso apenas economiza seu tempo. Agora você pode chegar a esse pouco extra de oomph que você quer colocar em seu projeto que você normalmente não tem a chance de fazer. 3. Exemplos de sistemas de design: Falar sobre definições é bastante abstrato, então vamos dar uma olhada em alguns exemplos para ajudar a torná-lo mais real para nós. Este é o manual de padrões gráficos para a Autoridade de Trânsito de Nova York e isso já existe há muito tempo. Esta é realmente a bíblia de manuais de padrões gráficos. Parte da razão pela qual eu acho que a Autoridade de Trânsito de Nova York durou tanto tempo é porque este manual está escrito tão bem, porque este sistema de design está escrito tão bem. Vamos dar uma olhada nas entranhas disso. Você verá aqui que uma parte deste manual são apenas as partes. Você verá que eles têm tudo de como cada letra deve ser especificada aqui. Aqui está como você imprime um A duplo aqui é como você imprime um B. Aqui está como você imprime um duplo C e é em detalhes meticulosos. São todas as letras do alfabeto para mostrar que se houvesse uma linha de metrô com essas letras, é assim que você imprimiria. Eles não poupam despesas em certificar-se de que você tem especificações para cada coisa que você pode querer usar, todas as letras do alfabeto. Não é como se estivessem a mostrar-te um e depois diziam “Sim, faz o resto deles assim.” Eles estão entrando em detalhes minuciosos para te mostrar essas coisas. Este livro está cheio de todas as partes diferentes, mas não são apenas as partes. Ele também está cheio de exemplos de como usar as coisas e orientações sobre como usar essas coisas. Deixe-me mostrar-lhe um exemplo disso. Esta página aqui é uma página sobre sinais temporários e isso mostra as pessoas que estão implementando o sistema, como você pode criar um sinal temporário. Há orientação aqui que diz o que é um sinal temporário. A natureza do sinal temporário exige que seja mais fácil produzir, colocar e remover, e então ele tem instruções sobre como produzir um sinal temporário. Em seguida, ele também mostra exemplos de onde colocar esse sinal temporário, como ele deve ser, onde ele deve ir e como ele deve realmente funcionar. Esta é uma ótima orientação para um sistema de design. Todo este livro, todo este manual é parcialmente apenas as partes, parcialmente os próprios componentes, mas, em seguida, parcialmente a orientação e teve o rigor de ambas as partes e a orientação é que eu acho que o que fez este sistema aguentar por tanto tempo. Agora, ambos os livros são realmente ótimos. Estes são livros que foram escritos no final dos anos 70 sobre arquitetura. Christopher Alexander basicamente fala sobre nestes livros, como você pode abordar a arquitetura de construção de uma forma que é sistemática e como a capa do livro diz, “Uma maneira atemporal de construir”. Esta é uma parte 1 e parte 2 no lado da linguagem padrão é, como você realmente implementar essas coisas? Esta é a teoria disso. É quase como um sistema de design em duas partes, onde parte dele são as partes e, em seguida, parte dele é a orientação real sobre essas partes. Há um monte de grande teoria e filosofia sobre como construir arquitetura dessa maneira, muitas das quais se aplicam a como podemos construir produtos digitais hoje em dia. Se você está procurando algo mais moderno, este é um livro fantástico de Alla Kholmatova, chamado Design Systems. Trata-se de como construir um sistema de design moderno. Todas as coisas que estávamos falando em termos de teoria e em termos de prática e em termos de partes, Alla compila neste livro e fala sobre como realmente usar sistemas de design e fazer sistemas design e mantê-los como uma referência fantástica para quem quer saber mais sobre este tópico. Agora este é um exemplo pouco não-tradicional aqui. A maioria das coisas que nós olhamos são realmente manuais e este livro é chamado Design by Apple na Califórnia. É um pouco diferente de alguns dos outros exemplos. Se eu olhar através deste livro você verá que não há muitas palavras. Só há fotos. Estas são belas fotos que documentam como os produtos Apple realmente se parecem. Agora, você poderia chamar isso de um livro de fotografia mais do que como um sistema de design, mas ele tem um pouco de referência para o sistema de design. O que eu quero dizer com isso é que há algumas 100 páginas aqui e como você apenas folhear este livro, apenas página por página olhando para Hardware, olhando para todos os diferentes dispositivos que eles fazem, e apenas recebendo e vendo eles de ângulos diferentes. O que você encontrará aqui é que você pode folhear as 100 páginas deste livro, e no final do livro, mesmo que não tenha havido palavras, você pode entender como a Apple constrói seus produtos. Você provavelmente pode concluir algo no final que diz: “Aqui estão os princípios que são importantes para o trabalho da Apple.” Eu acho que esse é o trabalho de um bom sistema de design também é ser capaz de olhar através de todas as coisas e ser capaz de concluir, “Ok, isso é o que é importante para esta organização sobre como os produtos são construídos.” Mesmo que este seja um pouco de um exemplo não-tradicional, eu acho que ele ainda faz um bom ponto sobre o trabalho do que um sistema de design deve fazer. Uma das coisas que eu quero apontar através disso é que nem todos os sistemas de design têm que ter a mesma aparência. O resultado é o que é importante, não o formato real dele. Este é um exemplo de um sistema de design que a Apple pode ter. Eles também têm outro que talvez seja um pouco mais popular do que este livro. É chamado de Apple HIG, as Diretrizes de Interface Humana e isso é para qualquer pessoa que queira criar um aplicativo para iPhone. Quando olhamos para esse HIG e olhamos para isso, são dois exemplos de sistemas de design da mesma empresa. Isso não quer dizer que você só pode ter um sistema de design. Você pode ter dois se eles se aplicam de maneiras diferentes ou se você quiser mostrar seus produtos de maneiras diferentes. Há também versões digitais de sistemas de design, não apenas em livros e então vamos olhar para alguns dos mais populares. Material Design é aquele que é criado pelo Google e muitas pessoas usam design de material para produtos que não são do Google, mas também o Google os usa para produtos do Google. O que você verá aqui é que é uma interface unificada para aplicativos Android, para aplicativos que são do Google, para coisas como G-mail e Google Maps, mas também algumas de suas subsidiárias como o YouTube. Este é um sistema de design que tem tudo o que temos falado. Ele tem componentes e tem orientação, então vamos clicar por aqui. Se formos até a guia Desenvolver para desenvolvedores, ele tem todos os componentes que realmente precisamos e é distribuído por plataforma. Tenho Android, iOS, Web e Flutter. Se eu clicar na parte Web aqui, o que você verá é que eu posso chegar aos componentes e eu posso chegar à documentação em si. Componentes me dá toda essa lista de coisas e eu vou apenas clicar em uma. Se eu quisesse usar um botão como parte do design de material, que me dá um exemplo para o que isso é e eu posso rolar para baixo e me dá todas as orientações sobre como instalar essa coisa e como usá-lo, e ainda mais do que isso, Todo esse sistema me dá orientação sobre como usar essas coisas do ponto de vista filosófico. Tem todo o trabalho técnico, bem como o trabalho filosófico. Tudo isso está em um só lugar e isso é bastante comum com sistemas de design, é ser capaz de ver uma espécie de lista de todos os componentes, ser capaz de ver o componente aqui em ação, uma versão ao vivo dele, e então algumas orientações sobre como para usá-lo e quando usá-lo. A mesma coisa é verdade no final do design para material, este é o final da codificação, mas o final do design introduz coisas como princípios então vamos olhar para os princípios de cor para Design de Material, por exemplo. O que isso mostra são todas as paletas de cores que vêm com material e como você pode usá-las. Muitas paletas de cores robustas aqui para todo o caminho de Shades 50 a 900. Eles mostrarão as cores primárias e secundárias, bem como todas as variantes e os matizes e os matizes. Isso também vem com princípios para que eles falam sobre legibilidade como um princípio, e expressividade como um princípio, e hierarquia como um princípio. Novamente, você vê essas combinações então não são apenas os componentes e não é apenas a orientação, é todas essas coisas juntas no contexto. Saltamos para outro exemplo. Este é o sistema projetado pelas forças de vendas, e isso é chamado de Sistema de Design Lightning. Veja aqui algum tipo de abordagem semelhante onde eles têm diretrizes e eles também têm componentes, mas eles também têm detalhes específicos sobre coisas como acessibilidade e tokens e ícones. Se olharmos para os componentes, você verá aqui novamente, a mesma coisa. Aqui está uma lista de todos os componentes que vêm com este sistema. Se eu entrar em botões aqui, você verá que eu recebo toda a variação. Eu tenho todo o botão baseado, o neutro, a marca, a marca de esboço, o destrutivo, e o sucesso e novamente, logo abaixo é apenas o código para ser capaz de usar isso. Do ponto de vista do design, aqui está como a coisa ficaria, do ponto de vista do desenvolvimento, aqui está o código que eu preciso para implementar isso. Mais uma vez, bem no contexto é a orientação. vez, aqui está uma regra de acessibilidade para o botão. Eu não tenho que ir a outro lugar para realmente vê-lo. É em contextos que o componente em si. O último exemplo que veremos aqui é Polaris da Shopify. Este é um sistema de design e por isso tem novamente, as mesmas coisas que o material e o clareamento têm, mas de uma forma ligeiramente diferente e eu quero apontar algo específico sobre isso. À medida que analisamos os componentes da Shopify, Shopify é uma plataforma de comércio eletrônico e o que é realmente ótimo em seu sistema de design Polaris é que eles realmente mostram coisas específicas para seus usuários e para seus clientes. Não é apenas, aqui está um botão para usar porque é um botão e as pessoas precisam usar botões, mas eles realmente mostram coisas em relação aos comerciantes e em relação ao comprador. Como exemplo, vá para Ações aqui e eu vou para uma lista de ações e esta lista de ações me dá alguma orientação. A mesma coisa que vimos no material e no relâmpago, onde temos o componente em ação e começamos a ver como ele funciona e eu obtenho o código para ser capaz de implementar isso. Mas o que eles falam aqui que é específico para eles se eu ler esta orientação aqui é uma lista de ações renderiza uma lista de ações ou opções selecionáveis, isso é universal, isso é genérico, mas então eles ficam mais específicos. Esse componente geralmente é colocado dentro de um contêiner pop-up para criar um menu suspenso para permitir que os comerciantes selecionem em uma lista de opções. Novamente, isso é realmente específico para como eles querem que os comerciantes possam usar esses componentes. Essa é uma das coisas que eu mais amo sobre este sistema Polaris é que não é apenas qualquer um que quer usar uma lista aqui que eu uso lista, especificamente projetado para comerciantes e para compradores. 4. Fazendo sua lista de desejos do sistema de design: Vamos começar a nossa primeira missão. Digamos que você não tenha um sistema de design com o qual esteja trabalhando, sozinho ou talvez com sua equipe. Vamos começar a criar um. A primeira coisa que queremos fazer na criação um é realmente entender por que precisamos dele. Então vamos fazer isso. Pegue um pedaço de papel e dobre esse pedaço de papel ao meio. Do lado esquerdo, o que eu gostaria que você fizesse é anotar todas as tarefas que você fez no último projeto. Então pense no último projeto que você fez. Tudo o que você fez, não importa o quão delicado, anote essas coisas. Pode ser que eu desenhe os ícones. Pode ser que eu tenha desenhado esta página. Pode ser que eu tenha escrito um resumo. Pode ser o que quer que seja. Enviei um e-mail sobre uma coisa em particular. Tente escrever tudo o que você pode lembrar sobre seu último projeto. Certo, próximo passo. Agora, que você tem uma lista de tudo que você fez no seu último projeto no lado direito do jornal, eu gostaria que você escrevesse todas as coisas que você gostaria de ter feito que você não teve chance também. Isto é realmente como as coisas dos seus sonhos. Então pense na animação que você não poderia fazer. Esse pouco extra de acessibilidade ajudou que você não construiu. Esse pode ser o sistema de ícones que você deseja projetar, personalizado, mas você teve que usar uma biblioteca de ações em vez disso. O que é tudo o que você gostaria de fazer naquele projeto ou talvez em qualquer outro projeto. É aqui que fica interessante. No lado esquerdo do seu jornal, você tem todas as coisas que você fez no último projeto. Eu gostaria que você circulasse as coisas que você acha que poderiam ser feitas de forma mais eficiente. Um bom formato para pensar nisso é se eu tivesse x, essa coisa teria sido mais fácil. Último passo, agora que você tem todas as coisas circuladas à esquerda das coisas que você poderia ser mais eficiente, eu gostaria que você traçasse uma linha dessa coisa para algo do lado direito. Esta vai ser a tua folha de características. Por exemplo, à esquerda, você pode ter algo como eu projetei todos os botões. À direita, você pode ter algo que diz design personalizado ícone definido. Se você desenhar uma linha dos botões para o conjunto de ícones, você essencialmente fez uma lista de negociação para dizer, se eu já tivesse um conjunto de botões, agora eu poderia gastar tempo neste conjunto de ícones. É aqui que entra a magia. Você acabou de criar sua primeira lista de desejos para o que seu sistema de design deve fazer. Agora que você sabe o que você quer projetar o sistema para, começar a cruzar coisas do lado esquerdo, onde em seu sistema de design como você começa nele, primeira coisa que você cuidar de, botões. Depois de cuidar desses botões, você terá seu ícone definido no próximo projeto. Aqui está a parte legal. Agora, que você tem sua tarefa feita, você tem uma lista de todas as coisas que devem estar em sua versão 1 do seu sistema de design. Isso é ótimo quando você está trabalhando sozinho. O que torna isso ainda melhor é agora você pode começar a fazer isso com sua equipe e você pode fazer esse exercício com sua equipe. Você pode liderar isso. Você faz sua lista. Talvez possas pedir aos teus colegas para fazerem a lista deles também. Se você é um designer, talvez peça aos desenvolvedores com quem trabalha para fazer sua lista. Quais são as coisas que eles gostariam de fazer? Quais são as coisas que eles trocariam, algo que eles já poderiam ter na lata. Em seguida, peça aos membros da sua equipe para trocá-los por aí. Isso é o que eu faço em oficinas o tempo todo. Farei com que os designers façam uma lista de todas as coisas que querem fazer. Então eu vou ter desenvolvedores fazer uma lista de todas as coisas que eles querem fazer e todos os outros estão trabalhando no projeto. Então nós negociamos listas e o que isso faz é criar empatia um para o outro porque às vezes os designers nem sabem que um desenvolvedor teria gostado de colocar um pouco de design extra polido naquela coisa. Talvez isso fosse uma coisa na lista deles. Designers ficam realmente fartos de desenvolvedores como, oh cara, eles não gastaram o tempo, mas poderia ter sido que eles simplesmente não tinham tempo. Então, expor essas listas, torná-las públicas e ser capaz de ver as de todos outros realmente vai ajudar a criar alguma empatia por dizer, bem, eu nem sabia que você queria fazer isso, então agora eu posso ajudá-lo com isso seu próximo projeto. Esse é um ótimo exercício de formação de equipe e algo que realmente faz com que as pessoas compartilhem sobre a visão de um sistema de design. Mesmo esse processo de criação de um pode ser algo que deixa as pessoas mais na mesma página. Agora que você tem essa lista, você sabe por que você precisa de um sistema de design. Em seguida, vamos falar sobre como realmente fazemos um. 5. Criando seu próprio sistema de design: Os sistemas de projeto geralmente têm duas partes, padrões e processos. Com qual você começa depende de você. Não há ordem certa ou errada. Onde eu recomendaria que você comece, porém, é aquele que você tem mais idéias para. O que é só coçar para sair da sua cabeça? Você sabe quais botões deseja projetar ou quais componentes suspensos deseja projetar? Bem, então comece por aí. Talvez, se você não tem idéias para isso, talvez você tenha mais idéias para princípios, coisas que você quer guiar o sistema. Se isso é algo que é interessante para você e você já sabe o que você quer dizer lá, comece com isso. Então, eventualmente, você tem que chegar a ambos, mas onde quer que você queira começar é com você. Vamos mergulhar em princípios. Existem dois tipos de princípios. Há princípios universais, e há princípios específicos. Assim, por exemplo, um bom princípio universal poderia ser algo como o acesso para todos. Isso é algo que, à medida que você cria aplicativos e sites, você quer que todos possam acessar. Mas isso também é verdade para todos os sites. Isso não significa que não deveria estar no seu sistema de design, colocá-lo lá. Mas vamos falar sobre princípios específicos. Princípios específicos são aqueles que funcionam apenas para o seu sistema. Um grande exemplo de um princípio específico é do TiVo. Um dos princípios do TiVo é que é estúpido na TV. O que eu amo sobre esse princípio para TiVo é que é tão bom para eles, que é um grande mantra para eles seguirem. É o espírito deles, é casual, é um pouco irreverente, se encaixa na marca deles e também, não funcionaria para outra organização. Não funcionaria para Quickbooks ou Salesforce ou qualquer um desses. Um princípio específico deve ser algo que é realmente ótimo para você e sua organização, mas um ajuste estranho para outra pessoa. Eu imagino que se eu estivesse trabalhando na TiVo, e eu tivesse um problema em algo que eu estava tentando projetar, então eu poderia olhar para esses princípios para seguir, como isso pode me ajudar? Então princípio deve realmente ajudá-lo em pontos de tensão. Então, quando você realmente não sabe o que fazer, você deve ser capaz de referenciar seus princípios e dizer, oh certo, isso é o que ele está dizendo para fazer. Então um princípio como se fosse uma estupidez da TV, se estou tentando decidir entre duas interfaces diferentes. Talvez eu escolhesse o mais simples porque está mais em linha com o princípio da empresa. Ambos os princípios e padrões devem ter aplicação universal e aplicação específica. Então vamos falar sobre o lado padrão disso. Quando falamos sobre padrões sendo universais, há algumas coisas que cada site vai ter. O texto é um bom exemplo disso. Um formulário é provavelmente um bom exemplo disso também. Talvez você não precise reinventar a roda com a forma como você vai exibir texto. Isso é bom. Mas você também vai querer alguns padrões específicos para você, para este projeto em que você está trabalhando, ou para a organização em que você trabalha. Então, como exemplo, digamos que trabalha para o IRS. Seu sistema de design para o IRS provavelmente deve se concentrar em fóruns e entrada de dados. Mas digamos que trabalha para a companhia de entretenimento. Provavelmente é menos sobre a entrada de dados do que sobre outdoors e heróis. Portanto, certifique-se de que os padrões em que você está trabalhando, os componentes que você está criando, são realmente específicos para a sua organização e as necessidades da sua organização ou as necessidades do projeto em que você está realmente trabalhando. Há uma nuance interessante para padrões e componentes e a linguagem entre eles. Se você olhar para todos os sistemas de design que são públicos e lá fora agora, nem todos eles usam essas palavras da mesma maneira. Portanto, componentes geralmente significam as pequenas peças e peças que você precisará para ser capaz de criar esse sistema. Padrões às vezes significa isso. Mas vi muitas organizações usarem padrões de uma maneira diferente. Às vezes, um padrão é um exemplo de fluxo. Então, por exemplo, um componente pode ser algo como um menu suspenso, mas um padrão pode ser algo como um fluxo de check-out. Cabe a você o que é melhor para você. Apenas certifique-se de que você é consistente sobre como você está usando isso. Se você é um tipo de lista de verificação de pessoa, há alguns grandes recursos lá fora para você também. O designer Nathan Curtis tem uma lista de verificação incrível para sistemas de design que descreve todas as diferentes partes que você pode precisar em seu sistema de design. Agora, você certamente não precisa de todos eles. Mas talvez dê uma olhada através deles e você vai descobrir que eles provavelmente coincidem com sua lista também. Quais são algumas coisas que talvez você não tenha pensado. Aquelas outras coisas que você pode pegar da lista do Nathan. Estas são as peças que você precisará para a primeira versão do seu sistema de design. Outra ótima maneira de criar um sistema de design, é pegar as coisas que já estão funcionando e extrair todas as coisas boas disso. Então, especialmente se você trabalha em uma grande organização, você provavelmente fez coisas e outras equipes que provavelmente fizeram coisas, isso provavelmente é muito bom. Então você pode ter um produto lá fora que tem um fluxo muito bom nele. Talvez seja um fluxo de checkout, talvez seja um fluxo de login, talvez seja um componente realmente ótimo como há grande consistência nisso ou a topografia é realmente boa. O que você pode fazer para iniciar seu sistema de design fora, é realmente olhar para essas coisas e dizer, você sabe o que está funcionando lá? A topografia. A topografia lá é o que devemos usar para muitas outras coisas. Então agora começar a extrair essas coisas do projeto, chamamos de pilotos. Use-os como pilotos e digam, ok, podemos extrair essas coisas do piloto e isso vai ser a base do nosso sistema de design. Se você não tem essas coisas, você pode começar a criá-las. Digamos que trabalhou para uma empresa de entretenimento, e talvez não tenha o produto ideal. Bem, você pode criá-lo. Você pode dizer, tudo bem, vamos fazer um exercício fictício onde criamos um aplicativo guia. Você pode criar esse aplicativo guia e, em seguida, dizer, tudo bem, nós vamos pegar o material do aplicativo guia e vamos usá-lo para iniciar nosso sistema de design. Então, a chave aqui quando você está usando projetos-piloto é olhar para as coisas que são reais, não coisas que são abstratas. Às vezes é difícil projetar um botão se você não sabe o que ele deve fazer. Então, em vez de projetar um botão isoladamente, projete uma tela inteira, então tire o botão dessa tela e diga que este será o botão que usaremos. Assim, os projectos-piloto são realmente úteis para isso, é ser capaz de olhar para as coisas no contexto e, em seguida, tirá-las do contexto. Se o fizeres ao contrário, vai ser muito mais difícil. Então é aí que as coisas que são aplicativos reais são realmente úteis. Então, como você organiza todas essas coisas? Digamos que você tenha tirado algumas coisas de um projeto-piloto. Você criou algumas das suas próprias coisas. Você fez uma lista de coisas que você quer fazer. O que você faz? Bem, eu acho que o primeiro passo nisso é tentar organizá-lo. Isso depende de você e da cultura da sua organização. Então, para algumas organizações, você pode já ter um tabuleiro Jira ou um tabuleiro Trello ou uma confluência ou algo assim, onde você pode obter um bom espaço para colocar as coisas e organizá-las. Mas você pode não. Assim, você pode iniciar seu próprio Google Doc ou uma planilha do Excel ou alguma pasta em seu computador como um lugar para iniciá-lo. Isso está tudo bem. Qualquer uma dessas maneiras é a maneira certa de fazer as coisas. Não há maneira errada de fazer isso. Acho que é uma coisa boa que você pode fazer. Organize-o e, em seguida, o próximo passo seria descobrir como compartilhar isso. Então, qual é a melhor maneira de você compartilhá-lo? Está enviando um e-mail para o resto da sua equipe? Bem, ótimo. Faça isso. Está preparando um posto de acampamento base ou um posto de folga? Faça isso também. Então comece a pensar sobre essas maneiras que você pode organizar alguns desses materiais para que esses possam ser os componentes e algumas talvez as diretrizes em torno dele, e descobrir como você pode compartilhá-lo. Uma coisa boa a fazer é ver como outros sites de referência fazem isso. Então, se você precisava de um exemplo, é bom ir e copiar o design do material ou bootstrap ou o sistema de design de iluminação e usar sua coisa como um guia. Portanto, se você quiser estruturar seu documento do Word da mesma maneira, tudo bem, é um bom começo, e não há maneira errada de fazer isso. É importante que você organizá-lo e ser capaz compartilhá-lo e isso vai começar com o pé direito. Como designer, há uma peculiaridade interessante que eu encontro sobre designers. Somos sempre tão preciosos sobre o nosso trabalho. Tentamos tornar tudo muito especial. Trabalhar em um sistema de design é um pouco contra-intuitivo porque a primeira versão do seu sistema de design especialmente se você trabalha em uma grande empresa, deve cuidar das coisas chatas. Meu amigo Josh Clark tem um ótimo post sobre sistemas de design cuidando das coisas chatas. Ele diz que os sistemas de design mais excitantes devem ser chatos. Deve cuidar de todas as coisas que você não quer fazer. Não deveria ser todo o floco de neve especial que você realmente quer fazer. Guarde isso para si mesmo e guarde isso para algo em que você possa realmente dedicar seu tempo e esforço. Então, a primeira vez que você inicia um sistema de design, se você trabalha em uma grande empresa ou você está apenas trabalhando sozinho em um projeto. Comece com todas as coisas chatas. Faça os botões, faça os fóruns, faça os flutters. Tire essas coisas do caminho para que você possa realmente trabalhar no que é muito mais legal. 6. Como obter aceitação: Uma das partes mais difíceis dos sistemas de design é colocar as pessoas a bordo. Na minha experiência, esse é o trabalho árduo. Somos designers, desenvolvedores, sabemos como fazer o design e o desenvolvimento facilmente. Isso é o que fazemos, é nisso que somos realmente bons, o que é difícil é realmente convencer alguém de que eles precisam disso, e que nós precisamos disso, e que eles devem ser incentivados nisso. Essa é sempre a parte mais difícil para mim sobre sistemas de design é colocar as pessoas a bordo. Eu tive a sorte de ser capaz de trabalhar com clientes realmente grandes que sabem disso e eles fizeram um bom trabalho ao definir o tom e colocar a mesa no seu lado para que possamos fazer um bom trabalho. Como exemplo, trabalhamos com a Igreja Adventista do Sétimo Dia para ajudá-los com um sistema de design e, um ano antes, trabalhamos com eles. Nosso cliente, Brent, que era o gerente da web lá, ele foi até seu chefe e ele fez algo que era realmente interessante. Eles fazem um monte de sites lá, o que ele fez foi que ele imprimiu aqueles sites e essas pequenas miniaturas é três polegadas por três polegadas miniaturas polegadas e colocá-los todos em placas de montagem e ele acabou tendo seis ou sete placas de montagem sobre um 150 miniaturas diferentes. Todos eles parecem diferentes e ele entrou em seu chefe com essas pranchas de montanha e ele disse, olhe todo o dinheiro que estamos desperdiçando, todos eles são feitos sob medida projetado a partir do zero, reinventando a roda todos os tempo e nós simplesmente não estamos fazendo isso rápido o suficiente. Nós não somos capazes de fazer isso na velocidade e no volume que queremos e então, estamos desperdiçando dinheiro, eu sei como consertar isso, precisamos de um sistema de design e se você pode me dar o orçamento para isso, e se você pode me dar o espaço para ser capaz de criar isso bem, podemos ficar muito mais eficientes, podemos ir muito mais longe em nossa organização. Para ele, o que era realmente bom nisso, e para nós também é que, ele realmente colocou a mesa para fazermos um bom trabalho. Ele fez o trabalho de fazer com que todos concordassem com a idéia de por que eles precisavam e nosso trabalho se tornou muito fácil. Nós poderíamos realmente fazer o trabalho bem, isso foi fácil para nós, que é o trabalho de design e desenvolvimento, porque nós realmente não precisávamos fazer o convincente. Outra pessoa tem que fazer o convincente também. Acho que essa é uma parte importante deste trabalho. Como consegue que alguém faça algo por você? Bem, você tem que descobrir qual é o incentivo deles. Porque não há muita gente de boa vontade que faz algo por você, sendo altruísta. Em vez disso, eles têm que saber o que eles ganham. Depende com quem você está falando e você tem que falar a língua deles. Se você está falando com um desenvolvedor, por que um desenvolvedor quer um sistema de design? Bem, eles querem isso para que eles não tenham que escrever códigos do zero ou talvez eles não queiram escrever códigos que falhem porque eles estão se juntando do zero toda vez, talvez consistência seja a linguagem que você fala com eles. Talvez para seu diretor financeiro em sua empresa, para eles, é sobre saber que, oh nós vamos economizar dinheiro fazendo isso porque nós não vamos ter que montar tantas equipes ou nós não vamos ter que gastar tanto tempo em projetos. Falando, a linguagem da eficiência é provavelmente uma coisa boa para eles. Depende de quem você está falando com você e tente descobrir qual é a linguagem que eles precisam, qual é a coisa que eles precisam ouvir para saber que, talvez seja o CEO de uma empresa e para essa pessoa, Trata-se de cumprir a missão da empresa. Talvez para eles, seja sobre como esse sistema de design vai nos ajudar a alcançar nossa missão? Realmente, pensar sobre o seu sistema de design é ser capaz atender a todas as diferentes partes de sua organização. Alto nível, baixo nível nas ervas daninhas, na floresta e nas árvores. O que é legal sobre um sistema de design é que ele tem todas essas partes diferentes. Se você pode extrair essas partes e dizer que esta parte é sobre finanças, esta parte é sobre eficiência, esta parte é sobre missão. Eu acho que você será capaz de convencer as pessoas muito mais eficazmente. Quando você convence alguém de qualquer coisa, você tem que fazer sua pesquisa. Uma das maneiras que eu acho isso realmente eficaz é apenas falar com as pessoas um-a-um, essa é uma boa maneira. Quando começamos com clientes, falamos com eles sobre quais são suas necessidades, qual é a dor, o que dói agora. Somos muito lentos nessa coisa. Legal, se fosse mais rápido, como te ajudaria. Fazer perguntas realmente básicas é útil. Às vezes, fazer isso um-a-um é menos pressão do que se estiver em um grupo. Uma das coisas que eu recomendaria é começar conversando com as pessoas pessoalmente sobre como essa coisa poderia ajudá-las ou, geralmente, até mesmo como elas podem ser ajudadas. Talvez a solução não seja um sistema de design, mas muitas vezes em uma organização com perguntas sobre eficiência e velocidade, dinheiro e tempo. Um sistema de design é realmente uma boa ferramenta para isso. Uma boa maneira de se preparar para isso e obter o buy-in é dizer, bem, todos me digam onde dói agora, me digam quais são as dores e então um sistema de design pode ser uma solução para essas dores. Eu acho que é útil olhar para outros sistemas de design como uma forma de dizer, aqui está uma solução para um problema que é semelhante ao que temos. Mas o que é difícil nisso, o que é realmente incerto é, bem, as pessoas não estão realmente preocupadas com a solução para o problema. Eles estão realmente preocupados com o resultado. É difícil olhar para outro sistema de design e ir, eu vejo como isso ajudou a eficiência nessa organização. O que é realmente útil e, infelizmente, não há muitas estatísticas sobre isso agora, mas mais e mais saindo, que eu acho que é realmente ótimo, não é apenas dizer, bem, A Salesforce tem um sistema de design relâmpago, mas em vez de dizer, bem, a Salesforce realmente cortou seu tempo em projetos pela metade por causa de seu sistema de design. Eu acho que isso é o que realmente ajuda as pessoas é entender isso e ouvir essas estatísticas para dizer. Porque estamos no mesmo barco e se esse é o resultado que eles tiveram com esta ferramenta, talvez possamos ter um resultado semelhante com uma ferramenta semelhante. Um sistema de design é uma ferramenta realmente grande para uma organização empreender o processo de projetar um, construir um, implementar um é um esforço hercúleo. Não é algo que você possa fazer em um dia. Uma coisa que você pode pensar é, bem, qual é a versão dele que você pode fazer em um dia? Qual é a coisa que você poderia configurar em algumas horas e dizer, tudo bem, durante uma semana neste projeto, esta pequena ferramenta me ajudou reduzindo meu tempo ao meio. Imagine se nós escalarmos essa ferramenta, que reduziria o tempo pela metade também, agora se tivéssemos a ferramenta que poderia nos poupar seis meses no que normalmente seria no projeto de 12 meses, isso seria ótimo. Se você não tem estatísticas, se você não tem acesso a, bem, aqui está o que uma outra organização fez com isso. Talvez você possa criar seu próprio pequeno caso de teste e dizer, tudo bem, agora que se aumentarmos isso, se extrapolarmos isso, podemos ver que provavelmente conseguimos essa economia, e o que é ótimo nisso é que será realmente específico para a sua organização. Não serão dados anedóticos. Não serão dados que digam, bem, essas organizações têm isso ou talvez possamos conseguir isso aqui. Será realmente baseado no que você tem experiência nesse ambiente em particular. A aprovação é realmente importante com sistemas de design, e a razão para isso é porque um sistema de design é tão amplo que toca cada parte de uma organização. Não é apenas para designers, apesar de ser chamado de sistema de design. Não é apenas para designers, é para desenvolvedores, pessoas de produtos, pessoas de conteúdo e todos na organização. Todo mundo tem que ser comprado porque ele vai ser implementado em toda a organização. Para muitas coisas em um grande defensor de pedir perdão em vez de permissão com um sistema de design que pode ser a exceção. Eu acho que comprar pessoas e isso vai te poupar muita dor de cabeça mais tarde porque mesmo se você começar no nível do solo e ir, bem, vamos apenas começar e vamos descobrir como implementá-lo mais tarde, você vai para encontrar um obstáculo quando você chegar a esse ponto em que você está bem, precisamos implementar isso, precisamos nos envolver em nossa infraestrutura ou parte disso. Você vai esbarrar em uma parede lá. Obter mais por um adiantamento geralmente é mais benéfico. Obter buy-in e uma organização é um pouco diferente de fazer buy-in em um projeto. Digamos que você é freelancer, trabalha em uma agência, talvez uma pequena agência, e você está falando com um cliente sobre um sistema de design para eles. Algumas das nuances lá, são realmente interessantes onde eu trabalhei na concepção de sistemas para clientes é às vezes vai criar uma biblioteca de padrões e um guia de referência apenas para a nossa equipe, e às vezes o cliente não tem interesse nele. Torna-se uma ferramenta útil para a nossa equipe e dizer aqui é como vamos fazer o trabalho para o cliente. O cliente quer a saída desse trabalho. Alguns clientes dizem que não nos importamos com a biblioteca de padrões ou o site de referência, só queremos as páginas finais e tudo bem. Se você usa um sistema de design para você mesmo para fazer a saída para o cliente, isso é ótimo. Foi útil para você. Você não tem que sentir que tem que entregar isso. Agora, eu acho que você deveria estar disposto a entregar isso para o seu cliente e realmente ter as conversas com eles e ser aberto com eles para dizer, escute, é assim que conseguimos fazer isso efetivamente nessa alta qualidade e muito rapidamente, pensamos que se nós o entregássemos a você também, você realmente seria capaz de fazer isso com sua organização. Alguns clientes compram isso, outros não. Mas se você trabalha em uma agência ou você é um freelancer, não tenha medo de apenas usá-lo para si mesmo para criar a saída e, em seguida, oferecê-lo como um bônus para o cliente se ele realmente quiser ter essa parte da ferramenta também. Se você cobrar o cliente extra por este sistema de design é realmente com você. 7. Implementando seu sistema de design: A implementação é super importante para projetar sistemas. Vocês são todos designers, pense em quantas vezes você recebeu um guia de estilo PDF que alguma marca disse, sim, basta usar, seguir o guia de estilo e então o que fazemos é jogá-lo fora e então fazemos o que achamos certo de qualquer maneira. Se um sistema de design é realmente apenas um site de referência e não realmente implementado nas ferramentas e na cultura de sua organização ou seu projeto, ninguém vai usá-lo. Portanto, certificar-se de que é como parte da mistura é super importante para um sistema de design. Um dos princípios que minha equipe usa muito quando trabalhamos em sistemas de design, um dos nossos favoritos é tornar a melhor coisa a coisa mais fácil. Muitas equipes com as quais trabalhamos usam o Bootstrap e quando começam a querer um sistema de design, parte do nosso desafio é como tornamos o sistema de design melhor do que o Bootstrap? Bootstrap é uma ferramenta tão grande e por isso o que usamos que tem que substituí-lo tem que ser melhor e há muitas versões do que melhor pode ser. Então, como exemplo, Bootstrap é bastante baunilha. Se eu usar o Bootstrap e quiser usá-lo para a minha organização, ainda tenho muito trabalho que preciso fazer com ele. Preciso incorporar as fontes da minha marca, preciso ter paletes de cores da minha organização ou dos meus projetos, haja trabalho que eu terei que fazer. Se o sistema de design já tinha esse material cozido, agora a melhor coisa para usar, o sistema de design é realmente a coisa mais fácil de usar, porque eu não tenho que fazer tanto trabalho nele. Um dos princípios que tentamos usar e como trabalhamos com clientes e como você pode ser capaz de fazer isso com seu trabalho é como você pode tornar isso mais fácil do que aquilo com que as pessoas estão trabalhando agora? O Santo Graal de um sistema de design é uma ferramenta que é implementada no fluxo de trabalho de todos. Assim, torna o design mais fácil para designers e torna a codificação, o front-end mais fácil para desenvolvedores de front-end. Isso torna a codificação do back-end mais fácil para desenvolvedores back-end. Ele tem ferramentas de gerenciamento de produtos para gerentes de produto. Então as melhores implementações são a única e assim o Santo Graal é aquele que todos podem usar o sistema de design. Agora, isso é muito difícil de fazer. Há muitas ferramentas que precisam ser construídas, há muitos processos que precisam ser implementados e fluxo de trabalho que precisa ser implementado. Então, idealmente, um sistema de design diria, ter as referências de design para designers, teria as ferramentas de front-end para desenvolvedores de front-end e também seria integrado na implementação para que os desenvolvedores de back-end pudessem usá-lo também. Eu raramente vi isso acontecer, e então muitas organizações estão trabalhando para isso, mas há apenas um punhado de que realmente conseguiu e ainda menos que realmente publicou sobre isso. Lonely Planet é uma organização que tem feito isso alguns anos e eles têm um ótimo sistema chamado Rizzo, que vale a pena investigar e muito recentemente, Airbnb tem um sistema muito bom onde ele é implementado em um monte de suas ferramentas. Eu acho que uma boa maneira de pensar sobre como integrar um sistema de design no fluxo de trabalho, é pensar sobre isso como qualquer nova ferramenta. Quando há uma nova ferramenta que você está usando, você provavelmente vai notar isso muito. Você provavelmente vai ser capaz de chamá-lo para fora, você provavelmente vai ter que falar sobre isso, você provavelmente vai ter que lembrar as pessoas para usá-lo. Então, quando você implementar pela primeira vez um sistema de design em sua organização, você provavelmente vai fazer um projeto sem ele e então alguém vai dizer, oh, nós deveríamos estar usando um sistema de design para isso e tudo bem, isso é provavelmente parte do período de teste, o período de integração do mesmo. À medida que ele se torna cada vez mais integrado ao seu fluxo de trabalho à medida que você se acostuma a ele, ele começa a se tornar uma segunda natureza, onde agora você não constrói ou projeta mais sem seu sistema de design, agora você está realmente alcançando isso com mais frequência e ele só se torna parte de sua natureza, parte de suas ferramentas, parte da parte natural do seu fluxo de trabalho. Mais frequentemente nas organizações, um sistema de design é realmente útil para designers e desenvolvedores front-end e esse é um ótimo lugar para começar, ter alguma referência e orientação de design e também ter algum código front-end, algum HTML, CSS, e JavaScript com o qual um desenvolvedor front-end pode trabalhar para poder construir interfaces, esse é um primeiro passo realmente bom. Integrar isso em uma ferramenta de back-end é provavelmente a próxima fase do seu sistema de design, uma versão dois pode parecer, há algumas ferramentas para esse tipo de coisas. Então, se esse é o lugar que você está começando, tudo bem, esse é realmente um bom lugar para estar. Uma das definições que falamos com sistemas de design é um sistema de design é um produto e então você tem que tratá-lo como um produto. Então, como você faz com que as pessoas se interessem por um produto? Bem, você tem que fazer marketing para esse produto. Isso pode ser e-mail, boletins informativos, pode ser uma conta do Twitter, pode ser um grupo do Slack, pode ser apenas maneiras de envolver as pessoas e se interessar. Um sistema de design mesmo dentro ou organização não é uma exceção a isso. Então você pode ter que fazer o mesmo tipo de evangelização que você faria se você está fazendo software como um produto de serviço, exceto que você está apenas fazendo isso internamente. Então isso significa colocar as pessoas a bordo, falamos sobre comprar um pouco, isso significa ser capaz de evangelizar um pouco para eles, enviar materiais , enviar atualizações frequentes, então você tem que tratá-lo como um produto completo. Não é apenas uma ferramenta, é um produto real que agora você tem que suportar. O que é realmente ótimo sobre o sistema de design é que ele pode ser opt-in, então nem todos têm que usá-lo. Da mesma forma que algumas organizações que você não ordena as ferramentas de design ou ferramentas de desenvolvimento para que as pessoas usem, as pessoas podem usar seus próprios editores de código ou se você quiser usar esboço versus sigma versus ilustrador, Você tem a liberdade de fazê-lo. Agora, você pode fazer um incentivo para as pessoas dizerem, se todos usarmos essa ferramenta nós todos beneficiamos, mas não precisa ser mandatada. Eu descobri que obrigar de cima para baixo muito raramente funciona, ele nunca funcionou em espécie de forçar todos os desenvolvedores a usar a mesma plataforma de codificação, ele não funcionou em fazer designers usar o mesmo aplicativo, ele não vai funcionar com fazendo isso com um sistema de design também. Então, em vez de pensar em como pode ser exigido, em vez de pensar em como você pode incentivar as pessoas a querer ser capaz de usar isso. Incentivos são interessantes para se falar. Como você consegue que as pessoas usem alguma coisa? Você apela para eles. Então coisas diferentes atraem pessoas diferentes. Certamente eficiência e esse tipo de coisas são realmente úteis para convencer as pessoas que, oh, você deve usar essa coisa. Mas às vezes, como maneiras mais suaves de fazer isso, às vezes as pessoas só querem fazer parte de algo e assim criar comunidade é uma ótima maneira de incentivar as pessoas a dizer olhem para todas as pessoas que estão usando este sistema de design internamente ou olhe para todas as pessoas que podem usá-lo e você não quer fazer parte deste clube? Então eu não acho que tem que ser apenas os benefícios tangíveis difíceis, também pode ser o tipo, você está se juntando ao clube de crianças legais ou você está fazendo essa coisa nova ou você é parte da parte de ponta desta organização e o que estamos fazendo ou mesmo olhando para o mundo para dizer, olhe para o que todas as empresas legais como Google Airbnb e Facebook estão fazendo com seus sistemas de design, vamos fazer da nossa organização um desses tipos de organizações. A maneira como um sistema de design é integrado em uma organização é realmente interessante porque há um monte de pessoas lá antes de você ter um sistema projetado, há um monte de pessoas lá que tem suas maneiras antigas de fazer as coisas porque você não tinha um sistema de design. Então agora você introduziu esta nova peça de ferramentas para todos e isso é um obstáculo em si mesmo para levar todos que já trabalham lá de uma maneira diferente a bordo com isso. Novas contratações são um pouco mais complicação às vezes, mas acho que há alguns benefícios nisso também. Então, como exemplo, estamos trabalhando com uma organização agora em que estamos ajudando eles a criar o primeiro sistema de design e eles também estão contratando ao mesmo tempo. Então, as pessoas que trabalham lá agora, nós estamos trabalhando no sistema de design com eles juntos, e então o sistema de design é um pouco estranho, é um pouco de um ajuste estranho para eles. Mas o que eles realmente estão fazendo, que eu acho que é realmente uma grande jogada é, como essas novas contratações vêm a bordo, eles estão apenas fazendo parte do protocolo que estamos usando o sistema de design, isso é parte das ferramentas que Você trabalha aqui. Aqui está o que você usa para o seu portal de RH, aqui está o que você usa para comunicação com o resto da equipe, veja como você cria produtos. Então, mesmo que não seja inteiramente verdade neste momento, todo mundo está experimentando essa fantasia, eles estão dizendo, vamos apenas agir como se esta fosse uma ferramenta que vamos usar e sempre usamos e vamos ver como isso vai acontecer. Então, para novos contratados, você tem uma oportunidade lá também porque é um pouco de uma ficha em branco dizer, bem, esta é a maneira que fazemos as coisas e para um novo contrato, eles não sabem nada melhor, eles não sabem que Você não usa isso naquela organização. Então, experimentando em novos contratados e talvez informando que é assim que queremos trabalhar, não fazemos exatamente isso agora, mas como você está vindo a bordo talvez você possa ser um dos que lidera a acusação. Ele realmente dá um novo contratado algum incentivo para dizer, oh, esta é uma maneira que eu poderia estar envolvido e realmente ajudar as pessoas que estão aqui em vez de sentir que eu já estou alcançando. 8. Como fazer evoluir seu sistema de design: Sistemas de design definitivamente precisam ser mantidos, como falamos, é um produto e cada produto precisa ser mantido. Alguns produtos são mantidos mais do que outros, alguns ficam lá por um ano até que a equipe trabalhe nele e, em seguida, eles são atualizados para a versão 2. Já vi alguns sistemas de design que são assim. Outros são um produto em que as pessoas estão trabalhando todas as semanas e às vezes até todos os dias. Cabe realmente à sua organização ou à sua equipe saber com que frequência você deseja trabalhar no sistema de design, mantendo-o atualizado, mantendo os componentes atualizados, as orientações atualizadas, melhorando-os, iterando em eles, fazendo outra versão deles. Isso pode ser tão lento ou tão rápido quanto sua organização pode apoiar e realmente deve suportar. É realmente até a cadência do seu esforço, disponibilidade de todos para trabalhar nele e a frequência com que você precisa dele. governança dos sistemas de design é um tópico tão complicado. Parte disso é só porque a idéia de sistemas de design, mesmo que eles existam no mundo da impressão por um longo tempo, eles são novos no digital. Não sei se existe um sistema de design que já existe há tempo suficiente para dizer que é assim que a governança deve funcionar. Parte disso é que a indústria está descobrindo como um sistema de design deve ser mantido e quem deve estar no comando dele e todo esse tipo de coisas. Há muitos modelos diferentes de governança. Um modelo óbvio é que, bem, há uma pessoa em nossa organização e essa pessoa é responsável por este sistema de design. Isso funciona bem, mas só funciona bem por um curto período de tempo, porque idealmente você quer que seu sistema de design seja um sucesso, e você quer que ele seja algo que todos usam. Quanto mais pessoas o usam, muito rapidamente essa pessoa fica sobrecarregada com as pessoas fazendo perguntas, descobrindo como elas podem se integrar com ela, ela rapidamente supera um trabalho em tempo integral. Um monte de sistema de design começa com, há uma pessoa no comando dessa coisa, mas muito rapidamente superar isso. O próximo passo disso é, bem, de uma pessoa, talvez nós apenas vamos criar uma equipe em torno do sistema de design. Em vez de uma pessoa ser responsável por isso, há seis pessoas encarregadas disso. Esse é um modelo que já vimos antes em diferentes graus de sucesso. Onde esse modelo realmente quebra é, agora parece que, bem, há seis pessoas encarregadas desse sistema de design e eles não estão realmente encarregados de fazer outros produtos para esta organização e então eles são um um pouco fora de contato para o que o sistema de design realmente precisa suportar. Às vezes, essa equipe em uma organização vai trabalhar como uma agência interna para cultivar coisas para fora e receber solicitações de outras equipes de produtos dentro da organização e ele se sente um pouco desligado. Um dos modelos que vimos funcionar mais bem, e eu acho que isso também está nesses artigos, é o que é chamado de modelo federado. Não há uma equipe dedicada ao sistema de design que funcione exatamente com isso. Mas pode haver uma ou duas pessoas que estavam apenas no sistema de design e , em seguida, o resto dessa equipe é realmente composto de pessoas que trabalham em outras equipes de produtos. É um pouco de um modelo representativo para dizer, algumas pessoas que trabalharam diretamente nisso e só isso, mas então vamos ter algumas pessoas para outras equipes em. É quase como um conselho de conselheiros, mas as pessoas que podem realmente aconselhar a dizer, em um produto, nós fizemos uma coisa, vamos rolar isso no sistema de design ou precisamos dessa coisa aqui para que você obtém perspectivas variadas da organização. Esse é o modelo até agora que vimos trabalhar com mais sucesso. Novamente, eu acho que é um pouco jovem demais para dizer, esse é definitivamente o modelo a seguir em frente. Há muitas maneiras de trabalhar em componentes e atualizá-los e orientação e atualização que no sistema de design. Em uma extremidade do espectro, há atualização de todo o sistema de uma só vez. Você o libera no primeiro dia, um ano depois, você pode lançar a versão 2 de todo o sistema de design. Cada componente é atualizado, toda a orientação é atualizada, é tudo de uma só vez. Do outro lado do espectro, há ser capaz de trabalhar em cada componente de forma independente. No período de uma semana, você pode atualizar um componente da versão 1 para a versão 1.1. Outro componente pode permanecer a versão 1 por mais dois anos. Você pode trabalhar nele em um nível de componente. Existem prós e contras para cada abordagem. Os benefícios de trabalhar nisso em um nível muito finito e um nível muito detalhado é que, você está realmente trabalhando nisso em tempo real e você não está esperando um ano inteiro para tentar e fazer um monte de trabalho. Você pode realmente dividir o trabalho sobre isso em pedaços muito pequenos que são muito mais gerenciáveis. As desvantagens disso, porém, é que agora você tem que ter pessoas dedicadas a isso. Você tem que ter pessoas que estão trabalhando nisso em tempo integral, a fim de estar trabalhando nisso, digamos todas as semanas ou até todos os dias, para saber que um componente precisa ser atualizado. Do outro lado do espectro, o benefício de fazer isso uma vez por ano é que você pode fazer tudo de uma vez. As desvantagens de fazer isso dessa maneira, porém, é que digamos que você precisa de uma atualização de componente. Bem, ter que esperar um ano pela atualização do componente, não é uma coisa boa, especialmente para outras partes da sua organização que vão, bem, ou precisamos disso corrigido agora ou vamos nos desviar do sistema. Sua quilometragem pode variar dependendo da organização em que você trabalha e do quão ocupado eles estão, e quanto esforço e tempo você pode dedicar ao sistema de projeto e sua manutenção. Mas provavelmente não é um lado ou outro, mas provavelmente aterrissando em algum lugar no meio. Uma das perguntas mais frequentes em torno de sistemas de design é, quanto ele deve mudar e deve ser uma coisa única e feita ou há algo que você deve estar tuitando o tempo todo. Uma das coisas que eu amo no trabalho digital é que temos a capacidade de mudar as coisas quantas vezes quisermos. Isso é diferente de fazer trabalhos de impressão, se você imprimir algo errado em um papel e você fez um erro de digitação, você tem que jogar esse papel fora e imprimir um completamente novo. Com o digital, você não precisa, nós podemos iterar. Essa é uma das coisas que é ótima sobre design de produto e design digital é que podemos mudar as coisas de uma maneira pequena e mudar as coisas de uma maneira grande. A questão de saber se você deve ou não fazer o seu sistema de design dessa forma, mudanças muito amplas ou iterar nele, realmente depende de quão bom ele é. Direi que, se for realmente ótimo, pode deixar isso em paz. Se não é assim tão bom, então você provavelmente deveria consertá-lo. Mas o que sabemos do design de produtos digitais é que muito raramente qualquer um de nós pode prever algo sobre um produto digital. Faça isso muito bem na primeira vez e pode pregá-lo, tê-lo perfeito e, em seguida, nunca mais ter que tocá-lo novamente. A resposta é provável que você tenha que tocá-la um pouco depois de fazer sua hipótese inicial e torná-la pela primeira vez. Deve haver uma versão 2 ao virar da esquina. Se é daqui a um ano, daqui a seis meses ou seis semanas, acho que depende do quão bem você adivinhou da primeira vez. O que é empolgante sobre os sistemas de design também é que eles são fundamentais e assim você deve ser capaz de construir sobre eles. Sistemas de design como nós os vemos hoje, se você olhar para iluminação ou se você olhar para o material, se você olhar para qualquer um dos populares de código aberto que estão lá fora, muitos deles são para as plataformas padrão, web e talvez aplicativos nativos. Poderá ver aplicações Android ou aplicações iOS. Nós vivemos em um momento muito legal hoje, onde esses não são apenas os dispositivos com os quais estamos interagindo. Muitos de nós têm Amazon Echos em nossas casas ou no Google Homes. Interagimos com coisas que são apenas voz ou toque e não apenas coisas para as quais usamos um mouse, tablets e coisas assim. Eu acho que como um sistema de design deve suportar isso de uma perspectiva de plataforma e padrão é realmente até como você vai implementá-lo. Mas uma coisa que deve permanecer firme durante todo o caminho, é na verdade que seus princípios devem apoiar essas coisas novas. Um teste de seus princípios é dizer, se olharmos para este principal, isso guia nosso trabalho na web tão bem quanto pode orientar, digamos, um dispositivo só de voz? Se não, talvez haja algum ajuste fino para fazer com seus princípios. Mesmo que as plataformas possam ir e vir, pense, você pode suportar reage em uma versão do seu sistema de design, e então se a reação desaparecer em alguns anos, você vai ser talvez queira aposentar isso. Suas plataformas podem ir e vir, mas talvez pense sobre seus princípios persistindo o tempo todo. Um dos obstáculos mais comuns que eu vejo com sistemas de design é ficar muito específico em uma tecnologia. Há sempre um sabor da semana. Um sistema de design a partir de um design visual e design gráfico e perspectiva de design de interface do usuário. Essas coisas são tentadas e verdadeiras, design visual não mudou, os princípios do design gráfico permanecem firmes. Esses são ótimos, mas há sempre um sabor da semana em termos de tecnologia. Uma semana, é angular uma semana , reage outra semana é vista. Uma das armadilhas que vejo nos sistemas de design é entrar em uma tecnologia. Se você pretende que seu sistema de design dure muito tempo, eu sugiro não ir muito longe no sabor da tecnologia e, em vez disso, ir com algo um pouco mais agnóstico. Muitas das maneiras que construímos sistemas de design é suportar HTML, CSS e JavaScript de baunilha, e, em seguida, construir camadas de tecnologia em cima disso. Aqui nossos componentes HTML e CSS e componentes JavaScript e, em seguida aqui está a versão reativa desses componentes ou a versão angular desses componentes. Mas realmente certificando-se de que você tem ambas as versões. Se você entrar em tudo e dizer, nosso sistema de design é apenas reage, então se você se afastar de reagir por qualquer motivo que você tem que reformular todo o sistema. Se você pensar sobre longevidade, eu sugiro ir para baixo para as tecnologias HTML, CSS e JavaScript que têm sido em torno e continuam a persistir por décadas, vez de algo que pode se aposentar no Três ou quatro anos. Parte da armadilha de um bom sistema de design é que parece que se você tem a ferramenta certa, isso é tudo que você precisa. Se você tem um ótimo sistema de design já configurado, você fez o trabalho para identificar os componentes certos, para identificar grandes princípios, você tem os universais, você tem os específicos, é Diga, bem, nós temos isso. Agora podemos fazer o que quisermos sem falar. Eu acho que parte da coisa que é fácil de esquecer com um sistema de design, é que o sistema de design deve incentivar a colaboração e não desencorajá-lo. Se você é um designer e você tem um ótimo sistema de design ou um desenvolvedor e você tem um ótimo sistema de design, isso não deve ser uma desculpa para você ir, eu posso simplesmente fazer isso sem falar com alguém, mesmo que você possa. Eu acho que vai ser uma das grandes tentações de ter um bom sistema de design, é ser capaz de dizer que isso deve ser uma coisa que me faz falar pessoas com quem eu trabalho mais do que algo que me faz ir, eu não precisa trabalhar com eles mais. É assim que o sistema de design melhora. Se você não estiver colaborando, seu sistema de design irá parar. Vai ficar obsoleto muito facilmente. Quanto mais você estiver colaborando, mais oportunidades você encontrará para tornar seu sistema de design melhor. 9. Considerações finais: Nós fizemos isso. Chegamos ao fim da aula. Agora eu espero que você saiba tudo o que você precisa saber para começar a usar sistemas de design. Se você não usou um antes, dê uma chance. Se você já usou um antes, agora você sabe como torná-lo melhor? O que eu espero que você faça a partir daqui é começar a colaborar mais, começar a trabalhar mais com seus clientes, com seus projetos, com seus membros da equipe, com sua organização, mas como você pode implementar sistemas de design e usá-los para o melhor sua habilidade. Ao longo desta aula, você fez algumas listas, você gera algumas idéias, você tem alguns pensamentos, agora, compartilhe essas com outras pessoas. Esse é o objetivo de um sistema de design é colaborar. Ponha isso em prática. Você pode olhar para a Galeria de Projetos. Você pode enviar seu trabalho lá. Você pode obter feedback sobre o seu e ver o que outras pessoas estão fazendo também, então certifique-se de aproveitar isso. Qualquer boa aula provavelmente deixaria você com mais perguntas do que respostas, então espero que esse seja o caso aqui. Se você tiver alguma dúvida ou comentário, deixe-os na discussão do projeto, e eu estarei verificando com muita frequência para ver o que você tem a dizer. Muito obrigado por fazer a aula. Mal posso esperar para ver o que você faz. 10. Mais cursos no Skillshare: maneira.