Como criar sistemas de design complexos no Adobe Xd

1. Apresentação do curso: Os sistemas de design são usados para criar experiências fáceis de usar, fáceis de dimensionar e fáceis criar consistentemente no futuro. O ponto principal de um sistema de design é vencer a ponte e a lacuna entre designers e desenvolvedores e ser fácil de integrar e desenvolver para uso posterior no futuro como as habilidades do sistema de design e como as habilidades da empresa crianças, eu não sabia que meu nome é Alex. E nesta classe Skillshare vamos falar sobre o que está projetando sistemas e como criar sistemas design no Adobe XD, sou um criador de produtos de design e até agora eu criei mais de 500 produtos de design. Eu também sou criador de cursos e até agora eu criei mais de 30 cavalos diferentes, tudo sobre seu design de UX no Adobe XD, vamos falar sobre sistemas de design e seu propósito e o que é um boa estrutura para um sistema de design. Então, vou mostrar alguns exemplos e padrões líderes do setor que você deve seguir ao criar seus próprios sistemas de design no Adobe XD. E depois disso, vou mostrar como criar seu próprio sistema de design usando o WASD. E vou mostrar meu sistema de design inicial, como eu o criei e o que você pode aprender com ele. Em seguida, vamos falar sobre tokens de design, o que eles são, por que eles são úteis para criar seus sistemas de design. E, finalmente, como dimensionar seu sistema de design e foi dimensioná-lo. E o que você deve procurar quando estiver realmente dimensionando seu sistema de design. Seu projeto de classe para esta classe é criar o seu próprio sistema, mas nada importante demais, apenas alguns componentes aqui e ali. E estou muito animado para ver o que vocês podem criar. Há um vídeo na classe explicando mais da sua classe. Os sistemas de design de projetos são mais úteis do que nunca nos dias de hoje quando temos esses vários tamanhos de tela e dispositivos para os quais precisamos projetar. Portanto, temos que acompanhar a consistência quanto ao que estamos criando para quais tamanhos de tela e como tudo funciona no final do dia, para nossos usuários finais, usando um sistema de design para manter track é realmente importante, especialmente se você estiver usando a ferramenta que é incrível como o Adobe XD. Ansioso para vê-lo lá dentro e vamos criar alguns sistemas de design incríveis. 2. O que é um sistema de design: sistema de design, como o nome sugere, é uma abordagem sistemática para criar designs de UI e UX. O principal objetivo do sistema de design de área lá fora é acompanhar o que todos na equipe criaram. O principal objetivo do sistema de design é a escalabilidade. Seja essa a escalabilidade imediata ou a escalabilidade que virá no futuro. Mas o principal trabalho do sistema de design é manter a escala da dívida consistente. O que isso significa é que todas as mudanças que você fizer refletirão através do resto do seu design será coerente e permanecerá na aparência do que está determinando o início de um sistema de design. Todo bom sistema de design consiste em dois tanques, regras e padrões e bibliotecas de padrões. Regras e padrões estão lá para todos os colegas de equipe segui-los até o t, porque essa é a única maneira que o sistema de design será dimensionado uniformemente, que vai crescer e vai ser consistente ao longo de sua vida. Porque a vida útil do sistema de design é a vida útil da empresa. Nunca é feito, nunca está terminado. Assim, enquanto a empresa ou o produto existir, o sistema de design pode coexistir com esse produto ou empresa, enquanto a biblioteca de padrões, por outro lado, está lá, e vai ser dimensionada o tempo todo, dependendo das necessidades muitas vezes, as necessidades do Kubrick e necessidades futuras de cada projeto específico e de cada empresa em particular. O principal equívoco lá fora é que os sistemas de design são apenas para as grandes empresas que não são. Você pode usar um sistema de design para empresas menores, você pode usar o sistema de design com menos número de componentes. Temos menos número de diretrizes e padrões. E essas diretrizes podem ser um pouco difíceis no início. Mas à medida que o projeto avança, medida que a empresa cresce, as regras e os padrões vão se apertar e o sistema de design finalmente tomará sua forma e sua forma, forma pretendida do começando e só vai crescer com a empresa. Os sistemas de design podem ser para designers e para desenvolvedores também. E isso pode ser alcançado com o uso algo que é chamado token. Vamos falar sobre eles um pouco mais tarde nesta aula. Mas, basicamente, a colaboração entre designers e desenvolvedores é a chave para todos os bons sistemas de design por aí. Assim que a mudança for feita ou propagada, designers e desenvolvedores precisam estar na mesma página para que esse sistema de design funcione e para a mudança seja implementada imediatamente. E é mais fácil possível. Isso é extremamente importante para startups, mas para empresas estabelecidas por aí também, porque você não quer quebrar o design e a funcionalidade do produto simplesmente mudando o design sistema demais com algo que não está alinhado com todos na equipe. Existem algumas coisas que todo bom sistema de design por aí deve ter. E no próximo vídeo vamos falar sobre isso. Qual é a boa estrutura para todos os bons sistemas de design lá fora? 3. Estrutura de um sistema de design: Como mencionei na lição anterior, estrutura de um bom sistema de design realmente consiste em duas coisas, regras e padrões e bibliotecas de padrões. As funções nos padrões podem estar lá de muitas formas diferentes. Por exemplo, cada regra tem que ser, coincidir com algo que você está fazendo dentro desse sistema de design. E digamos que a regra pode ser sobre grade, pode ser sobre tipografia. A regra pode ser sobre cor, sobre espaçamento, sobre ritmo horizontal ou vertical. Pode ser sobre qualquer coisa. E as regras podem, naturalmente, ser quebradas, mas elas podem ser quebradas no início de um sistema de design porque mais tarde, quando o projeto é desenvolvido, quando o projeto cresceu, é muito difícil quebrar uma regra do que é quando você está apenas começando com o design. Sistema. Os padrões podem ser algo como valores da empresa. Eles podem ser algo como um tom, como um clima do projeto e fora do site do cliente ou da marca do seu cliente. E isso deve ser seguido até o interior de um sistema de design porque você não quer se desviar demais, especialmente no sistema de design que são realmente Corporativos. Você não quer que eles mudem muito porque a multidão corporativa está realmente acostumada a esse tipo de expiação, esse tipo de design porta tipos de estudiosos, essas topografias, hierarquias e muito mais. A segunda parte de um bom sistema de design são as bibliotecas de padrões. E você pode alterar essas bibliotecas de padrões à medida que você cresce ao longo da dica principal aqui, logo que você começa a construir bibliotecas de padrões de sistema de design, você não precisa criar elementos que não são necessários no momento. Por exemplo, se seu projeto não tiver um painel, você não criará elementos como gráficos e gráficos porque eles simplesmente não são relevantes no momento. Você não vai preencher seu sistema de design com todos esses componentes inúteis porque lembre-se de que você, como o designer está lá, sua equipe de design, está lá para criar esses projetos. Mas esses projetos devem ser acessíveis e fáceis de entender para desenvolvedores que precisam desenvolver todos esses elementos para esse projeto específico. Portanto, basta criar elementos que são necessários naquele momento e deixe o sistema de design escalar ao longo do tempo conforme o projeto exigir. Agora, como você pode dividir todos esses componentes na biblioteca de componentes? Basicamente, existem três categorias principais. Existem átomos, moléculas e organismos. E você pode, claro, adicionar modelos. Você pode, é claro, se expande para quantas outras variações você quer. Por exemplo, fluxogramas ou wireframes, wireframes de alta fidelidade. Mas basicamente átomos, moléculas e organismos estão lá todos os bons sistemas de design e estão escalando com o projeto. E você sempre pode adicionar mais desses elementos, como eu disse mais tarde no alinhamento do projeto. Agora, como o nome indica, os átomos são os menores do grupo e podem ser algo que é muito fácil. Por exemplo, tamanho de cor ou texto ou largura inferior ou algo parecido. Então as moléculas são criadas a partir de átomos, foram para átomos, combinam. Basicamente, você vai criar uma molécula, por exemplo, um menu suspenso ou algo assim. E então os organismos são, digamos, uma forma que é criada a partir de vários elementos diferentes, por exemplo, campos de entrada e botões. E então você vai obter uma forma que é um organismo criado para vários e de vários átomos e moléculas diferentes se combinam em um único organismo. Isso é chamado de estrutura atômica e é realmente nossos padrões da indústria há décadas. Mas você pode criar seu sistema de design como quiser. Mas se você estiver usando essa abordagem atômica, será muito mais simples para você criar seus elementos e reduzi-los no futuro. O ponto principal de cada sistema de design lá fora é a consistência. Então você tem que pensar em consistência o tempo todo. Onde quer que você esteja apenas criando um botão simples, você precisa pensar em como esse botão será dimensionado através de vários tamanhos de tela diferentes. Vai mudar a largura, vai mudar a altura. Vai mudar a cor vai ser com cantos arredondados, sem cantos arredondados. Então você tem que pensar em todos esses elementos enquanto está construindo seu sistema de design, você tem que pensar em regras e padrões, que mencionamos no início desta lição. E você também precisa pensar outros elementos em sua biblioteca de padrões. Como eles vão coincidir um com o outro? Eles vão ficar bem na página? Portanto, sempre que você cria um novo elemento dentro da biblioteca de padrões, você tem que colocá-lo em uma página, você tem que colocá-lo em um teste imediatamente, ver se ele funciona com o resto da biblioteca de padrões. E então, se isso acontecer, você pode mantê-lo e, se não, você sempre pode sucateá-lo. Esse é o ponto principal do nosso sistema de design. Sempre vai evoluir, sempre mudará e nunca parecerá o mesmo que foi ontem. Na próxima lição, mostrarei alguns ótimos exemplos de sistemas de design dos líderes do setor e dos padrões do setor. Vou te mostrar o que procurar. E, mais tarde, nesta aula, mostrarei como criar seu próprio sistema de design no Adobe XD e o que você pode conseguir com criação de sistemas de design no Adobe XD. Vejo você lá. 4. Exemplos do sistema de design: A melhor maneira de criar seu próprio sistema de design é aprender com os padrões da indústria e gigantes do setor. E para fazer isso, vou mostrar alguns exemplos e você pode encontrar esses exemplos no PDF anexado. Você pode simplesmente clicar nesses links para acessar todos esses exemplos que vou mostrar e simplesmente aprender com eles o que eles estão criando. Mas a principal coisa antes de começarmos, não se sinta obrigado a tomar todos os componentes que essas empresas estão criando porque, como mencionei anteriormente nas lições anteriores, esses componentes estão lá por um motivo. Portanto, a menos que você esteja usando qualquer um desses componentes, não os crie. Quando você começa a criar um sistema de design, é realmente importante começar pequeno. Então, à medida que seu projeto evolui, você adicionará todos esses componentes diferentes. Como qual é o objetivo de criar componentes se eles não forem necessários no momento, eles vão apenas atrasá-lo e você não otimizará seu tempo nesse projeto específico se você está criando componentes que não são necessários para o seu projeto. Então deixe-me mostrar todos esses exemplos. O primeiro exemplo que temos é o design de material do Google. Claro, esse design de material é usado em seu sistema operacional Android. A Apple tem a sua própria, é chamada de diretrizes de interface humana, e você pode encontrá-la também. Vou vincular todos esses sistemas de design que estão mencionando com mais alguns sistemas de design que não mencionarão neste vídeo dentro do PDF. Mais uma vez, abra o PDF, clique nesses links para acessar e procurar por si mesmo. O que temos aqui é apresentar material você no momento da criação deste vídeo. Este é o novo e o padrão do setor no mundo Android. Então, basicamente, continue usando o design de material também. Você pode ver diretrizes, componentes, ícones, componentes para a Web, diretrizes de acessibilidade e tutoriais para desenvolvedores. Você pode aprender mais com o blog deles. E vamos examinar rapidamente esses elementos e não vou entrar em muitos detalhes porque a maioria desses sistemas de design são basicamente os mesmos. Eles estão usando os mesmos padrões, estão usando as mesmas diretrizes, mas eles parecem diferentes. Porque, por exemplo, com esse sistema de design de material, é para Android, então é para dispositivos móveis. Enquanto outros sistemas de design existem, por exemplo, sites ou para projetos da web ou para painéis ou elementos como esses. Claro, todos esses elementos serão diferentes entre sistemas de design móvel e desktop. Mas a chave é a mesma, os padrões são os mesmos. Então, digamos que você tenha essas diretrizes, princípios, estilos e melhores práticas. O que isso significa é para cada elemento, quando é o melhor momento para usar esse elemento? Nesse caso , por exemplo, você não usará certos, digamos que selecionadores de data. Em certos exemplos, você usará diferentes tipos de seletores de data nesses exemplos. É por isso que esses princípios e melhores práticas estão lá. Se você já olhou para um projeto de branding ou em uma apresentação de marca de uma marca, você pode assisti-los no Behance Por exemplo, você pode pesquisar vídeos do YouTube por eles. Basicamente, as melhores práticas estão lá. E esse é o principal motivo, por exemplo, por que você usa o logotipo nessa orientação em vez dessa orientação. Por que você usa imagens brancas aqui e não aqui. É por isso que essas melhores práticas estão lá. Para alcançar essas melhores práticas e esses princípios e estilos, você precisa começar pequeno. Você tem que começar do início. Você precisa criar esses vários botões e experimentar. Veja o que funciona, o que não funciona, o que funciona? Certifique-se de atualizar a partir daí, certifique-se de adicionar novos elementos, certifique-se de adicionar novos estilos, novos componentes desses elementos e ver o que funciona e o que adere, o que não funciona, jogue longe e simplesmente siga em frente. Isso me leva aos componentes, à orientação do projeto e à documentação do desenvolvedor para blocos de construção interativos da interface do usuário. E você pode vê-los aqui. São botões, imagens, formulários, campos de entrada, ícones e muito mais. Esses componentes estão lá para facilitar para você. E vou te mostrar isso em uma lição posterior nesta aula. Quando chegarmos ao Adobe XD, os componentes estão lá para acelerar muito as coisas porque os componentes podem ser usados em todo o seu sistema de design, em todo o projeto. E eles podem ser usados por vários designers diferentes em sua equipe devido ao recurso de edição principal do Adobe XD, vários membros diferentes da equipe podem estar em vários lados diferentes do planeta. E todos eles podem usar o mesmo sistema de design e usar os mesmos componentes desse sistema de design específico. Claro, você sempre pode alterar os componentes. Você sempre pode atualizá-los. Você pode adicionar diferentes componentes, estilos e muito mais. Mas essa é a chave aqui para criar componentes que serão reutilizáveis em todo o seu sistema de design. Vamos explicar isso um pouco mais tarde, mas por enquanto, vamos seguir em frente. Os ícones são os principais recursos para todos os bons sistemas de design por aí. Claro, como este é o Google, eles têm seus próprios ícones de material. Quando você estiver começando com seu sistema de design, provavelmente usará alguns outros ícones em seu sistema de design. Mas à medida que esse sistema de design evolui, pois você encontrará uma voz para uma marca. À medida que você encontrar a direção e as diretrizes para a marca, você também evoluirá esses ícones. Se você não é especialista em criação de ícones, talvez seu cliente possa. Contrate alguém que esteja, e então você pode usar esses ícones nesse sistema de design. Em seguida, temos componentes para a web. Então, implementa e personalize aplicativos web materiais com nosso código e documentação. Obviamente, isso está escalando de dispositivos móveis até a Web. Finalmente, temos diretrizes de acessibilidade que são extremamente importantes. Aprendi a ajudar usuários de diversas habilidades a navegar, entender e usar sua interface do usuário porque nem todos têm a mesma visão. Algumas pessoas têm deficiência visual, por exemplo, algumas pessoas têm dificuldade em ler. Você tem que pensar em todas essas pessoas porque há muitos de seus usuários que infelizmente, terão alguns desses problemas, que precisam pensar neles o tempo todo quando você estão criando seu sistema de design. Finalmente, temos tutoriais para desenvolvedores, implementamos material com Java, Kotlin, Objective-C, Swift e onde quer que o pai mordesse, dependendo do sistema de design, dependendo dos desenvolvedores, você vai usar essa ou aquela tecnologia. Então, basicamente, não há resposta certa ou errada aqui, você precisa falar com seus desenvolvedores. Você precisa falar com seu cliente, mais uma vez, dependendo do que seu cliente usará. Nesse caso, para material, é a maioria para dispositivos móveis, para Android. Então, é claro que eles vão usar tecnologias diferentes, então se você estiver, por exemplo, usando, eu não sei, PHP ou algo assim para WordPress ou qualquer coisa. Portanto, essas tecnologias serão diferentes e dependendo de quais tecnólogos que são desenvolvedores usarão, você formará seu sistema de design para esses fins de desenvolvimento. Então, basicamente, você pode pular aqui, você pode clicar no design, você pode ver. Então fundação, visão geral, layout do ambiente , navegação, cor, tipografia, som, iconografia, forma, movimento. Então, como eu disse, e vou continuar dizendo isso ao longo desta aula. Não se sinta intimidado por todos esses elementos diferentes porque , mais uma vez, este é o Google. Eles tinham literalmente bilhões de usuários em todos os dispositivos e em toda a empresa. Claro, eles vão usar todos esses elementos diferentes que provavelmente nunca ouvirão falar, muito menos usar. Portanto, não se sinta intimidado. Dívida de muita largura. Em seguida, temos componentes. Estes são botões, caixas de seleção de cartões, chips, tabelas de dados e assim por diante. Em seguida, desenvolvemos para Android, para web flutter iOS. Temos recursos e você pode ler tudo sobre esses recursos. Então ferramentas de personalização de tipo hiper, escala, criador ou forma e assim por diante. Eles têm o blog. Portanto, certifique-se de verificar novamente, acredito nos links para tudo o que mencionei neste vídeo e muito mais no arquivo PDF. Clique nesses links para acessá-lo. Em seguida, temos o sistema de design Atlassian, linguagem de design de ponta a ponta para criar experiências simples, intuitivas e bonitas. Então, mais uma vez, você notará que temos componentes, temos padrões. Então, marca, eles têm missão, eles têm personalidade e prometeram, que é o que eu mencionei no vídeo anterior. Você não vai falar com as mesmas duas pessoas que estão usando isso em suas cuecas em seu dispositivo móvel. E dois CEOs de grandes empresas que estão, por exemplo, em algum escritório caro. Então, o tom não é o mesmo. Então você precisa falar com seu usuário no idioma que ele entenderá. Então temos fundações. Então, cor, iconografia, tipografia, mais uma vez, dependendo de quem é seu usuário, você usará cores diferentes, ícones diferentes e diferentes tipos, conteúdo, linguagem e gramática, vocabulário, estilo de escrita. Então, mais uma vez, estamos conversando com o usuário. Quem é seu usuário? Você tem que falar com seu usuário em uma linguagem de dívida que ele vai entender. Você pode explorar isso e aqui temos conteúdo de fundações de marca. Vamos clicar no conteúdo para que você possa ver linguagem inclusiva, gramática, vocabulário, você pode clicar aqui. Componentes. Temos nosso termo, grupo externo, distintivo e imediatamente, você vai notar que isso parece muito diferente disso porque há duas coisas completamente diferentes. Então, se eu clicar no banner, por exemplo, aqui, você pode ver como esse banner se parece. E imediatamente podemos ver o código, podemos ver o erro, podemos ver o anúncio. Como isso se parece? Como ele é dimensionado, como ele encolhe ou cresce? E você pode ver o uso. Como isso funciona? Então, anatomia, temos o ícone, temos a mensagem e temos as ações que são opcionais neste caso. Portanto, sinta-se à vontade para navegar por todas essas categorias para saber mais sobre como elas são usadas e como elas são integradas aqui. Em seguida, temos o sal do sistema de design polarizado Shopify. Vamos primeiro com as fundações. Valores experientes, que é o que eu mencionei. abordagem deles, o que considerar isso. Eles são empoderadores, criados, eficientes, confiáveis e familiares. Portanto, esses são todos os valores que eles estão buscando com sua marca, portanto, seu sistema de design. Em seguida, temos o conteúdo. Então voz e tom, Shopify é reflexo de voz de quem eles são. Então, quem são eles simplesmente colocam lá a empresa construída por pessoas reais que entendem esse negócio e se preocupam em ajudar os outros a terem sucesso. Então, esses são seus valores. Temos o design. Mais uma vez, desenhe cores, princípios. A comunicação é fundamental. As cores têm significado. As cores seguem as diretrizes de acessibilidade para que você possa ver papéis de cores Portanto, superfície basicamente elementos que estão por trás de outros elementos na superfície. Esses são os elementos como textos, por exemplo, primários, por exemplo, para os elementos, digamos botão secundário para os elementos que são, digamos marcas de seleção ou ícones ou algo parecido , interativo. Talvez haja uma animação acontecendo. Então, todas essas cores estão lá por um motivo. Mais uma vez, estou voltando a todas as vezes para o ponto que fiz anteriormente. E não crie elementos que não sejam necessários em seu sistema de design. Assim, você pode ver a variação de cores e ver essas cores implementadas aqui. Mais uma vez, encorajo você a conferir todos esses elementos e aprender mais sobre eles. Você pode ver ilustrações. Eles estão usando essas ilustrações, mas por que, por que eles estão usando essa ilustração específica nesse estilo específico, usando essas cores específicas. Então você pode aprender mais sobre tudo isso aqui nesta página. Em seguida, temos um sistema de design de carbono, que é criado pela nossa IBM, que é uma grande corporação. Adoro este sistema de design porque você pode clicar aqui e clicar nos kits de design e você pode obter a versão de esboço, mas você também pode obter a versão do Adobe XD, que está em algum lugar aqui. E você pode abrir no XD, aqui está. Mas é construído pela comunidade de carbono. Portanto, não é exatamente no local porque não foi criado para o Adobe XD em vez de para esboço no início. Em seguida, eles passaram para a Figma, mas também oferecem suporte ao Adobe XD e ao Azure. Então você pode chegar às crianças ali mesmo, abri-lo e você também pode fazer o mesmo para shopify, sistema de design, polaris. E tenho certeza de que você pode obter a Atlassian também. Você pode abri-lo e aprender mais sobre como ele se parece. Mas de volta ao carbono, basicamente, sistema de código aberto ou de design para produtos e experiências digitais. A linguagem de design é seu sistema de fundação que consiste em código de trabalho, ferramentas e recursos de design, diretrizes de interface humana e uma comunidade vibrante de colaboradores. Então lá vamos nós. Muitos designers diferentes estão contribuindo para esse sistema de design. É por isso que você pode baixar esses arquivos e explorá-los gratuitamente. Então comece a projetar. Você pode ver todos esses elementos diferentes, o que eles estão usando, mas estou mais preocupado com as diretrizes. Isso, eles estão começando com a grade. grade está no centro de todos os bons sistemas de design por aí. Se eu apenas reproduzir este vídeo, assim, você pode ver dois x grid e como ele se parece? Basicamente, consiste em uma caixa e essa caixa pode se expandir para outras caixas, que podem ser maiores ou menores. Mas basicamente está nos incrementos de dois. Tudo se encaixa bem nessas caixas. Basicamente, você pode ver o espaçamento aqui. Duas caixas separam o texto, as imagens, o layout e coisas assim. Portanto, certifique-se de explorar tudo isso. E você pode ver como o ritmo vertical, Brooks aqui e como a escala funciona aqui neste vídeo em particular, eu realmente encorajo você a explorá-lo mais. Você pode ver ícones, pictogramas, movimento, o que é realmente importante. Então, como eles usaram animação? Então, se eu clicar aqui para reproduzir este vídeo, você pode ver como eles estão usando o movimento dentro do sistema de design, como a animação funciona, como a transição funciona, como as coisas funcionam. Por exemplo, a facilidade na animação está fora da animação e muito mais. Então, explore-o, faça o download e certifique-se de conferir por si mesmo. Finalmente, temos o Salesforce. Você pode começar. Você pode ver quais plataformas são correntes ou florestas visuais relâmpagos, diretrizes de design Heroku, Android e iOS. Portanto, visão geral, construtor, entrada de dados de gráficos, exibição de dados e muito mais acessibilidade, que é o que falamos sobre blueprints de componentes. Então, visão geral, digamos acordeão, quero conferir o correspondente, como ele se parece? Então isso é uma ótima coisa. Posso clicar aqui e entender qual era a intenção por trás disso de acordo. Então, neste caso específico, você pode ver que este acordeão está fechado, mas quando eu clico, toda a seção vai se expandir para baixo. Quanto vai se expandir para baixo? Por exemplo, se você estiver usando isso para a grade de pixels, que você mencionou no sistema de design de carbono da IBM, ela se expandirá pelos incrementos de dois. E você pode usar essas regras, padrões e diretrizes em todo o seu sistema de design, o que quer que você esteja criando. Então, mais uma vez, você pode clicar no alerta, por exemplo, você pode clicar no avatar ou crachás. Vamos clicar no carrinho e ver como seus cartões se parecem. Então este é o carro, este é o novo, cartas menores, cartas mais curtas, cartões mais largos. Assim, você pode ver como todos esses elementos são implementados, como eles são definidos na página. E se eu clicar aqui, então temos a ação 123, temos a dica de ferramenta desses diferentes elementos. Finalmente, temos isso que é utilitários, margem, função de dimensionamento de texto, lista vertical. E, por fim, projetamos tokens. Os tokens de design são incríveis. Pense em sistemas de design e vamos falar sobre eles em uma das lições posteriores porque eles estão realmente no centro de todos os bons sistemas de design. E eles são realmente a ponte entre designers e desenvolvedores para conhecer o sistema de design e usá-lo ao máximo e continuar usando-o no futuro. E é por isso que estamos usando tokens de design em nossos sistemas de design. E vou mostrar isso no Adobe XD também na lição posterior. Mas, por enquanto, confira esses links, como mencionei, eles estarão na mistura de PDF para explorar o máximo possível e aprender o máximo possível. Porque você pode ver que o sistema de design não é algo que você aprenderá em um dia ou dois. Realmente leva meses e anos para que um bom sistema de design se desenvolva. Mas não deixe que o material que você crie seu próprio sistema de design porque os benefícios são enormes à medida que você está projetando, medida que você está construindo e desenvolvendo, você expandirá o seu próprio sistema de design. Na próxima lição, falaremos sobre o Adobe XD. O que você pode criar no Adobe XD em termos de sistemas de design e como você pode dimensionar seu sistema de design no Adobe XD? Vejo você lá. 5. Como criar um sistema de design no Adobe XD: Adobe XD é uma ferramenta incrível porque em uma única ferramenta você pode projetar protótipo e compartilhar com seus clientes, desenvolvedores e partes interessadas. Isso é ótimo para criar sistemas de design, e é sobre isso que vamos falar nesta lição da classe, como criar seus próprios sistemas de design no Adobe XD. E mais tarde vamos falar sobre dimensionar esses sistemas de design no Adobe XD. Vamos começar. Aqui estou no Adobe XD e abro a placa de arte 1280 por 800. Este é apenas um quadro de arte básico que você encontra na tela inicial aqui em um D Adobe XD. Como criar seu sistema de design? Bem, você tem que começar pequeno. Vamos começar com as grades. Então, se eu me esconder para que você possa vê-lo em vez de disparar esse layout, vou mudá-lo para quadrado n. Isto é o que falamos anteriormente para o sistema de designers da IBM, eles estão usando esta iteração de dois. Então, serão quadrados muito pequenos aqui, mas vou usá-lo. Número de oito, por exemplo, algo como dívida. E então eu vou acionar minha calculadora e vou trazê-la aqui. Então, temos 1284, a largura. Então 1280 dividido por oito, é 160. O que isso significa é que quando eu zoom todo o caminho aqui, você pode ver que esses quadrados são oito pixels por oito pixels porque esse é o tamanho quadrado. Se baixá-los para dois, você pode ver que eles caíram no botão de tamanho. Vou aumentá-los de volta para oito porque oito pixels são uma espécie de padrão da indústria ou 8 grid, se você quiser. E é isso que vamos usar para nosso sistema de design imaginário aqui no Adobe XD para começar, o que podemos criar é algo pequeno, como um botão, por exemplo. Então, vamos começar com a topografia primeiro. Então eu posso dizer algo como clicar aqui, talvez. Vamos usar algo como Open Sans talvez, porque é fonte gratuita do Google e você pode encontrá-la online. E vou posicioná-lo aproximadamente por aqui. Vamos com 24, porque 24 é divisível por oito, é claro. E então eu vou criar meu botão. Então, vou criar algum espaçamento em torno dele. Vou clicar com o botão direito do mouse, enviá-lo para trás apenas para que possamos ver nossos textos. E agora posso começar a brincar e posicionar na minha grade. Então, se eu segurar minha tecla Alt, você pode ver que eu tenho 16 deste lado, 16 deste lado por 78 deste lado, é bom, mas sete não é tanto. Então, o que você pode fazer aqui não é muito porque ferramentas de texto do Adobe XD não são realmente mais antigas desenvolvidas como o Adobe Illustrator por exemplo, ou o Adobe Photoshop. Mas isso vai funcionar muito bem neste caso porque estamos apenas criando nosso projeto de inicialização aqui. A primeira coisa a considerar, é seu tipo muito grande? Se for, então você pode aumentar o espaçamento para 16 em cada lado, por exemplo, mas você ainda pode ver 1515 aqui. Então, se começarmos assim, ainda será 15 porque a forma como o Adobe XD trata os textos. Então, mais uma vez, o que você pode fazer se estiver trabalhando com a marca, que requer esse idioma, o que falamos anteriormente, então você vai ajustar esse raio de canto para algo como oito, por exemplo. E agora temos os cantos arredondados. Portanto, 64 é o tamanho do nosso botão divisível por oito, é claro, 144 divisíveis por oito. Então, agora podemos prosseguir. Em seguida, é a convenção de nomenclatura sub este botão é bem grande. Sal, por exemplo, você vai nomeá-lo btn. Deixe-me te dar outra chance. Btn dash, BG, botão, fundo, traço grande. E você tem que fazer isso em todo o seu sistema de design para todos os seus elementos, porque dessa forma você vai conhecer e os designers de sua equipe vão saber, os desenvolvedores vão saber, é isso para o nosso site, tablet, relógio móvel ou qualquer tamanho que seja. Então, o próximo é agrupá-los. Então, a coisa a considerar é de onde esse texto vem. Nesse caso, ele vai para a esquerda. Então, se eu passar o mouse aqui, podemos ver que está alinhado à esquerda e está fora disso. Então, ele vai dimensionar automaticamente o botão e expandido para o lado direito. Ou você pode consertá-lo se quiser, você pode clicar em sites fixos e ele não expandirá o botão. Dependendo da finalidade dos botões, digamos BTN, variáveis grandes. Assim, podemos usar VAR, por exemplo, algo assim, ou simplesmente chamá-lo de btn grande. E então, se quisermos que seja consertado, podemos chamá-lo btn grande fixo. Então, mais uma vez, acompanhe esse fundo BTN grande, btn grande. Se você estiver usando o fixo, por exemplo, será para o fundo do botão, btn BG grande fixo ou BTN BG. Corrigido maior, como você quer chamá-lo. Portanto, a convenção de nomenclatura é realmente crucial porque assim que você começar a adicionar mais e mais desses elementos mais e mais desses elementos será muito mais complicado para você acompanhar o que você criou a seguir porque queremos que esse botão se expanda, vou ativar o preenchimento. Então, da próxima vez que alguém disser algo como agora, você pode ver que o botão vai se expandir. Mas, mais uma vez, por causa desse elemento gradual que criamos, se eu clicar aqui, você pode ver 16161516, ele vai se expandir, mas você sempre pode substituí-lo. Então, se eu clicar aqui, e se eu estender isso ainda mais aqui, se eu clicar aqui e estender para 20, talvez ele vá se encaixar para migrar muito melhor. Assim, você sempre pode fazer essas alterações para garantir que somos 3664 todo o caminho que é divisível por oito no nosso caso, se você está pensando em grades e como criar grades, você pode, é claro, use essas grades de oito pixels para suas grades sólidas, digamos 12 colunas para este tamanho grande, oito colunas para o tamanho do tablet, quatro colunas para o tamanho do celular. E, dependendo dos tamanhos que você escolher, você escolherá o número de colunas e largura dessas colunas. Claro, estamos apenas começando. Você pode ver como isso se parece. E antes de seguirmos em frente, clicarei aqui, pulando aqui para minhas bibliotecas e adicionarei cor porque essa é a cor do meu texto. Nesse caso, vou adicionar estilo de personagem. Então, o que você pode citar isso? E isso é realmente importante porque agora estamos entrando no território de tokens de design. E vou explicar os tokens de design na próxima lição desta aula um pouco mais. Mas basicamente vou chamar isso de h quatro por exemplo, porque esse é o tamanho desse texto. Aqui para a cor, vou renomeá-la para algo como, eu não sei, cinza normal ou qualquer coisa, traço regular e cinza, algo assim. Então todo mundo da minha equipe sabe que, tudo bem, isso é H por seus centavos abertos 24. E quando eles pairam, você pode ver opostos, espaçamento de 24 caracteres, o tamanho 24 pontos. Então você vai ser capaz de dizer imediatamente. Em seguida, é o botão com a borda ou sem a borda. Como você vai tratar isso, como todos esses elementos vão se acumular, tem, não tem o traço ou não. Então você precisa pensar em todas essas coisas, mas certifique-se de criar várias cópias desse padrão. Veja o que funciona, veja o que não termina quando você começar a adicionar elementos a esse botão, certifique-se de começar com os componentes. Então Controle ou Comando K no teclado para criar um componente. Esse é o estado padrão. Então, o primeiro componente a criar talvez seja o estado de horror. Então, vou chamá-lo de pairar. E da próxima vez que alguém passar o mouse sobre esse botão, talvez ele mude a cor. Em vez de branco. Talvez possamos mudá-lo para algo leve como este. Clique aqui, clique em Control Enter para visualizar o que estamos criando. E agora, quando eu passar o mouse sobre esse botão, você pode ver que ele tem estado de focalização. Então é assim que é fácil criar o início de um sistema de design. E agora vou mostrar o que criei nos últimos dois anos. E levei seis meses para criar no Adobe XD. Chama-se sistema de design Inception. E aqui está. Este é o arquivo mestre do sistema de design inicial. Isso levei seis meses de trabalho contínuo para criar. E você pode obter esse sistema de design, se quiser. Vou deixar o link no PDF. Esta é a página para inception design system.co. E mais uma vez, deixarei o link no PDF. Você pode clicar aqui e ir ao meu canal do YouTube para assistir ao curso gratuito. Nele. Eu passo por todos os elementos. Acho que é algo como uma hora duração ou algo assim. Está no meu canal do YouTube e você pode assisti-lo lá para saber mais como funciona e o que está incluído. Você pode ver, você pode projetar mais rápido. Você pode ler algumas resenhas. Ele é criado para escala usando grade de oito pixels. Tem estrutura molecular como mencionamos. São locais e nuvens que podem trabalhar localmente e na nuvem com seus colegas de equipe. Tem fluxogramas, modelos e ícones Lottie, que são ícones animados. Ele é feito usando os recursos mais recentes, como estados de componentes de pilhas em ativos Document. Então, deixe-me voltar ao Adobe XD e mostrar as primeiras coisas primeiro, o que está incluído neste sistema de design. Aqui temos algumas informações básicas e diretrizes sobre o próprio sistema de design, como usá-lo e onde usá-lo. Então aqui temos as grades, temos três tamanhos diferentes basicamente de tela. Temos grande, médio e pequeno, ou desktop, tablet e celular. E dependendo do tamanho, temos várias cores diferentes. Número da coluna. Para o grande, temos 12 colunas. Para o meio, temos oito colunas, e para o pequeno temos quatro colunas. Aqui temos os guias e você pode facilmente copiar esses guias e colar em seu quadro de arte. Então temos topografia e você pode ver que eu dividi a topografia dois títulos e cabeçalhos do corpo estão chegando nesses diferentes tamanhos e corpo nesses diferentes tamanhos. Em seguida, temos as cores, as cores principais e as cores de suporte. Você vai notar que eu não tenho sombras aqui. E isso é com o propósito porque quando você obtém esse sistema de design, você pode adicionar suas próprias sombras. Eles vão escalar com o próprio sistema de design. Em seguida, temos o logotipo que você pode substituir com o logotipo de seus clientes. Temos esses logotipos diferentes que você pode usar em seus projetos. Temos ícones e imediatamente, você notará essas grades de oito pixels. Então, tamanho quadrado. E se eu escondê-lo aqui, só para que você possa ver o sistema de design em si um pouco melhor. Então temos ícones aqui, e esses são ícones estáticos. E, claro, o sistema de design também vem com ícones animados, que funcionam nativamente dentro do Adobe XD, o que é fantástico para prototipagem. Então, se eu ampliar um pouco, o que temos aqui são átomos e moléculas, e você pode encontrá-los aqui. Se você abrir isso, você pode ver que temos grades, ícones, avatares, suspensos, imagens, modelos, paginação, linha de educação de acordo com a Pesquisa e muito mais. Então, todos esses elementos aqui são átomos e moléculas. E se eu ampliar um pouco mais perto, você pode ver. Então temos botões, temos entradas de texto, seletores, área de texto, caixas de seleção, data de rádio, seletores, comutadores de conteúdo, guias, indicadores de progresso, entradas numéricas, acordeões, imagens que são extremamente importante. Temos Blobs, suspensos, temos vários dispositivos diferentes, notificações, paginação sólida ou é modelo e muito mais denso. No lado esquerdo, temos fluxogramas, que estão localizados aqui. Então, se eu ampliar, temos fluxogramas de desktop, temos fluxogramas móveis e, em seguida, temos elementos de fluxo de tarefas. Obviamente, para fluxos de tarefas, temos elementos de fluxograma que são usados para conectar esses fluxogramas diferentes. E então o que somos aqui, temos esses tamanhos de papel. Então, aqui temos retrato de tamanho A4, paisagem, retrato e paisagem de letras dos EUA. E cada um deles, se eu mudar para o painel Camadas aqui e clicar dentro, ele tem vários elementos diferentes que são usados para ajudá-lo a criar mais rapidamente usando este sistema de design. Então, se eu selecioná-lo, você pode ver o que temos aqui é grade de pontos. Então, se eu ligar essa grade de pontos, você pode ver como ela se parece. Então eu até tenho um artigo aqui, que vou mostrar a vocês agora, que são usados para uma das minhas transmissões ao vivo recentemente, e você pode encontrá-lo na minha página do YouTube. Então, se eu aproximar isso, este artigo foi realmente criado dentro desse sistema de design. E foi realmente imprimi-lo e , em seguida, desenhado usando a caneta normal. Assim, você pode ver o quão versátil e útil isso é quando você cria elementos como esse em seu sistema de design. Então, voltando a ele, o que também temos os telefones. Então, se um show que você pode usar essas fontes, obviamente imprima-as como eu mostrei com este artigo em particular. E você vai notar que eles vão estar posicionados aqui. E, obviamente, se o papel for paisagem assim, eles serão posicionados de forma diferente e usados para wireframing de papel, se você quiser. Em seguida, temos um navegador para responsivo, temos navegador de desktop e navegador móvel, e é o mesmo para todos esses tamanhos. Em seguida, temos informações sobre fluxogramas. Temos o nome do projeto do cliente, prazo, número de páginas do site, número de telas de aplicativos, e você pode, claro, combinar grade de pontos e o fluxograma para você pode mudar de lugar, você pode posicione-os, imprima-os e crie basicamente componentes e fluxogramas neles. E, finalmente, o que temos se eu mudar aqui, temos os modelos. Aqui temos modelos em três tamanhos diferentes, como acabei de mencionar anteriormente. Portanto, temos grandes, médios e pequenos, e esses estão bem aqui. Portanto, esses são modelos grandes em 15 categorias diferentes. Estes são modelos pequenos nas mesmas categorias, mas apenas ajustados para o tamanho do tablet. E estes são modelos, pequenos, por isso é médio e são pequenos para tamanhos de telefone. Então, como tudo isso funciona? Basicamente, se eu abrir isso, temos cores, então temos cores principais e cores de suporte. Como eu disse, esses são componentes principais. Se eu mudar a cor, este azul oceano aqui, por exemplo, posso simplesmente editar aqui e mudar a cor. Ele atualizará essa cor em tempo real em todos os lugares onde essa cor estiver localizada neste sistema de design. Então, indo daqui e essa amostra até aqui, por aqui e por aqui, e por aqui, ela será atualizada em tempo real e mudará e atualizará essa cor. Se você decidir obter esse sistema de design e começar a trabalhar em um projeto para seu cliente. Você pode simplesmente alterar essas cores para as cores dos seus clientes que elas mudarão em todo esse sistema de design. A mesma história vale para os estilos de personagens. Então, para títulos, por exemplo, se eu decidir mudar isso, é Proxima Nova neste momento. Mas, por exemplo, se você decidiu mudá-lo para ciência aberta, como eu disse, então você pode atualizá-lo em tempo real. Isso vai mudar ao longo de seu design. Em seguida, temos o que eu disse, átomos e moléculas, fluxogramas e modelos, e como você pode usá-los? É realmente bem simples. Então, deixe-me realmente usar nesta grande gota para aqui. E eu quero mostrar a você se eu clico aqui. E digamos que eu quero esconder essas colunas apenas para que você possa ver o que estou fazendo. E digamos que eu queria arrastar e soltar alguns elementos dentro, então é bom para átomos e moléculas. E vamos alternar esse layout na verdade. Mas vamos com a praça aqui, só para que você possa ver o que eu realmente estou fazendo. Então, vamos com algo como menu suspenso, suspenso grande. Vamos arrastá-lo e soltá-lo para dentro. E você pode ver como parece, para que eu possa posicioná-lo onde quiser. E então vamos trazer nossas colunas de volta. Clique em nosso menu suspenso, posicione-o aqui. E você pode ver que funciona imediatamente porque este é um componente com vários estados. Vamos verificar o estado de foco. Por exemplo, vamos abrir o checkout. E, claro, posso pular na ciência e adaptar e mudar qualquer um desses estados. Então, em vez de dizer o menu suspenso grande, talvez possa dizer o tamanho do seu sapato ou a cor do seu sapato ou o que quer que seu projeto exija que a beleza deste sistema de design, estes são átomos e moléculas em curto. Basicamente, você pode adotá-los e usá-los como quiser. E deixe-me mostrar rapidamente modelos. Então aqui temos os modelos e vamos usar grandes. Então, o que precisamos é de navegação. Arraste e solte meu nav um, por exemplo. Vou encaixá-lo na posição. Feche isso. Vamos usar a seção de heróis. Vamos continuar aqui no número quatro, por exemplo. Vamos posicioná-lo aqui e aqui. Talvez faça algo assim. Então o que podemos fazer é usar call to action pode ser, então vamos usar call-to-action cinco. Encaixe, certifique-se de que está na posição central está aqui até que se encontre com nossa seção de heróis e você tenha a ideia. Você só vai arrastar e soltar esses elementos dentro. Você vai construí-los. O melhor de todos os modelos e todos os fluxogramas é que eles estão vindo em dois modos diferentes. Estado padrão, que é o modo claro e o modo escuro. Então, se eu clicar no meu alternador de navegação de volta para o modo escuro, clique aqui, mude para escuro clique aqui, mude para escuro em apenas alguns cliques. E se eu esconder minha grade só para que você possa ver que temos isso. Então, se eu visualizá-lo muito rapidamente, você pode ver como ele se parece no ETO em tempo real, ele tem esses efeitos de horror. E, claro, quando você muda e adapta todos esses componentes, por exemplo, esse logotipo e você muda para o logotipo dos clientes dela. Você pode adicionar ícones diferentes, você pode adicionar imagens diferentes. Ele vai se adaptar em tempo real. E esse é o objetivo de que um sistema de design é economizar milhares e milhares de horas criando essas tarefas chatas. Porque não há nada no mundo que eu mais odeio. E para criar rodapés, e eu tenho meus rodapés aqui. Clique aqui, arraste e solte o posicionamento do rodapé lá, por exemplo, encaixe no modo escuro, assim. Posicione-o aqui. Aperte a visualização mais uma vez. E aqui eu tenho meu rodapé no lugar. Essa é a beleza desses sistemas de design, é criar com velocidade, criar escala de largura. E isso é o que você pode ver com esse sistema de design de início em particular, que criei nos últimos seis meses, é que criei todos esses elementos. Então, deixe-me excluir isso. Eu criei todos esses elementos, mas posso escalá-los facilmente. Posso adicionar mais elementos aqui usando elementos existentes, posso reposicioná-los, reorganizá-los, mudar suas cores, alterar o raio do canto. Porque se um zoom for realmente próximo a um desses botões, você pode ver que o raio do canto é quatro se um show você aqui, mas talvez eu queira mudar o raio de canto este botão principal para algo um pouco maior. Deixe-me assumir para que você possa ver todos os estados um pouco maiores para algo como 20. Pressione Enter. E você pode ver em tempo real, isso vai mudar em qualquer lugar, esse botão está localizado. Onde quer que esse botão seja usado, não apenas aqui, mas em meus modelos também. Então, ele será atualizado em tempo real. Essa é a principal coisa sobre sistemas de design no Adobe XD. Você precisa alterá-los nos componentes padrão e em todos esses componentes que você arrasta e solta, que estão mostrando nossos componentes filhos. Podemos mudar e nos adaptar lá e usar essas mudanças locais. Por exemplo, na seção de heróis que acabei de mostrar anteriormente, você atualizará o texto. Você quer adicionar seu próprio texto, seus textos de clientes, seja o que for, então ele vai mudar no componente de dívida. Mas se você quiser fazer mais alterações globais, como a cor de fundo, como a fonte e qualquer coisa, você fará essas alterações aqui dentro dos componentes principais, sistema de design de início vem com dois arquivos, arquivo mestre e arquivo light. Basicamente, a única diferença está dentro do arquivo mestre, que estou apenas mostrando, você pode ver todos os elementos aqui em um só lugar, dentro do arquivo light. Você não pode fazer isso porque eu excluí todos eles propositadamente da tela para manter o máximo de tela livre possível para que você possa projetar sem instruções, como olhar para elas aqui. Então, talvez seja o mais sábio começar com o arquivo mestre para aprender todos esses componentes. E, claro, forneci imagens de todos esses componentes que podem navegar rapidamente sobre como o componente se parece, como o modelo se parece antes de começar a trabalhar com eles. A última coisa que eu queria mostrar a vocês sobre isso são esses fluxogramas. Então deixe-me abri-los aqui. Então, vamos fechar modelos, abrir os fluxogramas. Vamos com fluxogramas de área de trabalho. Vamos usar o cabeçalho, por exemplo, arrastá-lo e soltá-lo aqui. Vamos usar o conteúdo. Talvez eu quisesse posicioná-lo aqui. Vamos usar outra coisa como um controle deslizante. Posicione-o aqui. Então, o que é ótimo nesses componentes é que você pode simplesmente duplicar o posicionamento deles aqui. E como esses são os componentes, como eu disse, você pode simplesmente clicar em arrastar e ele substituirá esse componente em tempo real. Então portfólio, arraste e solte aqui. Talvez eu queira usar o formulário número cinco. Meu cliente diz que não gosto de como a fórmula de um arquivo se parece. Talvez você possa tentar outra coisa, ok, para o número três, lá vai você. Você pode ver como isso é super simples criá-los. Quando você quiser conectar todos esses elementos, vamos fechar isso. Então, vamos usar os elementos do fluxograma. Vamos usar, por exemplo, números. Então, vamos com o número um. Talvez esta seja a primeira página, por exemplo, vamos fechar isso. Vamos usar setas. Então, vou usar essa seta, arrastá-la e soltá-la no lugar. Talvez quando os usuários clicarem neste botão aqui, eles vão para esta página. Então, vou simplesmente estender isso e selecionar minha linha e te atrevo a ir. É assim que é super simples de usar e criar. Por exemplo, se você soltar isso, digamos seta por engano. Eu queria substituí-lo. Eu queria fazer isso com este. Lá vai você. Esta é a seta que eu queria, por exemplo, desse par, deste controle deslizante aqui, eu quero que eles vão para essa peça de portfólio. Você pode ver como isso é super simples de criar. Então essa é a beleza desses sistemas de design. Obviamente, isso é um extremo, como eu disse, levei mais de seis meses para criar tudo isso. Levei mais de dois anos de pesquisa. E se eu mostrar alguns desses modelos, você pode ver como eles se parecem. Então, temos herói, temos futuros call to action. Então eu fiz minha pesquisa sobre o que é o mais usado dentro da indústria. Quais são alguns padrões do setor e o que é mais usado? Grades de conteúdo, preços. Temos o blog, temos login e temos fóruns, entre em contato conosco e muito mais. E tudo isso é responsivo como um curto aqui. E tudo isso está usando x facilmente para discursos. Então, se eu clicar aqui e pular dentro dessas imagens, você pode ver que temos a pilha, temos o preenchimento. Então, se eu optar por mudar a pilha, por exemplo , posso clicar aqui e isso mudará essa direção dessa pilha para essa direção. E você vai notar que ele vai empurrar esse conteúdo para baixo e ele vai escalar uniformemente para o que eu estiver criando no meu sistema de design. Mais uma vez, se você estiver interessado, projetou o sistema está iniciando design system.console. Há um curso do YouTube para isso. Tudo é explicado com muito mais detalhes e você pode conferir esta página para que você possa ver os futuros como eu mencionei, átomos ou moléculas, organismos, fluxogramas, modelo, modo escuro, animado ícones, curso incluído. Então, tudo isso está dentro do sistema de design de início. Se você quiser criar seu próprio sistema de design, apenas certifique-se de prestar atenção em duas coisas. Certifique-se de que quando você começar a escalar para dimensionar com um propósito. Não basta escalar por uma questão de dimensionamento e certifique-se de usar apenas elementos necessários em seu sistema de design. Para o meu sistema de design aqui, usei elementos da minha pesquisa que a maioria dos designers está usando. Mas para o seu sistema de design, talvez você não use esses elementos quando vamos usar outra coisa, outra coisa. Mas, basicamente, começou com pequenos elementos como botões como mostrei e depois expanda a partir daí, adicione componentes, mas certifique-se de adicionar apenas os componentes que são realmente necessário em seu sistema de design. No próximo vídeo, vamos falar sobre tokens de design, o que eles são um pouco mais elaborados sobre eles e como usá-los em seu sistema de design. Então eu te vejo lá. 6. Tokens de design: tokens de design estão no centro de todos os bons sistemas de design por aí porque são uma ótima ferramenta para colaboração entre designers, desenvolvedores e detentores de estacas. Neste vídeo, vou mostrar como faço isso e como algumas grandes empresas fazem isso, e quais são algumas práticas recomendadas em relação aos tokens de design? Então, vamos começar. Aqui estamos de volta no Adobe XD e mais uma vez no meu arquivo mestre do sistema de design inicial, que mostrei no vídeo anterior. E os tokens de design estão localizados aqui à esquerda. Basicamente o que eu mencionei anteriormente na lição anterior, eles têm o nome. Esse nome é realmente útil porque quando você está colaborando com outros designers, digamos que eu queria usar essa cor do oceano para, digamos, a cor de fundo do nosso modelo ou algo assim. E então eu tenho que dizer isso ao meu colaborador de design em meus colegas de equipe de design, digamos que use essa cor azul dentro do plano de fundo do modelo. Mas temos várias cores azuis. Qual cor azul? Usar? Um BAT F9. Mais uma vez, vai ser muito difícil para as pessoas, especialmente se você estiver trabalhando com elas distantes. Se você estiver trabalhando em casa com seus colegas de equipe, será difícil para eles implementarem essa mudança. E vai ser difícil para todos na equipe se lembrarem desse código hexadecimal, por exemplo. É por isso que estamos usando nomes. Nesse caso, posso apenas dizer a eles, use o azul oceano para o fundo do modelo. E todos estão na mesma página. O oceano é muito mais fácil de lembrar do que, por exemplo, hashtag um, BH EF, EF nove ou o que quer que seja. Assim, os desenvolvedores podem usar a mesma função e vou mostrar isso em apenas um segundo em um grande sistema de design lá fora. Mas, basicamente, esse é o ponto principal do design. Os tokens os usam com sabedoria e os usam à medida que seu sistema de design é dimensionado. Claro, você pode usá-los para texto. Nesse caso, só tenho título e corpo, mas, por exemplo, você pode usar o tamanho de caracteres específicos para elementos específicos. Por exemplo, se o personagem estiver logo abaixo, digamos, animações ou ilustrações ainda melhores, você poderá usá-las em conjunto com essas ilustrações. Por exemplo, ilustração de título, ilustração grande, manchete é pequena ou qualquer outra coisa. E então, quando você disse aos seus desenvolvedores, certifique-se de alterar a ferramenta de ilustração grande do título, digamos 64 pontos. Todos na equipe vão conseguir entender isso muito melhor do que se não, o que eu mencionei anteriormente sobre os componentes e diferentes nomes de componentes. Então, se ampliarmos aqui para meus botões, por exemplo, alternar o painel de camadas, clique aqui. Você pode ver que temos o botão padrão grande, porque estes são botões grandes, então temos botão padrão, médio, botão padrão pequeno. Portanto, esses são botões padrão, mas se eu mudar para outra coisa , por exemplo, aqui temos seletores. Seletores, valor em linha, seletores grandes em valor de linha, seletores médios em linha, digamos pequeno ou o que quer que seja. Então você tem que prestar atenção a todos esses detalhes. E temos imagens. Temos imagens grandes e quantas colunas sua imagem aposta nessa gaiola? Imagem? Grande, duas colunas, imagem grande, imagem de nove colunas grande, 10124 com meio de tela cheia, a mesma história, pequena a mesma história. Em seguida, temos dispositivos, por exemplo, dispositivo traço, navegador ou qualquer coisa. Então, você precisa usar esses tokens de design para explicar o que está criando em seu sistema de design e o que cada token de design foi projetado para fazer em primeiro lugar. Então, agora vou mostrar isso, que é um tokens de design do Salesforce Lightning Design System já mostrou que na lição anterior, onde falamos sobre todos esses incríveis sistemas de design, como eles o usam é basicamente o mesmo. Portanto, temos uma variante escura de marca acessível à marca que é acessível com branco. Então eles estão usando combinações e estão usando esse suporte. Assim, você pode ver o acesso global disponível para uso na plataforma. Ou se não, posso passar o mouse aqui interno, portanto, disponível para desenvolvedores internos do Salesforce apenas sujeito a alterações. Então eles têm todas essas regras implementadas quando são lançadas, versão número 1234 e assim por diante, T-Mobile, tão difícil de usá-lo com uma equipe. Você o usa com um aplicativo? Você o usa para front-end ou back-end? Você o usa para o que os visitantes estão vendo ou para o painel interno ou para o painel do visitante, você precisa rotular todos esses elementos. E aqui você pode ver outra coisa. Então eles estão usando o RGB primeiro e o valor hexadecimal segundo, maioria das marcas está usando o contrário, então eles estão usando o valor hexadecimal primeiro, o valor RGB segundo. Então você tem que considerar todos esses elementos em relação ao seu próprio sistema de design. É por isso que criei essa estrutura simples no sistema de design do Inception porque a maioria das pessoas é capaz de entendê-la. Nós nos concentramos, então é apenas para desfocar, mas se eu estiver criando uma variação no foco, por exemplo, diferentes tons de foco, talvez eu vá dizer algo como foco 80% ou botão de foco ou foco. Eu não sei, seção de heróis ou o que quer que seja. Você vai dizer isso dentro do token de design em si. Então, todos na equipe serão capazes de entendê-lo. E se eu mostrar aqui mais uma vez, se rolarmos um pouco mais para baixo, você pode ver quantas cores diferentes eles têm sólidos escolhem uma aleatoriamente. Por exemplo, este, palete nuvem azul, 15. Então eles têm 15 variações diferentes dessa paleta. Cor azul nuvem. Não, não é T-Mobile e aqui eles estão usando internamente. Esta é a versão 2.14 e você pode ver o paladar azul, então como eles estão usando e como eles funcionam. Então, basicamente, como eu continuo mencionando, tudo se resume ao seu projeto, sua necessidade, você não terá todas essas cores diferentes se seus clientes, um projeto não exigir. Então, por que se preocupar em criar e gastar tanto tempo criando todas essas cores, tons, variações e muito mais quando você pode se safar de algo assim. Por exemplo, apenas algumas cores aqui e ali e depois, e essa é a coisa crucial e Keating, quando a despesa do projeto, você sempre pode adicionar mais cores. Por exemplo, deixe-me mostrar isso também. Vamos clicar em selecionar isso. Vamos mudá-lo para, eu não sei de algo, seja lá o que for aqui. E se quisermos adicionar essa cor, posso simplesmente clicar aqui. E posso dizer algo como renomear, talvez chamá-lo de blob roxo, algo assim. Essa é minha cor principal no meu carro secundário? Vou chamá-lo de cores principais. Então, coloque-o por aqui, blob roxo. E então, quando eu selecionar meu blob, próxima vez eu posso clicar em Blob. O roxo vai se aplicar ao mesmo tempo. Por exemplo, se tivermos esses blobs na seção herói do seu site, por exemplo, ou do seu aplicativo, você pode informar seu design. Companheiros de equipe, altere o blob número cinco para blob cor roxa. Clique em, clique em Concluído. É por isso que os tokens de design são incríveis. É por isso que eles são úteis, porque você pode usá-los para criar todos esses elementos em seus sistemas de design muito mais rápido. E todos na sua equipe podem estar na mesma página e entender o que você está criando muito mais rápido do que se você não estiver usando esses tokens de design em primeiro lugar. Na próxima lição, falaremos sobre dimensionar seu sistema de design. Quando você deve fazer isso e como você deve fazer isso? Vejo você lá. 7. Escalando seu sistema de design: Quando você está dimensionando seu sistema de design, você sempre deve fazer isso melhor propósito e deve sempre fazê-lo passo a passo. Por que você está escalando isso? Para onde você está escalando isso? Quatro? Quais páginas para quais tamanhos, para quais dispositivos você precisa pensar sobre todas essas coisas à medida que você expande. Vamos entrar no Adobe XD e mostrarei e darei algumas dicas sobre quando e como dimensionar seus sistemas de design. Aqui estamos no Adobe XD mais uma vez dentro do meu arquivo mestre do sistema de design inicial. Se você quiser conferir este sistema de design , certifique-se de clicar no link no PDF e lá está, Você pode conferir se você estiver interessado. Para esse caso, digamos que você acabou de criar esses botões e escolheu esses três tamanhos, grandes, médios e pequenos. E a partir daqui talvez você queira adicionar tamanho extra grande. O que você deve fazer? Você precisa consultar seus desenvolvedores primeiro, devo criar botões diferentes para esse tamanho extra grande ou você pode escalá-los e reposicioná-los? Codifique, por exemplo, talvez o tamanho extra grande para o botão em si não seja realmente necessário. Talvez o espaçamento deva ser ajustado e ele se encaixe em um tamanho maior. É por isso que a comunicação entre designers e desenvolvedores é a chave. Portanto, você não está investindo seu tempo nessas mudanças que não são realmente necessárias e obrigatórias. Então, se eles não forem obrigatórios e necessários, você vai acabar com uma aparência limpa assim. Mas se forem, talvez você tenha 20 tamanhos de botões diferentes. E depois, mais tarde, você decidirá que, por exemplo, tamanho número sete não é realmente necessário. Quais tamanhos usar. Isso é bem simples. Você teria que falar com seu cliente e você tem que falar com a empresa para a qual está trabalhando. Quais tamanhos seus usuários usam? Se eles estiverem usando, por exemplo, apenas um tamanho na maioria deles, isso garante que você concentre toda a sua atenção nesse tamanho único. E quando você está trazendo mais usuários para baixo , por exemplo, esses usuários estão chegando, maioria deles está chegando, eu não sei, tamanhos de desktop. Vamos a maioria deles usar laptops e, de repente, um grande fluxo de novos usuários está usando o iPhone. Como adotar esse tamanho da área de trabalho para os tamanhos do iPhone. Então você tem que falar com seus clientes, seus desenvolvedores, você precisa fazer sua pesquisa o tempo todo. E, quando você dimensiona, não faz muito sentido escalar para tablet se seus usuários não usarem tamanhos de tablet. Então pense em todas essas coisas, mas pense nessas coisas à medida que você avança e enquanto você está criando seu sistema de design, porque não há ponto de escala. Por uma questão de escala, há um ponto inteiro por trás disso é dimensionar com um propósito. E isso é para atrair novos usuários ou acomodar novos usuários, acomodar novas necessidades e desejos dos usuários. E, portanto, você tem que escalar com isso em mente. Além disso, como eu continuo mencionando ao longo desta classe, não crie elementos que não sejam necessários. Por exemplo, se você não estiver suportando avatares, porque talvez você não tenha perfis em seu projeto, em seu produto, no painel ou o que for. Talvez você não tenha a opção eles fazerem login na criação da conta, então por que você criaria avatares? Isso realmente não faz muito sentido. Não os crie apenas para estar aqui, criando porque eles são necessários para o seu projeto. E não tenha muito medo. Se você, por exemplo, acabou de criar uma dica de ferramenta e não criou 50 dicas de ferramentas diferentes. Talvez eles não sejam necessariamente. E a dica de ferramenta, como o nome sugere, é realmente tão simples porque é apenas um pouco de informação. Portanto, não preste muita atenção a todas essas pequenas coisas. Certifique-se de obter as grandes coisas como layout, como grades, como grade de espaçamento e ritmo horizontal e vertical, todas essas coisas antes de se preocupar com dicas de ferramentas. E uma última coisa que eu quero falar sobre dimensionar seu sistema de design é com esses modelos. Então, se ampliarmos bem aqui e mostrarmos aqui está as equipes de chamadas para ações de futuros. Talvez tenhamos grades de conteúdo, talvez tenhamos portfólio, temos preços. E, por exemplo, você está criando um painel. Dentro desse painel, você terá uma única página que é apenas uma visão geral, por exemplo. Dentro dessa visão geral, você vai dar a eles a capacidade de ver Madonna, digamos despesas mensais ou algo assim. Não entre em muitos detalhes na adoção de novos componentes para trabalhar com isso, talvez você possa usar componentes existentes e, em seguida, apenas permita os desenvolvedores integrem a solução que não é nativa. Se for nativo, ao contrário, por exemplo, Gráficos, você terá que criar um design para um único gráfico e não se preocupar em criar vários gráficos, fazendo várias coisas apenas para o o bem de ter todos esses gráficos garante que se concentre no que é necessário para esse projeto. E, em seguida, à medida que novos recursos forem adicionados posteriormente, certifique-se de dimensionar junto com esses novos recursos e seu sistema de design. Não se incomode em criar os elementos que não são necessários ou não necessariamente, porque ele só vai desordenar seu sistema de design e, na verdade, vai diminuir seu progresso em esse projeto em particular e seus desenvolvedores progridem. Porque lembre-se, o que quer que você seja um designer projetando dentro do seu sistema de design, os desenvolvedores precisam ser desenvolvedores, então não use seu tempo valioso se esses elementos não estiverem necessariamente no momento. E você pode criar uma lista de pendências. Então, por exemplo, esses elementos, digamos, são necessários no momento. Esses elementos são necessários em três meses, esses elementos são necessários em seis meses. Assim, você pode criar pendências de elementos. E à medida que o projeto avança, à medida que você avança, então você pode lidar com esses elementos um pouco mais tarde porque eles não são necessários no momento. Então, mais uma vez, e finalmente, escala, como precisa ser dimensionada, não basta escalar por uma questão de dimensionamento. 8. Seu projeto de curso: Seu projeto de classe para essa classe é criar um sistema de design próprio e fazer upload de uma imagem dele para seus projetos de classe. Agora, não invista muito tempo neste sistema de design. Basta criar alguns elementos aqui e ali e tentar organizá-los e pensar nisso como um sistema de design. Você pode criar uma captura de tela deles ou exportar a prancheta inteira como uma anterior, mostrá-lo em um dos vídeos anteriores e simplesmente anexá-lo aos seus projetos de classe. Eu adoraria ver o que vocês criaram. Então, se eu voltar para o meu sistema de design de início deve ter um arquivo. Talvez você possa criar algo assim. Por exemplo, você pode criar três botões diferentes em três variações diferentes. Ou você pode criar uma entrada de texto, por exemplo, talvez você possa mostrar diferentes variações dessa entrada de texto ou um seletor aberto e fechado em três tamanhos diferentes. Portanto, não invista muito tempo neste projeto, mas ainda vou adorar ver o que vocês podem inventar. Então, estou ansioso para ver seus projetos em seus projetos de classe. 9. CONCLUSÃO: Então lá vamos nós. Chegamos ao final desta aula. Muito obrigado por assisti-lo. Eu realmente espero que você tenha algum valor com isso e eu realmente espero que você entenda como os sistemas de design funcionam. Não se sinta intimidado com essas grandes empresas estão fazendo quando você está procurando inspiração sobre sistemas de design, que estão fazendo quando você está procurando inspiração sobre sistemas de design, certifique-se de começar pequeno e certificar de evoluir ao longo do tempo. Mesmo se você estiver criando um sistema de design para trabalhar como freelancer, por exemplo, em sites ou projetos móveis. Certifique-se de criar apenas os elementos necessários. Faça sua própria pesquisa, quais são os elementos que você está usando o tempo todo, que são os elementos que você nunca usa. Talvez você possa criar um backlog como eu expliquei na lição anterior e depois lidar com esse backlog de elementos à medida que avança e à medida que avança e constrói seu sistema de design, você tem todos os recursos, que eu mencionei. Então, todos esses sistemas de design para inspiração e muito mais informações dentro do PDF. E você também tem o link para o sistema de design Inception. Se você estiver interessado, você pode conferir e se adaptar para trabalhar de acordo com suas necessidades e para o seu projeto. Muito obrigado por assistir a este curso. Muito obrigado por se inscrever nele e até a próxima vez, tome cuidado.