Introdução ao design de UX/UI: crie um protótipo digital interativo

1. Introdução: Passar de suas primeiras idéias, seus primeiros esboços, wireframes, para um protótipo digital totalmente funcional é um desafio. Este curso irá guiá-lo através de todas as etapas que você precisa para criar seu próprio protótipo interativo digital projetado com um software de design preferido. Meu nome é Patricia Reiners. Eu sou um designer de UX/UI baseado em Berlim. Estou projetando interfaces digitais para muitas empresas, muitas start-ups, agências, mas também algumas empresas maiores como Google ou Adobe, por exemplo. Estou compartilhando conhecimento sobre UX/UI por meio de workshops, palestras em público e ensino em uma universidade e estilo de vida para fazer podcast sobre design de experiência do usuário. Projetar belas interfaces digitais na verdade não é tão difícil se você conhece algumas regras e diretrizes. Você aprenderá os conceitos básicos de design de interface para criar um melhor convite. Você aprenderá a passar de seus primeiros esboços para um protótipo digital totalmente funcional e apenas alguns passos simples. Você criará seu próprio moodboard para seu design, escolherá cores, tipografia, ilustrações e imagens para sua interface. Também vou compartilhar muitos exemplos, práticas recomendadas e recursos, que ajudam você a começar e até mesmo acelerar seu fluxo de trabalho de design. Este curso vem com um kit de interface do usuário do Adobe Xd, uma lista de recursos e muitos modelos que o ajudam ao longo deste curso. Como um projeto de classe, você vai projetar sua própria interface digital para um item em sua cozinha, que estará pronto para carregar em seu portfólio ou em redes sociais depois de concluir esta aula. Esta classe é perfeita para todos que querem aprender mais sobre design de interface, princípios de design e regras básicas de design de interface. Estou ansioso para recebê-lo nesta aula, então vamos começar. 2. Projeto de classe: Olá e bem-vindo a esta aula sobre design de interface. Esta é a segunda parte da prototipagem para o curso futuro. Espero que você já tenha assistido o primeiro curso, caso você não tenha, eu recomendo fazer isso primeiro. Mas mesmo que você não tenha e não queira aprender sobre prototipagem, você pode usar o material que eu estou fornecendo aqui para você e você pode começar aqui. Um pouco sobre o meu passado pessoal. Meu nome é Patricia Reiners. Eu sou um designer de UX/UI aqui em Berlim. Eu estudei design de comunicação um pouco mais design gráfico, e em algum momento, eu mudei totalmente para UX/UI Design. Comecei minha carreira em uma agência onde trabalhei para muitas, muitas empresas e clientes diferentes e aprendi muito. Em algum momento, eu mudei para design freelance e agora eu estou dirigindo meu próprio negócio, eu comecei um podcast, eu estou fazendo um monte de workshops, educação, trabalho para muitas empresas e clientes diferentes em todo o mundo e Eu acho que é realmente fascinante e super interessante. Quero compartilhar o processo, muitas ferramentas, muitos métodos, tudo o que aprendi nos últimos anos com você. Eu tenho um monte de material para você já preparado, então você só precisa baixá-lo e começar. Aqui estão algumas recomendações antes de começarmos. Em primeiro lugar, faça o download de um software de design preferido. Vou trabalhar com o Adobe XD. Eu também preparei um kit de interface do usuário com muitos recursos e dicas e truques para você. Você pode simplesmente baixá-lo e usá-lo durante todo o curso se você quiser trabalhar com outra ferramenta de design que é completamente bom. Sinta-se livre para usar a ferramenta com a qual você se sente mais confortável. A segunda coisa é preparar alguns cartazes. Isso é sempre muito útil, e uma caneta. Você pode ter papéis se quiser tomar notas, se quiser reescrever algo. Outros recursos que preparei para você com a lista de recursos, o kit de interface do usuário, tudo, todos os modelos que você pode encontrar isso aqui na pasta de materiais, basta baixá-lo e usá-lo. Você pode simplesmente abri-lo e começar. O que vamos aprender nesta aula? Primeiro de tudo, vamos passar por todos os diferentes passos que você precisa saber quando você deseja projetar interfaces digitais. Vamos falar sobre cores, vamos falar sobre diretrizes de design, vamos falar sobre como escolher imagens e ilustrações, mesmo onde encontrá-las. Vamos falar sobre algumas regras muito básicas de UX/UI que irão ajudá-lo a se tornar um designer melhor depois de terminar esta aula. Eu também vou guiá-lo passo a passo através do meu próprio processo de design. Você pode apenas seguir-me ao projetar uma interface digital com o Adobe XD e aprender no caminho. Este curso é ideal para todos que realmente querem aprofundar o design da interface do usuário, que querem aprender mais sobre princípios de design, sobre tudo o que você precisa saber como uma boa interface. Como um projeto de classe, você vai projetar sua própria interface digital para um dispositivo ou um item em sua cozinha. Vamos passar por todos os passos nesta classe. A única coisa que você precisa fazer primeiro é baixar a ferramenta de design digital que você quer usar, e o resto vai acontecer ao longo deste curso. Vamos começar. 3. Diferença entre UX e UI: Bem-vindo ao terceiro capítulo deste curso. Agora vamos falar rapidamente sobre a diferença de UX e UI. Qual é realmente a diferença entre o design da experiência do usuário, o design da interface do usuário? O que isso realmente significa? Vamos passar por isso muito rápido. Quando você quer responder o que UX, UI realmente significa, precisamos dar uma olhada na UX ou no processo de design centrado no homem. Quando você quer projetar um produto digital, você não apenas projetá-lo. Já falamos sobre isso na primeira parte do curso, que você passa por diferentes fases. Aqui você pode ver essas fases e elas estão se sobrepondo. Você vê os pequenos círculos se sobrepondo. Primeiro você começa com empatia. Você realmente quer entender o usuário, você faz pesquisa e tenta aprender. Seu objetivo é descobrir problemas que você pode resolver para eles. A próxima parte define, você realmente analisa o que você aprendeu, a pesquisa, você surgiu se você conhece os problemas, e define o que você aprende e o que você quer resolver, o que você pode realmente fazer para resolver esse problema. Então a próxima parte você tem o ideado. Essa é a parte mais divertida que eu diria, porque lá você vem com idéias. Se olharmos para o tema da geladeira que escolhi para o meu projeto, percebi que há muitos problemas quando se trata de desperdício de alimentos, muita comida que não é realmente encontrada na geladeira. Este é um grande problema e a idéia era que nós criamos uma interface de geladeira inteligente onde você vê quando as coisas vão mal e você pode criar suas próprias receitas. Então nós já criamos nosso protótipo, mas você também pode fazer isso digitalmente e então você pode testá-lo, e então implementá-lo. Implementar seria como um aplicativo codificado ou você criaria como um codificado com interface HTML e CSS para a sua geladeira. O que é UX agora? Geralmente, podemos dizer UX significa design de experiência do usuário, então experiência do usuário. Desde que o termo surgiu, UX, em seguida, cresceu para ser um serviço com bons negócios. Um bom negócio significa uma boa experiência de usuário ou uma boa experiência de usuário porque o usuário é tão importante. Somente os produtos e serviços que oferecem uma experiência de usuário perfeita terão sucesso no mercado. Com isso, a demanda por designers de UX aumentou radicalmente. À medida que o mercado de tecnologia continua a evoluir, seus designers de UX são mais cruciais do que nunca. Se você está decidindo se tornar um designer de UX, parabéns, todos os designers de UX se divertem muito. A demanda por UX ou UX designer é refletida em ambos, os salários médios de designer de UX que são bastante altos, e também no mercado de trabalho de profissionais de UX, que também é bastante alto. O design UX geralmente realmente se concentra na interação entre o ser humano, o usuário, este poderia ser eu ou você, e produtos e serviços do dia a dia. Isso pode ser sites ou aplicativos ou até mesmo máquinas de algodão. Eu realmente gosto deste exemplo aqui porque ele mostra a experiência do usuário na vida real. Às vezes, os designers vêm com soluções realmente incríveis, mas quando eles testam o design, quando vêem isso na vida real, eles percebem que o usuário realmente não apreciou a maneira como o designer inventou a ideia. Eles usaram a experiência que é a mais fácil para eles. Eu acho que isso é realmente interessante. Este é um exemplo realmente bom de alguma experiência de usuário bem-sucedida. A definição geral para UX ou experiência do usuário é UX é o que um usuário de um determinado produto experimenta ao usar esse produto. Você não pode criar nada de valor para um usuário a menos que você entenda que tipo de problemas eles querem resolver, e como você pode resolver esses problemas para que o usuário queira ou melhor ainda precise de sua solução. Acho que é super interessante. Olhe no seu telefone e verifique todos os aplicativos que você está tendo lá e veja o que você está usando todos os dias. Você pode apenas pensar em sua mão, que tipo de problemas são esses aplicativos, ou esses produtos, os produtos digitais que você está usando todos os dias estão resolvendo para você? Todas as manhãs, por exemplo, estou usando o aplicativo Headspace. Estou a fazer uma meditação. Eu sou um grande fã deste aplicativo. O problema que este aplicativo o que ele resolve para mim é que fazer uma meditação por conta própria é realmente difícil. Quero começar o dia, relaxar e acalmar e focado. Isso é um problema real e eu realmente não sei como resolver isso. Eu acho que como todas as meditações guiadas, mesmo on-line, são difíceis de encontrar. Este guia é super útil, e resolve um problema realmente grande para muitos usuários, porque muitas pessoas estão realmente usando este aplicativo. UX significa experiência do usuário. Nós já falamos sobre isso, e UI significa design de interface de usuário. Eu também acho super interessante ter uma olhada em alguns exemplos ruins UX porque então você já sabe, o que você talvez poderia fazer melhor. Também é um pouco mais fácil entender o que UX realmente significa porque precisamos diferenciar isso da interface do usuário. Exemplos da vida real, eu sou um grande fã deste exemplo aqui. É um elevador. Eles realmente precisam olhar onde você precisa apertar os botões. Você pode pensar na sua mão o que pode ser um pouco confuso aqui. O que é confuso aqui é que há número várias vezes, o são um pouco confuso. É super difícil de encontrar e alguns dos botões já desapareceram. A razão para isso ou por que isso realmente aconteceu foi que eles perceberam em algum momento que eles precisam da linguagem para os cegos. Não havia espaço suficiente nos botões, então eles apenas o colocam do lado, o que também é muito difícil para pessoas cegas, porque eles o encontram no lado e então eles ainda precisam apertar o botão do lado direito. Definitivamente um péssimo exemplo. Isso também é, eu acho, interessante na vida real. Você precisa puxar alguma coisa, mas não há maçanetas. Como você deveria puxar essa porta? Outro exemplo que eu acho interessante é do WhatsApp, eu acho que muitos de vocês provavelmente já viram isso. Você pode excluir mensagens e o usuário ou todos neste chat recebem essa mensagem, você excluiu essa mensagem. Eu não sei se você já fez isso em algum momento, mas eu fiz. A única resposta é, o que você deletou lá, me diga o que era. Eu só quero saber. Há uma discussão e às vezes você não quer contar e as pessoas ficam bravas. Outras plataformas como Signal, por exemplo, eles estão apenas excluindo a mensagem sem qualquer aviso prévio. Penso que este também é interessante. Eu não sei se você já voou com a Ryanair. É uma companhia aérea muito barata. A interface de reservas da Ryanair pode ser considerada como um exemplo de táticas de design de UX obscuras e sorrateiras que tornam a experiência realmente complicada e confusa o suficiente para enganar os usuários a gastarem mais dinheiro do que eles precisam. Neste caso, escondemos complementos. Aqui podemos ver que a opção de nenhum seguro é proibida dentro de um menu totalmente não relacionado dificultando para os usuários encontrá-lo, e isso é definitivamente o oposto do usuário primeiro, em vez de considerar a funcionalidade e usabilidade de uma plataforma. Aqui os usuários definitivamente não colocar em primeiro lugar, mas sim como ganhar mais dinheiro com seguros. Outro usuário doloroso sempre super longos drop-downs. Se você não consegue encontrar algo, se você precisa procurar um país e é muito, muito difícil, é super longo. Este é também eu acho interessante, eu acho que muitos de nós já experimentaram isso. É super frustrante, já que já temos um milhão de senhas para lembrar, e não há nada mais frustrante requisitos de senha desnecessariamente complicados como o aqui. Senhas complexas são mais difíceis de lembrar, significa que sua monarquia para perder tempo constantemente criando novas senhas para substituir as antigas. Penso que este é também um exemplo interessante. É uma crítica cinco estrelas sobre fibra. Em resumo, os usuários que estão acostumados com a padronização mais próxima de uma quantidade explícita de estrelas representam a classificação podem assumir que o produto em questão recebe apenas a classificação de uma estrela. Ter uma estrela ao lado de um número é anti-intuitivo para os clientes. Ele pode até mesmo se registrar como uma classificação em tudo. Outro exemplo realmente interessante é este produto aqui. Eu não sei. Tornou-se viral há alguns anos. É o Juicerro. É um juicer, e este é realmente interessante porque o problema aqui não é realmente o f da funcionalidade, e aqui, como uma mulher realmente mostra como funciona, inventou algum item desnecessariamente para ter este espremedor, porque você não pode simplesmente espremer o suco dessas garrafas de plástico com suas próprias mãos. Então você não precisa do espremedor. Também muito ruim experiência do usuário, porque você se sente muito frustrado. Desde que o termo surgiu, experiência do usuário cresceu muito e tornou-se super, super importante. Embora este curso seja sobre o seu design e interfaces, eu só queria falar um pouco sobre o seu AKS também, porque é tão importante e realmente vai de mãos dadas, e se você quiser se tornar um designer de sucesso ou designer de interface do usuário, entender o usuário e o que UX significa, e integrar isso em seu fluxo de trabalho tornaria você um designer realmente incrível, e realmente se destacar na multidão onde muitas pessoas estão focando apenas em design bonito. Aqui está uma recomendação e um livro muito bom. Nós também vamos colocar isso na lista de recursos. É o Design das Coisas Diárias de Don Norman. UX tem estado limpo desde o início do dia 19 de Don Norman e ele realmente trabalhou na Apple, em um cientista cognitivo. Don Norman estava super interessado em todos os aspectos da experiência de um usuário com um produto ou serviço, incluindo gráficos de design industrial, interface e interação física. Para re entender isso, ele veio com tudo o que inclui essa análise e chamar essa experiência do usuário. Ele mostrou um exemplo muito interessante. Já falamos sobre as portas. Mostrei-lhe o exemplo das portas. Este é outro interessante, porque muitas portas se parecem com isso. Tem esse empurrar e puxar e com duas alças. Qual é o problema aqui? O problema é que as pessoas realmente precisam ler isso para entender o que precisam fazer, se precisam empurrar ou se precisam puxar. Muita gente não sabe ler. Algumas pessoas não sabem como é lido. Seus filhos não sabem ler nem mesmo como pessoas idosas que não sabem ler porque têm olhos ruins. Eles realmente vieram com outra solução, ou Don Norman recomendou outra solução para que o usuário não precisa de qualquer tipo de explicação, eles sabem o que eles precisam fazer. Eu acho que este é um exemplo realmente interessante aqui com a porta, porque se você tem essas duas portas, você sabe exatamente onde a maçaneta está no lado direito. Claro, você precisa puxar. No lado esquerdo, onde não há alça, é claro, você precisa empurrar. Você sabe isso automaticamente, você não precisa de nenhuma explicação, e sua interface, seu design UX/UI deve ser assim, mas o usuário automaticamente sabe o que fazer. Mesmo se você quiser se tornar um designers de interface do usuário, você sempre precisa manter o usuário em mente que super, super importante. Aqui está uma pequena explicação sobre as diferenças de UX e UI. Eu acho que é interessante. Isto é da fundição da Coreia. Sim, dê uma olhada aqui. Aqui estão também a tarefa que você está fazendo ou as diferenças. Se você quiser trabalhar como designers de UX, você está se concentrando muito mais na pesquisa de usuários e na análise de clientes. Você faz uma análise concorrente, desenvolvimento de conteúdo, estrutura de produto. Você faz testes, wireframing, prototipagem, coordenação com qualquer tipo de visual no designer de interface, coordenação de desenvolvedores e um monte de iterações. Como designer de interface do usuário, é sobre isso que vamos falar, é mais pesquisa de design, é branding, é um desenvolvimento de design gráfico,guias de usuário e enredo, guias de usuário e enredo, é prototipagem de interface do usuário, interatividade e animações, capacidade de resposta e adaptação a todos os tamanhos de tela e até implementação com desenvolvedores. Mas também imagens de ilustração, qualquer tipo de ativos. 4. Wireframes: Apaixonei-me pelo problema e não pela solução [inaudível]. No design UX/UI, você realmente ama o problema e você tenta entender o problema, você tenta encontrar o problema, e então você vem com a solução. Mas primeiro, você precisa entender o problema para realmente chegar a uma ótima solução. Isto é o que já fizemos. Nós criamos um conceito. Nós temos alguns esboços, nós temos alguns wireframes. Nesses primeiros protótipos e esses protótipos de papel, também poderia ser wireframes digitais. Você testa sua ideia com os usuários e está pronto para iterar. Você está pronto para mudar seus designs, seu conceito, porque talvez você perceba que o usuário realmente não conseguiu o que você queria mostrá-los ou ajudá-los. Na maioria das vezes, você precisa ajustar algumas coisas e mudar isso antes de mudar para o digital, e criar um protótipo digital super de alta fidelidade, super perfeito. Como você começa com encontrar problemas? O que fizemos até agora? A tarefa era projetar ou redesenhar uma interface para sua cozinha, mesmo que este item na sua cozinha não tenha uma interface agora. Eu me concentrei na geladeira para que seu item pode ter sido algo mais como a torradeira ou o forno, por exemplo. Então começamos a procurar problemas. Tivemos conversas diferentes com as pessoas. Talvez tenha feito alguma pesquisa de usuários. Escrevemos todos os problemas nos Post-its aqui. Por exemplo, na geladeira, é muito caótico e você não sabe como armazenar a comida. Não te lembras qual é a tua comida e o que pode pertencer aos teus colegas de quarto. Você não pode realmente encontrar as coisas dentro porque é bagunçado, etc Então nós nos concentramos em um problema que eu achei o mais interessante e isso foi você não sabe o que cozinhar com essas coisas na geladeira. Este é definitivamente um grande problema. Então estávamos procurando soluções. Por exemplo, mostrar ao exterior o que está dentro, organizar a geladeira para que seja mais fácil de ver, obter recomendações de receitas todos os dias com os ingredientes na geladeira, ou você faz fotos dos ingredientes para comprar e receber lembretes Todos os dias. A idéia de que eu mais gosto é obter receita ou recomendações todos os dias com os ingredientes na geladeira. Esta era a nossa tarefa e, em seguida, surgiu com o conceito, então nós projetamos este protótipo de papel 5. Criação de um moodboard: Neste capítulo, vamos falar sobre um quadro de humor. Como você começa quando deseja criar uma interface digital? Na maioria das vezes, as pessoas se sentem realmente sobrecarregadas com todas as opções e, eles têm medo do widescreen ou do white paper que eles não sabem como começar. Minha recomendação é começar com uma análise onde você realmente pensa sobre o grupo-alvo. Quem você realmente quer atrair aqui, ou para quem você realmente está projetando e então desenvolva um quadro de humor. Sinta-se livre para baixar o quadro de humor e os modelos de grupos-alvo. Estes modelos irão ajudá-lo neste capítulo. Antes de começarmos, vamos ter uma análise muito rápida e pensar no nosso grupo-alvo e também no quadro de humor. Quando estamos pensando sobre o grupo-alvo, o grupo-alvo realmente significa as pessoas para as quais você está projetando. Você veio com um problema, você veio com algumas idéias de como resolvê-los, e [inaudível] primeiro protótipo, então, quem é realmente o seu grupo-alvo? Quem são as pessoas para quem você está projetando? Você sempre define isso na primeira parte do curso. Mas vamos fazer isso de novo, caso já não tenha feito. Primeiro de tudo, você define para quem você realmente projetou. Quem é o seu grupo-alvo? No meu caso, estou projetando um gerador de receitas para uma geladeira inteligente. Meu grupo-alvo são famílias com crianças pequenas. Eles estão vivendo em cidades e eles são mais ou menos experientes em tecnologia. Essa é a razão pela qual eles compraram esta geladeira inteligente. Seus objetivos são, na verdade, para a maioria das famílias realmente economizar dinheiro para reduzir seu próprio desperdício de alimentos, e para cozinhar refeições sem qualquer necessidade de fazer compras adicionais, mas o que as ajuda a ser espontâneo. A aparência para todo o design deve ser, naturalmente, fácil de usar, deve ser fresco, deve ser leve e deve ser suave e fácil de usar. Isso é muito importante porque talvez até mesmo as crianças queiram ajudar ou usar a placa de humor, bem como o design. Nós já definimos isso, então tome alguns minutos para preencher isso e você pode usar o modelo ou você também pode usar apenas caneta e papel. Mas pela minha experiência, é muito útil encontrar isso primeiro. Agora podemos começar com o quadro de humor e esta é, na verdade, uma das minhas partes favoritas. Acho que é muito divertido. Tenho certeza que você vai gostar muito. O que é um quadro de humor? Geralmente, você pode dizer que uma placa de humor é um arranjo de imagens, materiais, pedaços de textos, etc pretendem evocar ou projetar um estilo ou conceito particular. É muito sobre a aparência de um projeto. Aqui estão alguns exemplos que eu realmente gostei este é um branding pessoal que eu encontrei no Behance. Realmente bela placa de humor sobre diferentes coisas que estão relacionadas com este objetivo final. Por exemplo, a cor do estilo topográfico dos materiais, como ele realmente teme. Eu acho que este também é realmente interessante um porque eles já podem ver alguns padrões de cores, ícones diferentes. Quando você vê que você entende automaticamente a aparência do produto final. Como você pode começar com o seu design? Pela minha experiência, é incrível ter alguma inspiração, então eu geralmente gosto de passar por diferentes sites de inspiração para designers. Eu posso recomendar o uso de dribbble. É uma plataforma realmente incrível para qualquer inspiração de design, tão perfeita para pranchas de humor. Você pode criar uma conta lá ou você pode simplesmente procurá-la você mesmo sem baixar ou fazer upload de nada. Você pode procurar por termo específico, por exemplo, cozinhar e, em seguida, você tem diferentes exemplos de design de aplicativo. Você pode apenas fazer capturas de tela e colocá-las em seu quadro de humor. Eu também tenho uma conta lá e eu salvei um monte de coleções por isso sinta-se livre para verificá-los ou seguir-me ou ver o que eu estou guardando pode ser interessante para você. Outra plataforma que eu posso recomendar para placas de humor é Behance. Behance tem uma rede social realmente incrível para spray criativo. Você pode apresentar seu trabalho. Eu também carregou alguns projetos lá, então sinta-se livre para verificá-los, talvez, isso é interessante para você e eu também tenho algumas coleções lá e diferentes placas de humor para diferentes projetos. Sinta-se livre para usá-los para copiá-los e colá-los para o seu moodboard. A terceira recomendação é o Pinterest. Eu acho que muitos de vocês provavelmente já conhecem o Pinterest. É uma plataforma muito legal com imagens diferentes. Você tem uma pesquisa, você pode procurar por coisas diferentes e, no final, criar seu próprio quadro de humor. Aqui você pode ver alguns do quadro de humor, algumas das pastas que eu criei para diferentes tópicos, mesmo para roupas como, futura casa, cozinha para qualquer coisa que me inspire, mesmo ao lado deste projeto. Eu também criei uma pasta que é chamado aplicativo e lá eu estou salvando todo o caminho como esses que eu estou encontrando no Pinterest que eu acho que são realmente bonitos e talvez eu possa usá-los mais tarde para um quadro de humor. Sim, novamente, realmente altamente recomendo para criar uma pasta lá e salvar tudo o que você achar inspirador para projetos futuros ou até mesmo para este, e então começar a criar o seu moodboard. A tarefa aqui é redefinir seu grupo-alvo, anotar o modelo que criei para você, e também criar o quadro de humor. Lugar, tudo o que você acha inspirador ou a aparência do seu projeto lá dentro. Podem ser projetos de aplicativos, materiais, tipografia, ícones, imagens, tudo o que você pode encontrar. Você pode colocá-lo aqui e verificar isso. Agora você pode assistir o novo design meu quadro de humor e eu vou orientá-lo através do processo de projetar meu próprio quadro de humor. Espero que isso seja inspirador para você e útil. Mas isso é de perguntas do meu próprio quadro de humor. O seu pode parecer completamente diferente e isso é totalmente bom, então não se preocupe se o seu parecer um pouco diferente. 6. Escolha de cores: Neste capítulo vamos falar sobre cores. Como escolher a paleta de cores perfeita para realmente transportar sua missão que realmente transforma as emoções certas para o seu design. Minha recomendação é escolher sua paleta de cores para o seu design com sabedoria. Eu vou falar sobre algumas coisas que você precisa saber sobre cores, quando usá-las, como usá-las, e para qual cor vamos trabalhar, para qual propósito. Eu também vou compartilhar algumas ferramentas muito legais e sites para chegar com paletas de cores realmente grandes. Focando nos aspectos psicológicos das cores e parte essencial da compreensão da teoria das cores. Quando você seleciona uma paleta de cores de UX para seu produto, seu aplicativo, seu design ou qualquer outra coisa, geralmente você pensará sobre como as coisas ficarão, mas é igualmente importante pensar como elas se sentem também. A cor tem uma poderosa influência psicológica no cérebro humano, com cada cor representando diferentes significados e emoções para seus usuários. Depois de olharmos de perto a psicologia da cor. Onde usar, quais cores para causar qual emoção, aqui estão algumas recomendações. Em primeiro lugar, limite o número total de cores. Quando você cria um novo esquema de cores, pode ser tentador adicionar dezenas de cores a ele. Mas é melhor evitar essa tentação. Por quê? Porque é realmente difícil alcançar um equilíbrio visual quando você usa muitas cores. O usuário se sente realmente sobrecarregado por um monte de cores. Você pode facilmente sobrecarregar o usuário, por isso é melhor realmente limitar o número de cores. A roda de cores inclui cores primárias, de modo que as cores vermelhas, amarelas , azuis e secundárias, que são uma mistura de cores primárias. Laranja, verde e roxo e cores terciárias. Cores criadas pela mistura de partes iguais de uma cor primária e uma cor secundária. Citron, russet ou buff. Você provavelmente já sabe isso da escola, eu sei que falamos sobre isso na escola, mas isso ainda é maneira de pairar para você quando você escolhe suas cores. Quando estamos falando de paletas de cores existem diferentes maneiras de criar essas paletas de cores. Por exemplo, monocromático. Os esquemas monocromáticos usam uma única cor, mas com variações de tons, tons e tons da cor. Este esquema é muito fácil para os olhos, uma vez que as cores naturalmente ir bem juntos, eles criam um efeito 3D. Também temos esquemas de cores análogos e análogos, usamos algumas cores relacionadas. A cor é a cor dominante, enquanto outros a apoiaram. As cores de suporte enriquecem o esquema e o tornam mais atraente visualmente. Então temos cortesia. A forma mais básica, esquemas complementares consistem em apenas duas cores contrastantes. Por exemplo, uma cor verde dominante e uma excelente cor vermelha. Esses esquemas funcionam bem se você quiser atrair a atenção. Falando sobre cores complementares, o que são cores de cortesia? Tipo, é verde e vermelho, ou azul e laranja, e amarelo e roxo. Eles provocam um contraste realmente grande. Eles geralmente parecem muito bem juntos. Aqui estão alguns exemplos. Este é um exemplo de Andrea Hock. Ela veio com esta placa de humor três bonito, e esta paleta de cores monocromática com um monte de diferentes formas azuis são realmente bonitas. Outro exemplo que eu acho realmente interessante é o que aqui de Esquilo. É uma boa escalabilidade, é essencial para o web designer, que você possa digitalizar conteúdo facilmente, e você tenha um ponto de foco fácil. Os médicos devem ser capazes de encontrar as informações de que precisam rapidamente. Super fácil. As cores que você usa podem suportar isso, pois podem ajudar a orientar o olho do usuário. Por exemplo, você pode usar uma cor contrastante para um botão de chamada à ação. Para o botão aqui, para dar mais peso visual e torná-lo mais proeminente. Aqui você pode ver que temos um fundo amarelo, temos topografia preta e um pouco de branco na ilustração para colocar algum outro destaque aqui. A única outra cor é o porco de uma planta da ação cultural que nós realmente queremos usá-lo para clicar. Isto é verde, por isso há um grande destaque neste. A coisa legal das cores é que você pode realmente colocar um foco em destaques. Você também pode ver que, eu acho que na fotografia, aqui por exemplo, onde tudo é preto e então você vê o amarelo no meio, para enorme destaque, você pode provocar quaisquer contrastes e aqui estão alguns exemplos. Este é um dos projetos em que trabalhei para toda a vida. Isso e isso em uma transmissão ao vivo on-line. O que você pode ver nos exemplos aqui que eu estou mostrando que há sempre cor de foco, cor principal, e cores diferentes em torno que você tem uma paleta de cores realmente bonita, com todas as cores que nós encaixamos perfeitamente juntos. Aqui, por exemplo, é um aplicativo bancário. Eu realmente gosto deste exemplo porque você pode ver as cores azuladas e acinzentadas aqui, que realmente representam confiança e segurança. Eu posso altamente recomendar para verificar alguns desses recursos realmente impressionantes. Um que eu pessoalmente realmente amo é a cor chamada uma aplicação web. Você pode deslizar através de cores diferentes, verificá-las e criar sua própria paleta de cores e, no final, até mesmo baixá-la. Outra recomendação é coolers, plataforma realmente incrível onde você pode criar suas próprias paletas de cores também. Nós temos muitos exemplos, você pode gerá-los, e fazer um monte de coisas diferentes com ele. Basta conferir, é realmente bela paleta de cores realmente faz a diferença quando se trata de seu projeto. Aí vem a tarefa agora. Caso você não tenha criado uma paleta de cores no seu quadro de humor, escolha uma paleta de cores para sua própria interface. Agora talvez já tenha algumas cores em seu quadro de humor, você pode usá-las. Use uma das ferramentas que eu recomendei. Comece e baixe a paleta de cores e adicione isso à sua biblioteca de design e ao Adobe XD ou no Programa de design. 7. Acessibilidade: Este capítulo é tudo sobre acessibilidade. Este tópico torna-se cada vez mais importante apenas porque definimos o nosso grupo-alvo. Isso não significa que o nosso grupo-alvo é perfeito e eles têm um lado perfeito e sabem como fazê-lo. Há um monte de pessoas que têm alguma deficiência e eu acho que isso é super interessante e vai se tornar cada vez mais importante também para nós como designers pensar em soluções que incluem todos e não apenas as pessoas que são perfeitas. Isso também é importante para as pessoas que estão começando sua carreira porque precisamos pensar nessas pessoas também. Quando pensamos em acessibilidade ou pessoas com deficiência, geralmente pensamos em pessoas cegas ou surdas ou coisas assim. Mas o que realmente abriu meus olhos foi este gráfico que vi alguns anos atrás e eu acho que isso é realmente interessante porque pensar em acessibilidade não significa apenas pensar em pessoas que são cegas ou apenas têm um braço, mas também pessoas que são temporariamente ou uma situação algum tipo de deficiência. Quando pensamos em pessoas que têm problemas com a visão, elas não são apenas pessoas cegas, mas talvez pessoas que têm problemas mesmo em termos temporais ou que são motoristas distraídos, coisas assim. Mesmo com o toque, é claro, há pessoas que podem ter apenas um braço e não podem usar o braço direito se quiserem usar uma interface. Mas também há pessoas que têm algumas lesões no braço, ou mesmo pessoas que estão pensando em novos pais que estão carregando seu bebê. Pensar nisso realmente abriu meus olhos e eu acho que é realmente interessante para nós ter em mente quando estamos projetando. Às vezes nos perguntam, encontrei esta citação na Internet, perguntam-nos, o que é um exemplo de acessibilidade? Um exemplo de acessibilidade seria qualquer conteúdo ou funcionalidade que esteja totalmente disponível e utilizável por pessoas com algumas deficiências. Estas podem ser pessoas que não podem usar o braço porque está quebrado, que têm um braço que está carregando um bebê, pessoas que têm infecções de ouvido e não podem ouvir muito bem, ou pessoas que têm problemas oculares, pessoas que perderam seus óculos, etc Isso pode se referir a elementos individuais, recursos, ou toda a experiência web. Um exemplo da vida real é essa coisa em muitos ônibus. Talvez você tenha visto que quando você usou o ônibus pela última vez para as pessoas que estão querendo acessar o ônibus com a cadeira de rodas ou mesmo para os pais ou quaisquer pessoas que usam rodas em algum momento têm essa rampa. O que é mais fácil para nós como designers é realmente se concentrar em cores porque fornecer um contraste ajuda as pessoas com problemas oculares ou que não têm a melhor visão em tudo para receber algo. Precisamos ter um contraste muito grande entre a topografia em segundo plano ou o botão em segundo plano. Existem algumas ferramentas que eu posso recomendar para verificar se a paleta de cores que você escolheu funciona perfeitamente para pessoas com deficiência, então se o contraste é grande o suficiente. Porque isso é algo que você é mais criticado se não der certo. Eu posso altamente recomendar para verificar isso. Há também um plugin realmente incrível para o Adobe XD, que é chamado Stark plugin. Lá você pode verificar para uma paleta de cores e ver como ele olha para as pessoas que têm quaisquer problemas de visão. Você pode apenas encontrar isso na pasta do plugin. 8. Imagens e ilustrações: Transportar emoções é muito importante para cada design que você criará em sua carreira de design, e imagens e ilustrações podem realmente ajudar a fazer isso. É realmente vital fazer isso direito, escolher realmente as imagens certas que se encaixam no seu design, ilustração certa que se encaixam no seu design. Neste capítulo, vamos falar através de diferentes métodos, como encontrar essas imagens, como realmente resolver o que faz sentido, e também alguns recursos. Onde você pode realmente encontrar imagens? Onde você pode encontrar ilustrações se você não é um ilustrador ou um fotógrafo para que você mesmo possa criá-las? Quando os designers sabem como trabalhar com imagens, eles são mais capazes de manipular as reações emocionais de um público. Os designs de produtos podem aumentar ou diminuir a qualidade de suas imagens de experiência de usuário, é por isso que é vital acertar. primeiras impressões são muito importantes, especialmente no web design. De acordo com a pesquisa, temos apenas 50 milissegundos para fazer uma impressão que determina se alguém vai continuar ou deixar sua experiência na web, seu aplicativo, seu serviço. A aparência de um site ou aplicativo tem tudo a ver com a identidade visual de um produto, mas a identidade visual e a experiência do usuário andam de mãos dadas. Sem um, toda a experiência sofre. Quando usar fotos, vídeos ou ilustrações agora? Primeiro de tudo, para exibir um cenário específico. As fotos são ótimas para usar quando você tem uma visão em mente. Você pode contratar um fotógrafo para executar essa visão ou usar funcionalidades de pesquisa robustas em sites de fotos de estoque, então tente encontrar o caminho certo. Então, se você quiser mostrar algo sobre culinária, contar histórias visuais, você também pode integrar uma imagem sobre cozinhar ou onde uma família está cozinhando. Além disso, para mostrar um produto. Se os designers de seu site ou aplicativo se concentrarem em um produto específico, você definitivamente vai querer mostrar uma imagem desse produto. Assim, você pode usar vídeo ou stop motion para mostrar como o produto é usado de imagens fixas de vários ângulos com um controle deslizante. Ou também para o fator wow. Quando usada adequadamente, uma imagem pode desencadear uma forte resposta emocional que os usuários lembrarão. Eu também gosto muito deste exemplo por Julie Sandusky. Ela projetou este belo aplicativo sobre compartilhamento de alimentos onde ela combinou ilustrações realmente bonitas com imagens muito naturais. Então eu acho que uma boa combinação de ambos. Outra coisa importante ou uma dica é se você quiser usar imagens ou ilustrações para testar isso em vários dispositivos, porque você nunca sabe realmente que tipo de dispositivo o usuário está usando. Pode ser um iPhone, pode estar no iPad ou até mesmo na experiência da Web. Se você não é um fotógrafo e se você não tem orçamento para contratar um fotógrafo profissional, mas eu posso recomendar alguns sites com material de estoque livre, por exemplo, Unsplash. Você pode procurar palavras específicas e , em seguida, você terá uma enorme seleção de imagens diferentes que você pode usar para o seu projeto. Quando se trata de imagens ou ilustrações, eu posso altamente recomendar o uso UnDraw. É um plug-in para o Adobe XD com muitas ilustrações diferentes que você pode baixar, ajustar, alterar cores e, em seguida, usar para o seu projeto. Aqui está uma lista de recursos com todos os recursos que eu posso recomendar para fotos e vídeos e ilustrações, maioria deles é 100% livre, então você pode apenas conferir e olhar como você gosta. Aí vem a tarefa agora. Escolha ilustrações ou imagens para o seu próprio design de interface, integre-os na sua biblioteca de design, ajuste o espaço de cores à sua paleta de cores e, em seguida, você estará pronto. 9. Fontes e tipografia: [RUÍDO] Neste capítulo, falaremos sobre maneiras de encontrar a topografia correta, as fontes certas para seus designs. Falaremos sobre recursos, maneiras de combiná-los e muitas dicas e truques diferentes que serão úteis para você, não apenas para design digital, mas eu diria que para todo tipo de design que você criará como designer. Escolher a fonte certa pode ser um desafio, mas quero compartilhar com você algumas dicas e truques que serão úteis para você selecionar a fonte perfeita para seu projeto. A primeira recomendação é , na verdade, sobre a marca, porque a seleção da fonte também faz parte da marca do design geral. A fonte selecionada deve incorporar o caráter e o espírito da sua marca. Tente combinar o estilo da fonte com o caráter da sua marca. Imagine que um designer final use o Comic Sans para um aplicativo bancário que não caberia em nada, então é sempre importante que essas duas coisas realmente se encaixem e que a tipografia realmente se encaixe na marca geral. A segunda recomendação é legibilidade , porque geralmente é evidente que é melhor que um tipo de letra seja muito legível e muito claro. Às vezes, é ilegível, embora pareça muito legal mas lembre-se sempre de que as pessoas precisam gastar mais tempo para entender o que está escrito lá e talvez até fechem a janela ou a excluam porque simplesmente não conseguem lê-la. Demora muito tempo. Em vez disso, evite usar fontes sofisticadas ou qualquer texto em maiúsculas e corpos ou textos muito grandes que obriguem a atenção do leitor. É melhor usar fontes decorativas apenas para títulos e títulos. Além disso, certifique-se escolher um tipo de letra que funcione bem em vários tamanhos e pesos para manter a legibilidade em todos os sites em seu telefone, em sua página da web , para textos maiores, menores, etc. Uma das primeiras decisões que realmente precisamos tomar quando você quer escolher uma fonte é se ela deve ser uma fonte serifada ou sem fonte? Embora a decisão possa ser baseada em vários pontos-chave, um dos pontos mais importantes é o tamanho da cópia. Geralmente, os tipos de letra serifados são mais fáceis de ler para cópias longas do que sem. As fontes serifadas, [inaudíveis], atravessam uma linha, especialmente se as linhas forem longas. Provavelmente já vimos isso em muitos jornais, onde eles usam muitas fontes serifadas. Se também for importante considerar seu público-alvo, sans é preferencialmente para crianças pequenas ou para qualquer pessoa que esteja aprendendo com ele. Sans também é bom para leitores com certas deficiências visuais. Além disso, é uma aposta segura usar fontes seguras para a web. Existem fontes específicas que são seguras na Web, portanto, fontes que são suportadas por todos os principais navegadores da Web por padrão. Aqui estão alguns tipos de letra seguros sem os quais você pode começar, por exemplo, Arial, Tahoma, Verdana. Incrível. Tipo de letra Safe Sans como Georgia, Lucida, Times New Roman. Você também precisa pensar na família de fontes, então algumas fontes são membros de famílias de fontes maiores, você diria, e elas vêm com uma seleção muito grande de estilos e pesos diferentes que dão mais liberdade aos designers. Quando você olha para Helvetica ou Helvetica Neue, elas incluem muitas subfontes diferentes. Ao escolher uma fonte para seu design, escolha uma fonte com uma família de fontes muito grande , pois isso ajuda você a descobrir se você tem requisitos diferentes. Eu direi que, para a maioria dos projetos, basta ter pelo menos duas fontes ou três fontes. Para muitos projetos, ou eu diria por experiência própria, basta ter três pesos, que seriam pares, que seriam pares negrito e itálico, enquanto outros podem exigir versões adicionais para criar uma boa hierarquia visual. Na maioria das vezes, um tipo de letra é tudo o que você precisa usar em seu design. No entanto, há certas ocasiões em que você desejará usar vários tipos de letra. Um para seu corpo e outro para o título, por exemplo. A próxima dica é limitar o número de fontes. Eu sei que existem muitas fontes bonitas por aí e todos nós adoraríamos usar o maior número possível de fontes, mas minha recomendação é realmente limitar o número de fontes. Evite usar mais de duas ou três fontes em seu design, pois toda vez que você achar que precisa de uma nova fonte, toque, em vez de tamanhos ou subfontes diferentes, por exemplo, integre uma nova. Próxima dica. Tente usar fontes que não sejam muito parecidas. A ideia de usar várias fontes em um design é criar uma hierarquia visual e diversidade. É por isso que não adianta escolher duas fontes que pareçam idênticas. Na verdade, quanto mais fontes parecidas forem, a probabilidade de elas entrarem em conflito. O contraste é uma coisa super importante, não só quando se trata de design, mas também para tipografia em geral. Ao escolher usar vários tipos de letra, certifique-se de que os tipos que você está usando tenham diferenças substanciais de contraste, mas lembre-se de que o contraste não é o mesmo que conflito, portanto, a combinação ideal de fontes deve criar harmonia. Existe uma regra simples. Encontre dois tipos de letra que tenham uma coisa em comum, mas que, por outro lado, sejam muito diferentes. Combinar serif com sans é uma jogada clássica, por exemplo. A principal coisa ao combinar duas fontes muito diferentes é estabelecer uma hierarquia clara entre as duas. Uma fonte deve ser mais proeminente do que a outra e isso pode ser feito escrevendo o tamanho e o peso de cada fonte. Minha recomendação é escolher uma fonte para o título e outra para a cópia. A do título pode ser um pouco mais sofisticada e a do texto deve ser fácil de ler. Como você pode encontrar a fonte perfeita agora? Aqui estão algumas ferramentas e recomendações. Uma delas é a UXPRO, uma ferramenta muito legal para combinar fontes, encontrar todas as diferentes ferramentas que são úteis, para que você possa conferir. A outra dica são as fontes da Adobe. Eu realmente adoro isso porque você pode baixar fontes para sua Creative Cloud. Aí vem a tarefa agora. Escolha a tipografia para seu projeto, uma, duas ou três fontes, adicione-a à sua biblioteca design na ferramenta de software de design que você está usando e vamos começar. [BARULHO] 10. Aprenda os princípios do design: Neste capítulo, vamos falar sobre princípios básicos de design. Se o seu fundo é design gráfico, alguns desses princípios podem ser familiares para você, porque esses princípios são princípios gerais. Seja qual for o tipo de design que você está criando, este pode ser um cartaz, até mesmo um folheto, cartão de visita ou na interface digital, esses princípios de design sempre funcionam. Eu acho que é realmente fascinante se você os conhece e usá-los porque isso realmente faz a diferença de um bom design ou um ótimo design. Vou passar por quatro princípios de design. Na verdade, há mais, mas acho que esses quatro são os mais importantes. Você pode usá-los para qualquer tipo de design. Poderia ser o post do Instagram, poderia ser um cartaz, poderia ser um panfleto, poderia ser design visual, mas também, design de interface. O primeiro princípio do design é o alinhamento. O alinhamento proporciona estabilidade cognitiva e relações visuais. Cada elemento na interface do usuário deve ser alinhado com um ou mais outros elementos. Aqui está um bom exemplo. Esta é uma página da Web normal, e você vê que você tem uma grade visual onde a maioria das coisas estão visualmente alinhadas. Isso ajuda o olho a realmente se concentrar e não obter nenhuma distração. Você vê isso para qualquer tipo de área. Por exemplo, se você tiver ícones diferentes que não são o meio e também áreas de texto e títulos, tudo deve estar alinhado. O mesmo de cartas, você vê isso, e este é o único quebra-cabeça. Isso é possível para elementos de design verticais, mas também para horizontais. Então temos proximidade. Elementos próximos uns dos outros são percebidos como um único grupo. Os itens não relacionados são separados visualmente. Agrupe determinados elementos contextualmente para formar um todo percebido. Esta é, eu acho, uma dica muito boa. Se as coisas pertencerem, você vê no lado direito, por exemplo, há uma imagem e esses dois blocos brancos. Se você colocá-los perto um do outro, ele é percebido como alguma área que pertence a um. Sempre certifique-se de realmente colocar as áreas que pertencem juntas mais próximas. Aqui está um exemplo da Amazon, e lá você vê que existem informações diferentes. Em primeiro lugar, o nome do item, a imagem, o valor que você precisa pagar, o logotipo, as estrelas, tudo está realmente próximo. Se você apenas olhar aqui em um olhar, você automaticamente sabe o que pertence porque todas as áreas que pertencem juntos são realmente próximas. Se você comparar esses dois, eu acho que é realmente interessante porque um definitivamente não é perfeito porque tudo está muito perto, e você realmente não pode ver a diferença. Você pode ver que este no lado direito é o que é recomendado. As áreas que pertencem juntas estão próximas, e há alguma distância entre os itens individuais, de modo que, se você fechar os olhos, você saberá automaticamente o que pertence a um. No lado esquerdo, tudo está muito perto e todas as distâncias de um item para o outro, os botões, tudo parece que pertence a um produto. Então temos contraste. A falta de contraste entre texto e fundo afasta o olho porque eles não sabem qual cor focar. contraste chama a atenção para elementos específicos. Isso não só é importante para a topografia das manchetes, mas para tudo. contraste pode ser quase tudo o que é diferente do resto. Aqui você tem, eu acho, um bom exemplo. Você tem o design básico, a cor básica que deseja usar, a topografia básica. Então aquele que é mais escuro chama automaticamente a atenção porque o contraste com o fundo é maior do que o cinza original e o subordinado, que é quase como o fundo. Com contraste, eu acho que é realmente importante lidar com isso direito porque o que você vê lá é o contraste insuficiente, muita tensão, equilíbrio e tensão. Há um ponto muito doce entre não muita tensão, mas também contraste. Quando estamos falando de contraste, não é apenas sobre cores, mas isso também pode ser proporção por como se um elemento é maior do que os outros. Espaço em branco, a distância entre diferentes elementos pode ser movimento, mas também contraste por diferentes cores ou tamanhos, formas ou alinhamento. Uma das coisas mais importantes é provavelmente a hierarquia porque a hierarquia fornece ao usuário um roteiro para navegar em todo o seu design. Em uma época em que a atenção e a paciência são limitadas, hierarquia pode ser a arma secreta que garante que seus usuários encontrem o que precisam, incentivando-os a explorar mais. Considerando a importância da experiência do usuário, hierarquia é muitas vezes crítica para o sucesso de uma interface. Hierarquia em design é geralmente um tópico realmente grande. Muitos outros princípios de design, como alinhamento, ênfase, proporção, espaço em branco, etc, podem ajudar a influenciar uma estrutura hierárquica em seu design. Este é um bom exemplo porque você vai ler isso primeiro, então você vai ler isso, depois este, e então você vai ler isso no final. Ao criar uma boa hierarquia, você pode orientar o usuário e já pode determinar o que o usuário lê primeiro, segundo e último. Normalmente, você inicia a maior fonte, você a usa normalmente para o título. Então você tem a sub-manchete, e então você tem algumas sub-manchetes e, em seguida, a cópia. Há realmente diferenciar entre diferentes tipos de faces e tamanhos diferentes também. Então temos repetição. repetição é usada para criar uma hierarquia visual. Isso pode ser fontes, cores, texturas e elementos gráficos. A reutilização de elementos desses elementos visuais cria coesão. Muito importante, sempre reciclar, reutilização de coisas que você já criou; diferentes elementos de design, diferentes padrões. Aqui temos uma manchete, uma cópia de texto e o botão. Basta reutilizá-los se você tem um elemento muito semelhante ou talvez o mesmo, você usa o mesmo padrão. Para isso, você pode integrar isso em sua biblioteca de design e apenas reutilizar isso toda vez que você usar isso. O mesmo aqui. Exemplo da Amazon, novamente, todos esses itens parecem exatamente iguais. É muito fácil para o usuário digitalizar isso muito rápido e entender que todos esses itens são itens que eles podem comprar, então eles pertencem à mesma marca. 11. Regras de ouro sobre interface: Então, as regras de ouro do design de interface. Existem dez regras e vou falar sobre cada uma delas com alguns exemplos. Então, eu recomendo apenas pegar um pouco de papel e caneta e fazer algumas anotações. Porque isso será muito útil para todos que desejam ir um pouco mais fundo e realmente querem entender o básico do design de interface. Então, vamos começar com o primeiro. Combine o sistema e o mundo real. Portanto, o sistema deve falar o idioma do usuário com palavras, frases e conceitos que são familiares ao usuário, em vez de sistema, ou eles inserem termos. Então, um exemplo é realmente usar termos que o útero realmente entende e não palavras que são muito específicas e que ninguém realmente entende. Portanto, use metáforas do mundo real, por exemplo, usando metáforas e o design da interface do usuário permite que os usuários criem uma conexão entre o mundo real e a experiência digital. Somos metáforas muradas e usuários avançados, permitindo que eles transfiram o conhecimento existente sobre como as coisas devem se parecer ou funcionar. Por meio da interface. As metáforas são frequentemente usadas para tornar o desconhecido, familiar. Pegue a lixeira em sua área de trabalho, por exemplo, que contém arquivos excluídos. Isso é algo que você conhece da vida real. Você coloca algo lá porque quer jogar fora, você não precisa mais disso. Não é uma verdadeira proibição de lixo em seu laptop ou computador, mas representa visualmente da mesma maneira. Assim, o usuário entende facilmente o que isso significa. Visualmente do status do sistema. Mantenha os usuários informados sobre o que está acontecendo por meio do feedback apropriado dentro de um prazo razoável. Os usuários são muito mais tolerantes quando têm informações sobre o que está acontecendo e recebem feedback periódico sobre o status do processo. A visibilidade do status é essencialmente quando os usuários iniciam uma ação que leva algum tempo para o computador ser concluída, como uma barra de carregamento, por exemplo, ou um carregamento que somos usuários não gostam de ser deixados ver nada na tela do dispositivo enquanto o aplicativo deveria estar fazendo algo. Portanto, o uso do indicador de progresso é um dos aspectos sutis do design da interface do usuário que tem um impacto realmente grande no conforto e no prazer dos usuários. Então, uma dica muito simples é muito útil quando você quer começar. Então, o número três é o controle do usuário. Suporte, desfazer e refazer, porque muitos usuários geralmente escolhem as funções do sistema por engano e precisarão marcar claramente a saída para deixar o estado indesejado. Essa regra significa que o usuário sempre deve ser capaz de retroceder rapidamente o que estiver fazendo. Isso permite que os usuários explorem o produto sem o medo constante de falhar, certo? Porque se algo falhar, se eles fizerem algo errado, eles podem desfazer e continuar. Quando um usuário sabe que os erros podem ser facilmente desfeitos. Isso incentiva a exploração de opções desconhecidas, para que o usuário se sinta mais confortável e confiante ao explorar seu aplicativo ou seu site. Pelo contrário, se um usuário tem que ser extremamente cuidadoso com cada ação que realiza, leva a uma exploração mais lenta e experiência de desespero que sabe o que o sistema, é claro, deve falar a língua do usuário com palavras, frases, conceitos familiares ao usuário, em vez de tropo orientado ao sistema. Job falou sobre isso. Portanto, evite jargões e termos orientados ao sistema ao projetar um produto. É importante usar uma linguagem que seja fácil de ler e entender. E o sistema deve falar a língua do usuário com palavras, frases e conceitos familiares ao perdedor, em vez de jargões ou termos orientados para o sistema. Então, o número cinco é a prevenção de erros. Tente melhorar as condições propensas a flechas em primeiro lugar ou verifique se há elas e apresente aos usuários uma opção de confirmação antes que eles se comprometam com a ação, certo? Portanto, o feedback é normalmente associado a pontos de ação para cada ação do usuário. Portanto, o sistema deve mostrar uma reação clara e significativa. O sistema de feedback para cada ação espera que os usuários atinjam esse objetivo sem atritos. Seu design deve considerar a natureza da interação. Para ações frequentes, o usuário pode responder. Por exemplo, quando os usuários interagem com objetos interativos, como botão, é essencial fornecer alguma indicação e a ação foi reconhecida, certo? Portanto, isso pode ser algo tão simples quanto um botão mudar cor quando pressionado ou gerar algum tipo de interação. A falta desse feedback força os usuários a verificar novamente se ação pretendida deve ser executada. Então, quando você cria uma interface, sempre certifique-se de ter esse tipo de feedback. Então, o agressor se sente mais confortável. O número seis é o reconhecimento. As instruções de como usar o sistema devem ser visíveis e, claro, facilmente recuperáveis sempre que apropriado. Quanto mais claro, melhor. Portanto, promova uma clareza visual. Uma boa organização visual melhora a usabilidade e a legibilidade, permitindo que os usuários encontrem rapidamente as informações que procuram e usem a interface com mais eficiência. Portanto, ao criar layouts para sua interface, evite apresentar muitas informações ao mesmo tempo na tela. Isso resulta em confusão visual. Portanto, concentre-se apenas nas coisas que você precisa, não muito, não sobrecarregue o usuário. E lembre-se do princípio, a forma segue a função. Então, faça as coisas parecerem que funcionam. Aplique os princípios gerais da organização do conteúdo, como agrupar itens semelhantes, numerar itens e usar títulos e textos de prompt. Uma boa organização visual melhora a usabilidade e a capacidade de lazer, permitindo que os usuários encontrem rapidamente as informações que procuram e usem a interface com mais eficiência. Flexibilidade. Aceleradores não vistos pelo usuário novato, muitas vezes podem acelerar a interação do usuário especialista, como o sistema pode atender tanto a joalheiros inexperientes quanto experientes. Então, acomodou usuários com diferentes níveis de habilidade. Usuários de diferentes níveis de habilidade devem ser capazes interagir com o produto em diferentes níveis. Não sacrifique usuários experientes por uma interface fácil de usar para norovírus ou usuários casuais. Em vez disso, tente projetar para as necessidades de um conjunto diversificado de usuários. Portanto, não importa se seu usuário é um especialista ou um novato. Adicionar recursos como tutoriais e explicações é extremamente útil para usuários sem arroz, apenas garante que usuários experientes possam pular essa parte. Quando os usuários estiverem familiarizados com um produto, eles procurarão atalhos para acelerar as ações mais usadas. Você deve fornecer um caminho rápido para usuários experientes, Você deve fornecer um caminho rápido para permitindo que eles usem atalhos. Na verdade, usamos isso em um aplicativo que eu projetei para uma startup de frutas. Criamos um livro de culinária digital lá, integramos diferentes opções para usuários profissionais. Então, para pessoas muito profissionais que estão cozinhando, certo? Mas também tutoriais para pessoas que precisam de um pouco mais de ajuda. Ajuda, mínimo aqueles design. Cada unidade extra de informação em um diálogo compete com a unidade de informação relevante. Elimine todos os elementos que não estão ajudando seus usuários. As interfaces não devem conter informações relevantes ou raramente necessárias. Informações irrelevantes introduzem ruídos nos seus olhos. Ele concorre com as informações relevantes e ambiciosas, é visibilidade relativa. Simplifique as interfaces removendo elementos desnecessários são conteúdos que não suportam diretamente as tarefas do usuário. Prospere para projetar seus olhos de uma forma que todas as informações apresentadas na tela, mas valiosas e relevantes. Cada elemento e avaliado com base no valor, ele entrega ao usuário. Um bom exemplo de um aplicativo que segue a abordagem menos é mais, evitando sobrecarregar a interface de conteúdo ou recursos é AR, escritor. Nove documentações na lista de tarefas do usuário. Etapas concretas a serem realizadas, como informações, devem ser fáceis de pesquisar e encontrar, criar uma interface fácil de navegar. navegação deve ser sempre muito clara e evidente. Os usuários devem poder explorar a interface e qualquer produto de software. Mesmo complexo, seja como produtos de empresa para empresa que são para recursos como painéis, por exemplo, se muitas informações não intimidarem os usuários para que eles tenham medo de apertar um botão certo? Porque há muita coisa acontecendo. Boa interface do usuário, boa interface de usuário coloca os usuários em sua zona de conforto fornecendo algum contexto , fornecendo algum contexto de onde eles estão e onde estiveram, e onde estão, o que eles podem fazer a seguir. Forneça dicas visuais. Dicas visuais servem como lembretes para os usuários. Permita que os usuários naveguem facilmente pela interface fornecendo pontos de referência à medida que se movem pela interface do produto. Podem ser títulos de página, destaques para opções de navegação atualmente selecionadas ou outros auxílios visuais que oferecem aos usuários uma visão imediata de onde eles estão na interface. Os usuários nunca devem estar se perguntando Onde estou realmente, como cheguei à tela? Portanto, forneça um ícone, reflita uma pequena seta para trás , por exemplo, títulos bem grandes que os usuários entendam onde estão. Os usuários devem receber dicas que os ajudem a prever o resultado de uma ação. Um usuário nunca deve estar se perguntando, o que eu preciso pressionar para fazer isso ou perder aquilo? Recupere-se de erros. As mensagens de erro devem ser expressas em linguagem simples porque nossas setas sempre podem ocorrer. E isso não é um problema. Mas você também precisa criar vírus. As flechas sempre acontecerão, então você precisa se preparar para isso e projetá-las. Uma mensagem de erro bem elaborada é realmente importante e, por outro lado, pode transformar um momento de frustração em um momento de conversão. E a mensagem de erro eficaz é uma combinação de notificação explícita de seta com dicas para resolver o problema. Então, talvez você tenha visto que esse tipo de mensagem de erro foi como, oh, alguma coisa, algo não tão bom aconteceu. Mas sobre o que posso fazer agora? Então eu estendo, incluo algo que o usuário sabe o que fazer. Espero que tenha sido útil para você. Espero que você tenha feito algumas anotações. Avise-me se você tiver dúvidas e sinta-se à vontade para usar essas informações no design da sua interface, você vai pensar. 12. Ferramentas de design: Agora, vamos falar sobre diferentes ferramentas de design que eu posso recomendar. Vou usar o Adobe XD durante este teste. Esta é a minha ferramenta de design favorita, mas há muitas outras ferramentas de design que você vai falar muito rápido. Sinta-se livre para usar a ferramenta com a qual você se sente mais confortável, que você mais gosta. Isso é completamente bom, então você não precisa usar o Adobe XD, você pode usar a ferramenta desejada. Mas vamos falar sobre as diferentes opções bem rápido. Existem três ferramentas de design principais no mercado neste momento. O primeiro design bem sucedido foi Sketch. Alguns anos todos, cada designer usado Sketch porque foi a primeira ferramenta de interface muito profissional com um monte de plugins, ferramenta de recall, é em torno de, eu diria que como $100 por ano. Então temos o Adobe XD, que faz parte da Adobe Creative Cloud. Se você tiver uma assinatura da Creative Cloud, poderá usar o Adobe XD. Esta é realmente a minha ferramenta favorita, porque você tem uma combinação super agradável com After Effects e todas as outras ferramentas com suas bibliotecas. Ele funciona muito simples e você tem um monte de recursos de prototipagem muito legal. Também é grátis. Você pode simplesmente baixar o Adobe XD e não há necessidade de pagar por isso, o mesmo com Figma. Esta é outra ferramenta muito comum e super popular agora. Também é gratuito como baseado na web e a colaboração funciona muito bem. Além disso, ferramenta muito boa para apenas experimentar e conferir. Escolha uma das ferramentas. Se você não sabe qual deles, use o Adobe XD porque eu criei o kit no Adobe XD e baixe-o, prepare-se e nos veremos na próxima lição em que vamos começar com o design da interface do usuário. 13. Introdução ao Adobe XD: Então, neste capítulo, vou guiá-lo através do Adobe XD, teremos introdução básica sobre a interface do Adobe XD, o que você pode fazer e como começar com sua interface. Então, se você já estiver familiarizado com o Adobe XD ou se quiser usar outra ferramenta de design e não estiver interessado em aprender mais sobre essa ferramenta, tudo bem. Basta pular esta lição, e veremos cada hora na próxima onde eu estou falando sobre a interface e gadgets para o meu processo de design. Mas no caso de você querer aprender sobre o Adobe XD e como usá-los, eu recomendo ficar aqui porque eu vou orientá-lo através da interface básica, o que você pode fazer, e sobre as três coisas interessantes que você precisa saber, que é design, protótipo e compartilhamento. Então eu diria para mergulharmos. No final deste vídeo. Eu também vou compartilhar alguns recursos que provavelmente são muito úteis para você então fique até o final. Mas antes de falar sobre os recursos, quero dar-lhe uma visão geral super rápida das ferramentas que você está pronto para começar. Quando você baixar o Adobe XD e quando você abri-lo, você verá algo assim, onde você tem diferentes opções aqui. Primeiro aqui você tem esta área tutorial onde você pode procurar tutoriais ou aprender algo mais, então aqui se você clicar em Aprender. Em seguida, você é guiado para a área de tutorial com um monte de informações sobre componentes. Portanto, certifique-se de verificar se você quiser aprender mais, há um monte de recursos realmente legais, um monte de tutoriais realmente legais e tudo o que você precisa saber. Mas vamos começar, e no nosso caso, vamos começar com um ponto de partida básico e aqui você pode escolher o tamanho da prancheta para o dispositivo que você está projetando. Isso pode ser um iPhone, uma experiência na web, uma história do Instagram ou também personalizado. Você pode mudar isso no final para que não seja tão importante, vamos começar com o iPhone. Parece bom. Agora o Adobe XD abre e já temos uma prancheta, essas coisas são chamadas de pranchetas, com o tamanho perfeito para um iPhone. Eu sempre recomendo começar com o lado do telefone que você tem porque você também pode baixar na App Store, no aplicativo Adobe XD e testar tudo no seu dispositivo. Isso é muito útil e é algo que eu recomendo muito. Então agora você vê a interface e você já pode ver que ela é muito, muito minimalista, especialmente em comparação com outras ferramentas de design como o Photoshop, por exemplo. A área onde vamos começar é a que está no canto superior esquerdo porque aqui você tem todas as ferramentas como a ferramenta de retângulo para que você possa desenhar um retângulo ou você também pode desenhar um círculo. Em seguida, clicando nesta pequena seta aqui ou clicando em V no seu teclado, você pode selecionar, por exemplo, o retângulo. Então você tem o painel inspetor no lado direito e você pode fazer alterações, por exemplo, você pode mudar a cor para vermelho, você pode adicionar algum tipo de borda, um pouco maior, por exemplo, você pode adicionar algum tipo de sombra no nossas sombras, desfoque de fundo, opacidade, então tudo o que você sabe de ferramentas de design normais. Tipo o mesmo para qualquer outro fórum. Eu acho que o que é realmente interessante se você colocar um sobre o outro, selecionar ambos, você também pode combiná-los para correr para uma área, por exemplo, e, em seguida, alterá-los para que eles são um, ou as ferramentas provavelmente do Illustrator. Outra coisa realmente legal aqui é como a ferramenta de caneta, então você também pode desenhar algo se você quiser desenhar um ícone, por exemplo, e depois preenchê-lo todas as coisas que você sabe de suas ferramentas de design. Vamos apagar isso de novo. Então nós temos as ferramentas de texto onde nós vamos para ir um pouco mais perto e nós desenhamos uma área de texto, nós vamos apenas escrever design de interface aqui, e então você já vê, eu vou clicar na seta novamente para selecionar o todo área de texto e que podemos alterar a tipografia aqui. Eu vou escolher os poppins, esta é também a fonte com que eu vou trabalhar. Vamos escolher outro tamanho de fonte, é negrito, e então também podemos mudar a cor aqui no lado. Muitas funções diferentes, você sabe, provavelmente tudo já do InDesign, etc, então agora temos a topografia aqui. O que eu acho que é realmente interessante para você também é que quando nós criamos certos tipos de projetos que nós realmente gostamos, por exemplo, certo tipo de estilo topográfico se nós escolhermos, este é o título e então clicando em apenas uma opção e arrastando e soltando abaixo, este é o nosso texto de cópia, e isso seria um pouco menor e nós escolhemos Regular, algo assim. Nós também podemos adicionar estilos de caracteres específicos aqui no lado para que possamos reutilizá-los, mas eu vou falar sobre isso em um segundo. Podemos adicionar outras pranchetas diferentes se quisermos adicionar outra, por exemplo, se quisermos fazer outro design no iPad Pro, podemos clicar aqui no pré-selecionado, em opções, temos outra prancheta aqui. Mas também podemos clicar em Opções e, em seguida, colocá-la ao lado dele. Isso é realmente útil, eu diria. Aqui na parte inferior também temos três tipos de funções, a primeira é a biblioteca, eu vou falar sobre isso em um segundo, então nós temos as camadas. Quando clicamos em uma prancheta, também podemos renomear isso, por exemplo, tela inicial. Em seguida, vemos aqui no lado esta é a tela inicial do iPad. Se selecionarmos a prancheta aqui, vemos o que está nesta prancheta e temos três itens, o texto de cópia Lorem Ipsum, temos o título, e então temos o nosso elemento aqui a partir da elipse e do retângulo. Então lá você tem uma visão muito boa do que está em cada prancheta, e assim ele ajuda você a manter o controle. Então temos aqui, este é o último ícone na parte inferior, diferentes tipos de plug-ins e plug-ins são muito, muito legais. Você pode simplesmente baixá-los, você vai aqui e, em seguida, ir para Procurar plugins e você tem uma enorme lista de diferentes plugins que você pode baixar lá gratuitamente. Você pode usá-los e realmente acelera seu fluxo de trabalho. Estes são super úteis pela minha experiência. Então, se esta seria a nossa interface e vamos precisar, por exemplo, um ícone, eu posso recomendar os ícones para design plugin. Esta é uma biblioteca de ícones muito boa, por exemplo , nós estamos procurando, eu não sei, bloquear algo assim, nós podemos apenas clicar nele e é automaticamente aqui e então nós também podemos mudar o tamanho também porque É reto-base, e agora temos uma pequena fechadura aqui, por exemplo, se precisarmos disso. Há muitos ícones, então, no caso de você precisar de ícones, sinta-se livre para apenas usá-los. Eles são super úteis. Outro plugin que eu também amo é undrawn. Há um monte de ilustrações realmente legais que você pode usá-los e usá-los, por exemplo, para diferentes tipos de ocasiões. Comer juntos pode ser uma coisa legal, então o que precisar aqui. Você pode escolher algo o mesmo com as ilustrações humanos, isso também é muito legal. Então sinta-se livre para usar isso se você não é um ilustrador, se você não quer fazer isso sozinho. Então aqui no topo temos a biblioteca, que eu acho muito legal. Se tivermos cores específicas aqui, temos dois tipos de cores que podemos adicionar isso à nossa biblioteca apenas clicando no sinal de adição e as duas cores são adicionadas à biblioteca. Realmente útil para a minha experiência, porque no caso de você precisar projetar algo ou projetar um botão, por exemplo, em algum lugar, você pode simplesmente reutilizar isso. Então imagine que esta é a nossa integração, nossa interface, nós temos algum tipo de ilustração aqui, mas para bloqueio, então nós temos algum tipo de cópia de texto e agora nós queremos um botão. Então vamos desenhar um retângulo, algo assim e vamos escolher uma cor, isto, por exemplo, pode também com estas pequenas alças aqui, podemos arredondar as bordas um pouco que não queremos uma borda, mas também podemos copiar e colar este Command+C, Command+V. Em seguida, vamos centralizar esse branco e, em seguida, vamos substituir isso aqui no botão, menor e também aqui. - Legal. Então vamos agrupar isso, ou clicar no lado direito e fazer grupo, ou clicar em Command+G. Agora eu também vou mostrar algo muito legal porque você pode criar esse tipo de componentes. Você pode clicar em Comando K, ou também clicar com o botão direito do mouse e, em seguida, fazer um componente, e fazer componente neste elemento aqui como um componente aqui na sua pequena Biblioteca de Design. Se você quiser projetar a mesma coisa em seu iPhone, iPad ou em qualquer outra tela, basta arrastar e soltar isso e colocá-lo aqui para que você não precise redesenhar isso. O mais legal é que quando você muda algo aqui, por exemplo, você decide, não, eu preciso de uma cor mais clara, por exemplo, ou eu só quero outra fonte, por exemplo, Helvetica, ou eu não sei, algo um pouco mais louco e as mudanças em todos os componentes ou onde quer que você coloque isso em sua tela, então isso é realmente útil. Legal. Então vamos colocar isso de lado. Outra coisa que eu quero mostrar a vocês porque eu acho que isso é muito legal, então eu vou apenas adicionar outra prancheta aqui outra - esta não era a sua própria. Então agora eu quero projetar diferentes tipos de elementos, isso poderia ser, por exemplo, como diferentes tipos de elementos alimentares. Então eu tenho um círculo e lá eu quero colocar uma foto da comida e então eu quero adicionar um pouco de cenoura, por exemplo. Deve ser um pouco menor, uns 20 ou mais. Centralize isso, legal. Vou agrupar isso. Então você pode clicar no lado direito. Aqui está a grade de repetição. Clique nele e, em seguida, você obtém essas pequenas alças. Você pode apenas puxá-lo para baixo. Algo assim. Você tem algum tipo de grade. Você também pode alterar as distâncias aqui. Eu já preparei algumas frutas e legumes aqui, que podemos apenas, se você tê-los em uma pasta, selecionar tudo o que você deseja integrar e colocá-los aqui em um dos círculos. Eles são ordenados automaticamente para os outros porque ainda é uma grade de repetição e isso também funciona para um tipo. Você seleciona a cenoura onde o tipo está. Preparei um documento de texto com todos os nomes dos frutos na mesma ordem que aqui. É um documento de texto normal. Então eu vou arrastar e soltar isso e colocar isso aqui no campo de texto. Sim, ele classifica automaticamente, às vezes talvez eu precise ajustar um pouco para obter o tamanho. Isso deve ser centrado. Se eu mudar algo, isso muda em todas as áreas daqui. Muito fixe. Então eu vou integrar o botão aqui também. Agora, se a palavra selecionar enquanto a tipografia provavelmente não é o que queremos, vamos mudá-la aqui. Se você quiser mudar algo, sempre certifique-se de que você está mudando no componente mestre e você vê isso com o pequeno círculo verde aqui. É apenas branco no meio. Se você não conseguir encontrá-lo, você pode simplesmente clicar com o botão direito do mouse e, em seguida, clicar em, “Editar componente principal”. Em seguida, você adicionará o componente principal. escuro, por exemplo, e nós também vamos mudar a tipografia aqui novamente. Para os pop-ins. - Legal. Em seguida, na próxima prancheta, eu vou apenas copiar e colá-lo e excluir tudo. Além disso, vamos desagrupar esta área porque não precisamos mais deste grupo. Eu vou adicionar maçã vermelha aqui e talvez também fazer isso um pouco maior porque eu quero mostrar a vocês o próximo estágio agora. Outra coisa sobre a qual eu realmente não falei são as áreas aqui no topo. Ainda estamos no modo de design, estamos projetando elementos, estamos criando nossas bibliotecas e estamos projetando as telas. Mas também temos protótipo e compartilhamento. Vamos ao protótipo. Nem tanto mudou, mas agora podemos tornar tudo interativo. Como é que isso funciona? Se clicarmos em um elemento, teremos a venda, nossos sinais aqui. Podemos arrastar e soltar isso para a prancheta onde o destino é. Quando clicamos em algo, quando clicamos neste botão, por exemplo, onde queremos chegar e esta é a tela. A próxima seria a tela. Em seguida, clicamos no gatilho que seria aproveitado. Também pode ser arrastar ou uma palestra ou até mesmo voz. Então também podemos fazer como auto animar, sobrepor, rolar, só precisa experimentar isso. Eu recomendaria começar com dissolver. Vou clicar em “Selecionar”, e isso seria o mesmo. Vamos tentar isto. Vamos para o modo de pré-visualização. Este é o pequeno botão Play aqui. Clique em “Avançar”. Selecione, legal, isso funciona. Você pode simplesmente brincar com ele, experimentá-lo e se você estiver trabalhando em um grupo, eu também posso recomendar apenas primeiro, você pode salvar isso como um documento da Nuvem. Quando você diz isso, você também pode ver isso com a Nuvem. Se ele for salvo na Nuvem, você pode adicionar mais pessoas aqui. O que salva? Então você pode adicionar mais pessoas aqui do lado. Sinta-se à vontade para começar e experimentá-lo. Se você precisar de mais ajuda, você encontrar um monte de tutoriais legais on-line. Aqui estão algumas pessoas que eu posso recomendar para verificar. Sim, agora eu vou falar bem rápido sobre alguns recursos realmente legais que são incríveis. Você também tem o Excel através desses recursos clicando aqui na barra superior do arquivo e, em seguida, em Obter kits de interface do usuário. Então você pode, por exemplo, baixar o Apple iOS Kit ou o Material Design Kit ou o Microsoft Windows. Como é que parece? Por exemplo, clique aqui no Material Design. Outra janela se abre em seu navegador e você pode baixar as diretrizes de design de material, que são sons realmente legais de design de produto. Aqui estão um monte de coisas realmente legais apenas para testar e aprender mais. Aqui está o Adobe XD Design Kit. Vamos baixar isso, permita. Isso provavelmente levará um minuto. Vamos clicar sobre ele e, em seguida, temos que clicar sobre o tema escuro. Então ele abre. Pegamos todo o kit de design, estou no Adobe XD. É muito útil aprender sobre design, sobre diferentes elementos de interface. Basta brincar com ele e entender como eles estruturam o design da interface. Como os designers mais inteligentes estão trabalhando no Google, eles estão trabalhando no Facebook. Eles estão chegando com este kit de interface do usuário, é o melhor recurso gratuito que você pode obter. Faça o download, confira. Se você não estiver usando o Adobe XD, ele também está disponível para, eu acho que para Figma, bem como para Sketch. É assim que parece. Todos os elementos de design. Muito legal para você aprender sobre design, sobre como eles estruturam, como eles constroem elementos de interface. Sim, recomendo vivamente verificar isso. Super útil e valioso. Além disso, outra coisa que eu acho muito legal e interessante, e não só os kits de interface do usuário, mas também os sites. Porque eles estão explicando, eles estão falando sobre o que funciona bem e o que não funciona bem, quando se trata de design de interface. Especialmente o Google em seu site e Material Design compartilha muito conhecimento sobre projetos de interface, sobre como estruturar, como fazer certas coisas. Como você pode ver, há muitos elementos que você precisa pensar. Isto pode ser como um cardápio. Isto pode ser algum tipo de estruturas de navegação. Isto pode ser um ícone. Estão documentando tudo super bem. É muito divertido e eu fui realmente útil para passar por isso e eles também compartilham esses pequenos gifs onde eles mostram, ok, isso funciona bem e isso não está funcionando muito bem. Isto não é recomendado. Um recurso realmente incrível. Muitas empresas, também, Microsoft, por exemplo, ou Apple também, compartilham esse tipo de conhecimento. Certifique-se de dar uma olhada, passar por isso, e passar por alguns exemplos. Isso será mais útil para você do que eu sou provavelmente qualquer coisa que você pode comprar on-line ou pensar. Agora é hora de começar. Seja servido com sua ferramenta de design. Use os esboços que você criou e crie seu fluxo de trabalho de design. Comece projetando suas primeiras telas e sempre certifique-se de realmente pensar sobre um fluxo que você pode clicar através, que você tem um protótipo interativo no final. 14. Design de UI: Como você sabe, eu criei um conceito para uma geladeira inteligente, algum gerador de receitas, nós já criamos o conceito no último teste. Mas aqui estão os protótipos de papel de esboços novamente, e eu criei uma interface digital para isso. Deixe-me orientá-lo através do processo, da tela e como comecei a usar o Kit de interface do usuário com o qual compartilhei. Aqui você pode ver outras telas que eu projetei para o fluxo de trabalho, e se você lembrar, a idéia era criar uma receita inteligente gerada com todas as coisas que você tem na geladeira. Eu passei pelos esboços e a idéia era que, que você já pode ver do lado de fora da geladeira quando as coisas vão mal. Por quanto tempo você pode mantê-los na geladeira, você precisa usá-los aqui nos próximos dois dias, na próxima semana, e em seguida, no próximo mês, e aqui você pode gerar uma receita com esses ingredientes aqui. Eu criei telas diferentes, agora primeiro, onde eu estou integrando o primeiro ingrediente, o segundo , o terceiro, então eu vou fazer alguns ajustes, talvez a dificuldade do tempo também, e também as categorias. Eu sou intolerante ao glúten, então eu definitivamente quero uma receita sem glúten. Então, temos a terceira página, que é as receitas recomendadas onde eu vou escolher uma, e aqui está a página de detalhes com todas as informações e eu posso simplesmente clicar em “Começar a cozinhar”. Na verdade, são apenas três telas com algumas variações. Eu já estou no modo protótipo porque agora eu preciso criar um protótipo digital, e primeiro as coisas, eu vou clicar no tomate, e então eu vou pegar essa pequena alça aqui, e eu vou chegar a nesta página. Então eu vou selecionar o queijo aqui e eu vou chegar a esta página. Então eu vou selecionar a cebola, está aqui, e eu vou chegar a esta página, eu tenho três ingredientes aqui. Então eu vou clicar em “Categorias”, que é sem glúten, incrível. Então eu vou clicar aqui nesta coisa que eu vou chegar a esta página, e então eu vou clicar neste ouvir e chegar a esta página. Legal. Então eu também posso clicar sobre isso. Vamos tentar isso como funciona, eu quero ir na tela inicial e selecionar este, clique no botão “Play”. Então eu quero clicar no tomate, no queijo e na cebola. Legal. Sem glúten e 15 minutos e fácil. Criar receita. Legal, incrível. Agora, no próximo passo, vamos testar este design em um iPad em nossa geladeira, ou ter um fundo um pouco mais realista. Para isso, temos que matar o modo protótipo. Estamos selecionando a primeira tela e estamos clicando nesta pequena seta. Lá vemos o fluxo em todas as coisas que estão conectadas e é mais fácil para nós encontrarmos isso. Certifique-se também de salvar isso na nuvem. Você vê isso com o pequeno ícone da nuvem aqui e baixe o aplicativo Adobe XD para o iPad ou para o seu iPhone ou qualquer dispositivo que você queira testá-lo. Basta baixar o aplicativo Adobe XD para iPad ou iPhone, é gratuito. Abra-o e abra o arquivo que você salvou na nuvem. Isso é muito legal porque você já tem acesso ao fluxo de trabalho que acabamos de criar [inaudível] a tela inicial e você pode simplesmente clicar, através de todas as áreas que as áreas de toque funcionam aqui também. É super bom para testes de usuários. Você pode simplesmente clicar em todo o fluxo de usuário e ver tudo funciona. Isto parece muito bom, Incrível. Na próxima etapa, vamos testar isso na geladeira. Este é o item que escolhemos para esta interface e eu realmente adoro apenas testar isso. Coloque o iPad aqui. Se eu estiver fazendo testes de usuários com usuários gratuitos, e sempre faz sentido colocar isso na frente da geladeira para que seja o mais realista possível. A tarefa, agora, faça seu próprio design interativo e crie um protótipo digital integrando essas áreas de gatilho. Use a ferramenta de design desejada e, em seguida, teste o design no telefone, no iPad ou até mesmo no software Adobe XD. O que funciona melhor para você, mas certifique-se de que seu teste é testar o fluxo de usuário interativo antes de testar o fluxo de usuário interativo. 15. BÔNUS: Me assista enquanto trabalho: Este capítulo é um capítulo bônus. Você pode me ver trabalhar. Você pode apenas me observar, eu estou projetando minha própria interface. Você sabe que eu projetei um gerador de receitas para uma geladeira inteligente na minha cozinha. Pegue uma bebida, incline-se para trás, e apenas me veja trabalhar, e assim você pode seguir meu processo de trabalho e como ele fica quando eu estou projetando interface que pode ser útil para você. 16. Compartilhe e exporte: Nesta lição, vamos falar sobre as maneiras como você pode realmente compartilhar seu design e enviá-lo para sua rede social preferida, como você pode fazer testes de usuários e também como você pode compartilhar isso com os clientes. Aqui está o fluxo que criamos e há uma coisa que eu só quero mudar. Combinamos todas as telas juntas, mas eu quero mudar a interação para animar automaticamente. Isso funciona muito melhor no final. Queremos mudar isso em todas as telas antes de eu gravar o projeto final. Vou clicar em “Plate”. Então eu vejo na tela aqui, e eu tenho diferentes opções. Por exemplo, eu tenho notificação, eu tenho microfone, e lá você já pode gravar o que você está dizendo. Não vamos fazer isso. Vamos clicar no pequeno ícone “Error Play” aqui. Então vamos começar com o protótipo. Eu faço tomates o queijo, as cebolas, sem glúten, e então você faz os outros ajustes, e a coisa toda é gravada a receita. Clique na “Receita”, e então vamos parar a gravação e salvá-la em nossa tela. Na próxima etapa, precisaremos de um dos fundos que criei para você, clique em “Exportar” e, em seguida, exportar para efeitos após. Mudaremos para o After Effects agora se você não tiver o After Effects no seu computador, sinta-se à vontade para baixá-lo, até mesmo a gravação do teste. Ele abre automaticamente a imagem que eu criei para você na mesma abordagem, nós vamos inserir o vídeo que acabamos de criar. Vou colocar isso aqui embaixo na pequena área da nossa composição, e então faremos alguns ajustes. Primeiro, o vídeo deve ser um pouco menor. Nós clicamos em “S” para a escala e, em seguida, escalá-lo um pouco para baixo. Em seguida, vamos clicar em “P” para a posição e também mudar a posição um pouco porque você quer colocar isso em nossa geladeira. Agora faremos outra mudança. Vamos clicar no “Modi” abaixo e, em seguida, vamos aqui, inserir a transformação 3D. Então temos a opção de retransformar algo em três dimensões. Primeiro, vamos colocar este pouco na fonte e depois vamos mudá-lo. Transforme-o um pouco para o lado, incline um pouco para o lado direito. Isto é um pouco como um trabalho de ajuste. Por isso, leva alguns minutos às vezes apenas para encontrar a posição perfeita para a esquerda, para a direita do que para se divertir, que parece realista no primeiro. Então, experimente coisas diferentes. Você tem três eixos, então o x, Epsilon e o eixo z. Então, experimente. Você também pode clicar em seu “Alt” e, em seguida, ele reproduz a animação. Incrível. Então você vê o filme inteiro. Outra coisa que ainda vamos clicar no “Modi” novamente e então vamos mudar do normal para multiplicar, e então realmente parece que está na geladeira, na frente. Vamos ampliar um pouco e depois ver como fica. Talvez fazer algumas mudanças novamente, mudar a posição um pouco. Este é sempre um monte de trabalho que parece perfeito e muito realista. Então definitivamente leva alguns momentos, mas sinta-se livre para levar o tempo que você precisa e integrado para criar um protótipo tridimensional muito realista. Então vamos criar outra composição para o Instagram. Escolha o tamanho que você precisa, e então nós vamos colocar a outra composição em apenas talvez um pouco, e como nós queremos isso. Também apenas do comprimento. Um pouco mais, nem tudo. Clicamos em “Exportar” e, em seguida, “Render”. Então parece assim e você pode compartilhar isso em seu vídeo. Você pode compartilhar isso em todos os lugares onde você quiser e então nós temos o vídeo final. Você pode compartilhar isso nas mídias sociais em seu estudo de caso ou também para o projeto final deste curso. Agora, exporte seu protótipo e compartilhe-o em uma rede social ou na área do projeto final do curso. Mal posso esperar para ver. Estou realmente ansioso para ver seus resultados e estou muito animado para verificar o que surgiu para ele. 17. Dicas finais: Parabéns por chegar ao último capítulo deste curso. Você pode estar super orgulhoso de si mesmo porque você passou por todas as etapas, você provavelmente aprendeu muito sobre design de interface, e agora você está pronto para projetar sua própria interface digital. Muito bem, e estou super orgulhosa de você. Agora, eu vou compartilhar algumas últimas dicas e truques que espero serão úteis para você mesmo depois desta aula ou uma vez que você terminar. Em primeiro lugar, a consistência é fundamental. Depois de projetar uma biblioteca de design, certifique-se de que ela seja consistente. Consistência significa reutilizar as mesmas cores, a mesma topografia, os mesmos padrões e não apresentar ideias totalmente diferentes para quaisquer interfaces, para todos os sites ou telas de aplicativos. Seja muito, muito consistente. Reutilize os elementos que você já projetou. Eu acho que esta é uma das coisas mais importantes para saber e muitas pessoas ou um monte de design certamente não fazem isso, que é um problema e muito, muito confuso para o usuário. A segunda dica para você é que é tudo sobre o processo, então não tenha medo de iterar para mudar seu design uma vez você percebe que ele não está funcionando ou depois de testá-lo com usuários reais, e perceber que eles realmente não entendem certas coisas, ou que elementos de design que você criou, como padrões, tipografia, ou cores, não estão realmente funcionando. Claro, teste seu design com usuários, colegas, com qualquer pessoa, e envie o protótipo para eles, e deixe-os clicar no protótipo deles, onde ajudamos a observar e entender seu processo e o que você pode ajustar. Uma vez que você deseja projetar seu portfólio ou você deseja integrar este projeto, você pode aprovar em seu portfólio. Também tenho algumas dicas para você. Certifique-se realmente de que se você criar qualquer coisa para o seu portfólio, não tenha medo de realmente mostrar o processo, as iterações, tudo o que você aprendeu, e quaisquer iterações, os testes, o que funcionou, o que não funcionou para fora, realmente mostrar o processo. Não se esqueça de contar uma história. A história do design centrado no usuário, você pode ser atendido com a pesquisa, você veio com o conceito, então você criou seus primeiros protótipos, você testou-o. E quanto ao seu aprendizado, e talvez você precise voltar em algum momento, e fazer alguma outra pesquisa também. Talvez seja apenas um protótipo e essa é uma história muito interessante para contar. Se você quiser aprofundar sobre como projetar seu portfólio, como projetar estudos de caso, como criar um site realmente ótimo, eu também posso recomendar que você assista minha outra classe sobre o portfólio masterclass. Também aqui nesta plataforma, onde você pode encontrar mais informações sobre estudos de caso, sobre os diferentes processos, muitos recursos. Eu posso recomendar assistir a este curso mesmo depois ou revê-lo se você já assistiu, e se você quiser construir seu portfólio agora, isso será realmente útil para você. Muito obrigado por fazer esta aula. Eu honestamente não posso esperar para ver seus resultados, então sinta-se livre para se conectar comigo e dizer oi na rede social, compartilhar seu projeto final aqui. Estou super feliz em te dar alguns comentários e acho que os outros alunos também. Estou ansioso para ver seus resultados, seu processo, e também ver você crescer como designer. Desejo-lhe muita sorte e sucesso, e mal posso esperar para vê-lo no meu próximo curso.