Design de experiência do usuário de A a Z: Design Adobe XD UI/UX

1. Visão geral do curso sobre UI: Neste vídeo, veremos a visão geral do curso learn UX UI de A a Z. Vamos percorrer todas as diferentes seções principais. Vou lhe dar uma visão geral de cada seção, o que você pode esperar antes de entrarmos nas seções do curso, quero me apresentar rapidamente. Então, meu nome é Juan, eu sou um de seus instrutores neste curso. Sou empresário desde a escola primária. Minha formação é na área de tecnologia, desde marketing digital, comércio eletrônico, design até programação. Eu acredito na educação continuada com o melhor diploma universitário, sem todas as desvantagens dos custos do budismo e dos métodos ineficientes. Estou ansioso para ajudá-lo a expandir seu conjunto de habilidades. Arthur é o outro instrutor deste curso. Ele é designer gráfico desde 2002 e atualmente trabalha como freelancer de UX UI, trabalhando com muitas empresas em todo o mundo. E ele está ansioso para ajudar você a expandir seu conjunto de habilidades e o design de UX UI. Vamos seguir em frente e entrar aqui. Ok, então a primeira seção será a introdução do curso. É aqui que vamos analisar a UX UI. O que exatamente é a diferença é entre a experiência do usuário e interface do usuário e o que exatamente elas são. E então vamos examinar o mercado atual de designers até onde ele está atualmente, diz respeito ao salário médio, ao número de vagas abertas, às oportunidades, o potencial de crescimento para a área de UX e UI, certo? Então, vamos falar sobre isso. Então, abordaremos diferentes tipos de funções de UX em diferentes organizações, de pequenas a médias organizações, até grandes organizações corporativas. E, em seguida, na seção dois, abordaremos a introdução à indústria da web. E é aqui que vamos entrar nas diferentes fases do desenvolvimento web. É importante que você tenha uma compreensão fundamental de como o desenvolvimento web funciona, tudo o que está envolvido nos diferentes estágios de design, você deseja entender o abordagem ágil. Vamos examinar isso detalhadamente. Vamos lhe dar uma visão geral versus o modelo linear versus a abordagem ágil. E depois também analise a estrutura do projeto Scrum que você normalmente trabalhará com eles. Então temos a Seção três. É aqui que também começamos a fazer algumas das aulas do Adobe XD. Onde você vai fazer um pouco de prática por cima do ombro. E então vamos discutir a psicologia da cor. Vamos abordar diferentes esquemas de cores, rodas de cores e realmente dar a você uma visão geral dos fundamentos do design gráfico, certo? Porque você precisa entender como as cores funcionam, diferentes esquemas de cores, como trabalhar com fontes diferentes, como trabalhar com ícones diferentes e realmente entender a teoria das cores, como a teoria das cores funciona, como as cores funcionam, como usar o tipo certo de cores e situações únicas. Como as cores evocam emoção e o tipo de cores que você deseja usar, dependendo do tipo de design que você deseja criar. Então, uma seção muito empolgante também. E então temos a Seção quatro. É aqui que entramos no design de UX. É aqui que também fazemos algumas aulas adicionais sobre o Adobe XD, onde faremos análises competitivas. Vamos falar sobre o que é a jornada do cliente. O que é isso? Funil de vendas, os diferentes tipos de funis de vendas, diferentes estágios do funil de vendas. Muito mais. Essa provavelmente será a maior seção deste curso. E é muito aprofundado. Por isso, estou empolgado que você também comece a fazer isso. E, em seguida, na Seção cinco, é aqui que abordaremos o design da interface do usuário. Vamos analisar o processo de design da interface do usuário. Também abordaremos diferentes páginas de destino, diferentes componentes de interface do usuário em várias aulas diferentes do Adobe XD, quais você criará diferentes tipos de designs, criando diferentes tipos de cabeçalhos, trabalhando com microinterações e vários outros tipos de interface de design de interface de usuário. Muito, muito entusiasmado por você começar a fazer isso também. E então temos a Seção seis, que será a otimização. É aqui que vamos examinar a regra acima da dobra. Vamos falar sobre como usar análises para otimização, como usar mapas de calor. E então também temos alguns Adobe XD a menos do que lá. Então, finalmente, temos a Seção sete. É aqui que você começará sua carreira no espaço de design de UX UI. E vamos falar sobre freelancer, consultoria de clientes, marca pessoal, como configurar um site. E abordaremos algumas das coisas devemos e não devemos fazer no networking. Como se conectar adequadamente para que você possa se colocar em uma posição, conseguir novos cargos, novos empregos, talvez novos clientes, certo? E depois, examinando alguns dos principais sites freelance. Além disso, mostrarei uma ferramenta que você usará como seu hub, onde você pode essencialmente ter todos os projetos de seus clientes, todas as suas tarefas, todas as suas tarefas. E é um modelo que eu criei e você poderá acessar. E então, finalmente, você encontrará os diferentes lugares para encontrar empregos de UX e UI. Então, estou empolgado que você comece neste curso e nos veremos no próximo. 2. Visão geral de UX/UUI: Neste vídeo, vamos rever a visão geral da seção de UI de aprender UX. Então, no vídeo anterior, revisamos toda a visão geral do curso. Revisamos as diferentes seções, o que você vai esperar de cada tópico em particular, cada área em particular. E, em seguida, neste vídeo, vamos rever o que vai ser incluído nesta seção particular em si. Ok, então vamos em frente e pular aqui para a visão geral da seção. Então, o que vamos estar cobrindo nesta seção é a UX versus UI. Quero dar a vocês uma visão geral fundamental do que é UX, o que ela realmente significa e como ela realmente funciona no mundo real. A mesma coisa para a interface do usuário. E, em seguida, ser capaz de contrastar UI versus UX porque você quer ser capaz de entender as diferenças, como eles funcionam e como eles funcionam juntos. Ok, então nós vamos estar indo para o mercado de designer de UX UI. Vamos olhar para alguns potenciais salariais, o mercado de trabalho, o potencial de crescimento, e realmente dar-lhe uma visão geral de onde esta indústria está indo e quanto potencial de crescimento realmente tem para você, se você estiver procurando realmente mergulhar profundamente nesta indústria em particular. Porque o futuro é muito promissor para o mercado de designer de UX UI. E eu quero mostrar alguns números que vão apoiar isso até o que você pode esperar fazer apenas começando e o que você pode esperar fazer à medida que você progride em sua carreira. E então vamos rever, como eu mencionei, o salário médio para UX e UI, o potencial de crescimento. Vamos ver como aprender as habilidades corretamente, a melhor maneira de aprender essas habilidades. E eu tenho uma palestra que vai sobre isso especificamente. E então a importância de ser um designer bem equilibrado. Porque uma das coisas que você vai notar quando você começar a se candidatar a diferentes empregos. Ou talvez se você conseguir um emprego em uma organização pequena, de tamanho médio, eles vão fazer você fazer um monte de coisas diferentes e usar vários chapéus e talvez escrever cópias, talvez escrever conteúdo, e talvez, você sabe, Trabalhar num funil de vendas ou qualquer coisa do departamento de marketing, certo? Então, e é aí que você será capaz de ser um designer bem equilibrado quando você conhece todos esses diferentes elementos e especialmente psicologia comportamental e entender por que tomamos decisões, o que nos leva a tomar as decisões em diferentes gatilhos de influência, elemento de persuasão diferente e como usar persuasão e influência e suas mensagens com cores diferentes, certo? E então neste curso você vai aprender a fazer exatamente isso. Você vai aprender a desenvolver funis de vendas, diferentes estágios de funil de vendas, como criar páginas de destino para diferentes tipos de elementos envolvidos nos esquemas de cores. Então você pode ser um designer bem equilibrado, certo? E, em seguida, vamos passar por cima das diferentes funções de UX e UI. Porque o que queremos que você faça é deixar este curso de ser um designer muito equilibrado. Então, se você estiver indo para mais do estágio de design gráfico onde você deseja construir logotipos. Você quer criar logotipos e desenhos diferentes. Você será capaz de fazer isso em um nível muito alto porque você vai entender diferentes elementos de design, psicologia de cores, teoria de cores, desenhos e esquemas de cores únicos, certo? E então você vai saber como fazer tantas coisas diferentes do que o designer típico de UX e UI, você vai ter uma variedade de habilidades e você vai ser extremamente valioso para uma organização depois que você terminar com isso Claro. Por isso, estou entusiasmado por começares e vemo-nos no próximo. 3. UX vs UX: Neste vídeo, vamos rever as diferenças entre UX e UI. Esta é uma lição muito importante aqui porque eu quero dar-lhe uma compreensão fundamental real do que UX é, como ele funciona, como uma função, os diferentes fatores seria então UX e ser capaz de contrastar isso com UI para que você pode obter um escopo completo do que você é é o que UX é, e ser capaz de entender quais são os diferentes elementos, componentes e fatores que cada um deles é composto. Então vamos em frente e saltar para o design UX. Ux design envolve interações entre um cliente potencial ou ativo e acompanhar e depende de design visual, psicologia comportamental e pesquisa de consumidores. Agora, uma das maiores coisas aqui que você quer ter em mente é a psicologia comportamental e a pesquisa do consumidor. Isso é o que você também está aprendendo neste curso, que é muito importante para sua carreira de UX e UI. Se você realmente não entende psicologia comportamental, a influência desencadeia a persuasão, sendo capaz de entender o que faz os seres humanos marcarem e o que realmente o leva a tomar uma decisão e como evocar certas emoções, então você está realmente vai ter um tempo difícil com o design do usuário e experiência do usuário. Ok, então isso vai ser um grande elemento para o UX. E, em seguida, a parte da experiência do usuário refere-se à interação entre o usuário e o produto ou serviço. Então, como o usuário está interagindo com esse produto específico, esse site, ele está essencialmente considerando todos os diferentes elementos e como eles interagem uns com os outros para moldar essa experiência. Ok, então é isso que a experiência do usuário é. É qualquer tipo de experiência que um usuário está passando para interagir com o negócio, o site de negócios, o aplicativo, o que quer que seja, isso é o que você realmente quer tirar da experiência do usuário. Então interface de usuário, este é o design real e aparência da apresentação ou a interatividade de um produto, certo? Pense em um aplicativo web, um software como um aplicativo de serviço que alguém usa em seu telefone para realmente talvez jogar um jogo ou para ser capaz de construir o produto ou o que quer que seja, certo? Cada tipo de interface do usuário terá uma interface única que é capaz de ter o indivíduo, o cliente ou o usuário final ser capaz de usar o software, o aplicativo real, o site, e ser capaz de usar esse produto e ter uma experiência prazerosa usando isso, certo? E então temos a interface do usuário é o ponto de interação entre o usuário e um dispositivo digital ou produtos, certo? Então pense em como uma tela sensível ao toque no seu smartphone coisa sobre o Facebook, tenho certeza que você tem Facebook no seu telefone. Pense em como essas interfaces de usuário configuram onde elas fazem isso para que você esteja constantemente em seu telefone. Você está verificando seu feed de notícias, você está olhando para o que as outras pessoas estão falando, certo? Então, essa é essencialmente a interface de usuário de um aplicativo. E eles o projetaram de uma maneira que você sempre queira ir além do aplicativo, certo? E com sites e diferentes aplicações, design da interface do usuário considera a aparência e a interatividade do produto. E, em última análise, o que o design da interface do usuário sempre pensa sobre isso a partir dessa perspectiva. Esta é a interface com a qual estou interagindo. Isto é o que estou a dizer. É assim que eu estou realmente usando esta plataforma, como eu estou usando, digamos LinkedIn ou Facebook ou qualquer um desses outros tipos de sites ou aplicativos, certo? É como você está interagindo com eles e isso é o que você realmente quer entender e saber sobre a interface do usuário, design da interface do usuário. Ok, então isso vai estar aqui para este, e nos vemos no próximo. 4. Mercado de UX/UUI Designer: Neste vídeo, vamos rever o mercado de designer de UX UI. Então isso vai lhe dar uma introdutória no mercado como um salário inicial. Quais são algumas das coisas que os recrutadores estão procurando? E alguns dos desafios que os recrutadores estão enfrentando para serem capazes de encontrar os melhores talentos de design de UX. Porque você está fazendo este curso e você está passando por este programa, você vai ser alguém que realmente é capaz de preencher esses cargos porque você está indo para obter o treinamento necessário e necessário que vai ser esperado de para um designer de UX e UI. Então vamos em frente e saltar para o mercado de designer de UX UI e quanto potencial de crescimento realmente tem aqui. Então, uma das primeiras coisas a observar aqui é que o LinkedIn lado UX design como uma das principais habilidades para aprender e 20-20 e além. E faz sentido, certo? Porque você pensa em diferentes empresas que procuram causar mais impacto on-line e procurando descobrir mais maneiras de envolver seus usuários. Eles podem fornecer uma melhor jornada do cliente, experiência do cliente, e ser capazes de fornecer-lhes uma experiência incrível com a marca, com a empresa, com os funcionários, certo? E assim o UX Design Marketplace foi explodindo, continuará a ter uma quantidade significativa de crescimento a partir de agora e além. Assim, os recrutadores estão muitas vezes lutando para preencher funções de UX por causa da lacuna de conhecimento. Agora, como eu mencionei, você está passando por este curso, você vai para este programa. Você terá essas habilidades necessárias, a compreensão do que é necessário de um designer de UX UI. E então você vai ser capaz de preencher essas funções com muita facilidade, especialmente porque você está aprendendo muito mais além da UX e UI tradicionais informações e conhecimento, certo? Porque a UI tradicional, que vai ser mais em torno da experiência obviamente do usuário, design gráfico e muitas outras áreas, no entanto, onde isso realmente entra em um fabricante de diferença é a psicologia comportamental, a compreensão da persuasão de influência, e realmente compreender a psicologia humana como um todo para que possam ser criados produtos que estão realmente sendo capazes de ser tomadas de ação pelos indivíduos porque você entende como o opera, o que impulsiona a tomada de decisões, como realmente Emoção, o maior fator quando os indivíduos tomam decisões, e eles tendem a justificar logicamente. Então, entender não só os papéis da UX UI em ter esse conjunto de habilidades, mas também entender a influência e persuasão vai ser um longo caminho. E assim o salário médio para um designer de UX e UI, e eu acredito que isso está nos EUA. Então, por 85 mil por ano, você pode ver aqui que é uma quantia bastante decente de salário porque você está fazendo muito pelo negócio, certo? Você tem um tremendo valor. Você é responsável por fornecer a experiência real ao cliente, o usuário final, como ter o que o produto final. E, portanto, esta é uma posição muito importante. E se você perguntar a maioria das pessoas que estão na UX UI se sentem, eles dirão que é uma carreira significativa porque eles têm interesse genuíno na curiosidade sobre o trabalho que eles realmente fazem todos os dias. Porque lembre-se, os profissionais de UX são muitas vezes muito interessados em como as pessoas operam. Como funciona a mente humana? Como funciona a psique humana? O que nos leva a tomar medidas para tomar certas decisões? E então o que todos eles têm em comum aqui é que eles estão motivados a entender seus usuários e a melhorar a experiência geral, certo? E isso tudo vai para a psicologia comportamental. Por fim, o mercado de designer de UX e UI é enorme. Ele está crescendo a uma taxa muito alta, há muitas oportunidades para você ser capaz de começar nesta indústria em particular, especialmente porque você está passando por este programa, você está recebendo todas as habilidades. Você está entendendo, psicologia de cores, ou tanto quanto design gráfico , teoria de cores, esquemas de cores diferentes, você entende como criar modelos diferentes. Você está essencialmente passando por um bootcamp, um programa inteiro que vai prepará-lo para ser capaz de obter uma posição de nível de entrada, um designer de UX de UI, ou você pode começar a fazer freelancing. Você pode começar a fazer alguns shows e obter um perfil, e, em seguida, obter um portfólio construído e, em seguida, ser capaz de sair e obter diferentes posições como um designer de UX UI. Cabe a você. E então é realmente sobre o que você quer fazer e como você quer fazer isso. No entanto, as informações estão aqui para que você possa aproveitar e ser capaz de alavancar e para sua UX e você é carreira. E então isso vai estar aqui para o mercado de designer de UX e UI. E nos vemos no próximo. 5. Visão geral de papéis UX: Neste vídeo, vamos rever as funções UX e UI. Então estas são as, algumas das diferentes funções e você vai ver dentro de uma organização. E isso pode diferir bastante dependendo do tamanho da organização. Se você tem talvez uma organização menor com a qual você está trabalhando ou uma organização de tamanho médio, você vai descobrir que muitas vezes uma pessoa individual está vestindo um monte de chapéus diferentes e está fazendo muito deste trabalho por si só. Então, um indivíduo, digamos em uma startup ou em uma empresa menor, pode estar fazendo UX e UI por si só. comparação com grandes organizações, você pode ter alguém apenas lida com um UX, alguém apenas lida com uma interface do usuário. Alguém faz a pesquisa real, certo? E se organizações menores de médio porte, você normalmente vai encontrar uma pessoa que lida com ambos e faz todas as pesquisas e todas as diferentes informações de fundo e requisitos que são necessários também. Então vamos em frente e saltar para os diferentes tipos de UI e UX função. Então o primeiro aqui vai ser um designer visual. E isso também pode ser conhecido como designer gráfico. E o que eles estão fazendo é essencialmente focando no panorama geral, o conceito, o imposto de gráficos, a topografia, os ícones em diferentes esquemas de cores, a aparência de como o design ou o aplicativo que o site vai Olhe. E depois temos o designer de UX, certo? Este é o indivíduo que lida com a jornada do cliente. Eles estão lidando com a experiência do cliente, certificando-se de que o usuário final está tendo uma experiência agradável e satisfatória com a marca, com o site, com o aplicativo, e que o projeto tem uma lógica para que o usuário possa passar de passo a passo sem se perder, certo? Pense em um funil de vendas. Se você não está familiarizado, vamos passar por isso neste curso na seção de design de UX, onde você vai aprender sobre funis de vendas, que diferentes passos ao longo do processo. Como as pessoas vão e realmente comprar itens em um micro passos diferentes que estão envolvidos em que você vai aprender tudo sobre isso. No entanto, só queria dar-lhe uma visão geral rápida de que o designer de UX tem tudo a ver com a forma como os usuários interagem com a marca e como eles vão de um completo estranho para realmente se tornar um cliente pagante. E então o designer de interface do usuário, este é o indivíduo que está preocupado com os elementos de design gráfico de uma interface, certo? Basta pensar em um aplicativo. Pense em qualquer tipo de aplicativo móvel, qualquer tipo de produto online, como um produto SaaS, certo? Isso tem você aí. Você começa um login e você tem que interagir com os diferentes tipos de recursos e funcionalidades, certo? É nisso que um designer de interface do usuário se concentra, certificando-se de que, uma vez que o usuário já esteja lá e esteja interagindo com o produto real, é uma experiência muito agradável para eles realmente interagirem com isso aplicação específica, sites ou o que quer que seja, certo? E então temos um designer de interação. Isso normalmente vai ser organizações maiores onde você tem um projeto realmente grande, certo? E então você precisa de alguém para vir aqui e entender como um usuário interage com um aplicativo e criar diferentes interações e animações no design para que haja muito mais interatividade. E como eu disse, isso normalmente vai ser em uma organização maior onde os projetos se tornam bastante complexos e você precisa desses diferentes indivíduos para trabalhar com mídias diferentes, para trabalhar com diferentes tipos de vídeos. E o próximo é o arquiteto da informação. Isso vai ser semelhante em uma grande organização. E então esses indivíduos estão lidando com a estrutura de um site, um aplicativo, certificando-se de que tudo está de forma estruturada para que, você sabe, as diferentes áreas são cobertas, as diferentes seções são cobertas, e tudo tem uma boa estrutura para a informação e é facilmente acessível, certo? E então temos o estrategista de conteúdo. Este é o indivíduo que tem realmente encarregado de escrever o conteúdo. Então pense se eles estão embarcando em um site enorme que eles estão construindo, talvez do zero, então o estrategista de conteúdo, Este é o que está realmente desenvolvendo ou reunindo ou escrevendo a cópia, certo? Para todo o site, certo. É reunir todas as páginas diferentes, o Sobre Nós, o Fale Conosco. Todos eles são essencialmente tratados pelos estrategistas de conteúdo. E lembre-se, em organizações menores, você normalmente terá uma pessoa fazendo tudo isso, certo, fazendo tudo isso. E é por isso que é muito importante ter experiência. Não só como um designer de UX UI, entender design gráfico, entender as diferenças entre UX e UI, mas também ser capaz de entender a psicologia humana, entender como estruturar as informações corretamente, como escrever cópia diferente, como escrever postagens diferentes. Porque na maior parte, em uma empresa menor e média dimensão, você vai fazer tudo isso sozinho. É por isso que você quer ser bem versado e entender o que cada uma dessas diferentes funções faz em ser capaz de entender as implicações dessas funções em uma organização. Então, quando você está olhando para posições diferentes, quando você está olhando para coisas diferentes que são necessárias, tanto quanto em uma descrição específica do trabalho. Você quer ser capaz de olhar para o que todos esses indivíduos fazem e o que é necessário. E, em seguida, ser capaz de ver onde você pode adicionar mais valor e aprender esses diferentes papéis e entender esses diferentes papéis em um nível fundamental fundamental fundamental para que você possa falar sobre eles. Você sabe o que eles fazem, como eles interagem com a equipe real e o objetivo geral do projeto. Então, e assim que vai ser aqui para as diferentes funções dentro do UX e UI tipo de projeto. E como eu disse, certifique-se de que você está entendendo o que cada um desses indivíduos faz para que quando você está olhando para se candidatar a um determinado cargo ou você está olhando para um determinado emprego, você sabe o que esses caras fazem, e você pode ser capaz de atender sua oferta particular ou sua oferta ou seu currículo para esses requisitos específicos, certo? Então isso vai estar aqui para este, e nos vemos no próximo. 6. Visão geral da seção da indústria web: Bem-vindo à seção Introdução à indústria Web deste curso. Neste curso, vamos falar sobre a indústria web a partir de uma visão geral geral para que você possa ter uma idéia do que você vai esperar quando você entrar em um ambiente de equipe e quais serão suas funções específicas dentro desse ambiente de equipe? E quais serão os papéis de todos os outros dentro desse ambiente também. E então vamos em frente e pulando aqui. Então, a primeira coisa que vamos abordar são os estágios do desenvolvimento web. Agora, isso é realmente importante aqui para você entender como os estágios do desenvolvimento web serão os pilares fundamentais que qualquer designer usa quando estiver desenvolvendo um novo produto, certo? É importante entender o que eles são e como aproveitá-los e usá-los em seus projetos e em seu trabalho, certo? E se você estiver trabalhando em um ambiente de equipe para realmente entender como cada um de vocês que está envolvido na equipe vai passar por esses diferentes estágios para desenvolver esse produto específico, esse site, que aplicativo, seja lá o que for, certo? Então, depois disso, vamos para o trabalho em uma equipe e responsabilidades de designer. Queremos ter certeza de que você tem uma compreensão fundamental de qual será o papel de todos dentro dessa equipe? Qual será o seu papel? Qual é a classificação de responsabilidades de todos embora papéis diferentes têm descrições diferentes para que você saiba o que esperar se você estiver indo trabalhar para uma startup, se você estiver indo para trabalhar para pequenas e médias empresas, ou mesmo se você vai trabalhar para uma grande empresa, certo? E então vamos rever a abordagem ágil para o gerenciamento de projetos. Isso é algo que é muito importante para você entender pois existem vários tipos diferentes de gerenciamento de projetos. No entanto, a idade fora, a abordagem Agile vai ser o mais comumente usado a menos que você está usando abordagem linear também. Mas este será o mais comum que você vê no campo UX e UI. E depois deste, vamos para o Scrum, entendendo a estrutura por trás deste sistema de gerenciamento de projetos em particular e como isso funciona até ser capaz de completar várias tarefas conhecidas como Sprints. E vamos entrar em detalhes. Só quero dar-lhe uma visão geral do que é este scrum. É uma estrutura realmente flexível que permite diferentes indivíduos dentro de um projeto através da maximizar as habilidades e a saída. E então vamos passar por Trello, outros vai ser um aplicativo Kanban fácil de aprender. Tipo de dar-lhe uma visão geral de como é um tipo de interface de usuário Kanban, por que é importante e o que esperar quando se trabalha com a interface de usuário Kanban. E, finalmente, vamos rever outros sistemas de gerenciamento de projetos e outros tipos diferentes de aplicativos de equipe e realmente dar-lhe uma visão geral dos diferentes no mercado. E meio que dar-lhe uma visão geral do que você pode esperar para usar começando se você está apenas indo para ser um freelancer ou se você está olhando para se juntar a uma equipe, quais são alguns dos mais populares e, em seguida, alguns dos prós e contras de cada um. Então isso vai estar aqui para esta lição, e nos vemos na próxima. 7. As fases do desenvolvimento web: Neste vídeo, você vai aprender as etapas do desenvolvimento web. Então isso é algo que é muito importante como um designer de UX UI para entender, tanto quanto ser capaz de levar um produto desde o início até terminá-lo completamente e ter um produto acabado total e completo. E então eu quero que você entenda tipo de em um nível muito alto aqui, quais são os estágios e como eles funcionam, e o que esperar em cada estágio particular. Então vamos em frente e pular aqui. Então, como você pode ver aqui, nós temos os três estágios diferentes, que é o projeto número um. O número dois vai ser o revestimento. O número três vai ser o desenvolvimento. E como você pode ver aqui, é um processo bastante simples. Primeiro, você delineia o design. Olhe para você. Qual é exatamente o objetivo final dos clientes, ou qual é exatamente o objetivo final do projeto em particular, certo? Como você quer que ele se pareça, tanto quanto um produto acabado? E depois que você projetar e olhar, ok, é assim que eu quero que pareça. Isto é como eu queria sentir os esquemas de cores que projetam. E então temos o estágio de revestimento. E é aqui que você normalmente está trabalhando com HTML ou CSS para realmente definir exatamente como você quer que ele pareça e se sinta. E então vamos para o desenvolvimento. Esta é uma fase final em que você está praticamente definindo a funcionalidade. Os designers de front-end fizeram todo o trabalho, tudo agora está no backend. Vamos percorrer cada um desses em detalhes. Então vamos em frente e pular aqui para o estágio de design. Então, quando se trata do estágio de design, é aqui que o gráfico e o conceito lógico estão sendo desenvolvidos. Então, todos na equipe, se você estiver trabalhando em um ambiente de equipe, sabem como o site funcionará, como a Apple funciona, como qualquer produto que você está projetando vai funcionar, certo? E esta é a parte mais importante dessas três etapas porque a parte de design do processo de desenvolvimento web permite que você realmente obtenha uma visão geral do que o público vai ver, como eles vão ser experimentando o produto ou o aplicativo ou site em particular, o que quer que seja, certo? E então é aqui que você deseja desenvolver o produto final, tanto quanto wireframe, quanto entender onde os botões estão indo para ir, onde os diferentes itens dentro de um site estão indo para ir. Em. Toda essa compreensão vai ajudar você a ter uma idéia melhor de como o projeto final vai ser, certo? Porque você não pode construir algo se você não sabe o que está construindo, certo? Então primeiro você tem que pegar essa direção. Você tem que ter essa visão geral do design de imagem grande disso é como eu quero que o site seja parecido. É assim que quero que funcione. Este é o lugar onde eu quero que todos os diferentes componentes que controlam todos os diferentes recursos e funcionalidades para ir. E então podemos passar para o estágio de desenvolvimento. E então o que você quer entender sobre o estágio de design é que é aqui que tudo começa. aqui que você é capaz de criar ideias diferentes, criar diferentes wireframes. E realmente definir exatamente como você deseja que os usuários estejam se conectando com o produto real. Ok, vamos em frente e passar por um exemplo aqui. Então, digamos que estamos desenvolvendo uma página de destino onde estamos fornecendo um recurso gratuito ou os clientes fornecendo algum tipo de recurso livre em troca de um endereço de e-mail. E isso é bastante comum onde você tem uma página específica que está aqui apenas para trocar informações com esse usuário em particular. Então, digamos que estamos desenvolvendo uma página de destino e nosso objetivo final é reunir em endereço de e-mail, certo? Coletar endereço de e-mail. Então, quando estamos desenvolvendo a página inicial, estas são quatro coisas que devemos responder antes realmente Lenaro para desenvolver todo o conteúdo e tudo mais. Então, número um, quais são os objetivos da página? Então, o objetivo da página é obter downloads, educar o usuário sobre o download, certo? Digamos que temos algum tipo de PDF ou algum tipo de ebook ou trapaça G que mostre às pessoas como fazer uma certa coisa e menos tempo, certo? Como economizar tempo fazendo X, ou como economizar tempo fazendo por que escrever o que quer que seja. É importante educar o usuário e informá-lo exatamente o que está recebendo e por que deve agir. Então, número dois, queremos olhar para os objetivos do usuário para a página. Então, para eles, eles querem obter algo de graça e eles querem descobrir o que é. Então, responder a essas perguntas e nos fazer essas perguntas realmente vai nos permitir criar uma página de destino que tenha a mensagem correta, o layout correto. E vai ser fácil para esse usuário realizar essas coisas, certo? E então número três, quais são as perguntas que o usuário precisa responder para atingir o objetivo. Então, o que eles recebem? Por que eles precisam disso? O que acontece a seguir? O que acontece depois que eles baixam o ebook ou o chichi em particular? Eles vão realmente comprar um produto ou eles vão comprar outra coisa? Qual é o próximo passo certo? Em seguida, o próximo passo envolve algum tipo de criação, algum tipo de processo de funil de vendas onde você colocá-los em um balde separado, em um público real que já se envolveu com o produto e serviço. E estamos chegando aos funis de vendas e à jornada do cliente. E em palestras posteriores, eu só quero dar-lhe uma visão geral aqui do design, tanto quanto uma página de destino que está projetando algo para um recurso livre, certo? Então, a quarta pergunta que eles precisam fazer, e você deveria estar se perguntando, certo? São as emoções que você quer invocar. Você quer invocar a garantia, o alívio e a confiança, certo? O que você quer fazer é sempre que você está projetando uma página de destino para qualquer situação particular, ou as perguntas que você quer fazer a si mesmo. Estas perguntas aqui não são apenas para projetar página de destino. Você pode levar isso para o design do produto. Você pode levar isso para, você sabe, design de aplicativos, seja lá o que for, certo? Porque as perguntas aqui serão relevantes independentemente do que você está projetando. Lembre-se, você quer ser capaz de ajudar as pessoas a entender o que estão recebendo, por que é importante para elas, como você quer que elas se sintam e fazer você e sua equipe entenderem qual é o objetivo final para isso produto específico ou qualquer tipo de aplicativo em que você está trabalhando, qualquer que seja. Então. Ok, então agora vamos olhar para o grampo. Esta é a parte do design que é realmente importante aqui também. Aqui é onde você vai ser capaz de olhar para, digamos, um wireframe de um site e olhar para onde todos os diferentes componentes vão estar, onde as diferentes guias, tanto quanto o menu, digamos que você tem um menu em uma área específica, talvez design específico, layout específico. Onde você vai ter seus diferentes textos, peças de conteúdo, certo? E assim o wireframe consiste naquele esboço inicial que realmente estabelece onde tudo vai estar. Ele também mostra os diferentes esquemas de cores que serão usados neste projeto específico. E se você olhar para a imagem aqui para a direita, ele realmente dá uma boa imagem grande de como um wireframe vai se parecer, onde todas as diferentes partes do site real, o produto, seja lá o que for, onde eles vão ser posicionados, certo? E uma ferramenta que usaremos ao longo deste curso é o Adobe XD. E esta é uma poderosa ferramenta de wireframing que é comumente usada por designers de UX e UI com dx, dy, você pode rapidamente simular layouts wireframe, Criar elementos de interface do usuário, definiu diferentes fluxogramas de usuário, diferentes estruturas de navegação. E é realmente uma boa ferramenta para nós sermos capazes de zombar de algo muito rapidamente, muito facilmente. E vai ser algo que vamos usar ao longo deste curso. Então, estou animada para você começar com isso. E vamos em frente e saltar para o próximo estágio, que vai ser o revestimento. Então, uma vez que tenhamos o design definido, tanto quanto queremos que tudo pareça. É hora de começar a criá-lo usando vários tipos diferentes de linguagens de codificação. Então, quando se trata de codificação aqui, o que vamos fazer é normalmente usar três idiomas diferentes. Assim que terminarmos o design e sabermos exatamente como queremos que tudo pareça. Nós conhecemos os esquemas de cores, conhecemos o layout, nós wireframe que tudo. Então vamos transferir os arquivos para os codificadores frontais para que eles possam começar a criar. Isso vai parecer, e então eles estão normalmente indo para usar HTML, CSS e JavaScript. Agora, se olharmos para as três línguas diferentes aqui, HTML significa linguagem de marcação de hipertexto, e isso permite que você crie texto estruturado dentro de páginas da Web ou aplicativos. Não há nada de super especial nisso ou algo assim. É apenas uma linguagem muito simples que nos permite usar texto. E então temos o CSS. Aqui é onde a magia acontece aqui, onde nós realmente somos capazes de inserir muitos dos diferentes elementos de estilo no HTML. E, em última análise, o que ele faz é separar o conteúdo da representação visual dos sites. É aqui que os esquemas de cores entram. Aqui é onde os recursos de design entram, direito, no arquivo CSS, os desenvolvedores frontend ou os programadores, lista todos os estilos que seu projeto tem. Por exemplo, os estilos de fonte, os botões, os cantos, as sombras, as cores, certo? Então estamos realmente trazendo à vida essa página particular ou aquela aplicação porque estamos apenas tendo texto lá, certo? Não vai ser muito bonito, por isso acrescenta a capacidade dar vida a uma página web ou a uma aplicação, por assim dizer. E então temos JavaScript. É aqui que você pode pegar elementos da web estáticos e torná-los interativos. E assim, por exemplo. Digamos que você tem algum tipo de botão que diz agora ou Adicionar ao carrinho. Tenho certeza que você já viu aqueles em diferentes sites de comércio eletrônico, talvez quando você está indo para comprar um produto ou o que quer que possa estar on-line, você pode fazer esses botões diferentes ser interativo. Você pode fazê-los saltar por aí. Você pode fazê-los fazer todos os tipos diferentes de coisas diferentes com JavaScript, certo? É que interativo em essência, você é capaz de fazer versus apenas ter esses elementos estáticos e agora ser capaz de ter qualquer interatividade. Então isso vai ser as diferentes linguagens de codificação que vão ser usadas. Normalmente, quando os codificadores estão realmente codificando para o site, eles estão usando HTML para realmente escrever o texto. Eles estão usando CSS para os elementos de design reais e para trazer a cor e todos os diferentes esquemas de design. E então JavaScript é o que está permitindo que a página web ou aplicativo para fazer diferentes elementos estáticos se tornem interativos. Muito, muito poderoso. Ok, então vamos saltar para a terceira e última fase aqui, que é desenvolvimento. Esta é a codificação de back-end agora, então fizemos o projeto. Sabemos exatamente como queremos que tudo pareça. Nós temos wireframe que sabemos para onde todos os elementos estão indo. Não mandamos os arquivos para os programadores. Eles realmente configuraram tudo, construíram tudo com HTML, CSS e JavaScript. E agora é hora de irmos para o estágio de desenvolvimento aqui onde estamos desenvolvendo tudo no back-end. Então vamos em frente e saltar para o desenvolvimento. Então, quando se trata de desenvolvimento de backend, isso é o que realmente o torna disponível para o site para estar ao vivo na internet. E é aqui que todos os dados são armazenados. O backend do site consiste em um servidor, o aplicativo e o banco de dados. Porque se você realmente quebrar o que exatamente o site é em termos técnicos dele, é realmente apenas um monte de arquivos, um monte de códigos, e um banco de dados, certo? E assim, existem diferentes aplicações nesse banco de dados. Você tem um servidor, às vezes ele pode ser compartilhado, às vezes ele pode ser auto-hospedado, o que quer que seja, certo? Mas um desenvolvedor back-end realmente construiu e mantém uma tecnologia que alimenta todos os componentes que trabalharam juntos na habilitação e permitem o lado do usuário voltado para o site exista em primeiro lugar. Sites são literalmente como eu mencionei, todo o AR é um monte de codificação, um monte de aplicativos em uma chuva de servidor. E quando vamos para qualquer site e vemos todos os esquemas de cores diferentes, todos os textos ou o JavaScript Isso está sendo hospedado no backend em um banco de dados específico no servidor. Então estas são as três fases diferentes do desenvolvimento web. Você tem o estágio de design onde estamos construindo tudo. Estamos construindo como tudo vai funcionar, como tudo vai parecer. Não estamos enviando tudo para os programadores. Eles estão construindo usando HTML, usando CSS e JavaScript. E então, finalmente, os desenvolvedores realmente vão hospedar o site, obter a configuração do banco de dados e os aplicativos para que possamos postar isso ao vivo. Assim, os indivíduos podem realmente usá-lo através da internet. Então isso vai estar aqui para esta lição e nos vemos na próxima. 8. Responsabilidade designer (trabalhando em uma equipe): Neste vídeo, vamos rever as diferentes responsabilidades do Designer dentro de uma equipe. Então, isso vai lhe dar uma visão geral do que esperar, tanto quanto diferentes responsabilidades dentro de um ambiente de equipe. O que você pode esperar como um designer de UX UX você mesmo. E, mas eles fornecem uma visão geral geral do que você realmente pode esperar ver dentro de um ambiente de equipe. Ou se você vai trabalhar dentro de uma organização menor ou grande. Então vamos dar uma olhada em algumas das responsabilidades do designer de UX. Algumas das coisas que você pode esperar estar fazendo, especialmente se você estiver trabalhando em uma organização menor onde você pode estar tendo que usar vários chapéus diferentes. Você pode ser o designer UX UI e você pode ser a pessoa que faz a pesquisa. Você pode ser a pessoa que está desenvolvendo o conteúdo, certo? E é por isso que, como designer de UX, designer de UX UI, é importante ser multifacetado, porque especialmente agora onde infelizmente há uma quantidade significativa de demissões acontecendo no mercado, mesmo que ainda haja muitos crescimento e muitas oportunidades e é importante ser multifacetado. Não tinha muitas habilidades dentro da UX UI e espaço de marketing online. Então você vai ser responsável pela pesquisa do usuário muitas vezes para reunir as informações para avaliar diferentes requisitos do usuário, para trabalhar com os gerentes, desenvolvedores e também os clientes finais. E você também será responsável por ilustrar suas ideias usando storyboards, fluxos de usuário, quadros de humor e sitemaps. E você também vai se envolver com o design gráfico usando diferentes elementos de interface. Você será responsável por desenvolver diferentes maquetes, protótipos diferentes que ilustram como o site funciona e parece no estágio inicial do projeto. E é aqui que você vai usar o Adobe XD verdadeiramente wireframe para simular isso. E você vai fazer isso. Você aprenderá como usar o Adobe XD, como nesse curso. E você também será responsável por identificar e resolver diferentes problemas de UX e entender o fluxo de experiência do usuário do Canadá, certo? Porque com a experiência do usuário você tem a jornada do cliente onde as pessoas estão chegando, diferentes usuários estão entrando em diferentes estágios. Mas também entender o que é um funil de vendas, como um ponto de vendas um funciona e os diferentes tipos de funis de vendas. Porque tudo isso vai fazer parte da experiência do usuário, certo? Como eles vão interagir com o produto, com a marca. E então você também vai estar ajustando maquetes com base no feedback do usuário. Você vai estar fazendo como MVP, produtos mínimos viáveis, onde você pode empurrar isso para o cliente ou para o usuário e ser capaz de voltar modificando, ajustar com base nas informações e no feedback que você recebe de volta. E então você vai ser responsável por desenvolver e seguir os padrões e fontes, cores e elementos, OK, isso é o que você pode esperar. Normalmente, no campo UX UI, eu sei que isso é mais do UX. No entanto, UX e UI são bastante interconectados e relacionados. Você só vai encontrar normalmente em organizações maiores onde UX e UI são individualizadas, onde você pode ter alguém apenas trabalhando na fase de experiência do usuário. No entanto. Para a maioria das empresas mod de médio porte, especialmente startups, que será uma ótima área para você começar a trabalhar para uma empresa, certo? Porque você vai ser capaz de entrar e ajudar esta empresa a crescer, ajudou-os a desenvolver um produto e aplicativo, sejam eles quais forem, e também estar potencialmente envolvido com a participação patrimonial porque você será um membro fundador. E o que eles têm que ter organizações, você vai estar fazendo um monte de coisas diferentes dentro UX e UI e eles vão ser meio que mesclados. E então você não vai notar a diferença, certo? E é por isso que eu também mencionei que se você tem a experiência do usuário, não só com a compreensão dos diferentes fluxos de usuário para diferentes jornadas do cliente, mas também com funis de vendas, entendendo como desenvolver um páginas de destino, elementos da página de destino, como desenvolver copiar todos os diferentes fatores que farão de você um indivíduo UX multifacetado. Você terá muito mais valor para essas organizações, para essas empresas. E vão querer contratar-te e manter-te por perto. Porque muitas vezes aqueles que são os menos valiosos são normalmente aqueles que, você sabe, sair primeiro ou ser demitido, certo? Porque se alguém tem apenas experiência UI ou experiência UX versus alguém que tem ambos UX UI, um pouco de experiência de marketing, entendendo persuasão de vendas. Você sabe, funis de vendas, como desenvolver páginas de destino, como escrever cópias, o que você vai aprender. Muitos desses neste curso, então você vai ser extremamente valioso para essa organização ou para qualquer cliente que você decidir trabalhar com. O pré vai chamar o freelancing ou consultoria de cliente, ok. E então algumas outras coisas que você pode esperar estar fazendo em sua função é analisar dados estatísticos. Normalmente, usando como o Google Analytics ou qualquer outro tipo de software analítico para analisar informações diferentes, tanto quanto de onde os usuários vêm, onde vem o tráfego, se vem de uma fonte específica versus outra. E por que isso está olhando também para a demografia do usuário, a idade, seja ele masculino ou feminino, certo? Diferentes áreas do mundo no trânsito estão vindo, certo? Fazendo análise competitiva e também escrever questionário, algum tipo de pesquisa para ser capaz de dar feedback, a fim melhorar os produtos atuais ou aplicativo ou site, seja lá o que for. Uma ótima maneira de fazer isso também é ser capaz de apenas entrevistar o público-alvo real. Talvez conseguir um telefonema para ele, talvez eles preencham algum tipo de pesquisa como eu mencionei. Mas realmente entender que a função UX e UI será realmente multifacetada se você quiser ser alguém que tem uma quantidade tremenda de valor para uma organização, você quer ser alguém que tem todas as habilidades que você está indo aprender neste curso. Você quer ter mais do que apenas habilidades de interface do usuário ou UX. Como eu disse, você quer ser multifacetado. Você quer saber os dois. Você quer saber páginas de vendas, você quer saber funis de vendas, e você vai aprender todos esses neste curso para que quando você decidir ir lá fora e procurar um emprego, você vai ter uma multidão diferentes habilidades que você vai ser capaz de trazer para a mesa. Seremos extremamente valiosos e será mais fácil para você conseguir um emprego ou ser capaz de trabalhar com o cliente porque você não é apenas um designer de UI ou UX unidimensional. Você é multifacetado e tem muito mais habilidades, certo? Então em algumas das outras coisas que você vai ser solicitado a fazer é definir diferentes personas de um projeto, certo? Isso é entender as diferentes jornadas dos clientes que cada indivíduo vai passar. E também entender que pessoa individual como quem é aquele indivíduo alvo que vai estar comprando este produto em particular usando este aplicativo em particular, usando este site em particular. Como é que essa persona se parece? Rama ponto de vista demográficos, e também a criação de um Sitemap Para como um site. E, em seguida, também ser capaz de projetar história de usuário no fluxo de usuário. E isso é realmente importante para você ser capaz ser um bom designer de UX é entender tipo de que fluxo aposta alguém vai passar quando eles estão usando um aplicativo particular, quando você está usando um site e eles estão usando alguns tipo de produto, certo? O que isso parece do começo ao fim, certo? E ser capaz de entender como explicar isso. E isso é exatamente o que você vai aprender neste curso. Você também vai ser esperado para criar um protótipo de baixa fidelidade. Telas de transição. Normalmente, você poderá usar o Adobe XD para criar isso. Então você deve ser capaz de criá-los. Não há problema neste curso porque você vai estar aprendendo a fazer tudo isso neste programa que quando você decidir ir lá fora no mercado e realmente procurar um emprego ou, você sabe, realmente fazer alguma consultoria de clientes ou freelancing. Você será equipado com muito mais habilidades do que apenas um designer típico de UX ou UI. Então isso vai estar aqui para este, e nos vemos no próximo. 9. Papéis e descrições (trabalhando em uma equipe): Neste vídeo, você aprenderá sobre as diferentes funções e descrições que normalmente encontrará quando estiver trabalhando em um ambiente de equipe. Agora isso vai ser para tipicamente uma empresa de pequeno a médio porte, poderia ser talvez um meio para o seu negócio também. No entanto, você vai descobrir que grandes organizações nível corporativo, e você vai ter muito mais funções específicas dentro do departamento criativo real. No entanto, para este exemplo específico, isso vai ser para empresas pequenas e médias maduras. E então vamos em frente e saltar para o que os diferentes papéis vão ser e o que você deve esperar. Assim, o primeiro papel é um gerente de projeto. Agora, este é o indivíduo que reúne requisitos de um projeto, estimar o custo real. Eles planejam tudo que controla a gestão do tempo do trabalho que está sendo feito lá essencialmente dirigindo toda a operação lá, certificando-se de que tudo está sendo feito a tempo ou certificando-se de que todos estão tomando medidas e sendo responsável pela sua parte do projeto. E então eles são aqueles que realmente estão no controle em um nível muito alto. E então temos o gerenciador de conteúdo. Este é o indivíduo que é responsável por essencialmente atualizar a seção de conteúdo de um determinado site neste contexto, vamos pensar sobre isso, um ponto de vista do projeto de site. Vão escrever textos diferentes. Talvez a seção Sobre, talvez o Fale Conosco, talvez, talvez como uma postagem de blog, seja lá qual for o escopo de um projeto, eles serão responsáveis por escrever o conteúdo específico até digamos que eles estão trabalhando dentro de um sistema de gerenciamento de conteúdo, como o WordPress. Eles vão estar logados e trabalhando no backend do site, fazendo login e escrevendo todos os diferentes posts talvez blog, adicionando todas as imagens diferentes através do backend do site. E então temos o codificador frontal. Este é um programador que codifica e realmente cria a frente visual e elementos de um aplicativo de um site usando essas três linguagens de programação diferentes que falamos anteriormente, que é o HTML para o texto para CSS para o design visual real, os esquemas de cores e, em seguida, o JavaScript para os diferentes elementos interativos que estarão envolvidos nesse site em particular. E então temos um programador, este é o desenvolvedor backend. Há essencialmente trabalhando com o desenvolvedor de front-end que está realmente construindo o layout, a aparência do site para que eles sejam capazes de hospedar o site em um servidor específico. Eles são capazes de criar um determinado banco de dados, ter diferentes aplicativos, qualquer que seja, medida em que se certificar de que o backend do site está configurado para realmente hospedar o site. Em última análise, o desenvolvedor de backend é o que realmente permite que o site, o aplicativo, seja o que for hospedado para que ele possa ser acessível através da Internet para qualquer um ser capaz de baixar ou interagir com VHS, Você sabe, digitando o URL, certo? Então, certificando-se de que ele é realmente hospedado para ser capaz de ser acessado via on-line. E então temos o testador, Este é o indivíduo que vai estar realmente passando pelo aplicativo, verdade indo para o site, certificando-se de que tudo está de uma maneira lógica muito precisa. O fluxo do usuário é bom, esse design é bom, o conteúdo está tudo fazendo sentido, e todos os aspectos técnicos são definidos e apenas certificando-se de que tudo está funcionando bem do ponto de vista do usuário. Eu quero me colocar no cliente ou nos usuários e mentalidade e passar por este aplicativo ou este site como se eu fosse o cliente real ou usuário final. E então eles vão trabalhar com toda a equipe e deixar todos saberem se há algum problema técnico ou se o conteúdo não faz sentido. Se houver algum erro de ortografia, se o desenho estiver desligado, certo? E então eles vão relatar isso de volta para os outros membros da equipe para garantir que tudo está funcionando bem para que eles possam ter um ótimo produto final. Ok, então essa vai ser esta lição aqui. Só queria lhe dar uma visão geral do que você pode esperar dentro uma empresa de pequeno a médio porte quando você está indo para ser um designer de UX, designer de interface do usuário, certo? Você vai ter esses indivíduos diferentes dentro da equipe. E mais uma vez, como eu mencionei anteriormente, se você tem muito mais habilidades do que apenas um designer de UX UI, você entende páginas de destino, você entende funis de vendas, você entende e influencia psicologia comportamental, que você vai aprender neste curso. Vais ser muito mais valioso para a tua equipa. Isso vai estar aqui para este. E nos vemos no próximo. 10. Abordagem ágil para a gestão de projetos: Neste vídeo, vamos rever a abordagem ágil para o gerenciamento de projetos. Agora, este será um dos tipos mais comuns de estilos de gerenciamento de projetos que você usa no mundo real dos negócios. Se você está trabalhando em um projeto específico dentro de uma organização, ou se você está trabalhando para si mesmo como freelancer, ou talvez você tem sua própria empresa e fazendo consultoria gentil. Este vai ser o sistema de gerenciamento de projetos mais utilizado que você vai usar. Então vamos em frente e saltar para o que exatamente é a abordagem ágil para o gerenciamento de projetos. Ok, então uma das primeiras coisas que eu quero compartilhar com vocês é uma comparação aqui entre a abordagem tradicional versus a abordagem Agile. Como mencionei, a abordagem Agile será a mais comum, amplamente utilizada. E nas grandes empresas, maiores tipos de empresas, eles ainda usam a abordagem tradicional, que é a cachoeira ou modelo linear. E à medida que passamos por esta lição aqui, você vai perceber o quão mais poderosa é a abordagem ágil para o gerenciamento de projetos em comparação com a abordagem tradicional. Porque com a abordagem tradicional, como você pode ver aqui, tudo é de uma forma sequencial e linear, onde você tem a análise de requisitos, você tem o design do sistema, você tem o e você tem o teste, a implantação e a manutenção. Isto é assumindo que tudo está funcionando muito bem. Tudo está indo como planejado. Bem, isso raramente acontece em qualquer tipo de projeto. Haverá sempre insetos. Haverá sempre problemas antigos, coisas que você precisa ajustar e modificar corrigidas ao longo do caminho. E muitas vezes esse modelo vai ficar aquém. No entanto, você sabe, as grandes empresas ainda usam e eles ainda sentem que é importante, certo? E muitas vezes o que você vai encontrar nessas grandes organizações é que você vai encontrar diferentes indivíduos tratados em apenas uma área do projeto real. Então você pode ter alguém fazendo apenas a interface, você pode ter alguém apenas fazendo a pesquisa de mercado, a análise, certo? E então você começa a entender que essas grandes organizações têm orçamentos maiores e assim eles são capazes de alocar mais recursos para esses indivíduos. Portanto, a abordagem ágil é algo que é muito, muito único e preciso, que permite coletar dados e feedback muito rapidamente que você possa modificar e ajustar sem ter que ir mais longe na linha. Porque se você está desenvolvendo, digamos, um site ou algum tipo de aplicativo, você quer obter feedback o mais rápido possível para que você possa descobrir quais são os gargalos, quais são os problemas, quais são os problemas? Conserte esses imediatamente. E outra coisa a manter nota aqui é que a cachoeira ou modelo linear é tipicamente usado no espaço de engenharia de software. Portanto, não muito usado no espaço UX UI. No entanto, algumas organizações maiores ainda usam a cachoeira ou o modelo linear. O processo típico de desenvolvimento web ágil é composto por uma série de sprints ou ciclos que envolvem a fase inicial de descoberta, essa fase de projeto, esse desenvolvimento e, em seguida, o teste. Então, essencialmente, o que acontece é que cada sprint resulta em um produto tangível e novas informações para orientar o próximo sprint. E assim você pode ter pequenos mini sprints dentro de cada estágio. E então você está essencialmente sendo capaz de planejar, projetar, desenvolver e testar em cada estágio específico. E você é capaz de obter esse feedback rápido. Você é capaz de fazer esse teste imediatamente. E então você não está tendo que esperar, você sabe, até o modelo de cachoeira, ter que esperar nos últimos estágios para realmente obter de volta essa informação onde você está testando e você está vendo se as coisas estão realmente funcionando corretamente, se houver algum bug cujos problemas, você está fazendo isso consistentemente. Cada passo do caminho aqui, certo? No planejamento e design, no desenvolvimento, na implantação. E então tudo é sinérgico. Você está recebendo feedback muito rapidamente e você é capaz de modificar e ajustar sem ter que usar muitos recursos. Uma das coisas que eu amo sobre esta abordagem ágil para a estrutura de gerenciamento de projetos aqui é que ele assume o modelo NVP, o produto mínimo viável. E este é o termo que foi desenvolvido na área do Vale do Silício onde você está constantemente lançando um produto que não é muito bom, que, você sabe, tem alguns bugs, você sabe, tem alguns problemas, tem alguns problemas. Mas você está querendo obter esse feedback os usuários para que você saiba, hey, isso é o que eu estou experimentando, qual o produto, este é o problema que eu estou vendo aqui. Isto é o que eu acredito que pode ser corrigido, pode ser ajustado, pode ser modificado para que ele esteja realmente funcionando corretamente. Então você está recebendo esse feedback constante porque você está lançando produtos que você sabe que não estão completamente acabados, mas você está fazendo isso com toda a intenção de recuperar o feedback do usuário, user_data imediatamente. Então você pode modificar constantemente, ajustar. E então, à medida que você está se movendo para o produto acabado, você passou por tantas iterações porque você obteve esse feedback do mercado, porque você obteve esses dados. E assim você tem um produto acabado. Você sabe que o mercado quer porque foram eles que lhe devolveram o feedback. E como mencionei anteriormente, o método cachoeira ainda é usado em algumas organizações. E é por isso que é importante, como designer de UX UI, ser capaz de permanecer adaptável e ser capaz de ajustar e modificar qualquer tipo de abordagem que está sendo usado em seu espaço de trabalho específico. Ou se você está trabalhando para si mesmo, você é um freelancer. É mais provável que você esteja usando essa abordagem ágil. E apenas para reiterar aqui, a principal diferença com a abordagem Agile é que ele ajuda a melhorar permanentemente o produto com base no feedback dos usuários. Considerando que o objetivo dos modelos lineares é definir projetos e produção e, em seguida, com a manutenção. E então você tem que pensar sobre isso com o processo linear, essa abordagem linear. Você tem o estágio de manutenção, que está no final onde eles estão constantemente modificando e ajustando em comparação com aqui com essa abordagem ágil ou modificando um ajuste continuamente em cada estágio. Ok, então vamos dar uma olhada em alguns dos diferentes componentes dentro da abordagem ágil para gerenciamento de projetos. Então você vai ter um backlog de produto, e isso é tipicamente como uma planilha, um charter simplesmente algo na parede que você vai usar, talvez cartões de índice ou talvez notas pegajosas. Isto está realmente a dar-te o atraso. Em uma representação visual do progresso da equipe. E então você tem o backlog do sprint. Esta é a lista de tarefas que você precisa realizar durante um sprint e antes de um sprint e iniciado, a equipe escolhe itens do backlog do produto e determina as tarefas que são necessárias para atender às necessidades do usuário. E depois temos as reuniões do Scrum. Estas são reuniões diárias para check-in e definir o curso para o dia de trabalho. E depois temos o Mestre Scrum. Este é o facilitador real vai reuniões e a comunicação entre todos os membros da equipe. E então temos os incrementos enviáveis. Esta é a função tangível em aplicações que exibem um recurso ou o produto final. Assim, cada sprint deve resultar em incrementos enviáveis. A razão pela qual você está trabalhando um sprint diferente é porque você quer ter algo tangível, físico, tipicamente no final dessa primavera porque isso permite que você tenha esse progresso após cada sprint para ser capaz de ter algo tangível, para realmente dizer , hey, isso é o que nós fizemos, isso é o que nós encontramos e esta é a informação que nós reunimos e o que nós montamos com base neste sprint anterior. Então, isso é o que você deve esperar ao trabalhar em um sistema de gerenciamento de projetos Agile. E então agora vamos dar uma olhada em alguns dos benefícios trabalhando em um tipo de estrutura de projeto Agile. Então, alguns dos benefícios aqui são o feedback mais rápido acompanhando quaisquer mudanças, maior produtividade. E então o foco nos usuários versus o modelo linear onde você está tendo a manutenção no final. E então você está modificando um ajuste depois que você realmente concluiu o projeto. Em comparação com aqui, na abordagem Agile, você é capaz de obter feedback sobre os usuários muito rapidamente, muito facilmente, e ser capaz de modificar e ajustar conforme você avança. E então temos transparência e responsabilidade mais cedo, entrega imprevisível e, em seguida, custo e cronograma muito previsíveis. Então, e então vamos dar uma olhada em alguns dos benefícios para o designer de UX. Altere o design e a lógica de acordo com o feedback real do usuário. Lembre-se, cada coisa que estamos fazendo nesta abordagem aqui é centrada em obter esse feedback do usuário. Então saberíamos exatamente o que esse usuário quer experimentar, o que esse projeto com esse aplicativo específico do site, com esse aplicativo específico, o que quer que seja, certo, que o feedback do usuário é criticamente importante nos estágios iniciais para que eles estejam participando da construção desta aplicação para que saibamos que isso é o que eles vão querer no mercado. Outro benefício aqui para o designer de UX é ter a oportunidade de testar novas ideias usando testes AB fazer parte do projeto ao longo de sua vida útil. E aqui estão cinco perguntas que você quer fazer quando receber novas ideias dentro da sua equipe. Porque muitas vezes as pessoas vão ter ideias diferentes, vão ter perguntas diferentes, quadros diferentes, pensamentos. E você realmente quer se perguntar quando eles estão surgindo com idéias diferentes, isso vai nos ajudar a alcançar nossos objetivos para este projeto? É consistente com a nossa marca ou com a marca com a qual você está trabalhando, que você está procurando desenvolver esse produto, site ou aplicativo, seja qual for, existe uma solução melhor que já existe, certo? Se alguém já tem uma grande ideia e alguém tem outra ideia, qual ideia é melhor ou quais ideias já estão funcionando agora? Será melhor do que o que já existe e qual é o pior que pode acontecer se tentarmos? Esta é provavelmente a melhor pergunta aqui porque é sempre sobre entender que, hey, nós queremos reunir o máximo de feedback e dados possível para que saibamos finalmente o que o mercado vai querer, o que os usuários estão realmente indo para ficar animado. E por isso não faz mal tentar coisas diferentes. No entanto, se for tirado tempo do projeto, se não estiver relacionado, certo? Você tem que olhar para ele como algo que vai adicionar valor ao projeto. E, finalmente, aqui, como vamos avaliar se a ideia foi efetiva ou não? Então você tem que ter algo para medir. Sua vontade é medida, é realizada. Então, se você não medir a saída, os dados, e ser capaz de olhar, isso realmente funcionou? Então ele não vai ser muito eficaz na medida em que apenas tomar em pensamentos diferentes, apenas tomado em idéias diferentes, perguntas diferentes. E então essas são cinco perguntas muito importantes a serem feitas quando alguém joga fora algum tipo de idéia ou apenas algo fora do campo esquerdo, certo? Isso é algo que vai permitir que você e sua equipe sejam responsabilizados um pelo outro, onde você não está apenas entrando e jogando fora as coisas da esquerda e da direita. Você quer ver se ele vai adicionar valor ao seu projeto existente ou o que você já estabeleceu. Ok, então isso vai estar aqui para a abordagem ágil para gerenciamento de projetos. E nos vemos no próximo. 11. Scrum - Framework flexível: Neste vídeo, vamos rever a estrutura flexível Scrum. Agora, esta é uma estrutura que é usada em conjunto com os projetos de desenvolvimento ágil para tornar as coisas muito mais fáceis, para agilizar um monte de tarefas diferentes e realmente definir os papéis de cada membro da equipe individual dentro do projeto real. Então vamos em frente e saltar aqui para o que exatamente é estrutura flexível Scrum. Agora, assim como eu mencionei, o Scrum é um uso de framework com projetos de desenvolvimento ágil que ajuda as equipes a trabalhar juntas. E assim, em última análise, o que ele faz é que ele visa tornar os projetos mais eficazes, mais eficientes, definindo as funções de cada membro da equipe, e fornecendo uma maneira específica, organizando a carga de trabalho em uma série de ciclos de desenvolvimento curtos ou Sprint. Então, se você olhar para a imagem aqui à direita, o sistema Kanban, isso é tipicamente como isso parece tanto quanto estrutura Scrum. Você tem suas tarefas, você tem coisas que estão em andamento. Você tem coisas que estão prontas para implantar. E então você tem a fase de aprovação e, em seguida, a fase final de w1. E dentro de cada uma dessas etapas diferentes, você vai ter sprints diferentes, certo? Vamos dar uma olhada em alguns dos elementos de Scrum. Então temos os sprints, que são os ciclos de trabalho, e então temos as histórias de que os projetos são divididos em pequenas peças consumíveis. Então, quando olharmos para as histórias, a pequena tarefa aqui vai ser cuidada por este indivíduo. Um pequeno pedaço de um projeto vai ser tratado por essa pessoa ali. Então ele quebra as coisas em pedaços menores para ser capaz de ser facilmente consumido, por assim dizer. Assim, cada história é atribuída a um membro da equipe e se move através da série de colunas em um tabuleiro Scrum. Assim como eu mencionei, você tem o você tem a revisão da equipe em andamento, Owner Review, e feito, e então o stand-up. Estas são apenas reuniões de stand up que conduzem um sprint. Você vai ter estes tipicamente em qualquer lugar entre cinco a dez minutos. Apenas uma reunião rápida que realmente diz o que esperar, o que vai ser feito através desse sprint, certo? E isso tudo vai ser com você trabalhando dentro de um ambiente de equipe. Obviamente você não vai ter um padrão se colocar. Então isso é tudo da perspectiva de você trabalhar dentro de uma equipe. E depois temos as fileiras. Então é aqui que todos na Equipe Scrum vão ser membros da equipe, certo? Exceto o Mestre Scrum. Este é o indivíduo que realmente dirige o tabuleiro Scrum. Então você pode essencialmente chamá-los de gerente de projeto, por assim dizer. E depois temos as reuniões de atraso. Então é aqui que você está priorizando todas as histórias e você está preparando-as para o próximo sprint, certo? Então, observe como tudo isso é de uma maneira sequencial. Você está fazendo isso para que todos possam estar na mesma página. Vocês sabem onde está tudo, e vocês têm uma pessoa no topo, que é o mestre do Scrum, certo? Isso é realmente dirigir e guiar todo mundo para ter certeza que eles estão todos no lugar certo e eles estão cuidando do tipo certo de sprints, certo? O tipo certo de ações para levá-los ao destino final. Então temos a reunião de planejamento. Este é o lugar onde a equipe escolhe quais histórias assumir e a quem atribuí-las. E novamente, este é o lugar onde o Mestre Scrum normalmente vai dirigir e guiar todos para garantir que eles estão todos no lugar certo. Então vamos dar uma olhada em algumas vantagens da estrutura flexível Scrum. Então, a principal vantagem do Scrum é a maneira como ele facilita a adaptação às mudanças nas necessidades dos clientes. Porque estamos usando sprints, certo? E você está ganhando feedback muito rapidamente do real que cliente, do usuário. Ele realmente permite que a facilitação para adaptar diferentes coisas ao longo do caminho. Se algo deve ser alterado ou modificado, se algo precisa ser encurtado, o que quer que seja, certo, o feedback constante do usuário e os requisitos que estão voltando permite que os indivíduos realmente façam muda rapidamente e ser capaz de finalmente sair no final com um produto acabado, essa solução acabada que vai ser exatamente o que os usuários querem, certo? Então o sistema de sprints encoraja feedback regular, certo? Assim como eu mencionei, cada pequeno Sprint vai dar feedback. Ele vai dar a interação de volta do usuário nos informando o que exatamente há para ser feito, para ser modificado até ajustes, até modificações, e ser capaz de olhar para diferentes coisas para melhorar para a próxima iteração. E, em seguida, também definindo funções para membros da equipe e clientes. Promove a colaboração e comunicação clara e aberta entre todas as partes. Alguns benefícios adicionais aqui, temos a capacidade de se adaptar a diferentes ciclos. Implementação mais rápida As tarefas são agrupadas em sprints, fáceis de acompanhar o progresso usando o fluxo combinado. E este será o principal tipo de estrutura que você usa quando estiver trabalhando no campo UX UI. Novamente, se você está trabalhando para si mesmo, você é um freelancer. Você está fazendo consultoria de clientes. Isso é algo que você vai implementar para si mesmo. No entanto, é importante também entender que quando você está trabalhando em um ambiente de equipe, isso é o que vocês estarão usando. Todo mundo vai ter seus papéis definidos. E vocês vão estar trabalhando dentro desses sprints para poder reunir feedback muito rapidamente, muito facilmente, e finalmente terminar o projeto e ser capaz de tê-lo pronto para ir ao mercado. Porque você conseguiu obter esse feedback do usuário. Isso vai estar aqui para este e nos vemos no próximo. 12. Aplicativos de gerenciamento de projetos: Neste vídeo, vamos analisar as diferentes ferramentas de gerenciamento de projetos que você pode usar em seus projetos de UX UI. Então vamos em frente e pular aqui. Então, a primeira ferramenta de gerenciamento de projetos que eu recomendo que você use porque é livre, é Trello. E este é um aplicativo muito agradável e fácil aqui para usar em seu telefone ou em seu desktop. E permite que você defina que Kanban flui muito suavemente para que você possa olhar para todas as seções diferentes, certo? Os recursos para fazer o fazer, o feito. E nós vamos analisar como criar uma simples placa de fluxo Kanban aqui em um momento, mas só queria orientá-lo por aqui até alguns dos recursos e funcionalidades. É muito fácil e simples de configurar. Você tem ótima visualização e codificação de cores. Você pode alterar o plano de fundo, você pode alterar um esquema de cores diferente. Você pode ter imagens diferentes nas tarefas. Isso permite uma colaboração em equipe fácil. Você pode adicionar membros da equipe e você pode fazer muito com os diferentes planos de fundo. Então vamos em frente e ir para o meu computador e vamos fazer um rápido passo a passo do fluxo Kanban configurado lá através de Trello. E eu vou te mostrar como criar um tabuleiro Trello. Ok, então aqui estamos no meu computador e temos uma placa Trello aqui. Muito fácil, muito simples para nós configurar. Tudo que você precisa fazer é adicionar uma lista aqui, certo? Digamos que queremos adicionar os recursos, assim como passamos no deck de slides lá. E depois queremos fazer a coisa a fazer. E então nós queremos ir em frente e adicionar este e então nós queremos fazer o que fazer. Depois adicionamos o Dunn. Ok, então nós temos essas placas diferentes aqui, tanto quanto as listas. E digamos que temos um a fazer aqui. Digamos que construa uma armação, certo? Para aplicação de sites, certo? Simpático e simples. E você pode ver como isso é fácil aqui. E uma vez que você configurar uma dessas tarefas aqui, você clica nela e você tem um monte de recursos diferentes aqui. Você pode adicionar membros diferentes e você pode convidar pessoas para colaborar nisso aqui você pode colocar um pouco melhor descrição aqui, como hey, isso é para o projeto XYZ, certo? E como eu disse, isso vai ser algo para você trabalhar normalmente. Se você está fazendo freelancing, se você está fazendo consultoria de cliente, porque o Trello é gratuito e você tem tantos recursos e funcionalidades diferentes aqui para você poder gerenciar seu projeto. Vamos salvar lá. Você pode colocar um rótulo aqui na medida em que uma cor. Digamos que queremos colocar verde lá, certo? Você pode colocar uma data de afazeres aqui. Vamos para a AIDS amanhã e digamos que temos algum tipo de apego aqui. Você pode adicionar a partir do seu computador, de uma unidade, e então talvez você queira ter uma capa aqui. Digamos que você, vamos adicionar este aqui, OK. E então agora podemos mudar isso e podemos ter essa cobertura lá na tarefa real. Tão bonito, muito bonito aqui que podemos adicionar tanto quanto para as tarefas, para o fazer. E a mesma coisa aqui, vamos adicionar uma tarefa. Podemos passar pelo mesmo processo e, em seguida, movemos as coisas para o próximo estágio. Quando algo realmente está sendo feito, nós vamos mover isso para o fazer. E então, se quisermos convidar diferentes indivíduos, diferentes membros da equipe. Vá criar uma equipe, coloque o nome de John Smith. Ok. E escolhendo ou qualquer departamento criado equipe lá, certo. E então você vai enviá-los em um convite real para este conselho em particular aqui. E então esta é apenas uma ferramenta fantástica aqui que você vai ser capaz de usar se você está apenas começando e o espaço UX UI. E digamos que você tem clientes atuais da Nino com quem você vai trabalhar. E digamos que você queira entrar no freelancing. Deseja segmentar uma consultoria de cliente? Esta será uma das maneiras mais fáceis e eficientes para você gerenciar seus diferentes projetos. Fomos geridos de um cliente diferente. Entenda que, quando você entrar em uma organização, você terá ferramentas diferentes, diferentes aplicativos de gerenciamento de projetos que você usará. Mas eu queria apenas dar-lhe uma visão geral rápida e passar por Trello porque vai ser uma das suas melhores apostas quando você está apenas começando porque é grátis e é muito fácil para você. Então vamos em frente e saltar para, volta para os slides e vamos olhar através das outras ferramentas de gerenciamento de projetos. E eu vou te dar uma visão geral desses também. Ok, então estamos de volta à apresentação aqui, e podemos ver aqui que há várias outras ferramentas diferentes de gerenciamento de projetos. Você tem acampamento base, acampamento frito, folga, Asana, e noção. Este primeiro aqui, isto é frouxo. Este é mais um tipo de ferramenta de comunicação. Você tem recursos e funcionalidades de gerenciamento de projetos. No entanto, é usado principalmente como uma ferramenta de comunicação. Eu uso isso todos os dias. É muito, muito poderoso. E então você tem uma sauna aqui, que é principalmente uma ferramenta de gerenciamento de projetos. E acredito que este aqui é o acampamento espacial. Então, vamos voltar ao meu computador e passar por essas ferramentas diferentes para que você possa ter uma visão geral de como elas funcionam, os preços e qual delas será provavelmente a melhor para você. E quais são os prós e contras de cada um? Vamos voltar para o meu computador agora. Ok, então vamos dar uma olhada no acampamento base aqui. Acampamento base é uma grande ferramenta, muito poderosa. Muitas empresas usam isso e eu costumava usar isso antes também. No entanto, uma das coisas que você precisa ter em mente é que isso é algo para um monte de vezes organizações maiores porque o preço é bastante alto. E quando você olha para 99 dólares por mês apartamento, quero dizer, isso é um pouco. Se você é apenas uma startup, se você está apenas começando no espaço, você não quer ter esse tipo de custos incorridos todos os meses, certo? Você quer ser o mais magra possível. Então isso é algo que eu vi onde organizações maiores têm porque há uma tonelada de recursos, funcionalidades atentas, você pode trazer seus clientes a bordo para ser capaz de colaborar dentro do projeto e fazer com que eles feedback diferente do usuário. Então, um monte de ferramentas diferentes que você vai ter acesso dentro do acampamento base. E você pode encontrar isso em uma agência criativa mais grande. Se você vai trabalhar em um ambiente de equipe, eles podem estar trabalhando no acampamento base. No entanto, apenas começando, eu não recomendaria isso. Então o próximo aqui é livre para acampar. Isto é semelhante ao acampamento base, e este é um que eu realmente recomendo isso. Na verdade, inscreva-se para também e dar-lhe um teste. Isso é algo que eu já usei no passado, e é muito barato. E faz muitas das mesmas coisas que o acampamento base des. No entanto, a um custo menor, você tem sua lista de tarefas aqui, placa composta, Jaeger, diferentes subtarefas. Você pode obter uma visão de pássaro o que o gráfico de Gantt. E eu acredito que é muito barato. É tipo, eu acho que cinco ou dez dólares por mês. Isso vai para baixo para o preço. E vamos. Ok, então você pode se inscrever de graça. E então se você quiser ter um usuário que deve ser, você sabe, apenas em nosso para você 149 permanente. Quero dizer, isso não é nada mesmo se você usar a versão de negócios aqui, que é a planta de US $7,49, quero dizer, isso é super barato e isso vale a pena porque um tem um monte de diferentes funcionalidades e ferramentas que base acampamento tem. É apenas uma interface de usuário ligeiramente diferente. Ok, e então isso é algo para tomar nota se você está indo para usar algo semelhante ao acampamento base, todos os recursos, todas as funcionalidades, interface de usuário ligeiramente diferente do que eu recomendo Com a liberdade não pode porque com um tabuleiro Trello, você vai ser capaz de usar isso muito facilmente, muito eficaz, e isso não vai custar nada. No entanto, está faltando muitas das características e funcionalidades que você vai ter aqui dentro do acampamento frito, que isso vai dar tudo em um só. Então, agora vamos olhar para o SLAC aqui. Como eu mencionei, folga é mais uma ferramenta de comunicação entre você e os membros da equipe. E isso também vai ser de graça. Eu acredito que é gratuito até uma certa quantidade, mas você não deve ser capaz de baixar isso, configurá-lo tanto quanto para um canal. E você deveria ter, você sabe, milhares de mensagens que você é capaz de enviar dentro de uma equipe. E então eles têm pacotes diferentes maiores que você pode pegar se você estiver procurando ter vários membros diferentes da equipe. E eles têm outros pacotes que você pode pegar quando estiver usando a ferramenta real. No entanto, eu não recomendo isso porque isso vai ser algo mais para como uma organização de nível empresarial, mas para você, se você tiver um, talvez dois a 345 membros da equipe, esta versão gratuita de folga deve ser Simplesmente bem. E então vamos até aqui para o preço e podemos olhar para alguns dos diferentes recursos e funcionalidades que estão envolvidos na versão gratuita versus o padrão. E então temos a versão gratuita aqui. Você tem acesso a 10 mil e suas equipes mais recentes mensagens. Isto é algo onde se vocês estão enviando um monte de mensagens para frente e para trás, você não vai ter o histórico completo, apenas as últimas 10 mil mensagens. E você tem integrações diferentes aqui, chamadas de voz e vídeo. Isso é algo que pode ser muito grande aqui se você olhar para Keep Records, certo? Então isso é um grande negócio. E, em seguida, 667 por mês aqui por ser capaz de essencialmente ter todos esses recursos e funcionalidades adicionais. A mesma coisa aqui com o 1250. Você tem muito mais recursos e funcionalidades, mas normalmente, você deve ficar bem livre se você está apenas começando. Obviamente, se você quiser usar o padrão e você quiser usar um monte de funções diferentes, um monte de recursos diferentes e um monte de recursos diferentes que estão disponíveis, você pode se inscrever para isso também. Mas principalmente isso vai ser para uma ferramenta de comunicação entre você e outro membro da equipe. E depois temos uma sauna aqui. Asana é uma das maiores do mercado também. E eles têm diferentes pontos de vista quanto ao vínculo comum, tanto quanto uma lista, eu vou descer aqui. Analisamos como você pode olhar para diferentes fluxos de usuários, linhas de tempo e, em última análise, é uma ferramenta muito agradável. E no que diz respeito à competitividade e aos preços, eles são bastante competitivos. Eles têm uma interface de usuário muito agradável. Eu tenho que dizer que definitivamente recomendo essa base fora do que eu vi em como eu usei anteriormente e diferentes ambientes de equipe. E então também, vejamos o preço aqui. O preço também é bastante competitivo. 1099 para cada usuário. Você pode usar isso gratuitamente, bem como e tipo de testá-lo para fora. No entanto, você vai ter algumas limitações aqui, mas se você quiser experimentar a sauna de graça, direito, ver como funciona você, como parece que você pode ir em frente e dar-lhe uma chance. É 1099. A maior coisa aqui que eu quero que você tome nota é quando você vai e olha para o acampamento frito, certo? Você tem 149749, interface de usuário ligeiramente diferente. No entanto, você vai ter um monte de recursos e funcionalidades que Asana terá, exceto para uma interface de usuário diferente. Então, cabe a você, mas isso vai ser ótimo para você vir aqui, obter um teste gratuito, experimentá-los, ver como funciona e, finalmente, ver qual deles funciona melhor para você. Agora o final aqui vai ser noção, este é o novo aqui. Isto é realmente o que eu uso para a maioria do meu trabalho. Tenho tudo em projetos diferentes. Eu amo os diferentes recursos que eles têm aqui, as notas , os documentos, e este é um pouco mais complexo. No entanto, o preço é muito, muito baixo. Há muito mais coisas que você pode fazer isso, e há muito mais personalizações. No entanto, ele faz tomar um pouco de uma curva de aprendizagem e por isso eu definitivamente recomendo que você confira isso se isso também é algo que você quer olhar. Eu acredito que o preço é muito barato também. Você pode começar gratuitamente. Basta entender que isso é muito mais recursos e funcionalidades e todas as outras ferramentas e muito mais personalizável. E ele vem, como eu disse, com a curva de aprendizado maior, mas eu acredito que é um dos melhores, se não o topo no mercado atualmente. Ok, então só queria dar-lhe uma visão geral rápida aqui das diferentes ferramentas de gerenciamento de projetos. Eu recomendo que você confira tudo isso, faça alguns testes gratuitos, descubra qual deles vai funcionar melhor para você se você está apenas começando agora, use um Trello, se familiarize com isso. E se você quiser experimentar todos esses outros, vá em frente e faça isso. Vai valer a pena tentar descobrir qual deles funciona melhor para você e sua situação. Está bem? Então isso vai estar aqui para este e nos vemos no próximo. 13. Aula XD - introdução: Olá a todos, bem-vindos à nossa primeira lição do Adobe XD. E antes de tudo, vamos ter certeza de que você tem o XD instalado no seu computador. Para aqueles que ainda não têm este aplicativo, visite Adobe.com barra XD e baixe o aplicativo. Existem dois planos para XD, pagos e gratuitos. Você vê que para começar, você pode usar um plano gratuito que tem apenas uma camisa, documento ativo. Para documentar editores, um link de camisa ativo e armazenamento em nuvem de dois gigabytes. Claro, quando você crescer como um designer de UX UI, você precisará expandir seu plano. Mas, por enquanto, não é necessário pagar pelo aplicativo. Depois de instalar o XD pode abri-lo. E tela inicial deste aplicativo se parece muito com isso. Se houver uma diferença nas versões, as principais coisas são as mesmas. Aqui você tem quatro precedência. Para criar diferentes tipos de projetos. Há um aplicativo móvel ou Twitter posts, postagens sociais, desculpe. Publicações sociais e tamanho personalizado. Por favor, note que há um pequeno trabalho para baixo que permite que você selecione diferentes precedência diferentes dispositivos diferentes. Você também pode criar NENHUM, um como tamanho personalizado, digite a dimensão necessária. E vamos. A seção de aprendizado tem pequenas lições de três minutos de coisas muito úteis sobre XD. Documentos em nuvem é a seção onde você vê seus documentos em nuvem e, respectivamente, o documento de camisa com você também são uma seção para documento compartilhado com você. Não tem nenhum link gerenciado irá levá-lo para o site, para a página da Web onde você pode gerenciar seus links compartilhados e assim por diante. Estes são apagados. Projetos excluídos. Coisa muito útil. A seção Excluída permite que você restaure seus documentos e visualize-os online. Além disso, você pode excluir permanentemente. Então, isso é praticamente tudo para a tela de boas-vindas do x D. Agora podemos continuar a explorar a interface do usuário deste aplicativo. Ok, é hora de mergulhar na interface do usuário do Adobe XD. E no nível principal, em um nível geral, você pode ver o protótipo de design e as guias de compartilhamento, bem como as ferramentas alinhadas verticalmente e o painel de ativos. Então, para as ferramentas que vão trabalhar com o Photoshop ou algum outro. Software da Adobe, é muito comum e natural que não acho que eles encontrar nada extra aqui. Mas para aqueles que são novos na família Adobe e no XD precisamente, darei uma pequena introdução rápida a cada uma dessas ferramentas. Assim ponteiro nos permite mover em torno de elementos, retângulo, muitos cria retângulos e também cursor ou pode usar, pode mover os lados, o próprio objeto. O LX cria o LMS. Por favor, saiba que manter pressionado o botão Shift ajuda você a criar, ajuda você a criar a forma. E o retângulo. Linha. E BC dois, ou é uma panela, mas funciona como um mais ocupado também. Então Text Tool e sabia nossa ferramenta de placas. Você vê que no lado direito, existem algumas opções para tipos de fora. Você pode pressionar, e ele cria o iPad e Nexus nove, estranho comprado automaticamente. Vamos descobrir o que essas três guias são responsáveis. Então, se você notar, estamos na seção de design no momento. Por isso, permite-nos criar formas diferentes. Então o design real, sim, não preste muita atenção nos meus desenhos, pois eles são muito ruins. Então seção protótipo é responsável por conexões entre nossas placas e suas transições. Você vê que a barra lateral também muda para duas outras funcionalidades, para outras opções, que estão relacionadas à prototipagem e interação entre elementos e telas. Ok, vamos entrar em mais detalhes mais tarde quando fizermos algum projeto e fizermos o protótipo a partir desse. Mas agora vamos nos concentrar nas coisas gerais e ir para compartilhar. Claro. Ajuda você a realmente compartilhar o projeto. E você vê que há algumas coisas para notar. Então, em primeiro lugar, vai uma configuração de vista. Você pode compartilhá-lo como uma revisão de design para desenvolvimento, apresentação, teste de usuário e custo. Personalizado significa que você pode selecionar opções específicas para o compartilhamento de seu projeto e incluir especificações de design, mostrar dicas de hotspot abertas em tela cheia nos comentários allo. Só para esclarecer isso. Especificações de design é a opção que geralmente selecionado para desenvolvedores web para que eles possam cortar o seu maquete para HTML CSS acesso também pode ser modificado um pouco, então apenas convidados pessoas de qualquer maneira. E quando passaporte, você pode criar um passaporte para o seu projeto, se desejar lá. Você também pode criar um título personalizado. Aqui, título personalizado. E seu link aparecerá aqui. Assim, uma vez que o projeto é carregado, link aparece aqui e você pode copiar seu link e compartilhá-lo entre a equipe ou partes interessadas. Então foi uma espécie de visão geral rápida do x Dui. Mas vamos mergulhar nos detalhes da seção de design como este é o que estamos interessados em, OK, porque na maioria das vezes vamos usar seção de design e ele tem que ser analisado um pouco com mais precisão. Então vamos adicionar início. E vamos criar um elemento, um objeto. Depois de criar um objeto , as opções aparecem no lado direito. E você pode modificar seu objeto ao seu gosto, para o que você precisa em seu projeto. Vamos encher isto. Ok? Então vamos começar do início. No topo vemos opções de alinhamento. Então, uma coisa interessante é que quando você não tem dois ou três elementos para alinhar, o alinhamento será aplicado de acordo com a placa ímpar. Então veja, uma vez que eu pressionar esses botões, esses ícones objeto é alinhado codificação para o popa. Uma vez que temos dois elementos em um diferente em diferentes posições, eles serão alinhados de acordo com o outro. Ok? Mesmo para o alinhamento esquerdo e direito e centro, claro, a função distribuída ajuda você a, para ter um espaçamento igual entre objetos. Você vê. grade de repetição cria partidário que pode ser expandido verticalmente e horizontalmente. Ok? Agora parece um inútil, mas você verá o quão útil e aplicável pode ser em seu web design. Vamos ver as outras opções. A largura e a altura podem ser modificadas. Aqui. Pode bloquear as proporções para que não seja espremido ou deslocado. Ok? Uma vez que eu selecionei este, será assim. Então isso é uma diferença. Você pode digitar seu traje com ou odiar. Se necessário. K, x e y são responsáveis pelo posicionamento do elemento. Pontos que eu seleciono. Ok. Veja estes dois ícones. Virar o objeto, componente ou grupo de objetos, horizontal e verticalmente. A rolagem ajuda você a criar uma rolagem horizontal e uma rolagem vertical. Agora, apenas viva. Porque haverá uma lição específica onde discutiremos. Estas duas são as principais ou estas três opções em um maior detalhe. E vou mostrar como o poderia ser aplicado em diferentes áreas do projeto. Posição fixa ao rolar. Vamos criar uma amostra aqui, está bem? Então você vê que um tem um pergaminho e ele também tem uma posição fixa. Ok? Novamente, estamos apenas olhando para as funções neste projeto abstrato. Então, apenas para se familiarizar com as ferramentas e possibilidades de x d k. Se o responsivo redimensiona desabilitado, a escala dos objetos será assim. Assim, eles serão transformados livremente de acordo com suas necessidades. Ok? Depois de selecionar o redimensionamento responsivo, eles serão movidos. Isto é para desenvolvimento web. Se você estiver tentando mover coisas em seu site ou aplicativo móvel, é melhor usar o redimensionamento responsivo. Então eles querem mudar seu tamanho e serão distribuídos corretamente entre si. 14. Visão geral de design gráfico: Neste vídeo, vamos rever os fundamentos da visão geral da seção de design gráfico. Vamos percorrer o que exatamente vamos cobrir nesta seção em particular. E realmente dando a você uma visão geral geral do que está por vir nesta seção específica. Então vamos em frente e pular aqui. Certo, então o que vamos passar nesta seção é como a cor funciona. Vamos ter uma compreensão fundamental da psicologia da cor, como ela desempenha um fator no design. Vamos rever a teoria das cores, como entender os diferentes fatores, componentes diferentes que todos entram em jogo utilizando os esquemas de cores adequados. E então vamos rever os dois tipos diferentes de esquemas de cores aqui. Quanto ao RGB e CMYK, vamos revisá-los em detalhes. E então vamos passar por cima da roda de cores e esquemas de cores especificamente. Isso é muito importante aqui para você entender porque, como designer, você quer ter uma compreensão fundamental de porque é que estamos usando várias cores, fazer sentido junto com outras pessoas. E por que queremos ficar longe de certas cores, dependendo da aparência e sensação que estamos procurando obter do usuário final real, certo? Queremos que eles sejam capazes de se sentir de uma certa maneira, ter uma certa afinidade ou um certo sentimento sobre uma determinada marca ou um determinado produto. E esse esquema de cores é realmente, e os esquemas de cores realmente vão jogar um fator nisso. E então vamos trabalhar com fontes, diferentes tipos de fontes que serão recomendados para determinadas situações. Como certificar-se de que você está usando as fontes nos lugares certos, que você está misturando diferentes tipos de fontes. Então DOE tem uma boa aparência para ele. E então, finalmente, vamos rever ícones. Ícones são muito, muito poderosos de ter em um site ou um aplicativo web particular. Eles adicionam muita singularidade, muita diversão e emoção ao aplicativo ou ao site. E isso realmente adiciona um pouco de talento não-divertido ao design. Estou muito entusiasmado por começares na secção, e vemo-nos na próxima. 15. A psicologia da cor: Neste vídeo, vamos rever a psicologia da cor. Isto vai ser algo onde vamos para a psicologia, a teoria da cor por trás de como usar a cor corretamente, como olhamos para a cor de diferentes perspectivas, e como somos capazes de combinar diferentes tipos de cor, temas e combinações de cores para finalmente chegar a um design incrivelmente bonito. Então vamos em frente e saltar para a psicologia da cor. Isso é algo que, como designer de UX UI, você precisa ter uma compreensão fundamental disso é onde você vai ser capaz de entender por que é importante ter diferentes esquemas de cores. O que faz mais sentido, tanto quanto ter uma cor particular e fazer as pessoas se sentirem de uma certa maneira. E por que algumas cores vão fazer mais sentido contra outras, certo? Dependendo da situação única. E assim ter essa cor Foundation é realmente importante para você como designer de UX UI. E estou animado para começar aqui. Então vamos em frente e pular aqui. Quando pensamos em cor, certo? Como é que ele realmente funciona? Se você olhar para o lado direito aqui, você olha para os diferentes esquemas de cores. Você olha para os azuis, você olha para os azuis claros, o azul marinho. Observe como tudo aqui tem a combinação perfeita. Você olha para o roxo, você olha para o rosa claro. Você olha para o y, teve tudo que realmente elogiar um ao outro, certo? Você olha para o verde lá embaixo, como você tem verde escuro, verde claro e o branco. Tudo está em perfeita ordem porque está se complementando. E então é isso que você vai aprender nesta lição particular aqui. Por que é importante usar cores diferentes. Como usar todos os esquemas de cores em diferentes designs quando você olha para diferentes sites, logotipos diferentes, marcas diferentes, Este é o lugar onde você está indo para obter atingido uma certa experiência emocional quando você está olhando para uma marca que tem um cor azul, você vai se sentir de uma certa maneira quando você tem uma marca ou um determinado site que você está olhando e ele tem as cores verdes, você vai se sentir de outra maneira. E então isso é realmente o que a cor faz isso lhe dá essa experiência emocional para o usuário final. E escolher a cor certa significa que seu público será capaz de saber instantaneamente quem você é, você sabe do que é o produto, o que você faz e o que você está fazendo. Então, se você não tem os esquemas de cores certos para seu produto específico em como você está olhando para apresentar isso e para o mercado, então você vai ter dificuldade em vender os produtos, certo? E ter o tipo certo de usuários realmente usando o produto. Cada cor fala com um aspecto diferente do consumidor. Coloca sua mente na mente do consumidor e pense em como essas cores diferentes fazem você se sentir. E cada cor particular fala para um aspecto diferente do consumidor. Quando você olha para as cores inferiores do verde, isso provoca paz e bem-estar. Pense no aplicativo de meditação. Este seria um bom esquema de cores para ter um aplicativo de meditação onde você é capaz de relaxar, você é capaz de se sentir bem, você é capaz de ter essa sensação geral de bem-estar. E então você tem rosa no meio aqui onde isso é mais feminino. Tipo de cor, obviamente, certo? E então você tem um toque de roxo, que é um pouco de sensação de luxo. Então você tem o tipo feminino de esquema de cores bem como o tipo de luxo de campo, bem como com o roxo. E então o azul fornece emoções como confiança, segurança e relaxamento. Pense no Facebook. Tenho certeza que você usou o Facebook ou está no Facebook. Facebook tem o esquema de cores azul e tem praticamente o esquema de cores no topo aqui. Porque cada vez que você faz login no Facebook e quer que você sinta uma sensação de confiança, segurança e conexão com a plataforma real porque você tem seus amigos e familiares lá. Você tem pessoas diferentes com quem está se comunicando. E então entenda que esses diferentes esquemas de cores vão fazer as pessoas se sentirem de uma certa maneira. Então agora vamos falar sobre psicologia de cor real aqui e como nossas mentes reagem automaticamente às cores sem que saibamos que você olha para a imagem aqui à direita. E para ser um pouco técnico aqui, eu quero dar a vocês realmente a compreensão de como isso realmente funciona de uma perspectiva técnica. Os momentos em que nossos olhos percebem a cor, eles se conectam com o cérebro, o que dá sinais ao sistema endócrino, liberando hormônios responsáveis pelas mudanças de humor e emoções. Se você olhar para a imagem aqui para a direita, olhando para cores diferentes, você vai notar como eles estão fazendo você se sentir. E se você ler a descrição lá certo, onde você tem alegria com amarelo e laranja, M6 onde você tem conforto com verde claro e, em seguida, felicidade aqui com azul e verde, certo? Otimismo lá em baixo com azul, você vai perceber todas as diferentes vezes que você se deparou com essas cores e como elas fizeram você se sentir. Agora você tem uma compreensão do que diferentes esquemas de cores vão fazer para você quando você se deparar com eles. Isso é algo que está embutido em nosso DNA e isso é algo que é automático. Cada humano que olhar para estas cores em particular, vai sentir este tipo de emoções. É automático. Quando você está olhando para certas cores, você vai se sentir de uma certa maneira. Então pense em seus designs como você quer que as pessoas se sintam, como você quer que as pessoas pensem sobre o produto, a marca, o seja que você está construindo como designer de UX e as cores selecionadas corretamente ajudam a colocar usuários no estado mental que o obriga a tomar atos como eu mencionei, se você quer que alguém se sinta seguro, sinta segurança, você quer ir com azul. Se você quer que alguém se sinta relaxado, calmo, e você quer que ele se inscreva para, digamos, um aplicativo de meditação. Você quer ir com aquele verde, certo? Então entenda que você tem um tremendo poder aqui. Compreender como essas cores diferentes funcionam, como elas são capazes de afetar as pessoas, sentir uma certa maneira e tomar certas ações. E aqui está uma das maiores coisas que têm em mente é o aplicativo. Leva apenas cerca de 90 segundos para as pessoas fazerem um julgamento subconsciente sobre um produto. E entre 6290% disso é avaliado apenas com base na cor. Então pense sobre isso. Tudo isso está acontecendo inconscientemente. Você está olhando para um esquema de cores específico e sua mente já está interpretando como você está se sentindo. Você está se sentindo de uma certa maneira. E muitas vezes está acontecendo sem saber. Você se sente de uma certa maneira e não sabe o porquê. E eu tenho certeza que você pode pensar várias situações diferentes em que você viu um novo produto, você viu um esquema de cores diferente em um determinado site ou o que quer que seja, e isso fez você se sentir de uma certa maneira. Ou agora o que você pode fazer é acessar sites diferentes, olhar para aplicativos diferentes e ver como seus esquemas de cores estão configurados no que eles estão tentando dizer, como eles querem fazer você se sentir, como eles estão fazendo você inscreva-se. É tudo baseado nos diferentes esquemas de cores que estão fazendo você se sentir de uma certa maneira. E se as pessoas estão tomando decisões dentro de 90 segundos em um nível subconsciente, então isso é enorme porque é tudo automático e está acontecendo sem nós sequer sabermos disso. Tão poderoso para entender o poder da cor e da cor psicologia. Então agora vamos dar uma olhada nas diferentes cores no que estas realmente significam, o que elas transmitem, e como você quer ser capaz de usá-las de forma eficaz. Então, na medida em que lê Aqui, temos confiança, Juventude, Empower. Então temos laranja. Isso vai ser amigável, quente e enérgico do que temos amarelo, felicidade, otimismo e calor. E pense nisso por um momento. Toda vez que você viu essas cores, pense em como elas fizeram você se sentir. Você só pensa em amarelo. Amarelo é como o sol toda vez que você está lá fora e você está pegando um pouco de sol, você está se sentindo bem, certo? Você está recebendo essa energia do sol. Você está se sentindo quente, há uma felicidade. E então temos crescimento de peças verdes e ajuda. Pensa no verde. Muitas vezes isso é usado em produtos que são do meio ambiente que são ambientalmente amigáveis. E então temos azul, que é confiança, segurança e estabilidade do que sobre o Facebook, como mencionamos que ele quer que você se sinta seguro e seguro e quer que você se sinta como se fosse um site confiável. E então temos roxo, luxuoso, criativo e sábio. E então temos preto, que é confiável, sofisticado e experiente. E então temos brancos, o que é simples, calmo e limpo. E estas são tipicamente vão ser as cores diretas. Eles não vão estar onde você tem um pouco de vermelho ou laranja misturado, onde você tem talvez um pouco de amarelo e verde. Esta é a cor exata, vermelho, cor laranja. Não há mistura de cores. É só a cor amarela. É assim que normalmente faz você se sentir verde. E isso é o que essas cores transmitem. E isso é muito importante para entender como um designer de UX IU que você possa usar essas cores de forma eficaz em seus designs. Agora vamos rever a teoria das cores aqui, que é o RGB, vermelho, verde, azul. E isso é usado principalmente para projetos de design gráfico digital, como design, anúncios on-line e tudo o que tem a ver com arquivos digitais somente. Ok? E, finalmente, o que a teoria das cores explica é como os seres humanos percebem a cor e os efeitos visuais de como as cores se misturam, combinam ou contrastam umas com as outras. E é isso que estamos essencialmente repassando nesta lição inteira. Mas cores diferentes significam como eles fazem você se sentir, teve uma mistura e combinar e contrastar cada cor diferente. E para ter uma certa sensação boa, uma certa emoção daquele usuário em particular, certo? Porque cada uma dessas cores, assim como passamos no slide anterior. Comunica uma certa mensagem, um certo sentimento, uma certa emoção. Então isso é importante para entender. E outro fator importante aqui em termos de teoria da cor, é entender que as cores são organizadas em uma roda de cores e agrupadas em três categorias diferentes. Você tem suas cores primárias, cores secundárias e cores terciárias. Ok, então esta é uma visão geral aqui do modelo de mistura de cores aditivas. Agora vamos rever o modelo de mistura de cores subtrativas. E a razão pela qual estes são chamados de aditivo e subtrativo é que o aditivo que você vai adicionar cores diferentes faria subtrativo. Você obviamente vai estar subtraindo cores diferentes. E assim o CMYK significa ciano, magenta, amarelo e preto. E então estas são quatro cores diferentes nas cores subtrativas são criadas absorvendo ou subtraindo total ou parcialmente alguns comprimentos de onda de luz e, em seguida, refletindo o outro. Então note como neste aqui, você está começando com a cor branca. E como você adiciona filtros diferentes com luz branca, como Inc., que esta luz branca assume uma aparência de cor. E isso é o que é usado em revistas diferentes, material impresso diferente, qualquer coisa que vai ser tangível ou físico no mundo real, quando você está trabalhando com tipo digital de documento ou tipo digital de mídia, você vai usar RGB quando estiver usando qualquer coisa que vai ser impressa que requer um tipo físico de produto, então você quer usar o CMYK. Ok, então agora vamos dar uma olhada em alguns fatores-chave ao trabalhar com cores, expectativas dos clientes. Quando se trata de expectativas dos clientes, você precisa entender quais tons serão os mais apropriados com base nessa história de marca específica e uma personalidade. E, em seguida, quando se trata de preferências do cliente, você está escolhendo o esquema de cores certo ou as cores certas que evocam confiança e os usuários. E quando se trata de uma mensagem de marca, que tipo de emoções e características a marca está tentando retratar? Às vezes você vai ter marcas em querer fazer remodelação completa de sua marca. Eles querem ter todos os esquemas de cores diferentes. Eles querem representar, você sabe, coisas diferentes com seu logotipo, com sua marca, com seu aplicativo, o que quer que seja classificado em dois, muitas vezes vêm a esses cenários únicos onde as pessoas, onde as empresas querem Renomear completamente tudo. E então você realmente quer perguntar ao cliente como eles querem que seus usuários se sintam. O que eles querem que sua marca represente? O que eles querem que as pessoas digam sobre o cérebro na medida em que isso vai fazê-los sentir. Que tipo de emoções e características é a marca tentando retratar e o mercado. E, em seguida, também olhar para o concorrente, olhar para o que está funcionando para a competição e usá-lo como referência. Muitas vezes não colocamos ênfase suficiente em olhar para a competição. Especialmente como, você sabe, como um indivíduo criativo, você gosta de criar algo do zero que nunca foi feito antes. Mas muitas vezes, é muito mais fácil olhar para o que a concorrência já fez e ser capaz de modificar, ajustar e tirar ideias disso, certo? E, em seguida, ser capaz de criar um design único baseado nisso. E então isso vai ser aqui para a psicologia da cor e a teoria da cor. E nos vemos no próximo. 16. Esquemas de roda e cores: Neste vídeo, vamos passar por cima da roda de cores e esquemas de cores. Agora esta vai ser uma lição muito importante aqui, para que você possa entender como os esquemas de cores funcionam e como eles se complementam, que diferentes variações de esquemas de cores e como você pode usá-los como um modelo para ser capaz de, usando seus projetos em todos os seus quadros gráficos diferentes, permitir entender como usar os diferentes esquemas de cores e roda de cores vai fazer seus projetos se destacar mais e ter mais de um fluxo de cores em combinação que vai elogiar uns aos outros com o esquema de cores geral e design do produto. Então vamos em frente e pular aqui. Assim, a roda de cores mostra a relação entre as cores. E se você se lembrar dos slides anteriores, você se lembra que há muitas dessas cores aqui que temos ao lado um do outro. Nós que estávamos nos complementando. Você tem o amarelo e o tipo de amarelo, laranja, laranja e o tipo de laranja mais escuro. E então no fundo temos o rosa e o roxo, o azul escuro. E então temos o azul no azul claro. Então, todos eles estão se complementando. E dentro da roda de cores há 12 cores principais que precisamos anotar. E a roda de cores RGB, esses tons são vermelho, laranja, amarelo, tela verdadeira, eu acredito que é como você pronuncia. Verde, primavera, verde, ciano, assegure-se, azul, violeta, agenda e rosa. E você pode ver tudo isso aqui na roda de cores. E então a roda de cores pode ser dividida em cores primárias, secundárias e terciárias, ok, três grupos diferentes. As cores primárias, vermelho, amarelo, azul e as três cores secundárias. Estas são as cores que são criadas quando as cores primárias são misturadas, verde, laranja e roxo, e depois as seis cores terciárias. Essas cores são feitas a partir das cores primárias e secundárias juntas, como violino azul, verde e vermelho. Então, entender como a roda de cores funciona e como você pode usá-lo para sua vantagem vai ser extremamente importante. Como designer de UX e UI, você quer ser capaz de não só entender como a cor funciona medida em que faz as pessoas se sentirem e a mensagem que ela transmite, mas como podemos usá-los de forma eficaz nos designs, certo? E assim realmente ajuda a criar diferentes esquemas de cores que vão combinar juntos, que vão ficar muito bonitos, que vão ficar incrivelmente bonitos e se destacar. E ele realmente adiciona consistência na interface do usuário, a interface do usuário. E então agora vamos dar uma olhada nos diferentes esquemas de cores e combinações. O primeiro que temos aqui é o cortesia, que é o roxo e o amarelo, certo? Você pode ver como ambos se complementam muito bem. E então temos o triádico, que é o amarelo, o laranja e o azul. E então temos a divisão complementar, que é o amarelo, o rosa, e o azul, e depois o quadrado. Você tem as montagens reais, certo? O quadrado aqui, você tem o amarelo, o laranja, o roxo e o azul. E então o retângulo, você tem o verde, o amarelo, o rosa e o azul. E então você vai ser capaz de usá-los em seus projetos específicos para que eles possam se elogiar. E você tem desenhos incrivelmente bonitos onde as belas cores. Agora vamos dar uma olhada nas cores quentes e frias. Obviamente, se você olhar para o topo lá, você tem legal, que é azul. Obviamente ele, você pensaria em quente. Você vai pensar no sol. Você vai pensar em amarelo, laranja. Quando você pensar em legal, você vai estar pensando em mais azul, verde, talvez um pouco daquele roxo. E assim as rodas de cor divididas em cores quentes e frias, também conhecidas como temperatura de cor. Diferentes temperaturas de cor evocam sentimentos diferentes. Lembre-se de como passamos nas lições anteriores onde temos cores diferentes que estão fazendo você se sentir de uma certa maneira, como segurança, garantia de segurança. E um bom exemplo aqui com as cores quentes é que é dito trazer à mente aconchego e energia. E enquanto você pensa sobre as cores legais, essas serão associadas com serenidade e isolamento coisa sobre o verde, certo? O verde vai ser tipicamente o que é usado como um aplicativo de meditação para isolamento. E assim entender a diferença entre as cores quentes e as cores legais e como estas desempenham um fator em como elas fazem as pessoas se sentirem certas no tipo de mensagem que está querendo ser transmitida pelo cliente. Então agora vamos dar uma olhada em alguns projetos aqui onde você pode obviamente dar uma olhada em OK, eu vejo que eles estão usando uma determinada cor. É por isso que estão usando certos esquemas de cores, certo? Porque eles estão tentando passar uma mensagem do esquema de cores sozinho, certo? As cores que estão usando. Estes são os melhores aplicativos de meditação por downloads nos EUA para 2018. Número um, você tem a calma headspace, Insight Timer, 10% feliz, 10% mais feliz, aura. E você olha para todas essas heurísticas, você pode dizer que eles estão olhando para transmitir uma mensagem de calma. Você tem as cores quentes aqui com amarelo e laranja, certo? Que é, vamos trazer à mente quente como o sol. Você tem um pouco de azul aqui, trazendo frieza, aquecido como água. E então você tem um no topo da tela. Então, todos eles estão transmitindo certas mensagens com os esquemas de cores. E é por isso que é importante entender o que esses diferentes esquemas de cores com essas cores diferentes representam, como elas fazem as pessoas se sentirem e como você pode usar diferentes combinações de cores usando a cor roda para ser capaz de trazer para fora o design ea aparência ea sensação do que o produto paran dot o aplicativo quer transmitir para o seu usuário. Então isso vai ser aqui para a roda de cores e esquemas de cores. E nos vemos no próximo. 17. Trabalhando com fontes: Neste vídeo, vamos trabalhar com fontes. Nós revisamos a psicologia das cores, essa teoria das cores, entendendo os diferentes esquemas de cores usando seus designs e você sabe como misturar e combinar cores diferentes para trazer uma certa sensação, certa emoção no usuário final real. E então agora o que vamos rever é como misturar e combinar diferentes tipos de fontes para que possamos fazer com que os usuários se sintam de uma certa maneira com base no uso de fontes específicas diferentes. Então vamos em frente e pular aqui. Ok, então aqui está a coisa. Quando estamos trabalhando com fontes, há uma certa psicologia de fontes aqui que precisamos estar cientes. Font diz algo sobre você, sua empresa ou qualquer tipo de produto ou serviço ou site de aplicativos que você está projetando para seus clientes finais, certo? Talvez até mesmo para você. Se você está desenvolvendo seu próprio site de negócios, você vai estar fazendo, digamos, consultoria de cliente, certo? Você quer entender como a psicologia de fontes funciona para que você possa usá-lo em sua vantagem em seus projetos específicos, em suas aplicações particulares e seja que você está projetando e construindo, certo? Assim, as pessoas têm certos sentimentos, emoções e associações quando vêem certas cores e têm o mesmo tipo de resposta a fontes diferentes. Se você olhar para a imagem aqui à direita, você pode olhar para os diferentes sentimentos que serão associados a várias fontes. E então, se você quer que as pessoas vejam os negócios como estáveis ou modernos, você deve se inclinar para uma cara tipo san serif. E olhando para estes aqui à direita, você pode olhar para um tradicional, estável e um pouco de elegância lá com o cursivo. E então temos o moderno com forte tipo de fonte. Então, em última análise, o que você pode fazer é realmente usar esta imagem em particular aqui. E para ajudá-lo a entender melhor quando é o momento certo para usar que tipo de fonte. Como você pode ver aqui, de tudo isso, eles são todos doados. diferentes, sentimentos diferentes apenas a partir do olhar da fonte, porque você pode apenas ter a fonte sem cor, nada mais em si e por si só vai emitir um certo sentimento, certa emoção, e vai transmitir um pouco apenas daquele texto, certo? Porque você quer olhar para o que é o significado por trás do texto real, o estilo. Então, quando olhamos para fontes diferentes, queremos olhar para as diferentes categorias. Então temos o serif, Esta é a autoridade de respeito de confiança para a doença, assim como vimos no slide anterior. Temos o San Serif. Este é o simples trusts modernos e sofisticado tipo de tecnologia focada na vanguarda. Então temos o manuscrito, Temos o display, o monospace, e há milhares de tipos diferentes de fontes. Mas você realmente quer obter a compreensão fundamental dos diferentes tipos de fontes e o que eles estão realmente significando e transmitindo. Porque você quer ser capaz de ter o tipo certo de fontes como um cabeçalho e ter o tipo certo de fonte no parágrafo. E às vezes faz sentido ter o mesmo tipo de fonte e outras vezes faz sentido ter dois diferentes. Então, e se você olhar para o meio aqui, você olha para o, oops, e você tem as letras muito longas, certo? E quanto à fonte, e então você vai para baixo, você olha para o texto do parágrafo real. É completamente diferente. Às vezes pode fazer sentido ter o mesmo tipo de fonte no cabeçalho e, em seguida, o mesmo tipo de fonte também no parágrafo. No entanto, para Mais frequentemente do que não, será melhor para você ter um tipo específico de fontes para o cabeçalho e outro tipo de fonte para os parágrafos reais. Então ambos podem se elogiar e vai ser mais fácil de ler. E como eu disse, você quer ter certeza que vai ser fácil o suficiente para você ler e para qualquer um ler. E às vezes pode fazer sentido usar o mesmo tipo de fonte no topo até o título, bem como o parágrafo. E às vezes não é mais frequentemente do que não, não vai fazer sentido. Você deseja ter um formulário específico para o título e outro tipo de fonte para o parágrafo para que ambos possam ser lidos facilmente. Aqui estão alguns recursos úteis. Você pode olhar para fontes dot google.com, font paradoxo, font, joy.com. Você pode realmente comprar diferentes tipos de fontes também. E você pode comprar algumas de suas próprias fontes se você não quiser usar as padrão que vêm com todas as ferramentas diferentes, tanto quanto o Microsoft Office ou o pacote Microsoft. Basta lembrar de um entendimento aqui que quando você está emparelhando fontes, você quer que ele seja onde o título é sempre fácil de ler e muito agradável e claro, bem como um parágrafo para que eles não estejam confusos e é difícil de ler. Ok, então agora vamos dar uma olhada na hierarquia tipográfica. Este é essencialmente um sistema de organização de fontes que estabelece em ordem de importância, permitindo que o leitor navegue facilmente pelo conteúdo. Hierarquia tipográfica mostra ao leitor quais informações focar e qual é a mais importante e qual é simplesmente suportado os pontos principais. Se você olhar para o primeiro exemplo aqui você tem o título um e, em seguida, você tem os diferentes textos lá em cima, tanto quanto o texto do parágrafo, e isso vai ser em H1. E então você tem na parte inferior lá H2, que é um pouco menor. E então você tem o texto do parágrafo e, em seguida, você tem o botão lá. Agora, nesta situação particular, dependendo da aparência e design que você pode querer ter em H 1 primeiro. E isso é realmente prevalente em postagens de blog quando você olha para títulos diferentes, subtítulos diferentes, você sempre vai encontrar cada um dos melhores. E depois de alguns parágrafos desse H1 específico, esse título um é coberto, então você vai para H2 e ele vai ficar menor em tamanho, tanto quanto o tamanho do texto. Mas isso é tipicamente o que você verá em uma postagem de blog onde você tem H1, H2, H3, H4 tipicamente. E é normalmente indo para onde o tamanho do texto real como você vai mais alto nos cabeçalhos. Então, se você quiser ver um exemplo disso, eu recomendo apenas puxar para cima qualquer tipo de blog ou, você sabe, um site de blog lá fora tem um monte de artigos, artigos de notícias, e você vai notar que você terá o H1, que é o tema principal do blog e do que se trata. E então todos os outros títulos são o subtópico. E então alguns dos principais fatores a ter em mente com a hierarquia tipográfica são a fase de tempo, o tamanho, o peso, a altura da linha, o espaçamento entre letras, os esquemas de cores, se você tiver alguma coisa lá, o caixa de carta. Porque se você está indo para h3, h4, h5, então isso significa que os textos de cabeçalho vai ficar menor. No entanto, você não quer torná-lo muito pequeno. Estamos misturando com o texto do parágrafo, certo? Então certifique-se de que você está ciente disso. Você tem apenas alguns fatores-chave para ter em mente quando você está usando a hierarquia tipográfica. E então, em última análise, quais são os benefícios da hierarquia tipográfica? Orientação mais fácil nas informações ajuda trimestres, então aplicados estilos diferentes, certo? Se você está seguindo essa hierarquia em particular, é realmente fácil de escalar. Ele acelera o processo de design. E, em seguida, aqui estão alguns recursos diferentes e você pode usar também archetype att.com, design systems.com e Material dot o. Lembre-se que isso é algo que você está indo para ver normalmente em um site ou para a maior parte, você vai ver isso em posts de blog que, você sabe, vários subtópicos diferentes, você sabe, com um tópico principal. E você vai vê-lo com vários milhares de palavras dentro da postagem do blog. Então vamos para as fontes da Web e é olhar para o que exatamente uma fonte da Web é. Então há as fontes seguras da Web e, em seguida, a fonte do sistema. E em termos de fontes do sistema acho Arial Times New Roman para Donna ou Georgia como os principais exemplos das fontes seguras da web. Estes são os tipos de letra predefinidos encontrados na maioria dos diferentes sistemas operativos e dispositivos. Então pense em você puxando um documento do Excel ou um documento do Word. Esses são os que virão personalizados nesse pacote de software específico, certo, naquele Microsoft Office Suite. E estes serão encontrados na maioria dos diferentes sistemas operacionais e dispositivos, certo, como padrão. E, em seguida, temos as fontes da Web que são encontrados é parte das fontes padrão disponíveis em vários dispositivos, sistemas operacionais, e são especificamente projetados em licença para uso no site. Então pense em Open Sans e Rubato. Estas serão fontes especializadas que normalmente precisarão ser licenciadas. Portanto, é importante entender as fontes do sistema versus as fontes da Web, que você esteja usando o tipo certo de fontes para sua situação específica. Então, agora vamos olhar para os benefícios de ter as diferentes fontes da web, a personalização fácil para implementação front-end suportada pela maioria dos navegadores, certo? Ok, então agora vamos dar uma olhada na conversão de fontes em curvas. Agora, isso vai ser usado e como diferentes designs de logotipo, diferentes tipos de projetos em geral, talvez alguns aplicativos possam ser um site, certo? Mas principalmente para como branding ou personalização de fontes existentes. E então este é um bom exemplo aqui com o churrasco country e taverna. Novamente, isso é algo que será usado e situações únicas em que você poderá fazer isso no Adobe XD. E nós vamos ter algumas lições de caminhada para você ser capaz de percorrer e realmente olhar por cima do ombro teve que fazer isso para que você possa criar esses tipos únicos de designs também. Então isso vai estar aqui por trabalhar com fontes. E nos vemos no próximo. 18. Trabalhando com ícones: Neste vídeo, vamos trabalhar com ícones. Agora, os ícones são uma das coisas mais poderosas que você pode adicionar a um determinado aplicativo web, um site ou qualquer coisa que possa ser tão longe quanto o seu projeto em que você está trabalhando pois permite aos usuários e navega pelo site, o aplicativo mais fácil e também fornece uma interface de usuário muito bonito. Então vamos em frente e saltar aqui para trabalhar com ícones. Então, quando se trata de ícones, qual é exatamente o papel deles? Bem, os ícones representam uma grande parte de como os usuários navegam em torno de software, sites, aplicativos. E a pesquisa mostrou que os ícones, quando usados corretamente, podem melhorar a usabilidade, ser facilmente lembrados e melhorar o design das páginas da Web e do software que está sendo usado. E uma das coisas mais importantes aqui para ter em mente é que o ícone deve sempre ter um rótulo de texto a menos que você tenha o ícone que é universalmente compreendido ou conhecido, você tinha sido, você normalmente não iria precisar de texto junto com o ícone real. No entanto, aqui está a coisa que você pode ter. Como digamos, por exemplo, esta aqui, esta lâmpada, isso pode significar muitas coisas diferentes em diferentes contextos, certo? Então é por isso que faz sentido que, na maioria das vezes, você use os ícones seguidosde algum texto para você use os ícones seguidos que você possa dar algum contexto por trás do que você está tentando dizer lá. Qual é o seu significado, certo? E então agora vamos dar uma olhada em três ícones diferentes aqui que eu puxei do meu site onde você pode olhar para a lâmpada lá. A lâmpada está representando uma estratégia de marketing e, em seguida, a apresentação lá com as pessoas. E você pode ver lá no número dois, isso representa a geração de leads e, em seguida, número três, suporte de vendas. Então, como você pode ver, muitas vezes esses ícones por si mesmos podem deixar um pouco de confusão a menos que já seja um dado sobre o que esse ícone em particular significa. As pessoas vão precisar de algum tipo de texto lá para realmente dar-lhes algum contexto por trás do que você quer que o ícone real para representar e significar. Ok, então agora vamos dar uma olhada em alguns recursos aqui. Temos a pena icons.com. Há uma coleção gratuita de ícones e, em seguida, o con.com achatado, 2,5 milhões de ícones personalizáveis, gratuitos e pagos, e depois Icon finder.com, mais de 4 milhões de ícones SVG. E eles vão ser gratuitos e pagos. E então aqui está apenas um exemplo de um estilo diferente de ícones. Você tem o contorno típico e você tem o campo, e então você tem o multi-colorido. E agora o que eu quero fazer é ir ao meu computador e mostrar a vocês um site que não faz realmente um bom trabalho com os ícones em como eles estão usando-os na aparência geral do site. Ok, então estamos de volta aqui no meu computador. E como você pode ver aqui, este site é tracejado clicks.com e eles usaram os ícones e muito bem aqui. Então você pode ver aqui ícone bem aqui. E vocês notarão que cada um deles tem texto com isso porque vai ser difícil entender o que isso significa. Todo mundo entende o que significa um carrinho aqui. Isso pode significar muitas coisas diferentes dependendo do contexto. Vejamos alguns diferentes aqui. Isto é mais de alguns gráficos aqui vamos nós aqui em baixo. Vamos voltar para o topo. Aqui nós olhamos para o menu, os anúncios do Facebook, certo? Todos estes ícones diferentes aqui. Aqui está como um cartão de crédito. Aqui está o marketing de conteúdo de diretório, bem aqui para a agência, site, insights e alguns relatórios deslizam na educação ferramentas do mar. Eles não os têm aqui, mas eles fazem um bom trabalho aqui com os ícones. E como eu disse, é importante ter texto mais frequentemente do que não quando você está usando um ícone, porque na maioria das vezes as pessoas não vão saber o que isso significa e pode ser aberto para interpretação, certo? Então é por isso que é importante ter o texto lá. E então isso vai estar aqui para trabalhar com ícones. E nos vemos no próximo. 19. Aula XD - ferramentas, Manipulação de objetos e componentes: Ao selecionar uma opção manual para redimensionamento responsivo, você pode ver as maneiras de dimensionar seu objeto ou grupo de objetos e selecionar se deseja ter um Haidt fixo ou uma largura fixa. Selecione ambos. Nada mudará. Você pode apenas torná-lo menor. Se tirarmos o ódio fixo, podemos redimensionar o ódio k, c. Então você pode brincar um pouco com ele se quiser. Às vezes, pode ser útil conhecer esse recurso, usá-lo. Agora, como eu disse, estamos apenas explorando a interface do usuário para que você saiba, você saberá onde encontrar essa função e o que é essa função é quatro, ok. Em seguida, vai o modo de mesclagem. Você pode selecionar. Alguns deles também estão disponíveis no Photoshop. Então, para aqueles que trabalham no Photoshop, isso seria muito fácil de, para entender o que é isso? Mas agora, em termos de web design, eu não uso isso. Só é aplicável quando você deseja modificar uma imagem, uma foto. Mas quando se trata de interface de usuário, eu não acho que seja necessário, mas quem sabe? Em seguida, vão os cantos redondos ou diferentes rádios de cantos. Então você pode, e você pode mudá-lo simultaneamente em, para todos os quatro lados de quatro seções, quatro cantos. Você pode selecionar o traje ou rádios diferentes para cada lado e tê-lo diferente. Ok. Coisa legal que é destacada aqui. Quando você, quando você se concentra na entrada, ele mostra para qual canto esta seção é responsável. E sentir e contornar. Você pode selecionar a cor. Existem hacks, modais de cor RGB e HSB. Você pode usar todos eles. Depois de selecionar a cor que você gostaria de usar em todo o seu projeto, você pode adicioná-la pressionando o botão de adição. Para escolher a cor do projeto. Você pode usar o ícone conta-gotas, tem zoom, e você pode clonar a cor para o seu objeto atual. Este pro é responsável pela opacidade do objeto. E você pode possuir o tipo de capacidade precisa. Neste campo. A opção de sombra tem várias configurações, muito úteis. Vejamos, tem uma cor. Então você pode criar a sombra para não só de uma cor preta ou cinza, mas você pode criar cores diferentes, o que quiser. Aqui. Você cria, seleciona a cor. Há uma tonalidade e a capacidade do, da própria sombra como a seção de campo x, y e b. B é na verdade quatro mais azul. Então seis como de costume, a configuração padrão, mas vamos ter 25. Por exemplo, você vê que é pássaro azul, é muito macio. X e y responsáveis por mudar a sombra de acordo com o acesso. Esquerda, direita, para baixo e para cima. Isso não estava disponível no Photoshop. Tanto quanto eu me lembro agora, os desenvolvedores estão muito felizes que podemos usar classificações precisas para sombras. E eles podem copiar isso para CSS sem problemas eles em CSS facilmente. A opção azul de fundo não é usada com muita frequência, infelizmente, porque não é suportada por todos os navegadores. Mostramos-lhe como se parece. Veja, há uma barra de rolagem para a quantidade, brilho e capacidade. Então, como eu disse, é muito chique, mas infelizmente não suportá-lo por alguns dos navegadores populares. Esperemos que com algumas atualizações terá esses fatos em todos os navegadores e marcação para exportação, marcando esta caixa de seleção levou o XD. Note que este elemento deve ser exportado para o seu projeto e pode ser baixado como um PNG, como VG ou qualquer lugar, depende do formato do objeto que você usa. Então é um seu exportado a imagem PNG, PNG aqui. E o desenvolvedor não pode baixá-lo. Basta ver as configurações dessa imagem precisa, mas ele ou ela não pode baixar a imagem até que você marque a imagem para exportação. Mas novamente, vamos chegar a isso mais tarde em nosso projeto de classe talvez agora seja apenas. Para saber que para a equipe de desenvolvimento, você tem que marcar para exportar elementos personalizados que você importar para o seu projeto. Para os objetos de texto, é quase o mesmo. Exceto pelo telefonado. Seu tamanho, estilo, espaçamento entre letras, espaçamento entre linhas, espaçamento entre parágrafos, alinhamento para o lado direito, central e alinhamento à direita. Essas duas coisas são novas, mesmo para usuários do Photoshop. Ele cria um parágrafo ou um único elemento de texto. Portanto, este é o texto do ponto selecionado por padrão. Então você vê que podemos mudar, podemos redimensionar o texto e arrastar este pin. Uma vez que criamos uma área de texto, tem uma caixa que pode conter várias linhas, linha a linha três. E você pode ajustar a largura e altura, se necessário. Com largura, altura, você ajustará o tamanho da caixa da área de texto. É necessário quando você tem o tamanho exato de uma área de texto. O ajuste de uma área de texto geralmente é aplicado quando você tem colunas iguais e você precisa preservar o mesmo tamanho para cada área de texto. Outra coisa que temos para o texto é a letra maiúscula, minúscula título k, sobrescrito, sublinhado subscript tachado. Há um sobrescrito. Agora, é subscrita diz sublinhado e este strikethrough, nada complexo. E você pode notar que nossa seção de ativos está vazia agora porque não temos nenhum, vamos criar um ativo. Vou criar um botão. Vamos ver. Vamos escolher uma cor. Temos um botão de envio. E vou acrescentar, vou criar um competente a partir deste botão. E verá que temos um componente aqui. fundo ou a outra coisa são as cores aqui. É pico algumas cores. E pressionando o botão direito do mouse, quem pode adicionar essas cores aos seus ativos? Aqui vão eles. Veja. Hoje estará aqui a tempo de você trabalhar neste documento. Até que você os apague. Veja, deixe-me deletá-los. Você pode editar destaques na tela de desenho, renomear aplicar o campo, mas ele estará disponível quando você aplicar vários objetos. Copiar renomear meu nome, são úteis quando você tem um guia de marca. Então você pode adicionar essas cores inicialmente executado desde o início. O próximo é o componente. Sim, vamos voltar ao nosso componente. Então este é um componente parental que criamos. E vamos pedir copiá-lo em algum lugar. Veja quando eu altero o título no meu componente parental, ele altera esse título em cada um dos elementos filho. Mas quando mudamos o elemento criança, essa carne, nenhum elemento é afetado. Ok. Vamos imaginar que temos duas telas. Este, este, e muitos deles. E é muito demorado mudar este botão em todos os lugares. Posso mudá-lo aqui. Somente. Digamos que decidimos ir com outra cor. Veja o que acontece. Ele mudou sua cor em todos os lugares devido a este elemento já está ajustado. Não será alterado, não será afetado por mudanças no engajamento dos pais. 20. Aula XD - estilos de fonte e configurações: Em seguida, vai os estilos de personagem. Vamos apagar isto para limpar estes quadros de arte e direção. Agora temos que ir. Temos o nosso estilo gráfico, slogan e sub-título. Então vamos criar um parafuso telefonado para a direção e torná-lo em maiúsculas. Gosto de usar cores diferentes. Dirigindo. Parágrafo irá codificar com T's e subtítulo, mas gostaria que ele tivesse itálico. Então, temos uma linha de tag de parágrafo cabeçalho e parceiro de legendas para 2p deve ser muito menor. Novamente, é um exemplo. Não sei como ficaria no produto real, então nenhum julgamento. Aqui. Vamos remover isto. Agora. Tenha cuidado com ele, com o tamanho da fonte. Eu sugiro que você fique com números iguais como 80 ou 75. Então você quer massa com o com tamanhos em seu documento. Primeiro de tudo. Em segundo lugar, os desenvolvedores front-end adoram quando você tem tudo preciso, mas se o projeto requer ter 61, por exemplo, não se preocupe. Você pode usá-lo. E apenas tentou preservar a precisão incisão, o espaçamento e assim por diante, que parecem mais matematicamente corretos. Então eu terminei este mosaico de texto em nosso projeto imaginário. E vamos adicionar estes dois. Eram ácidos no caráter ao estilo. Esse estilo de personagem para ácidos. Aqui vamos nós. Agora estamos indo mesmo para detectar linha e quatro parágrafos para apreender o PI para nome mais curto. E sim, então temos. Tudo aqui, podemos apagá-lo ou mudar-nos para algum lugar. Vamos copiar algum texto para mostrar como os ativos funcionam. Eu copiar o texto T futuros, e ele se aplica automaticamente d última telefonou que usado por dt. Temos que criar uma coisa bonita, muito bonita do que esta. E eu seleciono o título, o slogan. E temos algo assim. Para a versão móvel, você provavelmente pode criar outro estilo e colocá-lo também nos estilos de caracteres. Você pode aplicá-lo mais tarde. Assim, você pode adicionar ícone personalizado, legis ícones alimentador. Você pode usar alimentador icons.com para muito bom. Posso arrastá-lo para o seu projeto. C Aqui temos eu posso, podemos fazer um competente e editar para compostos também. Está bem. Novamente, uma vez que o elemento parental é alterado e é principal competente, você vê que o outro vai mudar também. Se selecionarmos o papelão pressionando o nome, veja que existem algumas configurações aqui. Então é uma orientação de retrato e paisagem. Ele tem um redimensionamento responsivo, rolando nom vertical. Viewport. O que é c? Um, o fundo da pré-visualização. Você pode torná-lo transparente. E Layout Create é que somos um melhor alinhamento. E novamente, para melhor e mais rápido desenvolvimento web da maquete. Você pode usar padrão e fazer padrão. Se você quiser. É uma grade quadrada é útil. Objetos gráficos. Ilustrações, provavelmente cartazes, banners. Mas o outro. Layout crit, é mais para web e mobile. Design. Pode apenas os dados de tamanho da calha com o número de colunas, a largura da coluna e margens. Então eu acho que é o suficiente para a apresentação agora. Você verá você em nossa próxima lição x e tentará explorar os recursos se ainda não o tiver feito. Muito obrigado. Vemo-nos na nossa próxima lição. 21. Ferramentas de software de design gráfico: Ok, então neste vídeo, vamos rever os diferentes tipos de software de design gráfico que você normalmente usará no toque UX UI. O primeiro aqui é o Photoshop. Agora photoshop é normalmente vai ser usado principalmente com imagens. Podemos fazer um monte de edição diferente faria imagens específicas. Você pode fazer um monte de personalização. Você pode adicionar elementos indiferentes. Agora, uma coisa a ter em mente aqui é que quando você estiver usando o Photoshop, ele normalmente será baseado em fotos e você está usando pixels, certo? Então o que isso significa é que digamos que você deveria ampliar uma imagem, certo? E você deveria ampliar 1000%. Você vai ver pixels individuais que estão fazendo a imagem. E você pode, muitas vezes perder qualidade e clareza dessa imagem dependendo do tamanho e da pixelização dessa imagem. Então, por exemplo, digamos que temos essa imagem aqui, certo? E nós íamos fazer zoom aqui. Você poderia eventualmente ver os diferentes pixels dentro desta imagem aqui, certo? Você vê as cores diferentes, mas você veria os pixels se fôssemos fundo o suficiente. E então, quando você pensa sobre o Photoshop, ele será usado principalmente para projetar um carro de edição ou base raster R. ele será usado principalmente para projetar um carro de edição ou base raster R. E então quando estamos olhando para a outra ferramenta aqui, tanto quanto o Adobe Illustrator, esta vai ser uma ferramenta diferente que está trabalhando fora de um vetor, ok? E que ilustrador, o que você está usando um pontos específicos. Está bem? E isso é algo a ter em mente aqui porque se pegarmos um vetor específico e conseguirmos ampliar 10 mil ou 100% mil. Nós nunca perderíamos essa qualidade porque apenas pontos que estão se conectando uns aos outros, certo? Então, se olharmos para uma imagem vetorial específica aqui, deixe-me trazer isso aqui. Se fizéssemos um zoom de 100% mil ou qualquer que seja o nível, nunca perderemos a qualidade. Então essa é uma das maiores diferenças lá, tanto quanto para o Photoshop. Obviamente, tem a foto do nome bem ali. Quanto ao Photoshop e Adobe Illustrator, esta é uma ferramenta que você está usando para criar muito mais das ilustrações, os gráficos, o design, o design gráfico diferente que gráficos diferentes e muitas vezes usando vetores. Ok, então estas são as duas principais ferramentas que você vai usar para design gráfico. O Adobe XD é o que também usaremos neste curso. Mas isso vai ser mais para interface de usuário e design de usuário. Ok, então só queria dar uma visão geral rápida aqui do Adobe Illustrator e Adobe Photoshop, e veremos você no próximo. 22. Adobe XD 4 - ícones e gráficos vetores: Olá e bem-vindos de volta às nossas aulas de prática de XD. Hoje, vamos rever os gráficos vetoriais e como trabalhar, gerenciar e editar os ícones do nosso aplicativo de perspectiva, vamos começar com a ferramenta caneta. E para ver como a forma poderia ser criada dentro desta ferramenta, você vê eu acabei de criar uma forma aleatória. E você vê, há alguns pontos aqui. Estes pontos, nosso trabalho de acordo com a fórmula mais movimentada, que é muito comum entre os gráficos vetoriais. E por clicar duas vezes você pode, você pode desligar o ângulo e você vê que você tem um controles sobre esses ângulos. Portanto, clique duas vezes ativa ou desativa as linhas curvas. Em seguida, você verá que existem algumas configurações para a linha. Também podemos desligar o preenchimento, por isso temos um objeto negrito. Agora vamos nos concentrar apenas no esboço. Então, primeiro, criar ícones para o seu projeto é muito útil para ter o seu concreto ligado. Vamos criar. E para mostrar a grade quadrada, você precisa selecionar a placa de arte pressionando o, o título da nossa placa. Marque a caixa de seleção com ganância e selecione quadrado. E geralmente 40 pixels é suficiente ou um ícone. E agora somos capazes de perfurar tamanho consistente para nossos ícones. Ok, então, em termos de nossa aplicação, podemos ter alguns ícones para categorias das meditações que temos dentro do aplicativo. Vejamos, temos meditação do sono, tress, ao vivo real, progresso e casa. Certo, vamos reorganizar um pouco. Casa, sono, alívio do estresse e excita nosso progresso. E casa representará conjunto de meditações que serão oferecidas por padrão para o usuário. Agora, quando definimos os ícones que precisamos quando começamos a desenhar, eu posso ou poderia ser criado de várias maneiras. Você pode usar uma combinação de formas geométricas que já são barra de ferramentas existentes, digamos triângulo. Você também pode ter. Você também pode usar emaranhado de tijolos se você precisa terminar. O último é a ferramenta de forma ou caneta. Podemos usar este para mais personalização da nossa forma. Vamos lá. Então vamos começar com o ícone mais simples, que é ícone Início. E você provavelmente adivinhou. Pode ser uma fusão de dois ícones. Só precisa ser muito cuidadosamente alinhado aqui. Está bem? Temos a forma de uma casa. Agora, precisamos criar um barco. Eu não quero que eles sejam preenchidos. Vamos fazer ângulos um pouco arredondados até aqui. E agora é hora de conectar isso para moldar com este botton. Então temos uma espécie de omicron. Vamos adicionar uma porta. Não será mais parecida. A casa. Não precisamos que o fundo seja cercado por um duplo clique. Você tem o acesso aos elementos separados. Você pode modificar seu ícone onde quiser. E vamos agrupar este símbolo e a um elemento. E vamos fazer os lados da borda dois pixels. Eu quero cortar um pedaço de nosso elemento porta, como parece que ele não parece bem. Então, para cortar um objeto de outro, você pode usar a função Subtrair. Então eu apaguei a parte de baixo. Agora parece que o nosso ícone se parece com a nossa casa. Vamos tentar mudar o raio. Parece um lar. Então agora eu posso mudar a cor do ícone, tem um elemento inteiro porque ele é agrupado e eu posso acessar o elemento separador dentro deste ícone clicando duas vezes terminou, pode modificá-lo se necessário. Ok, isso é um ícone mais ou menos simples. Vamos tentar criar algo personalizado. E a seguir, nós deslizamos a meditação. Eu acho que o símbolo da lua é bastante apropriado aqui. Mais uma vez, precisamos seguir o mesmo estilo e este ícone, bem como para que todos eles são consistentes significa que temos que aumentar nossos lados de adoração da fronteira, mudar a cor e desativar o Phil. Eu acho que podemos excluir e ter o, Mas você vê, se compararmos esses dois ícones, Este é mais afiado e não se encaixa bem com o primeiro ícone. Então precisamos mudar esse canto. Como eu disse em todos os ícones anteriores, podemos acessar o outro elemento clicando duas vezes e precisamos modificá-lo um pouco manualmente. Então nossa lua será arredondada como o, como nosso lar é. Então, para criar um novo ponto, você precisa pressionar um clique. Se o seu conjunto de ícones precisa ser arredondado, para ter cantos arredondados, que você tem que fazer o seu melhor para criar ícones que parecem consistentes. Caso contrário, ele não será um pouco profissional na sua interface. Por favor, evite quando este controle vai na outra direção. A melhor maneira de criar um cantos suaves é ter uma linha reta aqui. Vou apenas perceber que podemos fazê-lo de outra forma sem usar quaisquer formas adicionais. Acho que isso está muito perto do que estamos buscando. Talvez eu precise adicionar alguns pontos de apoio. Está bem? Sim, aqui vamos nós. Temos dois ícones deste mesmo conjunto. Seu próximo é alívio do estresse e emocionante. Bem, é claro, para criar um ícone, você precisa ter uma idéia de como deve ser. A outra coisa é criar o ícone em si. Acho que é algum tipo de flash ou seria apropriado para alívio do estresse. Mais uma vez, tem que usar o mesmo estilo para cada um dos nossos ícones. Alguns de seus ícones podem ser mais altos ou mais largos do que os outros em seu conjunto, porque depende da forma e objeto que você está tentando ilustrar. Se você quiser ter cantos arredondados, você pode adicionar o manualmente, embora ansiedades, coisa agressiva ainda precisa ter um ícone bonito. Eu quero vivê-la um pouco girada sociedade Qing. Então temos um progresso. O que poderia comunicar um progresso? Bem, podemos criar uma bandeira. Então, para criar um ícone de bandeira, precisamos criar um retângulo no raio do canto antes de nossa manipulação. Porque quando você começar a personalizar a forma, ele não terá mais os futuros de canto arredondado depois que você tiver criado pelo menos 1 do seu próprio, ok? E eu vou usar uma ferramenta de linha simples que é acessível pressionando L como uma tecla show. Agora temos quatro ícones para o nosso aplicativo, que são casa, sono, ansiedade e progresso. Talvez não seja a melhor maneira de categorizar o aplicativo dessa maneira. Mas esta lição é apenas para mostrar como você pode criar seus próprios ícones personalizados, se necessário, no caso de você querer economizar algum tempo e você não se sentir confiante em termos de ícones de desenho, você pode visitar sites como Peter icons.com, fugiu ICANN.com. Eu posso encontrar r.com e pegar ícones desses sites. Seu profissional há ícone alimentador é livre, os outros ícones de recuperação e premium dentro, que você possa escolhê-lo de acordo com suas preferências. Você pode escolher quem um dos vários estilos que estão disponíveis para ícones, há mais, mas vou listar os três principais. Então este é esboço exatamente como nós projetamos para o nosso aplicativo. Este é com um fundo sólido. Então, a mesma forma, mas com o fundo. E este é um ícone multicolorido plano. Ela tem mais detalhes em que parece mais rico do que os dois tokens anteriores. Está bem? A maioria dos designers que vão com o esboço porque é na moda, é flexível, é fácil recriar outros elementos e ícones coleções que eu posso definir, eles são mais ricos em termos de contorno ou ícones negrito em vez de cores completas, mais ou menos realista, eu posso estilo. Então, estamos de volta aos nossos ícones de aplicativos e vamos colocar ícones em seus lugares. Lembre-se que temos o f2 t, Temos 40 pixels área quadrada para nossos ícones. Chama-se contentor. Então eu posso ser menor, mas o recipiente tem 40 pixels. Acho que podemos remover a porta aqui. Tem, não parece o mesmo estilo. Agora estamos alinhando nossos ícones a uma linha horizontal. Isso é bom que temos para saudação coluna nos ajuda a alinhar nossos ícones corretamente para o layout geral. Quando eu estiver na tela inicial, podemos destacar isso de alguma forma. Esta única opção. A outra opção é torná-lo falador. Por favor, não se esqueça de criar condições diferentes para seus ícones, pois isso pode ser um problema enquanto o desenvolvimento e apresentação para as partes interessadas. Aqui podemos adicionar tipo de mente guia, muito comum nos dias de hoje. Para agora eu sou tela inicial ou não, é melhor tê-lo na parte inferior. Você pode fazer assim. Você diminui o, diminui a capacidade para esses ícones se você acha que é apropriado para a sua experiência de usuário quando diminuímos a capacidade para este ícone porque não é muito agradável. Isso iria com a versão anterior onde este botão já está pressionado. Acho que deveria ter mais contraste. Então, agora é assim que um Luke marroquinos na barra inferior. Agora você sabe como criar ícones na forma de contorno. E a última coisa que eu gostaria de salientar é que você precisa marcar ícones para exportação. Cada vez que você fizer o ícone personalizado, por favor, marque-o como especialista. Porque seus desenvolvedores não poderão baixar o arquivo SVG e implementá-lo no HTML. Ok, então muito obrigado pela sua atenção. Espero que essa lição tenha sido útil. Talvez você tenha outras idéias sobre como representar essas seções. Por favor, vá em frente e experimente você mesmo. Muito obrigado e nos vemos da próxima vez. 23. Visão geral de UX Design: Neste vídeo, vamos rever a visão geral da seção de design de UX. Então esta é a maior seção em todo o curso. Isso vai cobrir um monte de áreas diferentes, como a experiência do usuário, como o processo de design UX, que diferentes perfis de usuário e realmente mostrando o que exatamente o design UX é sobre. Esta lição em particular aqui vai lhe dar uma visão geral geral do que está por vir nesta seção em particular. Há muito para cobrir aqui, e estou animada para você começar. Então vamos em frente e saltar para a visão geral da seção. Então, o que vamos abordar primeiro é o que exatamente UX design? O que isso significa? Como ele funciona no processo de design de UX real? E então o processo de análise, que é muito importante para você entender, bem como um designer de UX. E então vamos entrar em perfis de usuário, pontos problemáticos do usuário, desenvolvendo uma persona, um avatar. Isto é essencialmente onde ele vai nos permitir realmente entender quem é o usuário final para que possamos criar o tipo certo de produto que vai ser capaz de levá-los a realmente querer comprar porque nós estamos fazendo isso especificamente para Eles, certo? E então vamos rever a jornada do cliente e, em seguida, a jornada do cliente versus um funil de vendas. Muito importante para você conhecer um designer de UX, especialmente quando você está tentando entrar em uma organização e ser capaz de ser extremamente valioso se você tiver conjuntos de habilidades adicionais e conhecimento, como entender psicologia de venda, Psicologia comportamental, funis de vendas, fatores de persuasão, certo? Você vai ser muito mais valioso para essa organização em particular. E vamos repassar as três fases de um funil de vendas, os quatro estágios de um funil de vendas e, em seguida, macro e micro conversões. Vamos para diferentes funis nesta lição em particular. E vamos passar por cima de um funil de geração de leads e, em seguida, um funil de vendas de produtos digitais também. E então uma das maiores coisas que você vai querer entender é a sofisticação do mercado. E vamos entrar nisso com muito mais detalhes nas lições. No entanto, a sofisticação do mercado está realmente dando a você uma compreensão de onde o usuário está na jornada real, certo, ao longo do caminho que ele realmente comprou um produto, quer eles estejam ou não conscientes de um problema de uma compreensão de onde o usuário está na jornada real, certo, ao longo do caminho que ele realmente comprou um produto, quer eles estejam ou não conscientes de um problema de ponto de dor que eles podem ter e onde exatamente eles estão no processo Holbein. Então a próxima coisa que vamos cobrir são os sete princípios de influência. Vamos passar por cima do fluxo de usuários. Vamos rever storyboards, quadros de humor, os wireframes de baixa e alta fidelidade e, em seguida, desenvolver protótipos. Em seguida, temos o teste e avaliação e, em seguida, os resultados UX. Então esta é, como eu disse, uma seção muito grande aqui. É muita informação, mas vai fazer de você um designer de UX bem arredondado porque muitas vezes quando você entra em uma organização, eles normalmente vão ter uma pessoa lidando com uma área. Mas se você estiver entrando em, digamos, uma empresa de pequeno a médio porte, ou talvez até mesmo como uma startup, você conhece todos os diferentes fatores aqui, tanto quanto um funil de vendas, a diferença entre a jornada do cliente um funil de vendas e os diferentes tipos de funil de vendas. E especialmente com a influência e persuasão, uma vez que você é capaz de ter essas habilidades adicionais adicionadas ao seu repertório, por assim dizer, certo? E você será um ativo extremamente valioso para qualquer organização, certo? Porque a maioria das pessoas que são designers de UX UI normalmente são bem versadas em uma área. Mas se você tem um monte de habilidades diferentes dentro do espectro de marketing, então você vai ser extremamente valioso. Então isso vai estar aqui para este, e nos vemos no próximo. 24. O que é design de experiência do usuário? UX): E bem-vindos a todos. Você está na seção de design da experiência do usuário. E neste vídeo, vou explicar os principais conceitos e metodologias de UX. Por favor, tente ver o quadro completo, mas não os materiais de entrega e as atividades de uma maneira separada. Isto é tudo parte de um. Você só acha que eu gostaria de apontar antes de eu continuá-los como que eu vou explicar muitos, muitos tipos de coisas que são que podem ser incluídas no processo UX. No entanto, seu projeto pode não exigir ou você não pode fazer essas atividades, este material de entrega, este tipo de pesquisa por causa do período de tempo, onde por causa de um orçamento apertado. De acordo com Don Norman, existem quatro princípios principais que você tem que seguir fazendo o design centrado no usuário. Ok? Então, o primeiro é entender e resolver os problemas centrais quando você faz o, o design do produto que você tem que tentar entender o que dores, Que frustrações as pessoas experimentam com um tipo semelhante de produto. E também tentar resolvê-los, mas não em nível baixo, mas no mais alto, em um nível geral. Como eu gostaria de adicionar vários produtos no meu carrinho de compras em alguma loja online k, E eu gostaria de fazê-lo, mas o sistema não tem deficiência no momento. Então você oferece você introduzir várias ordens, vários produtos em seu sistema de carrinho em passos do pai não pode lidar com as múltiplas ordens e significa que você reduzir a solução em um nível, mas você não pensou sobre o que será o próximo estágio, como essas duas coisas irão interagir, como elas se conectarão e sincronizarão. Portanto, isso requer, é claro, trabalho próximo com o desenvolvedor ou equipe de desenvolvimento. Depende do projeto. Tentou ver toda a imagem, não apenas uma coisa, porque provavelmente quando você resolver esta única coisa, você vai mudar uma coisa em um lugar. Isso terá um impacto sobre um pai, módulos pai e experiência pai de seu usuário. Resolva os problemas fundamentais subjacentes, não os sintomas. Pergunte por que cada questão, quando a resposta é erro humano, continue seguindo o erro, cure o que poderia tê-lo impedido. E o próximo princípio central, acordo com Don Norman, é B pessoas Sander. Bem, isso significa que você tem que projetar seu produto ou sistema, começando com as necessidades e habilidades de um usuário que irá usar seu produto. É simples porque grande parte dos procedimentos e dispositivos do sistema de hoje são lixadeiras tecnológicas. Eles projetaram em torno das capacidades da tecnologia, com as pessoas sendo solicitadas a preencher as partes que a tecnologia não pode fazer. Centrado nas pessoas significa mudar os dias, começando com as necessidades e habilidades das pessoas. Portanto, isso significa que se você já tem alguns requisitos que são técnicos e você está tentando construir a experiência do usuário sobre os requisitos técnicos do seu sistema. Isso não será um design centrado no usuário. Ok? Este design centrado no usuário coloca o usuário no centro absoluto do seu produto. E os requisitos e a funcionalidade do sistema crescem em torno desse centro central. Ok, vamos tentar dar outro exemplo. Vamos pegar um carro, por exemplo. Tem de ter quatro rodas, e este é um requisito para a maioria dos veículos. Mas ainda assim, quando você quer ser quando você quer que o veículo para tomar menos lugar, que você quer que o veículo para passar através do, você sabe, tráfego rodoviário. Você provavelmente vai projetar a motocicleta ou scooter. Está bem. Então, srta. Isso sim, eu gostaria de me deslocar pela cidade, mas eu também gostaria de gastar menos gasolina, para passar menos tempo no trânsito. Eu não quero ter um assento de passageiro. Estou viajando sozinho. E é por isso que provavelmente inventou a moto. E este é um exemplo amplo, mas isso realmente demonstra a abordagem centrada no usuário, quero dizer, centrada nas pessoas, ok, usar uma abordagem de sistema centrada na atividade. Isso é uma coisa muito interessante porque uma vez que eu comecei minha carreira UX, eu não considerei este um muitas vezes. Mas agora vou tentar explicá-lo em palavras simples para que você possa aplicar isso em seu trabalho e sua carreira de UX. Portanto, o design deve se concentrar em toda a atividade em consideração, não apenas em componentes isolados. Por exemplo, digamos que estamos na loja online, site e tentamos encontrar alguns dispositivos, ok. E adicionamos ao cartão. Um telefone inteligente, por exemplo, nós adicionamos e gostaríamos de adicionar mais um. Este site não tem esse recurso. Posso colocar no carrinho apenas um. Então u, sendo UX designer, irá introduzir uma ordem múltipla. O cartão será capaz de lidar com vários produtos dentro. Em seguida, quando uma pessoa tenta confirmar o pedido, parece que o sistema não tem esse recurso. Você não planeja. Então você saiu sem consideração. Pai, passos que são afetados pela sua solução. K que você mudou uma coisa em um componente. Você não considerou o outro que vai mais longe, você tem que tentar ver toda a imagem quando você está fazendo seu usuário, design de experiência de usuário. Use iterações rápidas de prototipagem e teste. Novamente, aqui está a parte interessante dos princípios de Don Norman. Porque eu amo prototipagem e eu faço isso com um prazer com o amor. E quando eu recebo feedback do usuário da equipe, eu realmente adoro apresentar, para resolver o problema, para mudar meu protótipo de acordo com o feed back, de acordo com sugestões. Seja uma parte interessada ou o usuário final, é difícil projetar uma solução perfeita desde a primeira avaliação. Acredito fortemente nisso e encorajo-o a confiar em mim. Não há nada de errado com as iterações para livre de protótipos. Com cada iteração, o protótipo torna-se mais refinado. Em utilizável. Dias de Indiana, você terá tanta satisfação quando seus usuários vão adorar seu protótipo. E não teremos nenhum comentário. Eles vão amar. Seu produto. Tail vai parabenizá-lo por, você sabe, por fazer essas experiências muito inteligentes, muito confortáveis para eles porque você resolve seus problemas, resolve seus problemas, você considera suas frustrações, valores, e assim por diante e assim por diante. Em outras palavras, tudo o que é feito com design centrado no usuário é feito para usuários. Consideramos sua idade, status social, hábitos, locais de trabalho nas escolas, problemas acredita que pinta um nível de renda, e assim por diante. Aqui, o usuário é colocado no centro absoluto de serviço ou produto que você está projetando. É por isso que é chamado de design centrado no usuário. E eu tenho a citação de Don Norman, que diz, design centrado no usuário significa trabalhar com seus usuários durante todo o projeto. Muito obrigado e nos vemos da próxima vez. 25. Processo de design UX: Ok, e vamos falar sobre o processo de design de UX neste vídeo. Normalmente divido em descoberta, prototipagem, teste e melhoria. É a mesma coisa que uma abordagem geral para uma gestão de projetos. Então, um ciclo desses quatro estágios é um em torno ou uma iteração. Os resultados são relatórios de auditoria, persona, storyboards, mapas de jornada do cliente do usuário, fluxos de usuários, quadros de humor, arquitetura de informações, sitemaps, wireframes, protótipos interativos e relatórios de teste. Não se preocupe se você não entender alguns deles, voltaremos à descrição e exploraremos cada entrega com mais detalhes. Agora vamos nos concentrar em quatro estágios, e vamos explorar o estágio de descoberta mais detalhadamente. Bem, sendo o primeiro estágio em seu design de UX, ele requer mais resultados e mais trabalho, e é o trabalho mais complexo e árduo. Comparando com outras etapas, você terá análise de uma análise competitiva do produto atual, perfis de usuário e persona, necessidades do usuário e pontos problemáticos, storyboards, jornada do cliente do usuário, mapa, fluxos de usuário, Placas de humor, wireframes todos dentro de um, estágio k. mas novamente, eu quero reiterar que seu projeto pode não exigir Alguns deles não precisam ser tão expandidos. Este é o modelo perfeito no melhor cenário na minha descoberta, eu uso modelo de design de diamante duplo. Quando pesquisamos, analisamos e sintetizamos, expandimos as possibilidades, expandimos as nossas descobertas. E temos muitas informações em mãos do que agrupá-las, classificadas, filtramos isso e selecionamos o que é necessário, selecionamos o que não é, selecionamos onde é importante, que é menos importante que poderia ser implementado no momento e isso não pode ser implementado. Então encolhemos nossas descobertas. Estamos definindo-os e, em seguida, chegar a um próximo diamante em que desenvolvemos e entregamos. E desenvolver e entregar significa que você protótipo, teste e refinar então, e só então temos o resultado. Então, há duas coisas para lembrar. Você terá muita informação, muitas variações, muitos exemplos em suas mãos, mas você tem que ter cuidado com todos eles. Você não pode apresentar todos eles em um só lugar. Você tem que agrupá-lo ordenado usando a maneira mais fácil de usar. Ok? Tentando entender a semelhança entre as coisas que você encontra e, em seguida, você convertê-los para protótipo, que também pode ter muitas revisões, em seguida, vai testar, e só então você pode refinar o design e ter resultado. 26. Funil de clientes vs Vendas: Neste vídeo, vamos analisar as diferenças entre uma jornada do cliente e um funil de vendas. Então, estou animada por este. Vamos em frente e pular aqui. Passamos a jornada do cliente em outro vídeo anteriormente, no entanto, quero dar-lhe uma visão geral rápida novamente do que se trata realmente. Trata-se realmente de ter um esboço detalhado. Cada passo ao longo do caminho que um lead leva, um potencial cliente ou cliente leva até se tornar um cliente pagante. E eles podem entrar em qualquer fase aqui. Pode entrar, talvez, ouvindo algum tipo de anúncio de rádio ou talvez lendo um blogueiro online, talvez algum tipo de site que tenha um anúncio com nossa promoção, talvez um anúncio no Facebook ou LinkedIn, Google, seja lá o que for, certo? Este é o processo final que um cliente passa para se tornar um cliente problemático real. A diferença aqui com um funil de vendas real é que o funil de vendas é um modelo que é usado para realmente comercializar adequadamente para esses leads individuais em diferentes estágios do ciclo de compra. E então, se você olhar para esta imagem aqui à direita, você vê no topo do funil há perspectivas, contatos, leads, finalistas e, em seguida, vendas. E então essa é realmente a maior diferença aqui, é que um funil de vendas pode ser usado como uma ferramenta dentro de cada estágio particular, certo? Digamos que alguém entra pelo site e preenche o formulário lá, certo? Para realmente saber mais sobre o negócio, sobre o produto. Então, depois disso, eles vão ser colocados em um funil de vendas que vai ter várias etapas diferentes que lhe permitem enviar suas informações. Talvez baixar algum tipo de PDF para obter informações gratuitas, ou até mesmo comprar algo a um custo baixo para que eles possam se familiarizar com a marca. E assim você pode realmente pensar sobre a jornada do cliente como uma visão de 50 mil pés. Esse é um esboço detalhado real de cada passo que eu lidero para realmente se tornar esse cliente. Um funil de vendas funciona dentro da jornada real do cliente porque um funil de vendas obter, tem um monte de diferentes peças móveis. Por exemplo, digamos que alguém entre e faça o download. E vamos entrar nisso nas palestras adicionais nesta seção em particular. Mas digamos que alguém fosse entrar pelo site e enviar suas informações, então eles são colocados em um balde separado, e eles são colocados em um funil de vendas diferente que, digamos, atira neles mensagens de e-mail uma vez por semana ou duas vezes por semana. E então, se eles responderem a um dos e-mails e baixarem um PDF para uma folha de truques grátis ou um novo livro, seja lá o que for, então eles vão para o próximo estágio. Talvez, talvez a próxima etapa seja levá-los a comprar algo de baixo custo. E depois de comprarem algo a um custo baixo, então eles estão se movendo para o próximo estágio do funil, que é fazê-los comprar algo a um custo maior. Então você está recebendo a imagem aqui que o funil de vendas normalmente vai ter um monte de diferentes peças em movimento, um monte de diferentes estágios. E vai ter diferentes células upsells para baixo, diferentes épocas. Isso é dar informações grátis para o usuário. Mas sempre estará dentro da jornada real do cliente. Nas próximas palestras, vamos passar por diferentes tipos de funis de vendas. E vamos rever as diferentes fases dos funis de vendas. E isso vai ser aqui para as diferenças entre a jornada do cliente e o funil de vendas. E nos vemos no próximo. 27. Três fases de um funil de vendas: Neste vídeo, vamos cobrir as três fases de um funil de vendas. Então isso é algo que você vai querer se conscientizar enquanto você está trabalhando no espaço de marketing, no espaço de marketing digital, especialmente se você está apenas começando sua carreira de UX, você vai querer participar normalmente, se você está procurando um emprego, uma organização menor, para que você possa ter alguma experiência. E normalmente esses indivíduos vão querer que você tenha um conjunto de habilidades diferente em diferentes áreas. Então, quando você pode realmente saber muito sobre marketing, e por UX UI, você vai ser muito mais valioso para essas organizações. Então vamos em frente e saltar para as três fases. Um funil. Então, os três vendedores diferentes ou fases podem ser divididos em MAF difícil e Bob, eu sei que soa meio estranho, mas é exatamente o que é usado para representar essas diferentes fases dentro de um modelo de vendas. Então, o topo do funil é tudo sobre educação. Ele fornece ao usuário informações relevantes e significativas sobre um produto ou serviço. Ou talvez até mesmo em branding. Basta pensar se você está vendo um anúncio no Facebook e tudo o que o anúncio do Facebook diz é, hey, nós fazemos X, Y, e Z ou, você sabe, nós somos sobre x e y. realmente não vende nada para você. É só dar a você essa consciência da marca que você possa saber que elas existem, certo? E isso é tipicamente o que você vê no topo do funil e promoções muito leves. Está bem. E então temos o meio do funil e esta é a fase de consideração. Agora entenda que as conversões podem acontecer a qualquer momento em todo o funil. No entanto, é aqui que você começa a segmentar o tráfego que já está quente e que já está interessado. Assim, por exemplo, no Facebook, o que você pode fazer é redirecionar as pessoas que já se envolveram e marca sênior anteriormente. No topo do funil, certo? Muitos dos anúncios são muito leves, muito indiferentes, muito não salesianos. Só estou te dando um pouco de marca e te avisando, ei, minha marca, meu produto está aqui. Isto é o que fazemos. E se as pessoas interagirem e se envolverem com esse anúncio em particular, então você pode colocá-los em um balde separado agora e movê-los para o meio do funil. Porque você já sabe que há alguns interesses lá. Talvez tenham assistido a um vídeo, talvez tenham assistido a um vídeo, sabe, 30 segundos. E isso está dando a você uma boa indicação de que há interesse lá. Então você quer colocá-los em um balde separado, movê-los para o meio do funil. E é aqui que você começa a ver algumas conversões porque são pessoas que já viram sua marca. E depois no fundo do funil. E é aqui que você redireciona públicos altamente interessados que não se converteram em leads ou clientes mais cedo no meio do funil. Então você pode ver aqui, o público está se movendo mais para baixo. E para cada etapa, o meio do funil são as pessoas que viram você no topo e, em seguida, a parte inferior do funil são pessoas que são altamente alvo porque eles viram você no topo, a marca sênior, o anúncios sênior que são muito assim, você sabe, não tentando vender um produto ou serviço, mas mais de branding. E então eles viram talvez o seu chamado leve à ação. No meio do funil. E por qualquer motivo, se eles são mesmo convertidos para o comprador, então você os move para outro balde, que é o fundo do funil. E é aqui que você vai encontrar muita convergência. Porque muitas vezes, especialmente se um produto ou marca, é novo, as pessoas precisam ver o produto Medici a marca várias vezes para se tornar confortável, para ter essa confiança em seu direito. E é por isso que muitas conversões acontecerão na parte inferior do funil porque eles viram a marca várias vezes e eles realmente interagiram com a marca e com os anúncios. E agora eles vêem esse produto ou marca em particular como confiável, e então eles vão puxar o gatilho. Ok, então vamos ver algumas das diferentes coisas que você estaria oferecendo em cada estágio do funil. Então, no topo do funil aqui nós temos, digamos um chichi, algum tipo de conteúdo educacional, uma consciência de problema de dor, consciência perda de oportunidade, ou apenas qualquer tipo de consciência como hey, nós ajudamos cães fazem X ou temos um aplicativo de meditação, nós existimos, certo? Algo super simples. Você também pode fornecer um grande ebook para download que lhe permite resolver um problema particular, ponto de dor particular. Muito do lado não salesiano das coisas, ok? E então o funil do meio aqui, aqui é onde você é capaz de ter algum tipo de proposta de valor, talvez algum tipo de guia de compradores, levá-los a ver alguns estudos de caso, alguns depoimentos, algumas métricas sobre por que seu você não faz sentido para esse mercado em particular, por que seria do seu melhor interesse por, e então é aqui que você começa a ver algumas conversões, certo? E então, na parte inferior do funil, é aqui que você também vai ver muito mais críticas, depoimentos. Você vai ver um monte de preços que talvez tenha colocado para fora suas demonstrações. E realmente onde você vai ver as pessoas que estão prontas para comprar, certo? E então note como em cada estágio que nós descemos no funil absoluto aqui, fica muito mais claro quanto ao que estamos olhando para fazer e a oferta fica muito mais específica certo? No topo estávamos apenas educando IK, estamos aqui, estamos no mercado. Ei, queremos resolver o seu problema dando-lhe um ebook gratuito ou talvez um link para um post de blog no funil da medula do site. Ei, nós temos este guia aqui que pode ajudá-lo a realizar XY e Z. Ei, veja alguns de nossos estudos de caso anteriores que conseguimos realizar. E então, finalmente, você realmente quer, no fundo do funil, martelar na prova social que analisa depoimentos, alavancando o que outras pessoas tinham experimentado, fornecendo o preço real, qualquer tipo de demos e onde você vai descobrir que as pessoas estão principalmente indo para estar pronto para puxar o gatilho. Está bem? Então estas são as três etapas de funil e você deve se tornar ciente de que isso é em um nível muito alto, porque em cada nível particular aqui, você pode ter um funil de vendas dentro dessa fase particular. Assim, por exemplo, o funil de medula pode consistir em vários funis diferentes nessa fase. A mesma coisa no fundo do funil. Digamos que o, você sabe, clique no anúncio e eles estão interessados em comprar, certo? Pode levá-los a um certo funil dependendo de suas ações anteriores, certo? E assim tudo depende das informações contidas nos dados coletados. Facebook é uma das melhores plataformas para poder usar publicidade para coletar dados e ser capaz de olhar para o que o usuário está fazendo, como eles estão interagindo com o que acrescenta aos eleitos uma mensagem. Eles gostam do que estão vendo, certo? E, em seguida, ser capaz de levá-los em diferentes direções com base em sua ação anterior. Então ele vai estar aqui para as três fases de funil de vendas. E nos vemos no próximo. 28. Quatro etapas de um funil de vendas: Neste vídeo, vamos passar por cima dos quatro estágios de funil de vendas. Agora, este vai ser o tipo mais comum de funil de vendas que você vê, tanto quanto os diferentes estágios. E também entenda que este vai ser um framework que você pode usar quando você está escrevendo cópia, se você já tiver a tarefa de escrever cópia porque digamos que você assume um trabalho em uma start-up e eles precisam que você use chapéus diferentes. Você ser capaz de entender os quatro estágios de funil de vendas e, em seguida, a estrutura de copywriting que vai em conjunto com isso será extremamente valioso para você e, em seguida, organizações. Então vamos em frente e pular aqui. Então, os quatro estágios de funil de vendas é o número um, o estágio de conscientização. O número dois é o interesse. Aqui é onde você está dando a eles a razão para manter sua atenção porque na primeira fase que você quer fazer é criar essa consciência, certo? Deixando as pessoas saberem, nós existimos, eu existo, você sabe, estamos aqui no mercado com os interesses que você está dando a eles uma razão para manter sua atenção. Talvez digamos parar com o que eles estão fazendo. Normalmente, como em um smartphone, você quer que eles parem de rolar no Facebook, Instagram ou qualquer plataforma que possa ser e você quer chamar a atenção deles. E, em seguida, a próxima etapa é a decisão que o desejo. Então, uma perspectiva, exatamente como a oferta em particular resolve um problema em particular, certo? E, em última análise, o público deve ser capaz ver como você está oferecendo pode tornar suas vidas melhores. E então o estágio final é a ação quando ela foi capaz de criar a consciência da marca, então os interesses, e então realmente criar o desejo. O próximo passo é persuadir a perspectiva de que eles devem tomar a ação imediata agora, certo? E realmente comprou um produto ou passar para o próximo estágio do funil. E então vamos em frente e dissecar isso um pouco mais fundo. Então o estágio de conscientização. Então é aqui que o usuário se torna consciente de um produto ou uma marca através publicidade como mídia social ou boca a boca ou qualquer tipo de referência, certo? É essa consciência que é criada. Número dois, a idade dos juros. É aí que o consumidor se torna interessado e engajado aprendendo sobre sua solução, produto ou serviço existente. Como, digamos que eles veem, por exemplo, um anúncio que diz, você sabia que você pode fazer ou você sabe, você está ciente disso? Você pode realizar XY e Z apenas fazendo y, certo? Algo assim em que você realmente está engajando os interesses deles. Você está fazendo com que eles parem e você está acertando os olhos deles? E, em seguida, a próxima etapa aqui com a decisão, é aqui que você realmente mostra as perspectivas exatamente como você pode resolver o problema deles. E você está fazendo com que eles tomem uma decisão para se comprometer e tomar a ação, certo? É aqui que queremos que tomem medidas imediatas. E queremos ter certeza de que está escrito. Muitas vezes, muitos anúncios ficam aquém porque não dizem às pessoas o que fazer. Há uma razão para muitos botões. Para fazer uma compra, digamos agora ou adicione ao carrinho. Porque você precisa fornecer algum tipo de experiência, certo? Onde você está conduzindo as pessoas através do funil de vendas aqui e você está levando-as através de cada passo e você está tornando super simples e fácil para eles comprar os produtos com pouco atrito. Porque uma das coisas chave que você tem que entender sobre psicologia, psicologia social, marketing, psicologia comportamental é que tomamos decisões de compra baseadas em emoções e justificamos logicamente, ok? Então, sempre que vemos algo e queremos comprá-lo, normalmente vai ser a emoção que nos faz querer comprá-lo ou está querendo nos dar os Byatt, certo? E então justificaríamos essa compra depois de logicamente, certo, por que fizemos isso, mas é a emoção que realmente está criando esse poder de compra. Então, agora vamos dar uma olhada em um exemplo add aqui, onde estamos usando essa estrutura para realmente escrever a cópia e o próprio anúncio. Ok? Então vemos aqui com esta oferta em particular aqui no Facebook, temos o framework Ada e estamos essencialmente promovendo uma oferta de implante dentário de US$1000 aqui. E como você pode ver aqui, nós temos no primeiro estágio, atenção. Consiga a atenção do público ao abordar um ponto problemático, desafiar ou chamar um público específico em si, certo? Onde o topo é sua atenção pode e de web. É aí que você está chamando o público específico, certo? Para que saibam que estás a falar com eles. E depois os juros. Aqui é onde você está descrevendo os benefícios da oferta, certo? Estamos dizendo: “Ei, há uma planta para apenas 999, esse é o benefício real. Você está ganhando algo por um grande desconto. E, em seguida, o próximo estágio, um desejo ou decisão. Você quer fornecer uma razão para que eles tomem medidas agora. E por isso, temos por um tempo limitado, estamos oferecendo dez visitantes pela primeira vez. Então estamos mostrando que é um direito limitado. E isso é uma razão para eles tomarem uma decisão agora. E então temos a ação. Então isso está dizendo a eles, ei, clique aqui, baixar agora ou reservar agora, certo? Seja lá o que for. Tem que ser sempre algo onde você está dizendo a eles exatamente o que fazer para que haja pouco ou nenhum atrito ao longo de todo este anúncio aqui. Porque lembre-se, é tudo sobre as emoções, deixar as pessoas animadas, fazer com que as pessoas tomem medidas baseadas em suas emoções, sem que elas usem o poder cerebral para realmente pensar tudo logicamente, certo? Porque então eles estão questionando sua decisão de iniciá-lo e Han e se perguntando se eles devem ou não realmente prosseguir com isso. E eles ficam, você sabe, o paradoxo da escolha versus apenas dizer, ei, isso é o que eu quero que você faça. É por isso que você deve fazer é pressionar seu clique aqui para ir para o próximo passo, certo? Então isso vai ser aqui para os quatro estágios de funil. E nos vemos no próximo. 29. Conversões de Macro/Micro: Neste vídeo, vamos passar por macro e micro conversão. Isso é algo que você normalmente vai ver no espaço de e-commerce on-line onde você tem como uma loja de e-commerce que tem algum tipo de produto que eles estão vendendo. E quando os usuários estão interagindo com esse site específico, aquela loja de comércio eletrônico, há várias macro e micro conversões diferentes que estão acontecendo durante todo esse processo de compra que esse usuário passa para realmente continuar o site e realmente comprar um produto. Então nós vamos percorrer com as macro e micro conversões estão nesta lição particular. Então vamos em frente e pular aqui. Ok, então vamos olhar para as macro e micro conversões. As conversões de macro são as ações que um usuário pode executar que representam o objetivo principal de um site. E então pense nisso. Um site que tem qualquer tipo de produto à venda. O objetivo final é fazer com que o usuário compre o produto. E então essa é a conversão de macro final. E ao longo desse processo, há diferentes microconversões que chegam lá ao longo do caminho. Portanto, as micro conversões são ações que um usuário executa que são críticas no caminho para alcançar uma conversão de macro. Como quais são os passos que um indivíduo está tomando o usuário para realmente completar o processo de compra e realmente fazer uma compra. E como acabamos de discutir com um site de comércio eletrônico, isso vai ser onde, digamos que alguém está em um site de comércio eletrônico, eles estão indo para páginas diferentes que dizem, por exemplo, alguém vai para o página do produto. Você pode ver aqui na primeira imagem na página do produto. E como você pode ver lá na parte inferior dessa página, há a quantidade, há um preço, há um número de caixas, e então o tem a capacidade de adicionar ao carrinho. Então, quando eles pressionam aquele botão lá, adicione ao carrinho, que é uma micro conversão. Está a levá-los à próxima etapa do processo. E como você pode ver aqui na segunda página, você pode ver no topo do carrinho. Então eles adicionaram um produto ao carrinho. E o final ali no fundo, é onde eles estão, a página do checkout. E você vai ver isso em muitas áreas diferentes, no entanto, onde ele é visto principalmente onde você realmente vê os diferentes baldes reais de públicos-alvo que são criados a partir de cada uma dessas diferentes interações está dentro do Facebook. Porque o que você pode fazer é configurar um pixel de rastreamento com a plataforma do Facebook. E então você poderá colocar um código em cada página individual que lhe permite saber quantas pessoas adicionaram o produto ao carrinho, quantas pessoas o adicionaram a uma lista de desejos? Quantas pessoas realmente foram para a página de checkout. E então você poderá mostrar a esses indivíduos o tipo específico de anúncios. Avisa-o, reparei que adicionaste produtos XYZ, carrinhos, mas não acabaste. Aqui está um desconto adicional de 10% para concluir sua compra. Isso é muito poderoso aqui porque permite que você crie esses diferentes baldes de públicos e veja onde as pessoas estão caindo no funil de vendas, onde elas estão caindo e fazendo a compra. Se você está vendo um monte de pessoas que estão adicionando ao carrinho, mas não concluindo, então isso significa que há algo lá que precisa ser consertado, tanto quanto ajudá-los através de todo esse processo de realmente concluir a compra, certo? Porque você quer tornar isso tão fácil, tão suave e sem atrito para o usuário realmente passar por todo o processo de compra do produto. Mas ainda é ótimo que você pode redirecionar pessoas que tiveram essas micro conversões e acabaram de chegar na página de checkout e que incompleto os mais velhos aqueles que adicionaram o produto ao carro. E há um monte de coisas diferentes que você pode realmente criar até os critérios de micro conversão que você pode adicionar a isso também. Mas isso vai ser bastante comum aqui para uma loja de e-commerce, alguém pousa na página do produto. Isso vai ser um balde de audiência. Alguém adiciona um produto para carregar outro balde de público lá. E então aqueles que estão na página de checkout e por qualquer motivo, distraídos que ao colocar suas informações de cartão de crédito, isso vai ser o público mais quente lá porque você começa a re-segmentá-los, deixando-os saber que eles não terminaram a compra. E você pode incentivá-los dando-lhes uma certa promoção, você sabe, 10% de desconto. Então, em última análise, entenda que a conversão de macro é a compra, certo? Queremos que a compra de testamento real seja concluída. Essa é uma conversão macro real. E, em seguida, a micro convergência são os passos que são tomados para realmente concluir essa conversão macro. Então isso vai ser aqui para macro e micro conversões. E nos vemos no próximo. 30. Etias de sofisticação: Neste vídeo, vamos repassar as etapas da sofisticação do mercado. É muito importante para você, como designer de UX UI, entender onde os diferentes usuários estão no processo de compra real. Falamos sobre a jornada do cliente, falamos sobre os funis de vendas e com os estágios de sofisticação do mercado, isso é o que vai ajudá-lo a entender como escrever o tipo certo de cópia se isso é algo que você também está indo para ser manipulado. Mas também é bom para você ter uma compreensão disso para que você saiba onde os indivíduos estão, tanto quanto os usuários, tanto quanto a consciência desse produto em particular, você quer ter uma compreensão de onde o usuário está mentalmente. Eles já viram produtos diferentes na medida em que eles vendo outros produtos no mercado que são semelhantes, que têm características semelhantes, que têm características e funcionalidades diferentes semelhantes. Portanto, é importante que você entenda os diferentes estágios da sofisticação do mercado e o que a sofisticação do mercado significa em última análise. Então vamos em frente e pular aqui. Sofisticação do mercado é um termo usado para descrever o nível de consciência do mercado, certo? Seja qual for o mercado em que você está entrando, digamos que você está olhando para projetar um aplicativo ou você está trabalhando com a empresa que está projetando um aplicativo para meditação. Você quer ser capaz de entender quantos aplicativos de meditação diferentes estão lá fora. O que eles estão fazendo? Quanto é o marketing deles? Eles estão apresentando tanto quanto suas mensagens classificadas? Então vamos entrar em diferentes estágios aqui em um momento, mas eu quero dar a vocês visão geral do que é a sofisticação do mercado. E este foi um termo que foi cunhado pela primeira vez por um copywriting peso pesado, um dos melhores para viver e fazê-lo usando Schwartz em seu livro inovador, publicidade inovadora, que eu recomendo que você confira se você quiser também obter uma compreensão dos princípios de direitos autorais. E então a pergunta chave a fazer aqui é, quantos produtos ou serviços similares já foram informados sobre o seu mercado antes? Eu mencionei o aplicativo de meditação. Então você quer ver quantos outros aplicativos de meditação estão lá fora. Qual é a mensagem deles? Como eles estão sendo apresentados? Qual é a saturação do mercado? Há um monte de produtos meio que fazendo e dizendo a mesma coisa? Como estão a diferenciar-se? Então é isso que você realmente quer saber quanto à sofisticação do mercado. E então, agora vamos em frente e saltar para os diferentes estágios. Então, há cinco estágios diferentes de sofisticação do mercado. A primeira etapa é onde o mercado é completamente inconsciente. Eles não têm conhecimento de um produto em particular, certo? Digamos que, no que diz respeito aos aplicativos de meditação, eu não sei qual foi o primeiro a sair. No entanto, quando essa primeira meditação saiu, isso era algo que era bastante fácil de vender porque era novo e o mercado simplesmente não sabia que esses tipos de coisas existiam. Então, foi bastante fácil vender isso para o mercado. E o número dois, no que diz respeito aos estágios da sofisticação do mercado, é aqui que a Prospect sente que eles têm um problema, mas eles não sabem que há uma solução, certo? Então eles querem talvez algum tipo de serviço de meditação guiada lá fora que é capaz de levá-los a um estado de meditação profunda. Chuva. E não há nada lá fora no mercado. Isso é até eu acreditar que o headspace entrou e eles realmente dominaram o mercado, tanto quanto a meditação guiada. Então, número dois, é aqui que eles sabem que têm um problema, mas eles realmente não sabem que há uma solução lá fora. E, em seguida, número três, é aqui que a solução deles está ciente. Então, o cliente sabe exatamente o que eles querem. No entanto, eles não sabem que, você sabe, seu produto é capaz de fornecer isso para eles para que eles saibam exatamente o que eles estão procurando. Eles só não sabem sobre o aplicativo de meditação XYZ. E depois há o estágio número quatro. Este é o lugar onde o usuário sabe que há um produto lá fora, mas eles não sabem se o produto é o ideal para eles. E então precisa haver alguma diferenciação lá. Tem de haver algum convincente, alguns persuadindo sobre o que o seu produto faz diferente do resto da concorrência. E por isso é fácil de vender, certo? Temos um aplicativo de meditação, estágio dois. Eles entendem que eles têm esse problema. E então você pode se safar apenas dizendo, hey, este é o problema que você tem e é assim que podemos resolvê-lo. Número três, você realmente precisa ser capaz se diferenciar e fornecer uma solução única. E então número quatro, aqui é onde você precisa realmente diferenciar seu produto e deixar as pessoas saberem que, ei, escute, eu existo. É por isso que somos melhores. É assim que fazemos as coisas de forma diferente. É por isso que nosso aplicativo é melhor do que o resto da concorrência, certo? Então você percebe que em cada estágio, o comprador se torna mais sofisticado. Eles se tornam mais compreensivos e sabendo das diferentes opções que eles têm no mercado, certo? E então afirma cinco, Este é o lugar onde eles estão mais conscientes, o usuário, o cliente potencial, eles não precisam ser vendidos em todas essas coisas diferentes loucas únicas como, hey, meu aplicativo faz isso por aplicativo faz isso. Eles só querem saber o acordo final. Eles só querem saber, hey, qual é a linha de fundo aqui, certo? Então, à medida que você desce os diferentes estágios, o comprador real, o usuário, fica mais sofisticado. Então a mensagem tem que mudar e você tem que olhar para o que é a concorrência atualmente lá fora dizendo e fazendo, e está levando-os para os usuários. E então você será capaz de ver em que estágio do mercado, tanto quanto a sofisticação do mercado que, essa base de usuários está, nos estágios iniciais, nos estágios 12, você pode escapar apenas dizendo, hey , temos um novo aplicativo de meditação. aplicativo de meditação de cabelo ajuda você a meditar melhor. Algo que é muito simples porque vai ser novo no mercado. Número três, quando você percebe que o mercado tem sido sofisticado o suficiente ao ponto em que você tem que vir com uma solução que é única, que é diferente. Isto é no estágio que requer um mecanismo único. Você precisa deixar as pessoas saberem que é por isso que este aplicativo é único e diferente. Esta é a maneira única que funciona. Esta é uma maneira única que realmente funciona e por que é diferente da concorrência. Então isso vai estar aqui para a sofisticação do mercado. Eu definitivamente recomendo que você faça um pouco mais de pesquisa sobre isso se você quiser descobrir mais e realmente entender que a sofisticação do mercado vai desempenhar um papel vital quando você está criando seus projetos. Porque você quer entender que nível de sofisticação é esse mercado. Anúncios, certo? Então isso vai estar aqui para este, e nos vemos no próximo. 31. Funil de geração líder: Neste vídeo, vamos rever o funil de geração de chumbo. Este é um funil que é muito comumente usado no espaço de marketing digital para gerar leads e realmente qualquer tipo de ambiente de negócios quando você um negócio que está fazendo geração de leads on-line, que está fazendo publicidade on-line, você normalmente terá um funil de geração de leads em qualquer estágio da jornada do cliente, pois deseja ser capaz de gerar leads a um custo muito baixo e, em seguida, ser capaz de cultivar esses leads e levá-los para realmente se tornando um cliente pagante, certo? Porque muitas vezes você pode gerar um lead apenas por ser capaz de dar algo de graça e, em seguida, levá-los para baixo essa experiência. Os próximos passos no funil e ser capaz de levá-los a realmente se tornar um cliente dor em uma quantidade baixa. Digamos que algo como um fio de viagem em que é algo é muito, muito pequeno e, em seguida, ser capaz de levá-los a eventualmente por algo que vai ser a um preço mais alto, um pouco mais alto bilhete. Então vamos em frente e saltar para o funil de geração de chumbo. E assim, em um nível muito alto, o funil de geração de leads é essencialmente uma abordagem sistemática para gerar leads para um produto ou serviço específico. Toda a intenção aqui é canalizar o público-alvo através vários estágios diferentes até que eles decidam inserir suas informações. Aqui é onde vamos ter a fórmula Ada aqui, o quadro de conscientização, interesses, decisão e ação. Queremos ser capazes de colocar as pessoas no topo do funil para que elas se tornem conscientes, para que elas se interessem, uma decisão e tomem uma ação. E normalmente o funil de geração de leads tem três etapas diferentes. Você tem um anúncio, digamos no Facebook ou Google, e ele tem algum tipo de oferta ou talvez algum tipo de fraude, trapaça ou ebook, ou algum tipo de recurso gratuito que é valioso para esse usuário individual, certo? E então eles vão lá para a página de destino real e eles enviam suas informações. E, em seguida, há uma página de agradecimento que permite que eles saibam, hey, suas informações estão sendo enviadas para você por e-mail ou você pode baixar um aqui. E, em seguida, muito importante aqui que obrigado página tem os próximos passos. Quais são os próximos passos para eles fazerem? Você pode convidá-los, digamos ao seu site para ler algumas postagens de blog para talvez gostar de você no Facebook ou o que quer que seja. A página de agradecimento realmente permite que eles dêem o próximo passo em seu processo. Você obviamente deve tê-los automaticamente configurado em um funil diferente depois eles pousar na página de agradecimento, porque isso deve desencadear outra automação que permite que você saiba, Ei, essa pessoa já baixou esta oferta aqui. Eles são perspectiva quente e assim que eles vão para a próxima fase. E então vamos pegar esses três passos de funil um pouco mais. Então o primeiro passo aqui vai ser um anúncio, certo? É aqui que eles verão um anúncio do Facebook, talvez um anúncio do Google ou qualquer plataforma que você esteja usando. Você quer dar algum tipo de anúncio que é deixá-los saber do que é a oferta, talvez deixá-los saber, hey, você pode baixar isso. Tudo que você tem que fazer é colocar em sua informação ou apenas algo super simples, certo? Além disso, você pode ter como uma oferta de desconto a taxas baixas, talvez, talvez 75% de desconto, então eles estariam certos, é aqui que é o primeiro contato e você quer que eles se tornem cientes de que você tem algo para eles receber, certo? E precisa ser um valor percebido muito alto. Se não houver nenhum valor percebido lá, então será difícil para você fazer com que esses usuários insiram suas informações porque é isso que você está procurando por seu nome, seu endereço de e-mail em qualquer outra informação de contato. E então a segunda parte do funil de regeneração é a página inicial e é aqui que você qualifica o cliente potencial. Diga-lhes exatamente o que eles vão conseguir. Explica a oferta. Ele permite que eles saibam que, hey, você vai obter x, y e z. Tudo que você precisa fazer é colocar em seu nome e e-mail ou qualquer outra informação lá. E eles serão capazes de baixá-lo e obtê-lo lá mesmo. E, em seguida, a fase final aqui é a página de agradecimento. Aqui é onde, como eu mencionei, você está dizendo a eles quais são os próximos passos. Em um monte de vezes isso é usado em empresas de tijolos e argamassa onde dentista quiroprático, apenas para dar-lhe alguns exemplos aqui. Mas isso pode ser usado em qualquer tipo de indústria. Mas muitas vezes isso é usado como eu disse, e o tijolo e argamassa espaço onde o indivíduo pousa em uma página de agradecimento, e eles podem ligar para marcar uma consulta ou eles podem marcar uma consulta ali e depois no agradecimento - Você página. Então esta é uma visão geral rápida aqui de um funil de geração de leads de três etapas. Então agora vamos dar uma olhada em um funil de três passos real aqui. Este funil aqui é para um implante dentário. Você pode ver aqui que temos um anúncio no Facebook que está falando com esse mercado em particular. Uma vez que eles clicam no anúncio, ele vai levá-los para uma página de destino e, em seguida, essa página de destino qualifica esse indivíduo. Deixe-o saber o que eles estão recebendo e permite-lhes inserir suas informações e marcar a consulta. E, finalmente, aqui temos a página de agradecimento que permite que ele saiba, hey, parabéns, sua informação foi recebida. Você pode ter algumas opções aqui para trabalhar. Pode ligar ou usar o código e a agenda online, certo? Então é assim que se olha em um nível muito alto aqui. Você sempre terá três passos para a maior parte, a menos que você esteja fazendo algum tipo de oferta única ou tipo único de situação, certo? Sempre vai ser onde há um anúncio, há uma página de destino, e depois há uma página de agradecimento. Ok, então isso vai estar aqui para o funil de regeneração, e nos vemos no próximo. 32. Funil de vendas digitais de produtos digitais: Neste vídeo, vamos passar por cima de um funil de vendas de produtos digitais. Agora isso vai ser muito diferente do funil de regeneração real porque aqui é obviamente onde temos um produto e estamos, estamos procurando pessoas para realmente comprar algo. E há algumas variações diferentes aqui. Isto vai ser, em última análise, onde queremos que alguém faça uma compra. E muitas vezes vai ser uma compra de baixo custo porque queremos obtê-los como um comprador e podemos dar-lhes como uma oferta sem cérebro, algo tipicamente entre vinte e sete, duzentos e cinquenta dólares para que possamos vendê-los para produtos adicionais de custo mais alto na estrada. Ok, então vamos em frente e saltar para o funil de vendas de produtos digitais. Então eu mencionei que há diferentes variações aqui. E isso pode ser algo onde pode ser direto para uma oferta de produto ou uma oferta de legião com uma oferta única, upsell. Então você terá variações diferentes. Você será capaz de gerar um direito de lead, com a obtenção das informações do cliente. Mas então também tem uma oferta única que é como, Ei, você nunca vai ver essa oferta novamente. Você recebe esta oferta por um preço único de 90% de desconto, você sabe, 997. Algo super único e tinha que ser uma oferta única que eles nunca vão ser capazes de obter novamente, certo? Isso aumenta a exclusividade depois que eles têm introduzido suas informações diretamente através do funil lá. E este funil em particular tem quatro passos diferentes. número um tem o anúncio e, em seguida, o número dois, tem a página de destino barra página de vendas. Então pode ser uma página de destino que está apenas dizendo às pessoas, hey, colocando suas informações aqui e depois que eles colocaram em suas informações, eles serão levados para uma página de oferta única que tem algo que eles podem comprar em um baixo custo normalmente. E ele vai estar lá apenas para eles comprarem logo ali e então eles não podem comprá-lo em um momento posterior. E então a outra variação disso é onde você só tem uma página de vendas e eles são capazes de apenas comprar o produto bem ali. E então, e então, o número três, certo, como eu mencionei, uma oferta única ou uma página de captura de leads, e então você tem a página de agradecimento no palco por lá. Então vamos seguir em frente e percorrer os passos com um pouco mais de detalhes. Então, o primeiro passo aqui, temos o anúncio que está mostrando a oferta específica, que é mostrar a fraude, que é mostrar o download do PDF o recurso valioso que eles vão obter. E na maioria das vezes, vai ser como uma oferta de desconto ou vai ser algo onde eles estão oferecendo algo de graça e, em seguida, fazendo uma oferta única que vai estar à venda. E assim, na próxima etapa, temos a página inicial ou a página de vendas. Isso vai qualificar o cliente potencial. Se é uma página de destino, isso vai realmente vender a oferta explicou a oferta se é uma página de vendas para levá-los a realmente comprar. E nós vamos percorrer um exemplo, funil de vendas de produtos digitais aqui em um momento. E, em seguida, no terceiro estágio, você pode ter tipicamente como uma oferta única aqui, se você tem uma página de destino onde sua intenção é apenas capturar as informações, ou se você tem uma página de vendas, então você não vai precisar oferta porque a página de vendas está lá para realmente obter na compra feita direito pelo usuário real. E depois temos a página de agradecimento. É aqui que você está informando o cliente potencial e as próximas etapas, dizendo a eles como eles podem aprender mais sobre seus outros produtos e serviços, certo? E então agora vamos olhar para um exemplo de funil de vendas de produtos digitais aqui. Então você tem o anúncio do Facebook bem aqui, e então eles clicam no anúncio do Facebook e ele leva a uma página de destino. Will realmente, esta é uma página de vendas e mostra a eles exatamente o que eles vão conseguir. E então eles têm um botão Comprar agora bem ali por US $27. Lembre-se que isso é algo que vai ser tipicamente a um custo muito baixo porque não há interação humana aqui, ele precisa estar abaixo de US $50. Então é aqui que você pode fazer as pessoas comprarem coisas que vão ser fáceis de pensar, certo? Tipo de ofertas que você não tem que ter qualquer interação com as pessoas. É só que, Ei, esta é a oferta. Aqui está uma página de vendas e você pode comprá-la aqui mesmo. E então, e depois na próxima etapa, o que ele faz é capturar as informações do lead. Isto é um duplo golpe aqui, modo que colocar em suas informações, e depois disso, eles vão para o passo dois. E então é aqui que eles realmente colocam em suas informações de cartão de crédito. E então eles têm uma oferta única. Você pode ver lá no último slide. Você pode ver lá na última imagem, eles têm uma oferta única. Eles são destacados em amarelo e é um adicional de US $7. É assim que você é capaz de adicionar essas ofertas únicas na página de checkout real, onde você torna muito simples, muito fácil para o usuário real comprar uma oferta única. Então, como eu mencionei, há variações diferentes. Você pode fazer um funil de vendas de geração de leads com a oferta única, ou você pode fazer uma venda de produtos digitais foi aqui onde você tem uma oferta exata que você está lançando, que você está promovendo e, em seguida, levá-los para a página de vendas para realmente comprar o produto. E você pode coletar seus e-mails e informações de cartão de crédito depois que eles realmente citaram para fazer a compra. Então ele vai estar aqui para o funil de vendas de produtos digitais. E nos vemos no próximo. 33. Sete princípios de influência: Neste vídeo, vamos rever os sete princípios de influência. Agora isso é algo que você realmente quer entender como designer de UX. Porque quando você está projetando produtos diferentes, aplicações diferentes, sites diferentes, você quer ter uma compreensão fundamental da psicologia comportamental. E isso é o que realmente influenciou é sobre porque você precisa entender o diferente acontece, os diferentes fatores que entram em jogo quando os indivíduos estão olhando para tomar uma decisão, para fazer uma compra ou para se mover para o próximo passo do funil de vendas, certo? E entenda fundamentalmente as diferentes coisas que você pode fazer para as pessoas comam ou comprem um produto ou para avançar para o próximo estágio, certo? Então vamos em frente e saltar para os sete princípios de influência. Então, aqui está a coisa. Ao tomar uma decisão, você sabe, medida em que para comprar um produto, comprar um serviço, o que quer que seja, certo? Seria bom pensar que as pessoas consideram todas as informações disponíveis. Passamos por este processo lógico, certificamo-nos de que olhamos para várias variâncias do produto. Nós olhamos para os concorrentes. Bem, aqui está a coisa que, que raramente acontece. Normalmente, confiamos em atalhos dentro de nossa mente que regem a maneira como tomamos decisões, certo, em nossas capacidades de tomada de decisão. E assim esses sete princípios de influência realmente permitem que as pessoas tomem decisões com base em certas informações e critérios em vez de realmente usar sua própria mente lógica. Porque pensar e usar sua própria mente lógica requer trabalho. E então queremos algo que possa nos atalhos para tomar uma decisão. E assim não temos que pensar tanto. Então é uma transição agradável, simples e fácil para colocar seu nome e para uma página de destino particular ou realmente comprar um produto, seja lá o que for, onde não há fricção porque fomos influenciados por um desses sete princípio diferente. A publicidade é configurada para que você se sinta de uma certa maneira sobre si mesmo e sobre o produto ou o serviço e a marca também. E acredito que mencionei isso em uma das outras lições. Isso é todas as decisões de compra são tomadas emocionalmente de forma lógica justificada. Nós vamos sentar lá e vamos nos convencer ou mesmo tentar convencer os outros que passamos por um processo lógico. Seguimos a fórmula passo a passo para garantir que estamos tomando a melhor decisão geral na maioria das vezes. Estamos tomando decisões baseadas em uma moção e o que gostamos de admitir ou de saber, certo? Então nossas emoções estão nos guiando. Eles estão nos permitindo fazer certas compras, tomar certas ações. E depois que eles são feitos, então nós voltamos e justificamos logicamente com nós mesmos e com os outros por que fazia mais sentido para nós tomarmos essa ação para comprar esse produto. Então vamos em frente e saltar para o princípio real dos Sete. Então, o princípio número um aqui é a prova social. Então, estes são depoimentos. Estes são essencialmente algum tipo de estudo de caso, qualquer coisa que permita que os outros saibam que alguém ou outras pessoas tiveram sucesso ou usaram como produto, desserviço, o que quer que seja, e eles foram capazes de obter um bom resultado a partir dele. E este é um desses atalhos, certo? Então. Um bom exemplo disso é digamos que você está por aí na cidade, você está procurando um novo restaurante. Bem, se você for e você olhar para um restaurante que tem um monte de gente contra outro restaurante que está bastante vazio. mais frequentemente do que não ir para o restaurante que tem permitido mais pessoas porque isso é dar-lhe a prova social de que outras pessoas gostaram deste restaurante e que é popular. E uma vez que outras pessoas gostam deste restaurante e está estourando, então eu também vou gostar dele. Contra quando o restaurante do outro lado estiver vazio, isso vai ser uma indicação de que não é tão bom, não é muito popular. Porque se fosse popular eram muito bons, então haverá outras pessoas lá também. A mesma coisa quando você vai como uma página de vendas e você olha para dentro para comprar um produto, você olha em um por, você sabe, qualquer que seja. Essas páginas de vendas em particular sempre terão depoimentos de outras pessoas contando sua história ou falando sobre os resultados que eles foram capazes de alcançar também. E assim que lhe dá uma ótima indicação de que hey, este produto funciona para outra pessoa. É obrigado a funcionar para mim também. E então número dois, temos o princípio do gosto. E para entender este princípio aqui, para pessoas muito simples compram daqueles que gostam, que sabem, em que confiam. E mesmo que a qualidade não seja tão boa, você pensa em alguém que é como um influenciador ou alguém que é conhecido em seu mercado particular. Eles podem dar algum tipo de promoção ou anúncio para um produto e comido embora desse produto pode não ser tão grande. Ainda vai fazer as pessoas comprarem deles porque eles têm o fator de gosto. Eles têm um público de fãs de confiança que os procuram, que gostam deles, certo? E então essencialmente o que eles estão recomendando, mais frequentemente eles não são independentemente da qualidade real do produto que as pessoas vão comprar porque eles gostaram desse indivíduo. E então o princípio número três é a autoridade. Basta pensar se você está na berma da estrada ou se você está dirigindo por um bem ocupado. E você tem como uma parada de 4 vias ou você tem um monte de tráfego e você tem alguém que simplesmente salta para fora do carro ou salta para fora da estrada ou qualquer que seja o ritmo, eles apenas entram em cena e colocam em uma construção coletes e eles têm um sinal que diz lento e parar e eles começam a dirigir o tráfego mais depois do romance, o que vai acontecer lá é que as pessoas vão começar a seguir o que aquele indivíduo está fazendo e está dizendo, se ele está guiando as pessoas de uma certa maneira e ele está dirigindo ele e ele tem um colete e ele tem o sinal e tudo que automaticamente as coloca em uma posição autoritária, certo? Porque eles têm os ingredientes, os olhares de alguém que realmente estaria dirigindo o tráfego, mesmo que eles possam ser alguém do outro lado da rua ou alguém de qualquer lugar. E pense nos policiais também. Quando os policiais têm o uniforme na chuva, estão fazendo esse papel que eles são a lei e quando eles estão agora onde, em seguida, eles são apenas uma pessoa normal, normal. Então autoridade é algo que é assumido, certo? Você assume autoridade. E quando você pode assumir autoridade em seus anúncios, em sua cópia, em suas mensagens, que hey, nós somos os melhores. Nós somos o topo e isso vai jogar um grande fator. E você está se posicionando como você sendo o topo ou você sendo o número um em seu mercado, certo? Porque a autoridade é assumida e você assume pela forma como você se posiciona, como você se apresenta que mensagens diferentes que você tem ao redor da marca. E então o princípio número quatro é a reciprocidade. Agora, isso é algo que é extremamente valioso aqui. Basta pensar se você está nos EUA e você entrar como uma loja Costco e você entrar lá e em cada esquina praticamente você vai ver diferentes stands que estão te dando comida de graça. Eles têm amostras diferentes. Eles têm coisas diferentes que você pode provar que você pode experimentar antes de comprar. E muitas vezes o que acontece é quando você vai lá e você está recebendo essas amostras grátis, você vai sentir algum tipo de obrigação de realmente comprar o produto porque você está recebendo algo de graça, certo? E então isso é algo que é inato, que é psicologia comportamental sq, onde está enraizada em nós, certo? Sempre sentimos que queremos retribuir porque temos algo de graça. Nós automaticamente vamos nos sentir obrigados a retribuir de volta. É por isso que um monte de tempo você tem o ebook gratuito ou folha de truques livre ou algo que é de graça que você está recebendo em um determinado download, a outra pessoa vai se sentir obrigada a querer ter algo em troca e Dar algo para você porque eles foram capazes de obter algo de graça, certo? Assim, reciprocidade e princípio extremamente poderoso também. E, em seguida, número cinco, temos consistência. Este é um ótimo aqui para funil de vendas. Então, quando você está caminhando as pessoas através de diferentes passos e nós caminhamos através de um dos vários funis de vendas para produtos digitais no, uma das outras lições. E como você se lembra, nós passamos por onde eles tinham o anúncio, eles clicaram em que a próxima página os levou para a página de destino com uma página de vendas. Então eles clicaram no botão lá e então eles foram levados para outra página para preencher suas informações. E então eles foram levados para outra página para realmente preencher suas informações de cartão de crédito e fazer a compra. Todas essas pequenas micro conversões em micro passos. E é o fator de consistência. Fazê-los dar um monte de pequenos passos, vai levá-los a fazer uma grande compra ou uma grande ação na estrada porque você está guiando-os e é quase como um jogo. Eles têm um monte de pequenos passos diferentes que estão dando. E não parece que seja algo enorme ou algo enorme é grande porque pense se eles tinham tudo isso, tudo em uma página onde eles tinham a página de vendas. Na página de vendas, você precisava colocar suas informações, que você precisa colocar em suas informações de cartão de crédito e, em seguida, você precisava selecionar uma opção específica. Tudo isso seria demais e muito em uma página. E pareceria um monte de coisas para o usuário. É por isso que você dividi-lo pequenos passos para que você tenha o fator de consistência. E parece que eles estão apenas dando pequenos passos, escrevendo pequenas ações, e então eles acabarão por chegar à terra prometida. Então temos aqui o princípio número seis, que é a escassez também é extremamente poderosa aqui. É aqui que você pode ter como, por exemplo, um número limitado de pontos disponíveis em, digamos um lançamento beta específico ou um produto específico, seja lá o que for. Muitas vezes, isso é usado muito bem e como o negócio de tijolos e argamassa, onde você tem um desconto específico para as primeiras dez pessoas a entrar e obter um procedimento específico feito. E mesmo para lojas de comércio eletrônico onde você tem como nos próximos 30 dias, obtenha 20% de desconto em tudo certo por 30 dias, sendo capaz de ter essa escassez, deixando as pessoas saberem que há quantidade limitada, disponibilidade limitada, o preço vai mudar e subir e da próxima vez se você não agir agora, então escassez, extremamente poderoso. E finalmente aqui, número sete, temos curiosidade. Isso também é algo que fará com que as pessoas realmente queiram aprender mais sobre. Você, aprenda mais sobre o produto, a marca, o que quer que seja, é que você está promovendo ou tentando colocar na frente das pessoas. O fator de curiosidade de não poder dar-lhes toda a informação, certo? Toda a informação inicial e dividi-la em pedaços permite que eles mantenham a curiosidade e isso não permite que eles fiquem entediados. Basta pensar sobre isso a partir de um contexto de relacionamento onde se você, você sabe, no primeiro dia, contar à outra pessoa que você sabe tudo sobre você, toda a sua história de vida, tudo sobre você, tanto quanto Sua vida pessoal, sua vida profissional, sua família, tudo certo? Não há mais emoção lá porque o que está lá para olhar para frente primeiro é se você apenas dar pedaços e pedaços e permanecer um pouco tão longe quanto misterioso e ser capaz ter essa curiosidade naquela outra pessoa então é vai ser muito mais sinergia, muito, mais química, e vai ser muito mais emocionante para aquela outra pessoa e para si mesmo também, porque você tem algo para olhar para a frente e você não está apenas dando tudo uma vez. Então isso vai ser aqui para os sete princípios de influência. E nos vemos no próximo. 34. Gaja com influência baseada em idade: Neste vídeo, vamos passar por cima dos gatilhos de influência baseados na idade. E então isso é algo que é importante para nós entender porque quando estamos criando personas de usuários, pontos problemáticos do usuário em todos os diferentes avatares de persona. Queremos ser capazes de entender os diferentes fatores etários e os diferentes interesses e valores e rendimentos diferentes que todos vão entrar em jogo quando estamos desenvolvendo um determinado produto, site, aplicativos, Seja lá o que for, certo? Então, ter uma compreensão de como usar gatilhos de influência HBase corretamente vai nos permitir ter uma enorme quantidade de sucesso com os produtos, porque sabemos como ser capaz de obter o tipo certo de mensagens, branding e influência e diversão do mercado certo. Então vamos em frente e saltar para os gatilhos influenciados por idade. Então aqui está a coisa. Quando estamos a comercializar para diferentes faixas etárias. Diferentes faixas etárias terão interesses diferentes, valores diferentes, rendimentos diferentes e padrões de compra diferentes, certo? Alguns vão estar no Facebook muito, alguns vão estar talvez, talvez no LinkedIn. E assim, em termos de gerações, temos os Baby Boomers que nascem entre 19461964. Depois temos o exercício de geração, que nasce entre 19651980. E então temos os millennials, que são os indivíduos que nascem entre 19812001. E então é importante entender essas diferentes demografias, escrever essas diferentes faixas etárias para que possamos ter o tipo certo de marca de mensagens, e estamos colocando isso na frente desse grupo específico. Vamos entrar em cada um desses e muito mais detalhes. Então, quando o remarketing para Gen Xers, Isso é algo que precisamos entender, tanto quanto seu amor pela tecnologia. E a próxima grande coisa com os Gen Xers, eles normalmente vão estar mais preocupados em fornecer conforto para sua família, segurança familiar, segurança familiar versus eles manter par com os Joneses e ter o mais recente objeto brilhante. Eles querem ter certeza de que sua família vai estar segura, ter conforto, eles têm segurança. E com esses caras, você quer entender que eles não gostam que lhes digam o que fazer. Eles querem ser capazes de tomar suas próprias decisões. Eles querem ser aqueles que estão realmente fazendo todas as determinações sobre se eles compram ou não alguma coisa. Eles não querem ser empurrados para uma venda. Eles não querem alguém que está apenas sendo salesioso ou persuadi-lo de uma maneira muito ineficaz, certo? Eles querem sentir: “Ei, eu estou tomando essa decisão e é só minha decisão, certo? Não estou sendo forçada a nada. Ok, então agora vamos falar sobre marketing para os Baby Boomers. Então esta vai ser a geração mais velha. Estes são tipicamente vai ser indivíduos. Essa é a nossa lealdade de marcas diferentes porque estava com ele há algum tempo e eles são leais desde que essas marcas estão atendendo às suas necessidades. Isso é algo que você precisa entender, bem como aplicativo, desde que as necessidades estão sendo atendidas para esses indivíduos, eles vão ter essa fidelidade à marca. A menos que se eles deixaram cair a bola, então haverá alguns problemas lá e onde aquele baby boomer pode estar querendo olhar uma opção alternativa. Porque, em última análise, o que esses caras estão procurando é que eles querem sentir que eles têm o produto da mais alta qualidade de você. Eles estão recebendo o melhor atendimento ao cliente, o melhor serviço geral. Isso é realmente o que é importante para eles. E então quando você pode martelar isso para baixo e ser capaz de deixá-los saber que, hey, escute, nós não só temos um ótimo produto, mas temos um ótimo serviço, atendimento ao cliente no backend, então você será capaz de ganhar Esses caras acabaram. E eles estão tipicamente nas redes sociais só para acompanhar sua família, com seus netos e seus filhos, certo? Então eles ainda estão lá. Você só tem que ter suas mensagens mais no feno. O produto é da mais alta qualidade, mas também o serviço vai ser de alto nível também. E finalmente, temos os Millennials. Estes vão desempenhar o maior fator aqui porque esta é a maioria da população. E esses caras são os que têm a maior quantidade de envolvimento nas redes sociais. Então, como eu mencionei, esses caras vão ser muito nas mídias sociais e eles tendem a preferir marketing muito orgânico, vez de tentar vendê-lo em uma venda difícil ou tentar empurrar um produto ou um serviço na frente deles, certo? Você quer que eles também sintam que a decisão é deles. E uma das maiores coisas aqui é que, uma vez que os millennials estão bastante na internet, nas mídias sociais um pouco. E eles estão posando com seus amigos e familiares e eles estão postando diferentes fontes de notícias, conteúdo diferente, material diferente em outras plataformas diferentes, qualquer momento, se houver algum tipo de pequeno problema ou pequeno problema esses caras vão para as mídias sociais e realmente deixar as pessoas saberem. Essa coisa é que se você tem uma grande marca, ótimo produto e você está fazendo tudo certo, então você vai ter uma boa reputação. No entanto, algo super pequeno pode realmente irritar alguém, certo? E eles poderiam começar um post e poderia se tornar viral, e não poderia ter um resultado positivo. Tão importante entender que eles normalmente vão se preocupar com o impacto social e ambiental desse produto e serviço em particular. Isso também é algo a ter em consideração. E eles também igualam a experiência de compras com entretenimento porque é por isso que muitas vezes quando você está no Facebook, por exemplo, você não está no Facebook para fazer uma compra, você sabe, no Facebook para comprar coisas, certo? No entanto, você está lá, vê anúncios diferentes, obtém interação de engajamento diferente. Você tem vídeos diferentes que você pode assistir que normalmente levam a um produto real ser vendido, certo? Mas é algo onde eles têm uma experiência única. E isso é algo a levar em consideração. No entanto, os Millennials, Esses caras vão ser o maior alvo por causa de seu uso extensivo de mídias sociais. Isso vai estar aqui para os gatilhos de influência da idade. E nos vemos no próximo. 35. Gaja: Neste vídeo, vamos rever os gatilhos de influência baseada em gênero. Agora isso também é algo para estar realmente ciente aqui, tanto quanto quando você está comercializando para diferentes indivíduos ou quando você está criando um produto que você quer ser para homens ou mulheres, é importante entender que diferentes gatilhos que vão estar envolvidos com a forma como eles tomam a sua decisão de compra. A influência desencadeia que os faz querer realmente ir e comprar em termos de um homem ou mulher, certo? Porque o macho vai ter um certo conjunto de critérios, certo tipo de gatilhos que vão influenciá-los a querer comprar. A mesma coisa para a fêmea. Eles vão ter um certo conjunto de critérios. Eles querem se sentir de uma certa maneira. E quando você é capaz de comunicar suas mensagens, sua marca para esses indivíduos, sejam homens ou mulheres, da maneira certa que eles gostam de ser comunicados, certo? Então isso vai levar a uma maior probabilidade de realmente mais compras, certo? Então vamos em frente e saltar para os gatilhos de influência de gênero. Então a primeira coisa que você quer ter em mente aqui é que existem muitos estereótipos por aí. E aqui está a coisa. Esses estereótipos são mais frequentemente do que não verdadeiros. Às vezes as pessoas ficam ofendidas. Algumas pessoas gostam de dizer, bem, hey, e sempre o caso, e nem sempre é o caso, certo? No entanto, na maioria das vezes, você sabe, homens, meninos vão gostar, você sabe, carros, esportes, enquanto as mulheres vão gostar de compras, reality TV, você sabe, cor rosa, certo? Coisas dessa natureza que são femininas. E então isso é algo que está permeado dentro da consciência coletiva e se espalha para todos e se espelha na publicidade de mídia real e nos produtos que consumimos. E assim não só é arraigado e aspira pais, nós também vemos isso na mídia e em todos os diferentes recursos externos que estavam usando mídias sociais para plataformas sociais quando estamos comprando algo on-line, tudo vai essencialmente nos mostrar esses tipos de estereótipos quando na maioria das vezes eles vão ser verdade. Obviamente, haverá alguns casos únicos, mas na maior parte, os estereótipos serão verdadeiros para o homem e a mulher. Então vamos dar uma olhada no marketing para os homens, influenciando gatilhos. Os homens são motivados quando se sentem necessários. Basta pensar se você é casado ou se você está em um relacionamento, ou se você é solteiro, o que quer que seja, certo, você se sente muito valorizado quando você é necessário e quando você está lá para ajudar as pessoas e ajudá-las resolver um problema. Muitas vezes nas comunicações, do outro lado, medida em que a fêmea gosta das comunicações, elas gostam de falar com elas, falar sobre seus sentimentos. E obviamente não há nada de errado com isso. Você só tem que entender que é de onde eles estão vindo sob dinâmica. E você, como um homem ouvindo isso, você precisa entender que você está sempre olhando para Comb para a situação com uma solução para aquele problema em particular onde as fêmeas são mais propensos a querer ser ouvidas. Eles não estão necessariamente procurando uma solução porque isso não é realmente o que os impulsiona. Não é muito importante para eles. Eles só querem se sentir ouvidos e realmente ouvir. Os homens queriam sentir como se estivéssemos resolvendo um problema. Gostamos de nos sentir necessários. E esse produto que está sendo comercializado para nós precisa ter o mesmo tipo de sensação e aparência, há um problema que está precisando ser resolvido e o produto é capaz de resolver um desses problemas. Muitos vídeos de instruções fantásticos sobre um monte de coisas que mostram como fazer x, como fazer y para um exemplo de no mundo real real, como ele está sendo realizado, como está sendo feito. E isso vai ser algo muito importante ao comercializar Tamils. E deve ser conciso direto ao ponto, usando um último poder palavras e realmente prová-lo com fatos. E muitas vezes quando você é capaz de, como eu mencionei, mostrar realmente na ação, mostrar, alguém realmente fazendo isso direito. Então isso vai ser uma das coisas mais importantes aqui. Se você pensar em muitos dos infomerciais, DAG é mostrado aos homens em diferentes produtos masculinos, diferentes ferramentas masculinas. Ele sempre mostra a eles realmente usando o produto em tempo real e realmente como ele funciona de um ponto de vista funcional, todos os recursos diferentes e, em seguida, também com o uso de diferentes palavras de poder e realmente ter alguns dados para backup reivindicação. Então isso é realmente o que você quer pensar em termos de marketing para homens. Agora vamos olhar para o marketing para as fêmeas. Agora, ao vender para o público feminino aqui, você quer inclinar-se para ser descritivo e muito detalhado. Isto é algo que é inato na mente feminina e com as fêmeas em geral. E obviamente não há nada de errado com isso ou apenas diferenças, certo? As fêmeas tendem a ser muito mais descritivas. Eles tendem a usar auditivo. Eles tendem a usar todos os sentidos diferentes quando estão descrevendo suas experiências que tendem a entrar muito em detalhes. Então você também quer seguir isso para que você possa ser muito descritivo e muito detalhado nos esforços de marketing. E então com as fêmeas você quer usar palavras de software e, mais importante, sua mensagem deve terminar de tal forma que lhe dê a sensação de que você as entende e que você as apoiará. Lembre-se, com os machos, eles querem ser capazes de resolver problemas. Eles estão procurando ser essa solução ou encontrar uma solução para esse problema onde as fêmeas estão procurando ser entendidas, para ser ouvidas, reconhecidas e apoiadas. Muito importante lá para entender as diferenças entre os dois. E então sempre forneça às mulheres a capacidade de se conectar e conversar. Então é mais fácil para eles poderem fazer uma compra, certo? Eles querem essa conexão, essa interação social. E então é isso que você precisa olhar para fora em termos de marketing para mulheres, marketing para homens, as diferentes coisas que você deve estar ciente tanto quanto o gatilho de influência de gênero. Então isso vai estar aqui para este, e nos vemos no próximo. 36. Marketing baseado em interesses: Neste vídeo, vamos falar sobre marketing baseado em interesses. Este é um dos diferentes tipos de marketing mais poderosos que você pode fazer porque ele é realmente direcionado, seu hiperdirecionado, hiperespecífico para um grupo de indivíduos. E vamos percorrer o poder do marketing baseado em interesses. Eu vou percorrer algumas ferramentas que eu recomendo e, em seguida, dar-lhe uma visão geral de como você pode usar esta vantagem aqui e como você pode fazer pesquisa inicial para qualquer tipo de produto ou site ou aplicativo que você está em desenvolvimento. Então vamos em frente e saltar para o marketing baseado em interesses. segmentação baseada em interesses, como mencionei, é uma ótima maneira de chegar à frente do seu público-alvo, pois é uma segmentação precisa. Você começa a segmentar pessoas que gostam de uma determinada página, que como um certo produto que tem algum tipo de afiliação seria uma certa marca. E assim você sabe que se alguém gosta de uma determinada página ou tem interesses semelhantes aos do seu produto, e então eles provavelmente serão um grande candidato para o seu produto, bem como, se eles gostam de uma determinada marca de musculação, por exemplo. E você tem um produto de musculação, suplementos ou aplicação, o que quer que seja, certo, então eles são mais provavelmente vai estar interessado em seu produto também. E então as plataformas de mídia social coletam tantos dados dos usuários que eles tendem a saber no que as pessoas estão interessadas, certo? Todo o algoritmo AI gostaria do Facebook, onde ele pode olhar quando você está parando para olhar para diferentes vídeos. Quando você está parando para ver imagens diferentes, quando você está gostando de páginas diferentes, quando você tem interesses diferentes ou gostos diferentes no seu perfil real. E assim ele foi capaz de olhar para tudo isso, todos os seus diferentes vídeos de interações, quanto tempo você assistia os vídeos iria tipo de vídeos até que tudo estivesse aprendendo o tipo de conteúdo que você gosta, o tipo de coisas que que você está interessado e está familiarizado com. E vai continuar mostrando o mesmo tipo de produtos e serviços, certo? Até onde o anúncio. Então é por isso que o marketing baseado em interesses é tão poderoso. E o Facebook e o Instagram são na verdade os dois maiores no mercado porque o Facebook tem aquela IA de aprendizado de máquina onde, como eu mencionei, eles vão ser capazes de olhar para o site que você está indo do Facebook diria você está vindo para realmente levá-lo ao Facebook. Tem tanta informação e tantos dados. Assim, ele permite que você possa ir e usar uma ferramenta específica que vou mostrar agora e ser capaz de criar diferentes públicos, diferentes baldes de públicos, de pessoas que serão seus clientes ideais. Ok, então vamos ver agora as percepções do público do Facebook. Agora, esta é uma ótima ferramenta se você está fazendo marketing no Facebook ou não. Esta é uma ótima ferramenta para olhar e construir diferentes alvos de público e demografia, certo? Porque isso vai mostrar as diferentes faixas etárias de pessoas que gostam de uma determinada página, que gostam de certos direitos, que como uma certa marca. E então você será capaz de ver qual é a idade típica desses indivíduos. O macho ou a fêmea? Eles estão usando um dispositivo móvel? Qual dispositivo móvel? Eles estão usando? Um telefone da Apple, certo? Eles estão usando um telefone Android? E qual é a localização deles? Com que frequência eles compram? De que outras páginas eles gostam, certo? E assim você pode realmente construir um público sólido real aqui, baseado nas pessoas que você está olhando para obter na frente quando você está construindo sua personalidade de cliente, quando você está construindo seu cliente, seu avatar de cliente, Este é um ótimo lugar para vir aqui e também olhar para o que são as faixas etárias, quais são os diferentes interesses da demografia ou do casado? O que o nível de educação classifica? Todas essas informações estão prontamente disponíveis na ferramenta Facebook Insights. Portanto, o marketing baseado em interesses é provavelmente o método de marketing mais poderoso e a estratégia de marketing para utilizar nos dias de hoje, porque você coloca conteúdo hiperdirecionado, material e anúncios na frente do laser públicos-alvo, certo? Então isso vai estar aqui para o marketing baseado em interesses. E nos vemos no próximo. 37. Entender o fluxo do usuário: Oi lá. Agora vai falar sobre o fluxo do usuário. Quando falamos sobre storyboards do mapa de jornada do usuário, essa descoberta foi focada em ambiente que envolve produto e usuário naquele momento. Fluxo de usuário, no entanto, seu caminho interno que o usuário deve passar para alcançar seu objetivo. Fluxo do usuário. É um caminho interno sobre o usuário. Do ponto a ao ponto B. fluxo do usuário pode ser de alta ou baixa fidelidade. Não há requisitos específicos, apenas tentei preservar o mesmo nível de detalhe. Tela. O usuário quatro também descreve a interação. Ele mostra a conexão entre telas, Módulos, elementos, e assim por diante. Você pode usar linhas, ponteiros, algumas outras formas que mostram essas conexões. O fluxo de usuário mostra o caminho do usuário através de um produto. Então você pode descobrir que você está faltando algumas telas em seu modelo mental sobre o produto. Você acha que o processo de registro requer uma tela, mas no final do dia é que você descobre que existem duas telas ou havia informações que não poderiam ser incluídas ou melhor para bater separados. Aqui você vê o exemplo de um fluxo de usuário para aplicativo de meditação. É feito com a menor fidelidade. Uma coisa é ilustrada é a lógica e as setas que mostram a direção do usuário. Então você vê a tela inicial e carregamento, então uma pessoa deve selecionar se ele é usuário existente ou não. E se ele não existente usuário, ele vai para o registro e, em seguida, novamente para login, vai para a tela principal. Então temos algumas guias que representam categorias. E há dois tipos de seções , são categorias e progresso. E depois de selecionar um deles, o usuário é endereçado à tela interna. Como aqui está uma lista de meditação. Em seguida, ele pode selecionar a meditação e ir para pré-visualizar ou para ouvir realmente a meditação, meditação completa. Então ele recebe uma tela de sucesso. Em seguida, ele vai a tela de sucesso ou pop-up e os usuários são levados para uma tela de Progresso, a lista de meditações concluídas. Existem outras interações, bem como para a meditação do plano podemos parar a meditação, voltar para ouvir a meditação semelhante. Este é o exemplo de fluxo de usuário de baixa fidelidade. Ele mostra em um nível geral, todo o caminho de um usuário. Não temos nada adicional, mas podemos adicioná-los em nossas próximas iterações. Você tem que ter em mente que não há nada final no design da experiência do usuário. Então, se você está fazendo algumas iterações, você está recebendo alguma tela, então você está excluindo algumas. Você pode alterar seu fluxo de usuário ao longo do tempo. Está bem, está tudo bem. Agora sabemos quantas telas temos que integrar em nosso produto. Essa é a primeira coisa. A outra coisa, que fazer os wireframes ou fazer o design visual, você pode descobrir que algumas telas podem ser separadas para várias telas. Alguns scripts podem ser combinados em um. Talvez as coisas possam acontecer assim também. Agora você vê a lógica que você tem que fazer, a conexão entre telas. Você pode excluir alguns deles e tentar encurtar seu fluxo de usuário, se necessário. Alguns dos recursos úteis, talvez overflow dot io. Vamos ver o gráfico que vem e fluxo de fio ponto co. Esses recursos que mostram o para criar, para projetar fluxos de usuário. Você pode usá-los para facilitar o processo. Eles são chiques. Você pode testá-lo sozinho e talvez haja muito útil do que o Adobe XD, quem sabe? Ok. E para aqueles de vocês que não estão familiarizados com os níveis de fidelidade, este slide demonstra que três deles são de baixo, médio, alto e baixo nível. Vemos seção bastante abstrata que tem apenas formas geométricas sem qualquer definição, o nível de fidelidade média tem imagem. Dentro do recipiente, tem texto e botão não mais moldado. O alto nível de fidelidade é o design visual, na verdade, e tem todos os estilos. Tão alto é sinônimo de final. Você provavelmente tem a pergunta, como devo criar o fluxo de usuário? Qual deve ser o ponto de partida do fluxo do usuário? E como criar uma experiência de usuário suave. Honestamente, entre os recursos que estudei sobre fluxo de usuários. Ninguém me disse como devo construí-los. K. Eu vou dizer-lhe os vários passos que você pode tomar para criar um fluxo de usuário que provavelmente seria o melhor ponto de partida, então você vai testá-lo e melhorá-lo na próxima iteração. Então, antes de tudo, considere a análise de um produto atual e a análise de um competidor. Como eles são, você pode extrair experiência de usuário já familiar para seu fluxo de usuário. Para você tomará o fluxo de usuário existente e melhorá-lo. Se você criar algo do zero, você tem uma chance que não será clara para o usuário porque ele espera outra coisa. Existem muitos aplicativos relevantes. E é por isso que, como usuário, estou esperando algo com uma experiência de usuário semelhante. Você pode inventar uma bicicleta, mas não recomendo que faça isso. O primeiro exemplo de seu fluxo de usuário seria um, provavelmente uma cópia do que já existe. Em seguida, você trabalhará para melhorar este fluxo de usuários sempre que possível. Aqui, estou considerando isso para as pessoas que elas estarão familiarizadas e muito bem com o fluxo de usuários. É bem simples, você diz. E ainda podemos excluir ou incluir algum psiquiatra de seção, alguns deles. Então, meu conselho é, quando você começa sua carreira de UX, você tem uma pergunta sobre como criar um espírito de fluxo de usuário para começar a partir da experiência de usuário existente e tentar melhorar essa. E então seus próximos, próximos testes, próximos projetos, você verá a imagem clara, você sentirá isso e terá mais idéias sobre o que será o ponto de partida para o seu fluxo de usuários. Depois de um tempo, você vai substituir este seções abstratas com seus wireframes e Dan com tipos paralelos, capacidade para a equipe de desenvolvedores. E eles vão começar a lógica de forma do seu produto. 38. Projeto de aula de XD: Ok, eu acabei de colocar para baixo o fluxo de usuário do sobre o seu pé, Panda e Strauss M D sobre o seu, nós descobrimos que há um estágio para inserir um número de telefone, receber código SMS, em seguida, para radiação, que requer que você digite senha de e-mail, e, em seguida, ele permite que você escolha o endereço. E a área paterna é descoberta por nós. No entanto, em termos de panda alimentar, temos reautorização prop, prop, provavelmente vamos criar um perfil. Ele também não foi descoberto ainda porque não é suportado na minha área. Mas o que vimos a partir do vídeo, que demonstra o fluxo do usuário, somos capazes de selecionar o endereço e selecionar o tipo de comida ou restaurante selecione produto do que se for aplicável, a variação reservada do produto. E então nós e para endereço e detalhes de contato. E depois temos a confirmação da OTA. Bem, aproximadamente parece que isso para Strauss ele o fluxo de usuário parece quase o mesmo que no caso com a comida Panda, mas exceto para a otimização é colocado no último estágio. Ok. Esta é a demonstração aproximada do fluxo de usuários desses três aplicativos que eu não levei levar em conta considerando que não funciona na minha área. Mas esses três são suficientes para esclarecer, qual é o melhor fluxo de usuários para nosso aplicativo em potencial. Então você vê que eu marquei a sequência que é semelhante e também é muito confortável para mim pessoalmente. Então eu acho que esta eleição abordou a seleção de comida ou tipo de comida ou restaurante e, na verdade, o produto, então podemos ajustar o número de itens de encomenda. E a confirmação do pedido vai mais longe com o número de telefone digitando e recebendo o código SMS. Então, aqui eu sinto que vamos implementar ou vamos usar este fluxo de usuário pode contendo três etapas ou estágios em nosso aplicativo perspectiva. Então, vamos tentar criar nosso próprio fluxo de usuário para o nosso aplicativo de entrega de alimentos, que será em nosso aplicativo, autorizações de TEA, tipo, nossa entrega de alimentos concorda? Acho que a autorização será em primeiro lugar. Está tudo bem. Teorização via Google, Facebook, conta do Twitter, talvez, bem, talvez alguns outros. Claro, mas você também tem que identificar qual é a melhor maneira de autorizar seus usuários de acordo com a persona. Ok. John, acho que precisamos escolher um vestido. Vamos reorganizar um pouco e ver o que conseguimos. Claro, se você está planejando criar aplicativos internacionais melhor para colocar a seção de treliça e após a autorização, talvez seja mais eficiente porque alguns parceiros, alguns restaurantes, não serão capazes de entregar em seu localização. Mas estou pensando no aplicativo local, que funcionará apenas na minha cidade. Assim, o endereço irá para o último estágio junto com os detalhes do pedido. Ok, então temos a autorização, temos uma lista de restaurantes. Podemos selecionar o produto a partir do, do restaurante, e depois modificamos o nosso pedido. Este é o fluxo do usuário para a entrega de um único livro. Pode ser não-linear. Assim, o usuário pode voltar e selecionar o outro produto e assim por diante e assim por diante. Modificando a ordem e, em seguida, os detalhes do pedido para ver o que realmente encomendamos e, em seguida, conformação E a última coisa será o endereço selecionado. Novamente, você pode fazer o usuário fluindo qualquer software que você preferir. Eu estou usando x D Para a maioria dos casos porque eu estou acostumado com isso. Acabei de perceber que podemos no nosso endereço junto com os detalhes do pedido. Então, o endereço de entrega será P aqui. Então, pulamos 11 tela, que tem os outros esforços para o usuário K. agora autorização, selecionando tipo de comida ou restaurante. Em seguida, selecionamos o produto da categoria B ou do restaurante preciso, de restaurante particular, podemos modificar a nossa ordem, que seria a variação de quantidade do produto. Várias telas combinamos a uma. E aqui também fundimos detalhes de odor e tress deliberado em uma tela. Em seguida, vai a confirmação do pedido e tela de sucesso. Ok. Se uma pessoa gostaria de obter mais produto, ele ou ela pode ir aqui. E segundo, não preste muita atenção a isto. Ao meu desenho. É só para mostrar a relação entre telas. Índia. Ok? Então, e o ciclo vai novamente mais uma vez. Então, nós projetamos o esboço, o rascunho de função para o nosso fluxo de usuário sobre baixa fidelidade, temos alguns estágios. Eles ainda não são telas em si, mas há algumas etapas que precisamos passar antes de fazer uma ordem. 39. Projeto de curso 7: criando um quadro de história: Então, nós projetamos o esboço, o rascunho de função para o nosso fluxo de usuários terá uma baixa fidelidade. Temos alguns estágios. Eles ainda não são telas em si, mas há algumas etapas que precisamos passar antes de fazer uma ordem. E nosso registro que eu encontrei uma descrição do público-alvo para aplicativos de entrega de alimentos em heavy.com. E eles são todos os três personagens que podem ser úteis no nosso caso, o executivo crocante do tempo. Este cliente não tem o luxo de comer fora no restaurante durante a hora do almoço ou mesmo esperar na fila, auditando-o para ir. Executivos ocupados com um TE, tolo de reuniões muitas vezes só têm tempo suficiente para realmente comer e vamos recorrer a um aplicativo para cuidar do resto, alcançar esses clientes, promovendo sentimentos especiais na hora do almoço que fornecem que o impulso de energia necessário para passar a tarde. A segunda persona é o pai em movimento. Para muitos pais que trabalham dessas crianças que estão ocupadas com esportes e outras atividades durante a semana, preparar o jantar em uma hora decente pode ser difícil quando há apenas 20 minutos para obter um jantar equilibrado na mesa para o família. Este cliente pagará um prêmio pela conveniência oferecida por um apelo aplicativo de entrega a este cliente, oferecendo refeições de valor em estilo familiar para servir um grupo. O terceiro é o adaptador de ar início de dezembro. Todos nós temos que um amigo ou colega de trabalho que é o primeiro a adotar o gadget mais recente e usar um aplicativo de entrega de alimentos não é exceção. Este cliente foi um dos versículos para usar o nosso aplicativo de nitidez direito como Uber, tira proveito de aplicativos de mercearia para economia extra em provavelmente tem o mais recente iPhone ou telefone Android, acompanhar o adotante precoce, oferecendo-lhes acesso VIP para ofertas especiais e outros Burke. Está bem. Há perguntas a fazer a si mesmo. Qual estratégia faz sentido para o meu negócio? Quais aplicativos promessa marca fetal, deve mãe minha mudança de menu? Como posso utilizar esses novos canais de comunicação? Utilizando o aplicativo de entrega de alimentos pode ser uma ótima fonte de receita para restaurantes, mesmo que este cliente, base de clientes não é visível como outros, deve estar longe de um objeto através de comerciantes inteligentes. Então, considerando nosso público-alvo, que serão pais e empresários, criei um primeiro storyboard que mostra a sequência de atividades que irão, que uma pessoa tomará antes de usar nosso aplicativo. Então James chega em casa, vê, ele admite sua filha, sua esposa, e a próxima coisa, ele abre a geladeira. Sua esposa, ela estava cuidando de crianças e ela não podia dedicar tempo para preparar o jantar. Então não há nada interessante para James na geladeira ou em uma mesa. Então agora vemos que podemos fazer algumas anotações aqui. Em primeiro lugar, esta foto não demonstra o ambiente real porque geralmente é noite. Então vamos dizer que é noite, então é uma geladeira e assim por diante, ou treinar nossa parte. Então eu estruturei a tabela para que o formato de dados seja mais confiável. Essas fotos podem ser substituídas pelo desenho da caneta. E a coisa mais importante sobre os storyboards é que eles são fáceis e rápidos, você elaborou. Portanto, o estilo do storyboard não é tão importante a menos que a informação dentro deste material seja clara. Ok, então eu dividi nossa tabela dois estágios, ambiente, equipamento, pensamento, dizendo qual é a maneira mais comum de estruturar a tabela para storyboards. Alguns de seus projetos podem exigir outro tipo de dados sobre o usuário. Certo, então temos estágios, que é James chega em casa, abre o aplicativo de entrega e entrega grátis e espera pela entrega. Não mudou. Sua esposa, James, é um homem ocupado. Ele volta para casa de novo. Ele diz que foi um dia longo, ideia minha. E então ele acha que estou com fome e abre a geladeira. E quando ele usa o aplicativo, ele se perguntou, o que eu quero comer e perguntar aos membros da sua família, estão todos bem com macarrão hoje, a tendência da família é a outra persona e talvez o outro storyboard. Temos dois membros da família no carro e um deles usa a entrega de comida superior. Então eles terminaram seu dia de trabalho e querem pedir seu jantar. Assim, a ordem estará no processo enquanto eles estão a caminho de sua casa. Então, se eles fazem um pedido, eles estão no carro, eles pensam e o que nós vamos comer isso se e o ditado, vamos decidir o que queremos comer quando chegarmos em casa no dia seguinte, voltando para casa, eles estão em casa e eles pensam, Finalmente chegamos em casa. E eles decidem passar algum tempo juntos. Os pensamentos deles no terceiro estágio, quando leram livros com os filhos? Talvez a jogar, a ver televisão ou outra coisa. Que pensamentos são coisas que o tempo com as crianças não tem preço. Está bem? E finalmente, eles receberam a ordem e acham que estão com muita fome. E eles dizem: Obrigado pela entrega à pessoa que entregou o Yehud. Lista de caminhos para isso mostrará o que já oito, onde já pedimos no passado. Então a pessoa 1.5 duvida sobre o que vamos comer hoje porque ele não sabe. Ele acha que o pastor está bem. Mas ele vai ficar muito grato se você mostrar a ele o que ele já pediu e talvez fazer uma recomendação, recomendar Dacian baseado em tipos de alimentos de células anteriores que faz, Ei, K. Então, insights para uma família treinada seria como, Vamos dar uma olhada neste terceiro estágio onde as pessoas estão lendo livros com seus filhos. E eu acho que eles oferecem uma atividade onde as crianças enquanto esperam pelo parto. Está bem. Esta é uma boa. Eu acho que podemos em algumas histórias, jogos de quebra-cabeça, versão ligeira de alguns jogos que poderiam ser implementados no aplicativo. Somos até mesmo parceiros com outras aplicações para nos divertirmos enquanto esperamos pela comida. Assim, com base no tempo para que o pedido seja entregue, podemos aconselhar diferentes atividades para os pais passarem tempo com seus filhos enquanto eles esperam o dia inteiro, poderia estar em atividades de desenvolvimento, livros, jogos foram alguns quebra-cabeças ou talvez algumas missões. Tudo isso depende do, o que seremos capazes de desenvolver. 40. Trabalhando com Moodboards: Híbrido 1, e vamos explorar as pranchas de humor agora. Mood boards, peças de amostras de design para inspirações que contêm cores, tipografia, interações, imagens e fotografia, futuros, ícones e elementos de interface do usuário. Então, quando você navega pela Internet, você pode encontrar um design que ilustra que a idéia que você tem em mente, você pode pedir emprestado e som elementos ou seções de seus concorrentes. Isso está tudo bem. Você não precisa imitar a interface do usuário ou o estilo. A placa de humor ajuda a construir uma visão Tweedledee estilo que seu produto perspectiva terá. Também é útil mostrar a duas partes interessadas, clientes, o que você tem em mente? Como você vê o projeto nesta peças separadas de exemplos de design. E você pode incluir topografia, você não pode, você pode encontrar apenas um botão. Você pode encontrar 10 mil botões para o seu projeto. Você pode incluir todos eles em seu quadro de humor, mas será útil para você ou não? Essa é a pergunta. Tentou incluir as coisas importantes, porque você pode acabar com um, com uma tonelada de soluções. Você vai perder muito tempo colocando e testando todos eles. Este é um exemplo do meu conselho de humor feito para meditação aplicativo. Gostaria de apresentar algumas imagens da natureza. Eu peguei algumas cores. Eu também gosto dos desenhos dessas telas, UI muito leve e suave. E a versão escura pode ser algo assim. Estes esquema de cores e gradiente. Ali é muito adorável. O exemplo de como os fóruns podem parecer na toupeira escura também é legal. Eu realmente gostaria de ter algo como isso no meu aplicativo, três ícones e barra de ferramentas inferior. Muito eficiente. Próximo, ok, imagens. Então, estas são várias coisas que eu gostaria de manter para, para o meu aplicativo. Tirei isto da Triple e Behance. Vou considerar o estilo disso e como as cores funcionam juntas. Fato muito legal. E aqui o esquema de cores também é muito bom. Tenho que tentar construir algo assim. Gosto do layout das telas. Eles são bastante leves. Eu acho que eles devem ser fáceis de usar. Ok. Se você notar, eu não tenho tipografia. Eu não tenho muitas coisas que estão listadas em, não tenho interações. Mas para mim, neste momento, basta mostrar ao meu cliente se ele concorda que você siga essa direção ou não. Você pode adicionar mais peças ao seu quadro de humor mais tarde e fazer um brainstorm. Mais uma vez com a equipe ou cliente. É realmente útil porque quando você começa a fazer visual e design, será muito útil porque você não vai usar cores erradas. Isso não será esperado pelo cliente. Mesmo que você esteja fazendo o design da experiência do usuário, você se concentra no usuário, no usuário final. A aprovação do seu trabalho é sobre o cliente. E placa de humor é muito bom ter essa garantia, este ponto médio com transição entre os wireframes e design visual. Então, novamente, toda a lista de coisas que você pode incluir em seu quadro de humor pode ser cores, tipografia, interações, imagens em fotografia, recursos, ícones e elementos de interface do usuário. Você pode não incluir alguns deles. Você pode criar seu próprio quadro de humor sem quaisquer restrições. Não há regras, mas o resultado deve ajudar você e as partes interessadas a entender a direção que você está prestes a tomar com o design visual. 41. Projeto de aula oito: Olá a todos e bem-vindos novamente às nossas aulas práticas UX juntamente com XD. E hoje vamos explorar a placa de humor, que é introduzido não só no processo de UX, mas também no design visual, porque ele realmente ajuda você a entender a visão do cliente sobre as preferências do projeto, idéias e expectativas. Mas também você é capaz de expressar seus sentimentos sobre como esse projeto pode parecer. Então, pode haver duas partes combinadas. Você pode usar referências que seu cliente ou enviou para você e combiná-los com aqueles que você acha que são adequados para este projeto. E vamos imaginar que temos cinco links para alguns projetos. Lembra-te, estamos a trabalhar na entrega de comida. Então nós temos cinco referências que nosso cliente imaginário acha que eles estão bem em considerar. Ele gosta do estilo e gostaria que seguíssemos esses conceitos. Ok, vamos dar uma olhada rápida através da interface do usuário. Luz muito espaçosa, muito macia, devo dizer. E os ícones também são desenhados muito agradável. Estamos interessados apenas no, o layout e a interface do usuário. Este ponto, você vê que não há nada pesado aqui e tudo o que é colocado na tela é organizado por agrupamento. A cor secundária é o azul. O primeiro parece laranja, mas vamos ver. Sim, laranja, preto, cinza e rosa claro. Vamos rever o aplicativo ou ele tem um modo escuro. Isso é muito bom porque nós também estamos procurando um modo escuro. E eu realmente acho que o modo escuro para o nosso aplicativo será mais adequado do que o modo de luz. Então, mesmo se desenvolvermos um modo lite, eles não serão por padrão. Então, por padrão, eu desejo definir o modo escuro para estar ativo. Ok, vamos dar uma olhada no, outro em nossa lista. É estação de elenco, cor vermelha plana com um guarda-sol. Belo estilo para o caso. C lido como cor principal. Claro, bem, podemos extrair deste onde eu acho que os destaques deste aplicativo é que ele funciona apenas em duas cores, principalmente uma que é pão. E as UIs, bem estruturadas e organizadas usando apenas branco, preto, vermelho e cinza. Mas eu não acho que em nossa aplicação isso poderia ser feito de alguma forma. Não tenho certeza. Um mundo pegou várias capturas de tela. Vamos tentar incorporar os elementos ou qualquer outra coisa a partir destes. Mas agora é muito difícil dizer qual é a coisa legal que podemos usar? Este processo de integração parece bom, ok, vamos dar uma olhada e dar outro exemplo. E agora as nossas referências, sapatos de cobra, ok, sapatos. Sim, você vê cartões são organizados muito bom aqui e classificar por filtro que poderia ser aplicado em nosso aplicativo também. E adoro o estilo dos ícones. Como eu disse, a lista dos cartões parece bastante aconchegante aqui. Item ou a estrutura da tela interna pode ser usado em nosso aplicativo também. Na minha bolsa está no meu carrinho. Vejo o botão “Checkout” aqui. Passo principal, temos um acordo com a ordem K filtros SlideUp janela tipo. Eu acho que o filtro será também incorporá-lo da mesma maneira em nosso aplicativo, porque haverá muitas configurações que gostaria de ter a bordo, que significa que o tempo para entregar o tipo de alimento que estamos procurando. Talvez haja uma caixa de seleção para comida vegana ou outra coisa. Vejamos, mas acho que é a maneira mais apropriada de ter um filtro. Esta é a lista. Ela é simpática. Vamos ao nosso próximo exemplo disso. O ícone é muito bonito. Então, nosso cliente ficará muito feliz se pudéssemos usar ícones semelhantes em nosso aplicativo. Agora temos mais uma aplicação. Deixe-me abrir para você. E aqui está a sua lei e outros parece uma loja de sapatos que tínhamos. Este layout me lembra o Instagram. Em seguida vai, sim, realmente montanha-russa Instagram. Aqui temos uma categoria. Tão bom design baseado em fundo. A cor principal aqui é este azul vibrante. Os ícones são baseados em diferentes tons de cinza, de diferentes tons de cinza e pequeno acento de cor azul é uma sombra suave e suave, que é muito comum nos dias de hoje. Aqui temos um mapa e tipo de filtro por meses. Realmente difícil para mim entender o que este aplicativo é para dúvida usando um. Mas tenho certeza que nosso cliente gostou da parte visual, não da UX. Então agora temos cinco amostras a considerar em termos de design visual. E vamos pegá-los e decidir qual parte vamos pegar emprestado e vamos derrubar. Acabei de fazer screenshots a partir das referências que exploramos e organizamos da forma como será mais ou menos compreensível para nós e para os nossos stakeholders. Novamente, você pode criar um quadro de humor muito bonito e bem como sua usabilidade de relatórios ou zona e qualquer outro tipo de entrega, por favor, concentre-se no valor que você está entregando. E a próxima coisa é. Styling, fazendo um ano bonito. Então vamos voltar para o nosso bar de humor. Aqui temos futuros, imagens, cores, elementos, ícones, telefonados, interações e layout. Ou futuros, eu escolhi a questão do estado convidado agora com o processo de integração, Eu realmente aprecio quando há algo antes de usar o temporizador de entrega op. Acho que podemos introduzir o temporizador de entrega. Eles acham que é coisa muito chique ter um temporizador de entrega. Novamente, tudo aqui é para consideração, para discutir com as partes interessadas, com sua equipe e decidir se em recursos que você oferece você sugere são aceitáveis ou não, porque pode haver uma enorme quantidade de necessário para gastar no desenvolvimento de tal coisa como pacote Timer. A equipe de conteúdo pode não ter o conteúdo para o processo de integração. E então um, então este é apenas mais um estágio mais próximo do nosso produto final. Ok, vamos voltar para o nosso quadro de humor. Filtro. Acredito fortemente que podemos implementar filtro que irá abrir em uma janela separada. Nós somos slides para cima ou para baixo porque antes de tudo, ele nos permite criar um sistema escalável. A outra coisa são as chamadas. Eu preenchi que preto ou cinza escuro seria a cor de fundo principal. Ícones. Lá você se lembra desses belos ícones. Este é o exemplo do que o cliente quer que criemos elementos. Este botão é muito bom. O resto é praticamente padrão. Em termos de interações. Eu acho que podemos emprestar essa abordagem cronológica como caminho linear em nossa seção de pedidos passados, onde as pessoas podem ver os pratos que eles pediram antes. Então, haverá um calendário, fotos e talvez o nome do restaurante, o botão de preço para reordenar, ou talvez uma classificação e estrelas e assim por diante. Aqui, é proposto layout para o nosso painel principal. Haverá uma seção superior, é claro, coloque um logotipo com o menu suspenso ou o menu bulgur. Teremos algumas guias de funcionalidade ao lado da barra de pesquisa. Talvez possamos fazer o feed de amigos que têm fotos de sua comida e assim por diante. A outra coisa é a fonte, que eu gostaria de usar o aplicativo que eu escolhi apenas, apenas para ter algo diferente desta tendência Montserrat porque eu acho que esta fonte é muito exagerada. E isso torna cada aplicativo semelhante a outro porque eles têm a mesma fonte em seus designs. E vamos testar agora como o parágrafo ficará usando essa fonte. Primeiro, você vai fazer isso antes de enviar o par de humor para o cliente ou para demonstrá-lo entre os membros da sua equipe. Kay, vamos passar para as imagens que representarão o filósofo, a imagem do nosso produto. Eu sinto que a família sentar e jantar vai ser legal. E aqui estão os membros da família. Lá fora, ar muito aconchegante, três crianças no passado, outra coisa? Gosto do ambiente, da iluminação. Então, quando vamos fazer, a equipe de design visual e conteúdo vai escrever artigos. Eles poderão escolher entre imagens com as mesmas emoções, o mesmo tom, ou seja, com as mesmas características que são importantes para o nosso aplicativo. Está bem? Está bem. Então eu acho que vou limpar com uma placa de humor, o design de alimentos transmitidos já foi explicado. Eu disse que não é tão importante como o seu quadro de humor parece, porque o principal é a informação que ele contém. Então você pode obter um pouco de estilo, se você quiser. E nós reorganizamos se você não gosta do meu jeito. Mas 90% do meu projeto tem o mesmo tipo de quadros de humor. Minimalista, claro, sem qualquer ruído branco sobre eles. Muito obrigado por sua atenção por um tempo, tentou criar seu próprio conselho. Talvez tenha outras sugestões e boa sorte. Vemo-nos na nossa próxima lição. 42. Sitemap e arquitetura de informação: Parabéns, você tem a arquitetura da informação. Agora vamos falar sobre esse tipo de atividade de design de UX. A arquitetura da informação está organizando o conteúdo e a maneira mais lógica e eficiente de aumentar é a descoberta. É uma combinação de organização, nomenclatura, navegação e sistemas de busca implementados no sistema de informação. Ao nível de um site inteiro ou arquitetura de informações de aplicativo determina quais dados devem ser colocados em cada página e como vincular as páginas entre si. A fim de criar uma unidade de Arquitetura de Informações de fácil utilização para considerar as descobertas anteriores de sua análise, da jornada do cliente e das outras coisas que você fez até agora. Análise irá ajudá-lo a entender onde você está, para definir regras de conduta e padrões de usuário familiares, perfil de usuário e persona irá ajudá-lo a entender o futuro de seus padrões de comportamento de percepção novamente, e consumo e pontos de dor. A jornada do cliente ajuda você a definir pontos de entrada, pontos de saída e pontos de decisão. Alguns resultados de pesquisa leva o usuário para a página inicial. Portanto, tenha cuidado e organize sua arquitetura de informações. E a maneira que irá encurtar e facilitar o processo de tomada de decisão para o usuário. Agrupar de acordo com as expectativas do usuário significa que se você tem várias personalidades em seu projeto, você tem que considerar todas elas. E provavelmente isso terá um impacto sobre o conteúdo, sobre a estrutura, categorias e assim por diante e assim por diante. Então você precisa conhecer diferentes grupos de usuários e seus interesses. Você tem que ter em mente a funcionalidade do produto listando todas as funções e tentou ajudar o usuário a usá-las quando necessário. Se você levar em conta storyboards e cenários, eles o ajudarão a criar uma melhor relação entre o conteúdo e sua funcionalidade. Assim, a arquitetura poderia ser orientada para o usuário. Então, se sua jornada de usuário mostra que a pessoa geralmente vem de pesquisa e gene ou mídia social na metade do link na página específica que você tem que melhorar. Esta página, essa página provavelmente será página de tomada de decisão. Você ficaria surpreso, mas a página inicial não é a página mais popular na maioria dos projetos. Isso foi surpresa para mim também. muito tempo, eu projetei páginas muito bonitas, muito conteúdo pesado homepages. Mas, no final do dia, o usuário toma a decisão sobre as páginas internas e você tem que se concentrar nelas e ajudar seu usuário a tomar uma decisão de acordo com um modelo de negócio do projeto. Na arquitetura de informações, você determinará a relação entre o conteúdo e a funcionalidade. Digamos que colocamos em dívida sob o nível de estudo de caso neste exemplo. Vamos ser desconhecido para nós ou inesperado por Euler ou nós pressionamos o botão de contato e ele nos leva para uma página do Facebook ou Linkedin. Espero visitar uma página que irá mostrar o número de telefone, e-mail ou formulário de contato, ou outra forma de, entrar em contato com a empresa ou pessoa. Portanto, isso também significa que a relação entre o conteúdo e a funcionalidade deve ser clara. Se você pressionar a página inicial, ele leva você para outra página que será errado, que será inesperado. Então, se temos alguns serviços que a empresa oferece, temos que provar isso corretamente. Então análise, gestão de risco, carga financeira, ele vai para o projeto de serviços alfa, deta vai sob o nível de estudo de caso e entre em contato conosco página onde podemos encontrar informações que nos ajudarão a chegar a esta empresa. Assim como outros materiais de entrega do seu processo de design de UX. arquitetura da informação ajuda a estar em sintonia com as partes interessadas e a equipe. A equipe de desenvolvedores irá considerar arquitetura de informações e juntamente com o processo de desenvolvimento antigo, bem como seu fluxo de usuário. E também mostra áreas de entrada de partes interessadas, talvez seja um conteúdo ou outra mídia. Então você descobriu que temos que incluir a seção de vídeo, mas você não tem vídeos na mão. Se precisamos de um vídeo de exploração, alguém tem que produzi-lo. Se você souber que o usuário tem 18 anos, provavelmente não entenderá algum idioma que você deseja usar. E você precisa adotar esse idioma para um grupo de usuários. Então aqui temos o Projeto Beta, financeiro carregado tudo isso. É para nomes de nossas seções. Você pode considerar nomear isso de outra forma redonda como portfólio ou nosso trabalho, nosso projeto, projetos passados, o que fazemos, e assim por diante. Portanto, esta é uma linguagem de usuário que você tem manter em mente ao fazer arquitetura de informação. E faça sua arquitetura de informações. E dessa forma, isso poderia ser facilmente editável, escalável. Há muitos softwares online. Você pode fazê-lo com o xor, com Adobe XD, você pode usar Balsâmico se desejar. Eles são todos software simples e simples em termos de criação de arquitetura de informação e compartilhá-lo entre a equipe. 43. Aula - projeto do curso: arquitetura de aplicativos: Oi lá. Bem-vindo novamente às nossas aulas de XD juntamente com a prática de UX. E o que vamos fazer nesta lição vai definir a estrutura do nosso aplicativo de entrega de alimentos em perspectiva. By the way, as coisas que já fizemos, já coletamos até telas de nossos concorrentes. Definimos os fluxos de usuários de vários aplicativos e propusemos um para o nosso aplicativo, temos descrições de persona, visão geral muito leve, mas ainda é suficiente para criar um storyboard e outras coisas UX. Nosso objetivo é oferecer jantares para pessoas ocupadas e pais que querem dedicar mais tempo hoje crianças. Então vamos começar a partir da visão geral do blog da nossa arquitetura, que estará dentro do nosso aplicativo. Primeiro de tudo, vamos listar todos os recursos, todos os blocos, todos os módulos ou elementos, talvez elementos que serão importantes em nossa lista aqui. E então vamos agrupar este bloqueia interseções para que não seja facilmente detectável e intuitivo. Gaillard Start desde o início, é a nossa tela de registro ou splash. tela inicial será seguida com um login, depois registro, depois tela principal. E outro é a refeição do restaurante, histórico de pedidos de busto. Configurações da conta, diga feedback. Família. Temos a seção de refeições recomendadas. Então, a idéia geral já está aqui, mas em seguida precisamos organizar esta pesquisa de registro tela de abertura seria no próximo nível em prioridades após categorias K, nós definimos tela inicial, e agora é hora de definir as configurações da conta. Você vê o que é a parte desafiadora aqui é organizar estes vários elementos separados em grupo dar. Temos tudo aqui. Vamos tentar criar no fluxo desta arquitetura de informação. tela inicial de orégano é a primeira coisa que vemos. tela promessa leva-nos para o host tela inicial Verde tem categorias, tem Pesquisa como refeições recomendadas. E eu ainda tenho dúvidas sobre colocar lista de restaurantes aqui no mesmo nível com a pesquisa de categoria e refeições recomendadas. Mas farei isso porque ainda não tenho outra ideia. Assim que eu decidir ou encontrar outro lugar mais apropriado para a lista de restaurantes, eu vou tirá-lo daqui. Ok, próximo. Categorias no restaurante de comida, Khomeini, ok, então a pesquisa nos leva a procurar resultado do que as refeições recomendadas. Então, histórico de pedidos, algo separado disso, bem como configurações, refeições recomendadas. Assim, você sabe que a arquitetura de informações é feita para facilitar a navegação e a descoberta do conteúdo. Mas desde lugar secante, ele também serve outra função, que é para nós, para os construtores do aplicativo, somos capazes de misturar em cinco passos à frente, como a interface e como a experiência do usuário vai olhar Então vamos ver o que resta aqui. Esquecemo-nos de tratar dos cuidados. Vamos colocar toda a história em dois lugares, depois de um tempo, será capaz de rastrear e analisar se uma colocação é melhor do que outra. E você organiza esses elementos de acordo com nossas estatísticas. Então meu perfil terá confiança, confiança, informações pessoais. Estamos lidando com uma entrega de comida. Portanto, o endereço é mais importante e deve ser de fácil acesso. Deixe-me colocar tudo para baixo e vamos definir se o vestido tem um lugar melhor aqui. Variação irá aqui. Acho que a história mais antiga não terá desistências. Will, será o menu em si. Com rabiscos longos. Talvez deva haver um ID de pedido ou algo assim. Então agora eu quero jogar alguns nós somos jogos da família para que eles são acessíveis não só durante o tempo de entrega, gostaria que eles fossem acessíveis e pouco tempo. Então eu sou apenas tem dificuldade para definir o posicionamento deste, bem como o sobre as informações do aplicativo em situação real provavelmente vai compartilhar entre os membros da equipe, vamos decidir sobre como criar uma melhor arquitetura de informação, tendo tudo isso. Então vamos pular isso também por um tempo. E agora você vê que temos arquitetura de informações para o nosso aplicativo. Este é o nível de baixa fidelidade. Temos uma tela inicial, histórico antigo e meu perfil. Foi assim que decidi separar os elementos dentro do aplicativo. Tela inicial, teremos categorias, função de pesquisa, refeições recomendadas e lista de restaurantes. Então temos as categorias serão diferentes. É apenas um lugar para nós ter uma idéia do que teremos em categorias. Vamos ter sido outras coisas, categorias. Este preço. E estamos interessados não na distância e em si, mas no tempo de entrega da nossa comida. Por isso, tenha cuidado quando estiver a falar com um utilizador como uma máquina. Grande habilidade para as pessoas que estão fazendo o design da experiência do usuário é pegar a linguagem do usuário e imitá-lo para que as pessoas sejam capazes de entender exatamente o que você quer dizer, por exemplo, mas eu entendo que cada entrega requer tempo e este tempo é calculado através da distância. Mas o cliente ou o cliente final, esteja interessado em quantos minutos ou muitas horas ele e sua família devem esperar que seu jantar seja entregue. Novamente, eu acho que a pesquisa poderia ser de alguma forma combinada com filtro, com o mesmo filtro. Deixe-me começar com wireframing e vamos, vamos tentar conectar e desconectar esses dois elementos entre si. E temos variação na parte inferior. Ok, eu acho que é o suficiente por enquanto para a nossa arquitetura de informação. Nós dividimos nossa casa em três seções principais, que seria tela inicial história mais antiga no meu perfil, que é responsável por alguns dados pessoais para vestido. E talvez uma pessoa gostaria de dar um coração de feedback sobre o AP. Esta não é uma versão final. Isso pode ser mudado de tempo. Após discussões, depois de fazer wireframes, você percebeu que isso não funciona ou parece ruim, e assim por diante. Não deve ser o design final de sua arquitetura de informações. Pelo menos não leve assim que seja rígido e que não possa ser mudado. A Kay? A experiência do usuário é o usuário em primeiro lugar. Portanto, temos que fazer o nosso melhor para criar um fluxo suave e fácil de usar. Mudar está tudo bem aqui. Bem, muito obrigado pelo seu tempo por fazer isso hoje. Tenha um bom descanso. Assuma a próxima lição. Tchau. 44. Aula - projeto do curso : tela wireframe usando design material: Olá a todos, bem-vindos de volta às nossas aulas de XD. Nesta lição, vamos transformar nossa arquitetura de informações em wireframes de fidelidade média. Vamos começar com a tela de login mais simples. Certo, preciso desenhar um motor de popa. Vamos selecionar Samsung Galaxy como dez, por exemplo. Você se lembra, a seção superior geralmente é usada para notificação do sistema, informações do sistema como sinal de melhor nível, tempo Wi-Fi e assim por diante. Podemos colocar este aqui também. Então, as duas barras superiores, geralmente 24 pixels, quatro dimensões dos telefones como Samsung como dez. No entanto, você deve ter cuidado e ler as instruções para o modelo preciso de encontrado ou outro dispositivo em que você está trabalhando. Porque isso pode mudar dependendo do modelo e, em seguida, fazer, ok, então eu escolhi este já, pré-feito como você vê, um que foi baixado da biblioteca de materiais. Então você pode visitar material que io cortar recursos e veremos muitas peças úteis de projetos, coisas pré-fabricadas, Modelos, Componentes, muitas coisas que vão economizar tempo e ajudá-lo a construir sua interface. Então material que eu cortar recursos, você verá que há uma biblioteca de ícones, ferramentas, fontes, cores, tipo, escala, gerador, projetos, kit de design de linha de base para kits de design Fichman, e assim por diante. Muitas coisas interessantes que podem ajudá-lo a construir sua interface K. Então vamos voltar ao nosso design. Vou movê-lo para cá. Então o que precisamos aqui, já pegamos a barra de ferramentas superior e precisamos criar dois campos para a entrada. Eu acho, omitir este. E como nosso tema será escuro, podemos pedir emprestado, eles têm coloridos em telas escuras, modos escuros. Somos capazes de mudar a cor da nossa barra de ferramentas. Então vamos fazer isso. Eu acho que isso é tudo. Também podemos querer adicionar alguma capacidade à nossa barra de ferramentas e é possível escondê-la de fato. Então, se você precisar escondê-lo, você pode ir para ele. Estamos fazendo a tela de login, ok? Esta é a grade que é padrão para x d, quatro colunas. Aqui vamos ver a senha do nome de usuário. Em seguida, o que precisamos é de um botão para fazer login. Vamos encontrar botões aqui. Nós fizemos este um membro, temos que ter certeza de que a pessoa pode se registrar aqui k. então escolher ração seria apenas construir para crescer protótipo do nosso aplicativo. E não preste muita atenção ao estilo de um. Embora eu pareça que ele já herdou algumas estatísticas de design de material, mas eu vou mudar a cor para largo para que ele não se sinta como se já fosse o login de design visual. Lembre-se se você precisa ter a maiúscula para cada uma de suas escadas, você pode usar esta função em maiúsculas, bem como outras. Também útil, precisamos ter algum logotipo. Vamos fazer esta seção para o logotipo. Ok, nós temos login, nós temos registro para pessoas que são novas no aplicativo. Talvez queiramos ter um pequeno slogan para que eles se registem e também os guie um pouco na tela. Então novo para nuvem nosso aplicativo, registrar, nome de usuário, senha, login. Parece que o login quer ser da outra cor, não parece. Secundário Barton. E vamos torná-lo um pouco mais escuro porque nós realmente queremos que as pessoas se registrem em nossa Apple quer dar a um usuário a chance de fazer login, embora com uma conta do Google que uma conta do Facebook. John ia repetir a palavra conta cada vez. Então lembre-se, prazer em diferenciar essas três seções porque o topo é o lugar para uma pessoa vai digitar os dados e pressionar o login. A outra parte serão as contagens com as quais uma pessoa pode fazer login sem digitar as informações aqui. E a terceira parte será a sessão de inscrição. Então pressionando esses bots e irá transferir o usuário para uma tela de registro. Então estas são três partes diferentes. Por favor, tente diferenciá-los, seja uma cor, algum espaçador e linha ou outra coisa. Mas tenha cuidado porque agora parece que três partes diferentes de seus votos, não tão amigável ainda. Mas ainda assim você vê que existem três grupos de elementos e eles são responsáveis por diferentes funções. Login. Aqui estamos vamos trabalhar apenas em cores que eu quero usar quaisquer outros elementos gráficos no, as sombras. Este botão não é fácil de pressionar. Se você se lembrar do mapa de calor, é quando chegamos a um mapa de calor, você verá que esta área não é fácil, preferível. Então, talvez queiramos levar um pouco para cima. Está bem, estamos a encolher o nosso logótipo o mais possível. Está bem. Agora parece que mais ou menos a tela de login usará espaçador para separar duas seções. Faça login com contas sociais e faça login com a senha no e-mail. Certo, temos a primeira tela. São wireframes de fidelidade média, por assim dizer. Não temos cores. Todos temos telefones aqui. Não temos o estilo final para os nossos botões. Não temos logótipo e muitas coisas. Ainda não tenho fotos aqui. Mas chegaremos a isso mais tarde. Está bem. Então, vemos que você pode estar confundido com um espaço aqui abaixo do botão Registrar Conta. Eu também acho muito estranho, mas antes de tudo, lembre-se de que existem diferentes ódios de dispositivos. Por isso, será uma área segura para, para casos com a menor tela. A outra coisa é que não é muito fácil de pressionar o lado inferior, a segurar o telefone com uma mão. Se você der uma olhada nos mapas de calor, você perceberá que o mais compressível anteriormente está em algum lugar aqui. Então, a partir do canto do botão Registrar Conta para o canto esquerdo do botão Login. Então isso é algo diagonal e é melhor organizar elementos quando seu u i, então não são facilmente acessíveis se você quiser que eles sejam acessados. Ok, então eu acho que isso é tudo para tela de login. 45. Trabalhando com protótipos: Oi lá. Neste vídeo vamos falar sobre protótipos. E os protótipos são a fusão de wireframes e interação. Por que precisamos disso para identificar lacunas de design. Então você vai descobrir que você tem navegação errada. Você perdeu a capacidade de resposta. Você pode alguma interação não incluir feedback após alguma tarefa. Você pode melhorar o design da interface do usuário, como posicionamento , estilo, tamanho dos elementos e tipografia. É a melhor coisa para testar entre os usuários em perspectiva para o seu público-alvo e considerar seu feedback para melhorias adicionais para o estágio de pais. Você pode introduzir as micro iterações aqui, como pop-ups, alertas e animação. Claro, como cada coisa e UX e você tem que discutir com a equipe, com seu cliente para ouvir seus comentários sobre o protótipo. Então aqui eu gostaria de salientar que a maioria dos protótipos que eu faço no Adobe XD, eu acho que a maneira mais eficiente. É um software leve, fácil de usar e tem muito fácil de usar na medida em que, e como é a família Adobe, muitos recursos, muitas ferramentas e teclas curtas são os mesmos que no Photoshop, que eu usei há vários anos para o design do aplicativo. Existem várias alternativas para o Adobe XD, como FISMA e sketch se você for usuário de Mac. Mas neste curso vamos nos concentrar no Adobe XD. Vou mostrar-lhe como organizar o seu protótipo, como criar a partir do que começar, e quais funções você tem que ter em mente. Alguns podem chamar wireframes protótipos, alguns podem chamar wireframes do protótipo, mas eu ficaria com protótipos como algo que tem interatividade, que tem capacidade de ser testado, algo que tem feedback para o usuário, algo que pode ser analisado. Está mais perto do produto final, em vez de arame. Então você pode ter um wireframes clicáveis e alguém chamá-lo de protótipo. Isso está tudo bem. A importância aqui é chegar mais perto dos melhores resultados possíveis. E seus protótipos como outras coisas que você fez. Eles também têm versões, revisões e espaço para melhorias. Mas coloque h estágio, eles serão mais refinados e utilizáveis. No palco de protótipos que são capazes de ver quais coisas você sente falta? Seus wireframes podem ser que você não tenha incluído alguns pop-ups que mostrarão ao usuário que esta operação foi bem-sucedida. Ou talvez haja alguns dados errados no campo de entrada. Você tem que destacá-lo de alguma forma, dar feedback do usuário. Então essas pequenas coisas que são realmente importantes para o usuário final estão incluídas em seus protótipos. E tente analisar esses protótipos por si mesmo várias vezes e implementar máximo de interatividade possível para estar mais perto do produto final que será usado pelos usuários finais. 46. Aula - projeto do curso: quadro com fio home e articulação: Em seguida, vamos fazer o registro. As inscrições serão como esta. Já tem uma conta. Então este é o gatilho para as pessoas que já têm a conta. Então, vice-versa, estamos ligando isso, vamos vincular esta tela a esta. E você vê eu vou protótipo sanção e pressionar este botão de login e agarrar a seta para esta tela. Aqui temos sobreposição de transição, role para reprodução de áudio de inicialização de arte anterior, reprodução de fala e assim por diante. O gatilho pode estar grampeado. Caso de drogas, gamepad. Voz. E animação poderia ser slide para a esquerda, slide direitos como para baixo. Você pode brincar um pouco com ele, mas eu vou explicar o essencial. Então, se precisamos ir de uma tela para outra pressionando significa que temos que tocar no botão. Então, a transição é realmente o que precisamos. Mas eu acho que auto animação ou seria melhor, deixe-me adicionar um link para esta tela a partir da tela de login. Vamos tentar. Diz que a animação automática é melhor usada. Quer animar pequenas coisas. Agora parece um pouco estranho porque não tem essa sensação de telas diferentes. Então vamos animar a transição e ver como funciona . Um pouco melhor. K para registro, precisamos de mais campos para preencher. Talvez seja um nome de usuário, é um e-mail. O que mais? Número de telefone, senha e passaporte repetido aqui vamos colocar o registro. Não tenho certeza de como eu vou logotipo vai olhar como, mas esta é a estrutura do nosso aplicativo. Normalmente, para designers de UI, se você trabalha nos novos atos, você tem que indicar o contraste, a colocação, talvez a área que é tomada pelo elemento ou objeto do grupo de objetos. Claro, deveria haver um texto Grã-Bretanha. Então, uma pessoa que trabalha depois que você vai entender se esta seção é para tentou usar os titulares de lugar real e deixe-me distribuir isso um pouco. Certo, então temos duas telas. Vamos marcar isso também, fez, vamos preservar o fluxo e vamos com a tela inicial. A tela inicial temos Filtro Pesquisa, refeições recomendadas e lista de restaurantes. Vamos encontrar o ícone Filtro nos ícones de campo. Basta baixá-lo se qualquer um dos ícones. Então é um filtro. Precisamos de um ícone de pesquisa para. Eu encorajo você a não gastar muito tempo em projetar ícones em seu palco wireframe, vez que é apenas um wireframe, É por isso que eu costumo escolher ícones das fontes abertas. Então temos busca, temos filtro, teremos pés. Refeições recomendadas e riscos de restaurantes, refeições recomendadas. A guia ativa onde estamos. Então acho que precisamos expandir a barra de pesquisa. E de alguma forma para garantir que estes dois elementos estão ligados entre si, parece que refeições recomendadas e apenas restaurantes, talvez o seu feed. E agora vamos voltar ao nosso Kit de IU e pegar o cartão, algo assim. Vamos tentar este e ver se é adequado para o nosso aplicativo. Muito espaço. Em primeiro lugar, penso que podemos mudar o pano de fundo. Vamos nomear este Fried Chicken. Aqui teremos o logotipo do restaurante. Pode ouvir a descrição e não tenha medo da imagem grande porque a comida está sendo vendida no, usando esta abordagem quando temos aplicativos, quando temos sites ou melhor promoção que não pode transferir cheiro, eu sentir que seremos capazes de ter alguns rabiscos aqui como este. Está bem, deixa-me explicar-te. Somos capazes de criar três tipos de pergaminhos, que é Pan, horizontal e vertical. Aqui vamos usar a rolagem vertical. Para este, você tem que selecionar elemento, expandir as bordas. Então eu tenho um grupo, eu o agrupei, e agora você vê que somos capazes de rolar. Fácil. Então a próxima coisa que vamos fazer é ter alguns botões aqui, claro, ação um. E há uma ação para nós teremos ordem ou ler mais. Oh, você vê esses carros, DR. Dynamic e nós vamos e agora temos função de busca. Ele ainda quer se livrar deste título de taxa pura. Então, temos uma tela inicial que vamos vincular ao nosso login. Sim, esquecemos de algumas configurações. Meu perfil no histórico de pedidos. Então eu escolhi três ícones para lista ordenada e perfil de usuário. Não tenho certeza se é a melhor opção para o histórico de pedidos. Eu colocaria relógio de areia muito tempo gasto na colocação. Eu sei que sou eu quem vai fazer os desenhos visuais e tentar ir um passo adiante e pensar sobre como eles serão organizados. Então, além da tela inicial, precisamos filtrar que terá categorias e assim por diante. Quando procura que temos resultados de pesquisa, precisamos de refeições recomendadas e lista de restaurantes. Aqui é melhor usar animação automática porque vamos ver esse movimento leve. E novamente, estamos nos movendo para a seção de um protótipo para vincular telas. Vou colocar OTO animar quando você ver que eles estão se movendo. Então temos duas seções já projetadas. 47. Aula - projeto do curso: adicionando interação às: Em seguida, vamos criar a tela para a refeição. Talvez queiramos ajudar os usuários a voltar a partir desta página, então não precisamos de barra de pesquisa e tocar mais. Então aqui precisaríamos indicar o nome de Neil. Encontrei um nome de pé muito bonito e uma foto. Precisamos de restaurantes onde está sendo cozinhado. Descrições também importam, mas ainda não como fotografia. Então eu não vou gostar de lorem ipsum. Sim, não temos mais nada. Então, se temos uma variedade, precisamos de outro elemento chamado botão de rádio, veículo, peixe, Turquia. Temos um protótipo rho da página. Agora precisamos que o botão para que seja melhor para nós reorganizar nosso layout para esta grade tão consistente com ópio. Não tenho certeza se o cartão é o nome apropriado aqui, mas vamos deixá-lo por enquanto. E agora precisamos ajustar o número de alimentos que estamos encomendando. E assim, você pode criar seu próprio conjunto de elementos pré-projetados como este. Então agora temos a refeição é ver que temos um rabisco escondido ou descrição que nos permite ter uma área fixa no fundo. E temos uma variação, peixe vegano, perú, e haverá mais menos. Agora vamos conectar nossas telas novamente. Assim, a lista de correio será conectada a uma página de refeição. Todos temos que lembrar o botão Voltar, que nos dirigirá para a tela anterior. Vamos experimentar o nosso aplicativo. Variação não era a tela, então vamos levá-lo para baixo muito mais fácil sem pop-up adicional ou janela de transição tudo em uma tela. Acho que agora podemos fazer o histórico de pedidos, a ordem em si. Quando você deseja duplicar elementos horizontalmente ou verticalmente, você pode usar repetição de ganância. Então, uma vez que você agrupou e pressione repetir ganância, podemos derrubá-lo ou direita, esquerda. Você vê que é fácil criar tabelas, coisas que se repetem e mudam simultaneamente. Pastor ervilhas do sul e seu custo. Vamos colocá-lo aqui. O tempo total de entrega provavelmente não é o melhor para indicar aqui, porque ainda queremos saber onde entregar este alimento. Vamos criar take away e quatro, takeaway ou entrega. Teremos duas guias. Muito conveniente. Talvez. nossa família tem uma rota específica e o restaurante fica nas proximidades, por isso podemos dar-lhes outra opção, que é takeaway. E para um restaurante, é uma poupança em termos de entrega. Agora, vamos definir quais seções precisamos de mais confiança cidade, bloco. Ele já estará predefinido no telefone. E o endereço será emprestado dos dados dos meus perfis. Embora possamos mudar o seu K Uma vez que pressionamos as entradas nos dados já digitados texto, podemos alterá-lo se necessário. Essa é a ideia. Uma vez que selecionamos a entrega, então inserimos informações de contato e endereço. Em seguida, seremos levados para uma tela de confirmação que nos mostrará quantos minutos ou horas por deve esperar. Então ele mostra costa total, ele mostra o tempo de entrega, ele mostra seu vestido e mas não confirmado, mas eu também vou adicionar outra ordem de edição botão. Porque uma vez que um usuário ou mudar de idéia, ele deve ser capaz de voltar para a tela anterior. Mesmo que tenhamos esta seta ainda não tão claro que podemos editar ordenado. Então temos que criar tela de sucesso. Parabéns. Sua comida está a caminho de sua casa, ID de pedido e tipo de temporizador aqui. Vamos adicionar os links. Estamos logando. Temos o nosso alimento de refeições. Pressione o pastor com salmonela e ervilhas. Podemos rolar a descrição. Lembre-se da rolagem vertical e horizontal. Podemos selecionar o cartão de edição confirmado e o temporizador continua. É tudo por enquanto parte de um prototipagem de fidelidade média. Obrigado por entender como as telas devem ser organizadas. Você pode selecionar outro kit de interface do usuário se desejar. Há muitos deles aqui. Obtenha material do kit de interface do usuário, wireframes da Microsoft, muito mais. Vocês são crianças, vocês podem cortar algum ano. Isto não é importante. No palco de wireframing. Você não tem que pensar muito sobre o estilo do seu u. eu tento testar o fluxo para encontrar algumas lacunas de design, lacunas fluxo, falhas de UX e assim por diante, bem como lacunas de feedback. O tempo em projetar Garota por quadro deve despejar com muita precisão. Porque o wireframe é o ponto intermediário entre a pesquisa que você fez antes e o design visual que tem que economizar seu tempo no design visual. Então não exagere tentando tornar as coisas perfeitas neste palco. Ok? Então, muito obrigado pelo seu aeroporto e por toda a sua longa lição. É difícil. É chato às vezes, mas sabe, no final dos dias, você tem essas telas, você pode pressionar, você pode experimentar o design não estava lá? Você fez uma sensação muito, muito agradável quando você pode compartilhar seu protótipo para seus amigos, para seus amigos e partes interessadas do que eles vão lhe dar um feedback. Espero que eu bom feedback. E a próxima lição vamos tentar definir e torná-la perfeita. Obrigado mais uma vez e divirta-se. Vemo-nos na nossa próxima lição. 48. Testando e avaliando e: Depois de concluir seus protótipos, você pode começar a testar. E testar é o tema deste vídeo, ok, esta é a conclusão do seu trabalho feito até agora. E há várias maneiras de fazer testes de usuários. Em primeiro lugar, vai entrevistas cara a cara, e há serviços de terceiros e, em seguida, questionários de acompanhamento. A maneira mais eficiente, claro, é cara a cara coisa para usar. Você precisa encontrar seu público-alvo, o representante de seus usuários. Faça-lhes perguntas, peça-lhes que executem uma tarefa. Você precisa tomar notas, tentar ajudar os usuários a pensar em voz alta, e você será capaz de colocar para baixo notas sobre o que eles pensam. Você pode usar equipamentos especiais como eu ou câmeras de rastreamento de dedos. Em seguida, você prepara seus relatórios e extrai os pontos necessários para alterações na próxima iteração. Outra maneira de fazer testes de usuário é usar serviços de terceiros. Há muitos deles como testes de usuários, plug-in para XD, cirurgias, tipo pyro formulário, pesquisa, macaco, relatório de usuário recebe satisfação, enorme resposta. Os clientes com certeza, pergunte gentilmente. Há muitos, muitos, muitos outros que você pode usar para o seu teste de usuário. E eles têm relatórios integrados. Alguns deles têm testes gratuitos limitados a versões. Claro que eles são recursos pagos. Você pode escolher o serviço de acordo com os requisitos do seu teste. Os recursos que são necessários para o teste. Provavelmente o preço também será considerado. E a outra coisa é ter questionários de acompanhamento. Você também pode fazê-lo remotamente ou pessoalmente. Você pode usar o Formulários do Google para criar seus anos de perguntas se você declarar as tarefas e fazer perguntas de acompanhamento na pessoa depois de usar o protótipo irá responder-lhe. Nós vamos preencher o questionário e você será capaz de analisar uma vez que o teste é concluído. E-mail, é claro, é a maneira tradicional de obter alguns comentários dos usuários depende do tipo de perguntas que tipo de teste de usuário que você está fazendo. Há vários. Para trabalhar com um grande público, provavelmente você precisa selecionar algo que é oferecido por serviços de terceiros. Como eu disse antes, sim, eles são pagos, mas eles têm esse público e você pode especificar os critérios necessários para filtrar pessoas que não são seu público-alvo. Então, vamos dar uma olhada nos tipos de testes. Primeiro. Pode ser em laboratório ou em campo, UMass Carson, para vir ao seu escritório ou colo e realizar uma entrevista lá. Ou você pode fazê-lo em um campo como fora e café no ambiente natural para o produto. Pode ser moderado. Em moderado, quando você se senta perto pessoa e você monitorar tudo, ele ou ela fazendo ou seja, colocar notas como perguntas. Isso é um teste moderado. Você pode fazer um teste sem moderação. Peça à pessoa para usar o site ou aplicativo e aguarde uma resposta. Pode ser presencial ou remoto. Está bem. Seu relatório deve incluir um resumo de fundo. É o ambiente, as ferramentas, dia, hora, talvez seja usando esses telefones celulares, por favor, coloque isso também, porque é importante para uma metodologia de design de aplicativo móvel que você use a lista de cenários e tarefas e descrição dos participantes. Como você tem cenários, você pedir ao usuário para executar alguma tarefa que deve estar em seu relatório. Então, eu vou dar-lhe um exemplo de relatório de teste de usuário mais tarde. Então, o próximo vai os resultados dos testes. Você tem que incluí-lo. É um feedback do usuário. É um número de tarefas com sucesso versus em realizar com sucesso. Número de participantes, tempo necessário para realizar cada cenário. E suas descobertas e recomendações como prós e contras e conclusão. Então você vai encontrar algo interessante em seu teste. Claro que você tem que abaixar. Esse é o propósito deste teste para encontrar coisas interessantes, para obter esses insights, para evitar frustrações para melhorar, para definir o Product_Type mais tarde. O relatório típico de teste de usuário ou o relatório de usabilidade inclui um resumo geral, metodologia, resultados de teste e insights. Resumo de fundo. É o ambiente do teste onde ele está tomando, qual era o espaço, o equipamento, se é específico para modal, você deve colocá-lo para baixo também. Também a hora e a data devem ser indicadas em seu plano de fundo. Verão. Metodologia significa que você inclui em seu relatório listas de cenários e tarefas, e descrição dos participantes. Então você tem algumas tarefas específicas que você é um participante tem que executar. Por favor, inclua-o. Caso contrário, você não será capaz de analisar a situação após o teste do usuário. Ok, em seguida vai os resultados dos testes. Claro, sem resultados de teste, você pode ir a qualquer lugar. E os resultados dos testes incluem feedback do usuário. Então você pede aos seus participantes para pensar em voz alta se ele enche pouco confuso com navegação. Ok, você abaixou, tentou obter o máximo possível de informações do usuário. E é bom ter o número de participantes porque você será capaz de comparar resultados e ver o quadro inteiro indicar o tempo necessário para realizar cada cenário em seu relatório de usuário. É claro que as percepções também são importantes no relatório. Você pode achar que existem alguns prós e contras. Talvez um participante lhe dê algumas ideias. Quem sabe? Bem conduzindo a entrevista, tente pedir ao participante uma conclusão. O que Ele ou ela se sentiu bem realizando essas tarefas. E também escreva sua própria conclusão no teste. Considerando todas as informações que você tem em mãos, seja uma alta taxa de sucesso ou sua baixa taxa de sucesso, se as pessoas estavam sofrendo com a pesquisa do item específico ou foi fácil de encontrar. Um. Se é fácil navegar no aplicativo ou é difícil fazer isso. Você pode testar um módulo específico ou novo recurso ou um novo serviço que foi introduzido quando o projeto atual ou você pode testar todos os projetos. Então, aqui você pode expandir ou encolher seus testes de usuário, se necessário. Depois de terminar o teste do usuário, você será capaz de analisar os resultados. E pode ser útil agrupar as descobertas em problemas de design e não design e começar a implementá-las em seus wireframes e sua arquitetura de informações. Provavelmente existem algumas outras descobertas que requerem alterações em outros estágios do Design de UX. Aqui está o exemplo do formulário de relatório de teste do usuário. E você verá que há você verá que há uma descrição de uma pessoa que foi questionada para executar uma ação. E a mesa e a conclusão, você pode pedir uma conclusão, você não pode. Depende do no seu formato de teste. Está bem. Então aqui temos a data sete lugar de agosto, equipamentos de escritório, Samsung, um sete, ferramentas, deck lodge, webcam, inscrição cenário, sucesso direto de 0 a cinco, dentro, prós, contras, e levar tempo para executar a ação. Eu listei se três cenários que o usuário teve que executar. Estes são cadastrados, que usuário marcou quatro em cinco. Então é taxa de sucesso. Descobrimos que precisamos adicionar conta Vimeo para autenticação e tempo necessário para esta ação foi de 35 segundos. A outra atividade que pedimos é encontrar uma anotação para alívio do estresse. E recebeu cinco estrelas. Mas temos que limitar o número de meditações a cinco em cada categoria. Porque ter muitas meditações, pouco confuso, às vezes crescia tempo que exigem, que precisava para executar esta ação foi um minuto e 14 segundos. Em seguida, pedimos ao usuário para sentir a informação do perfil. Ele recebeu três estrelas de cinco porque há muitos tipos de dados para um usuário preencher. E decidimos dividir os dados pessoais e retrato psicológico em duas seções ou duas etapas. A2, usuário, dois minutos e dois segundos para preencher todas as informações e a conclusão dos participantes é a seguinte. Eu me senti muito experiente usando este aplicativo, é fácil de se inscrever e começar a meditação. No entanto, eu preferiria ter conta de e-mail para autorização e questionador perfil parecia um pouco longo. Está bem. Assim, você coletar este tipo de informação de cada um de seus participantes e você pode ter outro, o formulário de relatório geral onde você incluir os destaques de seus testes. 49. Visão geral de design de UUI: Neste vídeo, vamos rever a seção de design da interface do usuário, visão geral da interface do usuário, certo? Isso está dando a você uma visão geral de diferentes interfaces em diferentes plataformas, sites diferentes, realmente dando a você o outro lado da UX, onde UX normalmente vai ser mais focado na experiência do usuário. Funis de vendas, viagens de clientes onde a interface do usuário é a interface real com a qual os usuários interagem, certo? Layout, o esboço do site, a interação, a interatividade que eles vão ter até o uso de um site específico, usando um aplicativo específico, certo, então vamos em frente e rever a visão geral da seção U-I. Então, nesta seção, vamos rever a visão geral da interface do usuário. Vamos repassar o que você é, é como funciona. Você pode ver aqui, obviamente, a partir da imagem à direita, esta vai ser a interface de usuário que vamos estar trabalhando com nesta seção particular. Trata-se realmente de entender a interatividade dos usuários, como eles estão usando o produto, como ele é definido, como é fácil para eles navegar usando seu produto, a facilidade de uso e qualquer tipo de soluços ou bloqueios de estrada ao longo do caminho. E então vamos passar por cima dos tipos comuns de interfaces. Nós vamos rever vários tipos diferentes de sites, plataformas diferentes, e tipo de dar-lhe uma visão geral dos diferentes tipos de interfaces lá fora no mercado. E então vamos rever a visão geral das páginas de aterrissagem. Vamos passar por diferentes tipos de páginas de destino, como elas são definidas, o propósito delas, até onde você quer que elas sejam usadas, como você quer colocá-las para fora. Para que seja muito fácil e simples para o usuário entrar e tomar qualquer ação que você está procurando para que eles tomem. E então os componentes da interface do usuário, elementos. E, finalmente, os controles da interface do usuário, certo? Então, estou animado para você começar aqui nesta seção U-I. Esta seção também inclui uma tonelada de lições diferentes no Adobe XD, vamos analisar diferentes designs de cabeçalho, layouts comuns, dispositivos móveis e desktop. Design de botão de design de rodapé, design de entrada , design suspenso e todos os tipos diferentes de projetados para funções móveis e desktop. Então, temos um pouco de lições práticas no Adobe Extreme nesta seção particular, bem como os outros. E estou animada para você começar e nos vemos no próximo. 50. Visão geral de design de UUI: Neste vídeo, vamos rever o design da interface do usuário. Então, passamos pelo design de UX e todas as outras lições diferentes na seção UX. E o design da interface do usuário realmente vai ser sobre a interface do usuário dos produtos reais, certo? Como os usuários o usam, como eles estão navegando através dele. E então ser capaz de ter algo que é agradável e fácil para eles realizar qualquer tarefa que eles estão procurando realizar com a interface de usuário, certo? Porque, em última análise, isso é o mais importante, certo? Você pensaria em uma interface de usuário para como Facebook. O Facebook quer que você tenha uma ótima experiência. O Facebook quer que seja mais fácil para você poder se conectar com seus amigos e familiares, ser capaz de assistir vídeos, ser capaz de postar coisas diferentes em seu feed de notícias. E então essa interface está fazendo isso. Então é muito fácil e simples para alguém fazer isso, certo? Então é sobre isso que vamos estar falando aqui no design da interface do usuário. Vamos falar sobre o que é, como funciona. E vamos entrar em alguns detalhes muito específicos. E então vamos olhar para UX versus UI. Então vamos em frente e pular aqui. Então, com design de interface do usuário, interface de usuário, este é o processo que os designers usam para construir interfaces e software ou qualquer tipo de dispositivos com foco em aparência, sensação e estilo. E como eu mencionei anteriormente, os designers estão procurando criar interfaces que os usuários acham fácil em prazeroso. Eles querem ser capazes de voltar para a plataforma, certo? Então pense no Facebook de novo. Quando você está no Facebook, é uma experiência prazerosa. É muito fácil de navegar. Sim, eles têm um monte de atualizações, mas na maior parte, essas atualizações estão aprimorando a plataforma, aprimorando a experiência, certo? É por isso que eles têm bilhões de usuários. E assim, em última análise, com o design da interface do usuário, é tudo sobre o usuário e como eles podem navegar facilmente na interface. Queremos torná-lo super simples, super fácil. Tenha uma boa experiência, certo, para todos os usuários. E quando olhamos para UX versus UI, designers de UX estão perguntando como perguntas, como o fluxo de usuário pode ser muito mais simplificado? Como pode ser muito mais estruturado? Como pode ser um processo mais fácil para o usuário real? E, em seguida, os designers de interface do usuário perguntando o que perguntas. Quando você pensa em design de UX, pense em psicologia, comportamento e previsão, certo? Nessa seção, passamos por um pouco de psicologia comportamental. A psicologia desencadeia um monte de diferentes métricas de influência, um monte de diferentes gatilhos de influência. E queremos que as pessoas tomem medidas, certo? Descubra qual é o processo, qual é o fluxo. Isso é mais fácil para eles realmente se tornarem um cliente versus a interface do usuário é que queremos que as pessoas sejam capazes de ler a informação, acessá-la, ser capaz de trabalhar nela e usá-la e ter uma experiência muito agradável para o usuário final. E as próximas lições vamos passar por diferentes tipos de interfaces. E nós também vamos rever algum design da página de aterrissagem. Então, isso vai estar aqui para a diferença entre designers de UX e UI. E nos vemos no próximo. 51. Tipos Tipos de design de UUI: Neste vídeo, vamos rever os diferentes tipos de design de interface de usuário. Então vamos em frente e pular aqui. Há uma tonelada de diferentes tipos de design de interface de usuário. E então o que eu vou orientá-los por aqui hoje são apenas alguns dos diferentes tipos de interfaces que você estará experimentando e que você estará vendo no mercado. Então vamos em frente e pular aqui. Então o primeiro tipo de interface será um site corporativo. Os sites corporativos serão um grande papel nisso porque essa é uma das primeiras áreas que alguém consegue olhar para uma marca ou um negócio, certo? Ou talvez até mesmo um produto. Quando eles acessam o site, eles são capazes de ver como essa empresa está se representando diretamente no mercado. Tão importante. E, em seguida, vendas em páginas de destino. E vamos rever alguns exemplos disso também. E obviamente, você sabe quais são as vendas e as páginas de destino. Temos a página de vendas que está impulsionando o tráfego real para fazer uma compra. E a página de destino é tipicamente lá para dirigir o tráfego e realmente conectar informações, certo, coletar esse chumbo. E então temos diferentes páginas promocionais onde há algum tipo de oferta de desconto ou uma promoção que diz às pessoas, hey, 20% ou 30% de desconto. E é muito assim para tipos específicos de vendas. E então temos e-commerce. Tipos de e-commerce de sites são muito originais e os clientes bem, grande jogador no jogo, uma Shopify, no entanto, muitos sites também são personalizados e eles são projetados com a interface de usuário no meu, certo? Compreender que a baixa do usuário, como eles estão usando o site e a facilidade de uso vai ser muito, muito importante. Então e-commerce, você também vai ver isso um pouco. Também no software baseado em SAS como um serviço, você vai ver esta interface um pouco. Você olha para diferentes empresas de software saindo do Vale do Silício, a área de Seattle também. E então realmente qualquer tipo de empresa de software em geral, não vai ter tipicamente uma interface de usuário muito única. E então temos sites para dispositivos móveis. Quando você está olhando para sites específicos em seu telefone, ele normalmente terá uma interface diferente da que se você estiver fazendo isso on-line diretamente através de seu desktop para um tablet. Então, é muito importante que, especialmente nos sites móveis, você seja capaz de torná-lo super simples, super fácil para o usuário, porque se você tem muita coisa em um só lugar ou tudo confuso, então vai torná-lo para que eles não querem interagir com o negócio ou o site usando seu telefone quando o telefone é praticamente usado na maioria das vezes agora, certo? A maior parte do tráfego vem de mobile direct. Então, muito importante entender sites móveis, a interface de usuário do que, e como se certificar de que é fácil de usar para o usuário final. Ok, então vamos dar uma olhada em algumas das diferentes interfaces de usuário aqui. Então temos portais e mídias sociais. Então, como você pode ver aqui, a hierarquia de conteúdo no layout aqui é muito simples, design muito mínimo aqui, muito conteúdo pesado. Isso é otimizado. Você tem idiomas diferentes, você tem normalmente como um recurso de pesquisa. Então você pode encontrar artigos diferentes, vídeos diferentes. Isso normalmente vai ser o mesmo para como Facebook, também para como Pinterest ou qualquer uma dessas plataformas de mídia social também. E depois temos os sites corporativos. E isso vai ser muito personalizado aqui. No entanto, vai ser consistente com a marca, os esquemas de cores, certo? E, em seguida, um muito poderoso acima da dobra. E nós vamos entrar nisso em outra lição exatamente o que é isso no poder disso. E então representa áreas de especialização, certo? Você tem que gostar de ouvir sobre a seção. Você tem seus serviços. E isso também pode ser apenas uma página. Você pode ter todos os seus serviços, seu sobre nós, suas informações de contato tudo em uma página. No entanto, organizações maiores são exatamente onde eu diria que mesmo apenas organizações modernas e empresas em geral vão ter sites de várias páginas, certo? Como você pode ver lá com a Honda, eles têm uma interface de usuário muito fácil aqui. Eles têm a busca no canto superior direito, então eles têm o menu à esquerda. E também a Sony tem uma interface de usuário muito agradável também. Para muito fácil obter o logotipo na parte superior. Você tem o menu no canto superior direito também. E é super fácil de navegar. Você tem que filmar lá. Então, quando você olha para diferentes sites corporativos agora, o que você vai notar é uma grande imagem ou um vídeo no início, certo? E, em seguida, abaixo que você vai ter o conteúdo diferente. E isso é normalmente o que você pode esperar com sites corporativos. E então temos as vendas em páginas de destino. Vendas e páginas de destino são normalmente, você sabe, certificando-se de que você navega pela página com facilidade. Há um bom fluxo para ele e há consistência com o foco ação branding fazendo com que você tome uma ação ou para comprar ou colocar em suas informações e é normalmente vai ser uma página seria rolagem direita? Você vai rolar para cima e para baixo essa página. Tipicamente pesado em conteúdo para uma página de vendas porque precisa ser muito convincente para você tomar medidas ou comprar, certo? Então, há muitos elementos de noivado. E especialmente se você tem uma página de vendas, você quer ter a segurança lá onde você vê aqui em vermelho facts.com. Eles têm o Norton seguro. Eles têm a garantia ou garantia. Eles autorizaram .net porque querem que você se sinta seguro fazendo uma compra através de sua plataforma, certo? E a próxima que temos são as páginas promocionais. Isto vai ser tipicamente para novos produtos, para qualquer tipo de promoção especial. Eles são normalmente um monte de animações diferentes, gráficos pesados, tecnologias web de ponta geralmente. E isso realmente vai te dar uma experiência memorável, certo? Você vai vir a esta página. Vai aparecer que Jim, vai fazer lembrar disso para que se você não tomar uma ação quando você pousar naquela página ou você não comprar ou o que quer que seja que essa página quer que você faça, certo? Vai ser lembrado, você vai se lembrar, vai estar na parte de trás da sua mente por causa do design único e como ele está definido. E então temos os diferentes sites de comércio eletrônico usam. Você vai ser muito focado no produto, gostaria de uma consulta de pesquisa com muito pouco texto, certo? Porque você não está tentando ter um blog aqui ou algo assim onde você pode. E a coisa é que nós não estamos realmente tentando ter um monte de texto aqui porque sua principal intenção aqui. Para vender um produto, certo? É um bom produto fora da porta e você quer que as pessoas venham aqui comprar. E então isso é muito assim vai ser cheio de produtos diferentes. Vai ser fácil para as pessoas serem capazes de comprar o produto nos cartões e passar por essas microconversões diferentes, certo? Para finalmente fazer a conversão de macro, que é uma compra, certo? E então temos o SaaS, que é o software como um serviço. Isto vai ser um pouco mais único e complexo. No entanto, ele vai torná-lo para que seja muito fácil e simples para o usuário. Eles têm muita simplicidade em nossa navegação. Muitos esquemas de cores diferentes com base na marca. E vai ser móvel amigável e a maioria vai estar acima da dobra, certo? E tenha em mente, estas serão tipicamente muito mais sofisticadas, uma arquitetura muito mais complexa. No entanto, a interface vai ser muito importante aqui porque as pessoas vão estar normalmente pagando por como uma taxa mensal ou talvez pagando em uma base anual ou talvez você compra uma vez, mas normalmente uma taxa mensal para ser capaz para usar o software. Haverá centenas de milhares, se não milhões de pessoas usando o software, dependendo do que ele é. E vai ser importante que é fácil de usar e tem um bom esquema de cores, o que a marca e é, em última análise, uma experiência prazerosa, trabalhar dentro da interface. E então temos sites para dispositivos móveis, certo? Isto é algo onde você precisa estar muito, muito consciente quando você está construindo um site ou se você fez qualquer tipo de desenvolvimento web, você quer ter certeza de que você tem a capacidade de olhar para o site em um versão móvel. Porque muitas vezes sites serão construídos e, você sabe, páginas de destino serão construídas, você sabe, páginas de vendas. Vamos buscar o Bill e depois olhas para eles no telemóvel e estão completamente desligados. Então você precisa olhar e certificar-se de que o tamanho das margens dos elementos está correto, que tudo se encaixa no telefone, se encaixa na tela. Queremos olhar para o tamanho da fonte, diferentes orientações, que diferenças no dispositivo, certo? Se você tem um telefone Android versus um celular, você tem um tablet, certo? Como aqueles Rog garantiu olhar nesses dispositivos é crucial porque você quer ser capaz de fazê-lo para que haja muito pouca diferença entre eles indo para o desktop ou o telefone real é apenas, crucial porque você quer ser capaz de fazê-lo para que haja muito pouca diferença entre eles indo para o desktop ou o telefone real é apenas, vai ser um pouco mais de um tipo de visão condensada, certo? Tipo de interface. É muito importante manter isso no fundo da sua mente. E algumas outras coisas para ser cauteloso, tanto quanto os recursos móveis. Você quer olhar para as funções de deslizamento, as diferentes funções multitoque adicionais, e também o toque e segure direito? Um monte de aplicativos diferentes, um monte de programas de software diferentes lá fora. Diferentes sites estão agora tendo esses recursos já configurados dentro deles, ou eles estão sendo criados com essas funções e recursos em mente. Então isso é apenas algo para estar ciente, especialmente nos dispositivos móveis. Então, isso vai ser aqui para o design da interface do usuário, tipos de design. E nos vemos no próximo. 52. Visão Visão: Neste vídeo, vamos analisar os diferentes tipos de páginas de destino e os diferentes tipos de interfaces de usuário que todas essas páginas de destino têm. Então isso vai ser algo onde vamos percorrer vários designs de página de destino diferentes. Vou mostrar-lhe como eles estão armados e por que eles estão configurados de uma certa maneira. E os diferentes fatores de interface de usuário que entram em jogo com cada tipo de página de destino. Então vamos em frente e saltar para a lição. Então, os tipos mais comuns de páginas de destino são estes aqui. Você tem sua página squeeze, que é um tipo de geração de lead de página. E então você tem sua página de captura de leads, que obviamente está lá para coletar informações e leads, e então sua página de vendas lá para vender um produto ou serviço, o que quer que seja. E, em seguida, a página de agradecimento para que você saiba que você encomendou com sucesso o produto ou a informação que você que solicitou foi enviada para o seu e-mail ou você pode baixar o produto ou o que quer que seja. Escreva uma página de agradecimento. Muitas vezes é ótimo para ser capaz direcionar o público para o próximo passo em seu funil. E, em seguida, a página de destino de erro 404. Esta é uma página onde se alguém está indo para uma das páginas do seu site e ela não existe mais. Você quer ter uma página de aterrissagem 404 lá. E você quer ter algum conteúdo específico para poder usá-lo a seu favor. E então temos finalmente aqui a página de registro do webinar, especialmente agora onde muitos treinamentos e muitas reuniões estão sendo realizadas online. O registro do webinar vai ser algo que muitas empresas diferentes vão começar a implementar bastante. Então vamos passar por cada um desses individualmente. Então aperte as páginas. Estes são muitas vezes mais curtos, mais simples e contêm muito pouco texto e imagens muito pequenas, apenas algo curto, doce até o ponto. E muitas vezes estes serão pop-ups onde você vai a um site, talvez você esteja lendo um blog ou algo assim, ou você pousa na página inicial, você verá um pop-up que aparecerá na página real. E ele vai lhe dar a opção lá com pouco grande x. você pode ver pelo texto de peso, este aqui está dizendo para você esperar para não sair porque ele está percebendo que você está tentando sair do site. E então ele está dizendo, hey, espere, você vai ter isso aqui de graça. Tudo que você tem que fazer é colocar informações. Então estas são as páginas squeeze tipicamente vai ser muito curto e doce. Muitas vezes ele nem sequer tem essa quantidade de texto é apenas hey, obter a sua cópia deste ou Hey, obter este ebook particular ou download ou o que quer que possa ser. E vai ser tipicamente em um pop-up. Ok, então vamos rever a página de captura de chumbo agora. As páginas de captura de leads são as mais utilizadas em todo o funil de marketing porque elas são um pouco mais longas do que uma página squeeze porque elas mostram e dizem o que você vai receber, certo? O que você vai chegar até o download de um ebook. O benefício disso, talvez outras pessoas que se beneficiaram do ebook real ou dos produtos, certo? Mas eles não são o Islã como uma página de vendas onde você tem que ter um monte de cópias de vendas diferentes, um monte de depoimentos, moldura de prova social. E assim com uma página de captura de lead. É muito importante ter um bom equilíbrio entre o pedido e a recompensa na página que você é solicitado é apenas FirstName, LastName, e, em seguida, um e-mail muitas vezes diferentes dependendo do tipo de páginas de destino que você está construindo. Quanto à página de captura de leads, você pode querer coletar algumas informações sobre o usuário, tanto quanto seu número de telefone, talvez seu endereço, certo? Basta pensar sobre como imóveis, você pode querer tentar obter sua pontuação de crédito, coisas dessa natureza que vai ser relevante para esse mercado específico. E assim você pode ver nesta página particular aqui, eles estão fazendo um pouco de venda, tanto quanto por que você deve baixar este ebook, por que você deve agora conhecer esta lista de verificação aqui, certo? Eles estão dizendo que você vai conseguir isso. É por isso que é importante. É por isso que você deve baixá-lo. E eles estão te dando um pequeno discurso, certo? Então vamos olhar para uma página de vendas agora. Agora este vai ser o único que está realmente impulsionando as vendas, as compras, certo? Aquele que vai exigir muita cópia, vai ser tipicamente muito longo ou dependendo de quanto tempo você quer fazê-lo. Mas definitivamente vai ter um monte de elementos diferentes, como prova social, certo? Os depoimentos, você vai ter um monte de cópias. Você vai ter um monte de pontos de bala diferentes. Você vai realmente vender o produto, certo? Porque aqui é onde você realmente quer que as pessoas saibam exatamente o que estão recebendo, certo? E em uma página de vendas você pode ter um vídeo e tudo depende do tamanho da oferta, certo? Então você pode vender um produto por até $50 com uma página de vendas agradável e simples, certo? Mas se você está tentando vender um produto por mais de US $1000, certo, então você vai precisar fazer algum tipo de Webinar ou carta de vendas virtual onde você tem um vídeo que mostra a eles o que eles vão receber. E então você os leva para outra página, que é a página de vendas final para que eles realmente puxem o gatilho. Mas para a maior parte você vai ver uma página de vendas que vai ser persuadindo você a comprar o produto e ele precisa convencê-lo, escrever todas as palavras, escrever a cópia. Por que você deve comprar o produto, por que é do seu interesse e por que sua vida será melhor depois de comprar o produto, certo? E assim o comprimento normalmente vai variar, certo? Você pode ter alguns que são curtos, você pode ter alguns há várias páginas diferentes, e tudo é normalmente baseado na quantidade de informação que você precisa para ser capaz de explicar o valor para o usuário final exatamente como eu disse, direito sobre por que faz sentido para eles comprar, por que sua vida vai melhorar por ter o seu produto, certo. Está bem. Então vamos rever a coisa. Q páginas de confirmação. Então, obrigado. As páginas de confirmação vão ser ótimas porque permitem ao usuário baixar o produto, para obter o que quer que seja que ele realmente optou e colocar em suas informações. Mas também permite que você diga a eles, hey, vá aqui, confira isso, vá ao meu site e veja este artigo em particular, ou vá conferir este link, este vídeo, certo? Seja o que for, você pode facilmente direcioná-lo para outra fonte de informação do seu site, talvez outro produto, seja lá o que for, certo. Uma vez que você os leva para chegar na página de agradecimento, você sabe que eles compraram algo ou eles baixaram um produto ou o baixado. Tipo de guia chichi ou ebook. E assim há chumbo quente. Ok, então vamos para as páginas de erro 404 agora. Estes também são extremamente poderosos aqui. Obviamente, você realmente não quer ter um monte destes, mas, mas, muitas vezes você terá um link particular ou você tem um determinado artigo ou uma página, o que quer que possa estar em seu site e ele não está mais lá. No entanto, quando você tem pessoas pousando nessas páginas, você quer que eles sejam capazes de trabalhar para você e não contra você, certo? Você quer ter algum tipo de humor lá dentro. Você quer que eles saibam, essa página não está mais aqui, ou por alguma razão eles se perderam no ciberespaço. Mas eu sei que você ainda está interessado em fazer X, Y e Z. Ei, veja esse recurso aqui, ou confira esse recurso ali, certo? Então você quer ser capaz de reconhecer o, hey, esta página não está mais aqui, mas hey, aqui está outra página que você pode achar interessante, certo? Portanto, é uma ótima maneira de torná-lo para que você entenda que esta página não está mais aqui, mas aqui está uma alternativa que você pode achar útil também. E, finalmente, aqui temos as páginas de registro do webinar. Agora, estes estão se tornando muito mais populares no mercado porque um monte de treinamento tem sido feito on-line agora, tanto quanto com equipes, muitos produtos e serviços diferentes estão sendo vendidos on-line, tudo através de zoom on-line apresentações e vídeos, certo? Então, essas são normalmente páginas que têm um usuário se inscrevendo para um treinamento gratuito, geralmente de 45 a 90 minutos de duração. E nesse treinamento, os usuários ou passam por um processo, uma história, um tipo de cenário que mostra a ele, ei, você pode fazer isso também, certo? E assim ele entra na história de fundo do indivíduo. Talvez seja a empresa, mostra-lhes o que eles podem fazer e está essencialmente fornecendo valor adiantado por 45 a 90 minutos, certo? Se você se lembra do princípio da reciprocidade, certo? Você está recebendo todo esse conhecimento gratuito, todos esses três valores por uma hora e meia, você vai se sentir obrigado a fazer algo em troca porque você tem a informação gratuita sem nenhum custo, certo? E estes serão os melhores para produtos ou serviços digitais que variam entre 497 ou 1997. E no final da apresentação, eles geralmente têm uma página de checkout do pedido onde você pode realmente fazer a compra. No entanto, para diferentes produtos que são bilhete alto, eu diria mais de US $2 mil. Então é aqui que você tem esta apresentação. E depois, no final da apresentação, você tem a capacidade de reservar um calendário, reservar vagas, para falar com um dos representantes de vendas. E então eles tipicamente vão te colocar na chamada e olhar para ter você e investir em algo tipicamente acima de US $2 mil, que vai ser como um tipo de programa de treinamento individual ou grupo, certo. Onde eles te guiam por tudo passo a passo e seguram sua mão. Então é por isso que esses são normalmente preços a um preço mais alto. E então esses serão alguns dos tipos mais importantes de páginas de destino que você percorre em sua carreira. E como eu disse, a página de registro do webinar é uma das mais populares e atuais no mercado. Então isso vai estar aqui para as páginas de aterrissagem e nos vemos na próxima. 53. Aula XD - usando Grids em XD: Oi, artérias aqui. E hoje vamos falar sobre grades. As grades são muito importantes. Eles são importantes para desktop e design móvel em mais soldas e temos duas opções. A primeira opção é a minha escolha. Então é grade de 124 colunas. Para dispositivos móveis e para desktop geralmente usam grade de 12 colunas. Então vamos discutir o layout móvel. Primeiro de tudo, aqui temos duas opções, como eu disse, e uma à esquerda, que é 12 colunas als nos linha para ajustar elementos com mais cuidado do que na grade da quarta coluna, que é mais rígida, por assim dizer. E você vê que a maioria dos tamanhos são bastante ok aqui embora. É um por dois segundos, terço, e assim por diante. Você pode usar ambos 1214 concordou em U, Eu costumo usar grade de 12 colunas porque é mais fácil para mim para organizar elementos dentro de pequenas áreas. Temos apenas esta área em como alinhar vários elementos, como ícones, por exemplo, veja, você pode ter mais opções para anexar estes dois. Ganância. Embora aqui, a quarta ganância cone, você também tem essa chance, mas você terá mais dificuldades. Aqui você vê, você pode discutir o primeiro desenvolvedor front-end maduro com sua parte interessada, qual ganância será melhor para esses projetos. Mas a maioria dos designers de casos são esses. Estamos decidindo qual ganância será usada neste e naquele projeto K. Então, para que serve a grade? Primeiro, é alinhar os elementos corretamente. Digamos que temos formulário de contato. Deixe-me pegar quando, digamos que temos várias seções que gostaríamos de ter em nossa tela, o painel. Você vê que temos a opção de aumentar a capacidade. E se quisermos, temos a criação, podemos organizar módulos. E do jeito que gostaríamos, mas isso não será correto. Então você vê que a ganância nos permite criar uma maquete correta. Então é mais fácil ler um C aqui. Não teremos concordado. Nós seremos capazes de organizar nossos blocos são aleatoriamente. Agora, quando usamos credo, podemos ter o mesmo espaçamento, mesmas margens entre os objetos horizontais e verticais. Então, para que serve a grade? Novamente, o propósito da ganância é criar uma maquete correta, correta, em termos de posicionamento, alinhamento, distribuição. Então, aqui você vê nós deslocamos um pouco mais básico aqui, espaçador ali. E temos a barra lateral, que. Perto de duas colunas. Cada bloco leva três colunas e o espaçamento é igual entre elas. Então nos permite encontrar o objeto apropriado, ler o título, e começar a interagir com o módulo, precisamos ver líquido até ele, este. E é mais fácil para os desenvolvedores de front-end quando você tem grade e você trabalha com o grande corretamente. Então seus elementos estão alinhados corretamente, direto para a linha. Novamente, em termos de design móvel, como eu disse antes, você pode escolher entre essas duas opções, embora as ofertas para grade de coluna como padrão, Eu não tenho certeza de que é o caminho certo. Eu não costumava a grade de 12 colunas. E eu estou tentando trabalhar dentro das 12 colunas no layout móvel também. Ok, vamos voltar para os ajustes do credo em x D. Então você vê que você pode ter o quadrado ou layout quadrado mostra apenas grade de pixels. Você pode ajustar o tamanho do quadrado de pixels. Então um quadrado leva 15. Certo, vamos voltar ao credo artístico. Você pode selecionar a cor do seu acordado e a capacidade. É muito útil quando você não quer que isso esteja interferindo com seu ajuste de design. Reduza a capacidade para 0. Você vê que eles são apenas guias, mostrado recurso muito útil. E os próximos ajustes são o número de colunas, coluna de largura da calha com e as margens. Então calha será o espaçamento entre colunas, coluna com ele é o tamanho da coluna. As margens são os espaços em branco à esquerda e à direita, respectivamente. Novamente, você pode ajustar sua grade para o seu projeto diretamente em movimento, mas tenha cuidado, não alterá-lo depois de iniciar outras páginas porque você não tem permissão para ter layouts diferentes nas páginas. Assim, você pode criar diferente com sua área de conteúdo. Poucos desejam dizer que você tem algum site de conteúdo pesado de texto como médio. Você deseja que esta seção esteja no centro da tela. Digamos que você queira ter mais espaçamento entre os elementos quando estiver trabalhando em um painel complexo ou em seu site astuto. Então você pode ajustá-los às suas necessidades. Portanto, não se preocupe se você alterar os valores padrão aqui. K, novamente, tente fazer o seu melhor para ajustar o, estamos apenas mostrando as cores para que seja mais fácil para você ver. Tente evitar tal colocação quando nada ligado a concordar. Então o, seu bloco sai da coluna, tentou encolher o elemento. E elementos internos também poderiam ser alinhados com o Leia-me. Agora você vê que temos UI mais organizado e quando você quer criar outro que terá outros dados aqui. Outros dados aqui, talvez um propósito diferente. Mas você já terá as medidas que o ajudarão a criar um design consistente, exatamente como nos outros blocos como aqui, aqui, aqui. Ok? Tente colocar mais atenção para o alinhamento porque é realmente difícil para os codificadores front-end adivinhar o que você exatamente quis dizer, seja ele erro ou por design. Então tente manter sua maquete anexada às suas colunas, à sua ganância. Muito obrigado pela sua atenção. Vemo-nos na nossa próxima lição. Tchau. 54. Aula de XD - design de cartão único: Oi lá. Hoje vamos trabalhar no design do cartão. Então, para o design do carro, precisamos saber várias coisas que são necessárias para o cartão. É a especificação do cartão. Então, se você trabalha com o e-commerce, se você trabalha com ele para entrega, entrega de flores, qualquer outro projeto baseado em catálogo ou projeto, você pode solicitar. Já recebemos especificações sobre os cartões do seu cliente. Temos foto ou descrição da imagem, preço, botão Adicionar ao carrinho, etiqueta especial. E isso é tudo para entrega de comida. Então você entende, ok, eu já encontrei uma pizza muito saborosa com salame e salsa aqui. Primeiro de tudo, vamos decidir em que espaço vamos levar a nossa carroça, a nossa disposição e temos ganância. Primeiro, vamos decidir qual espaço vamos levar nossos carros, k, quão grande ou pequeno com o cartão. Então vamos começar. O ponto de partida aqui será a imagem como você já adivinhou, K. Assim, os produtos, os itens que são vendidos via internet, você vai decidir sobre o tamanho da imagem da foto, porque às vezes há pequenas coisas que você tem que Luke quatro para zoom foram a pequena foto é suficiente para objeto específico? Digamos que queremos usar a pequena foto da pizza porque não seremos capazes de ver como é. Não é saboroso para nós, em outras palavras, ok. Então eu vou começar a partir de três colunas aqui, mas você vê que haverá um grande cartão se vamos fazê-lo assim. Ok. Então agora você vê que um cartão com uma foto tão grande, quase 400 pixels. Seja muito bonito e somas de imagem e capacidade de ver o conteúdo exato parou a pizza. Então vamos tentar encolher um pouco nossos cartões e ver se podemos usar para colunas e ver. Não tão bom quanto eu sugeriria. Talvez eu diminua assim. Acho que três filas são suficientes para nós assim. Vamos ver qual é o maior mais apropriado aqui. Talvez possamos ajustar o Credo para que ele se encaixe no nosso o para k. nossa foto é de 324 pixels. E vamos tentar ajustar a taxa. Ajustei a grade para ficar mais perto do que precisamos. Os parâmetros são os seguintes, por isso ainda tem. Grade de 12 colunas, largura da coluna é 73186, margens da esquerda e direita. E agora podemos excluir o peito das fotos. Você vê que a distância entre as colunas é quase a mesma que a coluna em si. Então temos muito bom espaçamento e diferenciação entre os blocos entre os cartões que estamos prestes a projetar. Ok, então agora vamos para a descrição ou esquecemos o título, título, nome, nome. Deixe-me apagar os números. Às vezes, a quantidade em estoque também é indicada. Isso torna o processo de design destes cartão mais desafiador. Porque mais elementos, são mais, mais perguntas, mais problemas, e assim por diante. Mas vou mostrar-lhe alguns truques que você será capaz de aplicar no design simples carrinho. E, em seguida, eles são muito úteis para você em seus outros desafios que você irá realizar e sua experiência de usuário por ano. Então o nome, vamos escrever a descrição do nome salame. Dependendo do tipo de produto que você pode adicionar ou não adicionar. A descrição às vezes depende do tipo de produto que você está vendendo. Você está mostrando K. aqui. Eu sinto que é bastante apropriado ter. O que mais temos nomeado preço descrição no botão Carrinho em especial rotulados. Vamos fazer um protótipo de mano. Tente evitar valores como 218. Então este é o botão do cartão e simples. Então vamos falar um pouco sobre o layout. Em primeiro lugar, por que eu coloquei esses elementos dessa maneira. Nós não somos do outro jeito assim ou assim ou de qualquer outra maneira. Assim acontece para mim organicamente como automático. Então, porque eu já abastecido e enfrentou os problemas que ocorrem quando o conteúdo é feito pode mudar o seu carrinho e você enfrenta muitos problemas. Primeiro de tudo, o espaço para o seu nome tem que conter duas linhas porque o seu conteúdo pode mudar. Ok? Então, e aqui você tem o alinhamento. Uma vez que seu nome muda para uma linha, linha única, que será perfeito para você porque é muito bem projetado, equilibrado, ok, o preço pode aumentar, digamos que temos 9099 e ele vai mais perto do centro. Ok. Então, se você tem 5, 0,05 euros, cinco dólares, ele tem esse espaço para expandir. Então ele tem essa área para expansão c, este aqui, o nome, ele tem a expansão para este lugar. E tente não interferir Estes dois, deixe-me mudá-lo para este porque não é necessariamente. Então vamos reduzir a seção de preço um pouco k. Então você pode ver os preços aqui, títulos aqui, eo resto será transferido para a próxima linha. Claro, você não pode prever qualquer caso, qualquer cenário. Mas aqui você pode adicionar duas ou três linhas para uma amostra de descrição e colocar aqui e adicionar uma linha para qualquer caso para ver como o carrinho será parecido. Quando as descrições forem longas, Gary, basta adicionar uma área segura que lhe permitirá matar outra linha na sua descrição. Embora a maioria das descrições tenha duas linhas, tenha cuidado e tente prever alguns cenários pendentes e adicionar um pequeno espaço para outra linha adicional. Nos casos em que a descrição é muito maior do que esta, você pode usar efeitos de focagem. Assim, o efeito de pairar irá ajudá-lo a expandir sua descrição, se necessário. Por favor, lembre-se disso, apenas tenha em mente, é simples. Vamos tentar outro conteúdo. Segunda carta. Digamos que é o Salomon e de um gato ou pizza. Você precisa mostrar diferentes estados do seu carro, qualquer conteúdo e geral. K. O preço. Se for para a esquerda. O mesmo aqui. Se você quiser vai optar pelo botão quando o conteúdo está faltando, Eu estou em quando há duas linhas da descrição, Veja há dinâmica e também por favor lembre-se sobre 0 estado ou 0 caso. Porque às vezes não há descrição aqui, pode prever este cenário e criar o design para o produto que não tem a descrição. Porque às vezes parece muito azul, parece. Isso realmente perturba meus olhos. E vamos voltar à nossa especificação. Nome da imagem da foto, descrição , preço, botão Adicionar ao carrinho etiqueta especial. Precisamos criar um rótulo especial. Então aqui você pode usar algum tipo de rastreamento. Diagonal. Rastreamento diagonal irá ajudá-lo a encontrar um lugar melhor para os rótulos. Os rótulos serão algum tipo de pontos de verificação para o usuário i trazê-lo. Primeiro de tudo, para o preço ao lado da parte inferior, adicionando ao carrinho. Agora eu vejo que este lugar é mais apropriado do que este, este canto porque a tração será bastante bandeja aqui por diagonal. Vamos fazer venda. Talvez navegou me fez saber, talvez bestseller, pode estar fora de estoque, precisa ser fresco e ecológico, assim por diante e assim por diante. Até ele. Este é um protótipo de fidelidade média com, você já sabe que todas essas coisas serão definidas. Você mudará a fonte aqui. Você adicionará alguma caixa ao redor do exterior, conecte a área de texto com a foto. Então parece a única coisa toda. Venda. Por favor, crie vários rótulos como best, best seller. Então, no cenário perfeito caso, você terá o cartão padrão, o cartão com a etiqueta, eo carrinho com uma etiqueta sem descrição. Ok? Por favor, considere estes estados diferentes, casos diferentes. O conteúdo é flexível, os candidatos são dinâmicos. Prepare seus elementos de design de maquetes para essas capas. Porque às vezes, quando você já empurrou seu design para produção, você verá essas lacunas. Eles ocorrerão no estágio de gerenciamento de conteúdo quando as pessoas adicionarão o conteúdo real que veremos essas lacunas e você será capaz de quem será responsável por corrigir esses erros. Ok, então nós fomos cuidadosos. Por favor, tenha em mente que o conceito é dinâmico e tente testar o comprimento diferente do seu título, comprimento diferente de descrições, imagens podem ser oferecer escala diferente, proporções diferentes, mas apenas tente para considerar um caso muito que pode acontecer e estar preparado para isso, porque será menos doloroso fazê-lo neste palco, em vez fazê-lo no palco do design visual e ao decodificar espalhando. Muito obrigado e nos vemos na próxima lição. Tchau. 55. Componentes de interface: Neste vídeo, vamos rever os diferentes tipos de componentes de navegação. Agora isso é algo que você normalmente vai estar vendo no topo de um site ou no topo de um aplicativo onde você tem, digamos, diferentes componentes da barra de pesquisa, diferentes tipos de barras de menu, certo? Então vamos em frente e saltar para os componentes de navegação. Ok, então os diferentes tipos mais comuns de componentes de navegação que você vai ver em um site ou aplicativo ou qualquer tipo de software que você está usando vai ser a barra de pesquisa. Você tem pão ralado, etiquetas de paginação, controle deslizante, ícones diferentes e o carrossel. Então vamos em frente e mergulhar neles um pouco mais. Então o primeiro aqui é a barra de pesquisa, certo? E isso é tipicamente onde você tem a capacidade de pesquisar em qualquer coisa no site lá se você quiser encontrar, digamos um indivíduo, se você quiser encontrar um determinado artigo, determinado post de blog, ou um determinado pedaço de informação. Aqui é onde você vai ser capaz de usar a barra de pesquisa aqui. E ele fornece uma tonelada de valor para o usuário final porque eles são capazes de encontrar algo muito rapidamente, certo? Se eles estão ligados, digamos YouTube, certo? Eles querem ser capazes de encontrar um vídeo específico indo lá e digitando certas palavras-chave, certos nomes, certo? Em. Vai ser muitas vezes muito simples e fácil para eles encontrar o que estão procurando. O próximo que vamos cobrir aqui são as migalhas de pão. Isto é essencialmente algum tipo de linha que está mostrando o caminho atual para o local real. Então você vai ver aqui, nós temos a casa, então nós temos uma barra para a frente Sobre Nós. E a barra é realmente a migalha de pão porque está mostrando a hierarquia, certo? Você tem no topo, você tem casa, e então você tem sobre nós sob isso. E então, em Sobre Nós, você tem história, certo? E está mostrando todos os diferentes níveis dentro dessa seção específica. E depois a paginação aqui. Aqui é onde você pode olhar para o fundo, digamos, de um blog ou tipo de publicação de notícias particular de site onde você pode olhar para todas as páginas diferentes e até mesmo páginas atuais em que o site tem conteúdo, certo? Então este é um tipo muito simples de navegação para criar e configurar. É só olhar para o post anterior e, em seguida, ser capaz de se atualizar para o post mais recente, certo? E então temos as etiquetas aqui. E esse normalmente será o nível mais baixo de hierarquia para encontrar conteúdo preciso. Porque você pode facilmente ir para a barra de pesquisa, digitando o que você está procurando lá. Você pode digitar como tags diferentes, como design de UX, branding, o que quer que seja. No entanto, na maior parte, a maneira mais fácil e o que as pessoas vão ser normalmente e comumente usando é apenas a barra de pesquisa e também a navegação de cabeçalho no menu para ser capaz de procurar exatamente o que eles estão procurando. E então temos o controle deslizante. E isso é usado para definir o valor de organizar ou valores e, em particular determinado conjunto. Então, normalmente vai mostrar a vocês como, hey, este é o público-alvo entre, você sabe, 25 a 45, ou está mostrando, você sabe, o que você prefere. Ou aqui no topo, ele está dizendo para você ajustar o peso de seus animais de estimação. Vinte e cinco, até, digamos um par de 100 libras ou algo assim. Ou se você estiver em quilogramas, obviamente isso vai ser diferente. Mas isso normalmente vai ser algo que é mostrado horizontalmente. Porque se você fizer verticalmente, vai ocupar muito espaço e não vai parecer muito bem. Então, isso é melhor colocado em um tipo horizontal de layout. E então temos os ícones aqui. Ícones ou um dos meus mais favoritos aqui porque eles realmente te dão uma indicação do que é essa área em particular sobre, certo? Como se você olhar para o fundo lá, você tem um e-commerce, legal e compliance. Você tem um bom pequeno ícones lá com os textos embaixo deles. E eles realmente dão uma ótima indicação do que essa seção é sobre. Então eu gosto muito destes. Há obviamente um osso para diferentes tipos de ícones e layouts diferentes. E a grande coisa sobre estes também é que você pode colocá-los de forma vertical ou horizontal também. E ambos vão parecer fantásticos. Obviamente, o que a vertical, você quer ter ícones menores para que você não está ocupando muito espaço, muito espaço. No entanto, o que os horizontais, você pode torná-los muito maiores, assim como temos aqui na parte inferior com o e-comm, legal e compliance, e, em seguida, o financiamento e bancário. Mas eles funcionam fantásticos. Eles parecem ótimos também. E depois temos o carrossel. Normalmente, é aqui que você verá um portfólio onde você tem muitos projetos diferentes que você já fez no passado. Talvez obras de arte diferentes, fotografia diferente. Isso vai ser o melhor para isso. É onde você pode fazer isso. Então isso é clicável. E digamos que alguém esteja em seu site e esteja procurando por seu portfólio. Você pode ter um carrossel lá que permite que ele veja imagens diferentes se eu sou projetos em que você trabalhou e então eles podem clicar nelas especificamente e ser levado para uma página específica que lhes dá mais informações sobre isso projeto específico. Ok, então vamos dar uma olhada em alguns dos diferentes fatores quando se trata das especificações móveis aqui. Ok, então lembre-se, quando você está projetando um aplicativo web, é importante para você entender as diferenças com fontes diferentes, elementos diferentes e o tamanho que será necessário em um desktop versus um celular, certo? Porque ele vai ser obviamente completamente diferente tipo de layout, interface de usuário para um telefone celular. E você precisa ser capaz de estar ciente da diferença lá. De modo que se você tem um aplicativo muito bonito que funciona bem na área de trabalho, mas pode estar ficando aquém do design nas especificações móveis. Você precisa ter isso em mente o tempo todo. E alguns dos fatores-chave que você quer ter em mente aqui obviamente são o tamanho da fonte, elementos diferentes, formas diferentes. Se você tem como pessoas preenchendo aplicativos e em geral o layout e design, bem como para que você seja capaz de maximizar a quantidade de espaço que você tem e você não está carregando tudo confuso. Por isso, é fácil para a pessoa navegar. Porque lembre-se, os telefones celulares são essencialmente os líderes agora em fontes de tráfego. E é aí que a maioria do tráfego virá para aplicativos de sites. E assim queremos tornar o mais fácil e simples e suave possível para esses indivíduos navegarem no aplicativo, no site, seja lá o que for certo através de seus telefones celulares. Vamos dar uma olhada nas especificações móveis um pouco mais profundo. Então, qual é o tamanho da fonte aqui? Queremos ter certeza de que temos pelo menos 16 pixels e, em seguida, também aumentar o espaçamento entre linhas. Você pode ver aqui nesta imagem à direita, este é um tipo fantástico de interface de usuário. Eles são agradáveis, design, agradáveis e simples. Você não tem muito, eles estão acontecendo. E então também o tamanho de um elemento, pelo menos 44 por 44, modo que ele não é muito grande, não muito pequeno, mas é muito fácil de olhar e navegar através. E então o mapa de calor, aqui é onde você obviamente vai estar olhando para onde as pessoas estão clicando, onde as pessoas estão realmente gastando seu tempo, se eles estão girando em um momento, digamos, lendo artigos versus em uma página específica, você quer ser capaz de ver o que esses indivíduos estão fazendo em seu celular quando eles estão usando meu aplicativo, quando eles estão no meu site, certo? Muito importante lá. E depois os fóruns, certo? Se você está tendo algum tipo de aplicativo que faz com que as pessoas preencham suas informações, você está coletando ou você está fazendo com que as pessoas se inscrevam como um usuário, certo? Criando um nome de usuário, tendo uma senha lá. Você também quer considerar ter um mapa de calor aqui e torná-lo para que seja agradável e simples, certo? Aqui é onde eles têm a página inteira essencialmente como a forma real que é tudo o que lá realmente focando, certo? Porque basta pensar em ter um formulário em um determinado site, página de destino ou o que quer que seja, certo? E você tem esse formulário que está apenas em um pequeno pedaço desse site em particular no layout do celular, certo? Vai ser muito distrativo para o usuário. Então você quer que eles cliquem em um botão e levá-los para realmente se registrar, de modo que isso é tudo o que eles têm na frente deles para que eles possam se concentrar em apenas fazer isso e realmente se inscrever, certo? Menos distrações. E então vamos dar uma olhada em algumas grades de layout aqui. Você quer preservar a legibilidade. Você quer ter mais ar no espaço, certo? Você não quer ter as coisas confusas. Você quer ter três livros didáticos para uma coluna, cinco itens por linha. Considere ter uma estrutura específica e personalizada para o que você deseja realizar aqui. Mas este aqui, você pode ver a partir deste celular aqui é ótimo porque não há muita coisa acontecendo lá. É muito fácil ver o que está acontecendo lá e o que você pode escolher, o que você pode selecionar. Então realmente pense sobre as diferentes grades de layout e as especificações sobre isso. Ok, então vamos dar uma olhada nas especificações do celular aqui para um telefone Android, certo? Porque eles vão ser um pouco diferente do que como um IOS, telefone Apple e vários outros fabricantes de telefones lá fora. Então, para retrato móvel, estas são as diferentes especificações que você deseja manter em mente. A mesma coisa para a paisagem móvel, um retrato para tablets e, em seguida, uma paisagem para um tablet também. Então, quando você está projetando elementos diferentes, componentes diferentes, certo? Você quer manter estes em mente para o Android. E então aqui está para o iPhone, você quer ter certeza que você tem a coluna e 16 margem. E, em seguida, para o iPad, você quer ter uma coluna e 16 margem também. E, obviamente, você terá uma orientação diferente para cenário do iPad e, em seguida, também para o layout da área de trabalho. Então certifique-se de que você tem uma compreensão dos diferentes layouts, as especificações, certo? Quando você está criando aplicativos diferentes, porque na maioria das vezes, quando você está projetando ou criando diferentes aplicativos que serão usados praticamente exclusivamente no telefone ou em dispositivos portáteis. Então você quer ter certeza de que você tem as especificações certas, os tipos certos de colunas por tipos de margem, para que eles apareçam bem nos dispositivos apropriados. E aqui estão algumas especificações para o Bootstrap. Você quer olhar para os telefones em nossos 768 pixels ou os tablets. Você quer olhar para 768 pixels, 15 pixels em cada lado da coluna. Novamente, isso é algo que você quer ser capaz de olhar e usar e navegar por conta própria. Só estou te dando algumas especificações diferentes que você deve ter em mente. E o que você pode fazer. Muitas vezes é apenas ir em diferentes aplicativos, sites diferentes, e olhar para quais são as tendências atuais, certo? Olhe para os diferentes relatórios e essencialmente ser capaz de imitar como esses caras têm definido seus projetos atuais e ser capaz de olhar para, ok, quais são algumas coisas que eu sou idéias, alguns frameworks diferentes que eu posso tirar estes indivíduos, a partir destas diferentes aplicações, estes diferentes desenhos. E então eu posso usar em meus próprios projetos também. E, finalmente, aqui temos a orientação do usuário. E isso é ótimo para novos usuários introduzindo novas atualizações de recursos em uma interface de usuário. E então isso é tipicamente o que você vai ver quando você tem alguém entrar em um site que tem diferentes conteúdos, diferentes tipos de informações onde você quer que as pessoas se inscrevam, certo? Ou talvez seja um serviço que é gratuito ou talvez pago, ou talvez eles tenham uma versão gratuita e então você pode atualizar. Você quer tornar agradável e simples e fácil para eles se inscrever, inserir suas informações, e ser capaz de se inscrever como um usuário e fazer parte desse site específico ou aplicativo de software. E então isso vai ser aqui para os componentes de navegação da interface do usuário. E nos vemos no próximo. 56. Controles de interface UI: Neste vídeo, vamos rever os diferentes tipos de controles de interface de usuário. Então, estas serão coisas diferentes, como o campo suspenso na parte superior da navegação do cabeçalho, coisas como botões diferentes, caixas de seleção diferentes, alternâncias diferentes, e um monte de outros tipos diferentes de controle. Então vamos em frente e pular direto para isso aqui. Assim, os tipos mais comuns de controles de interface do usuário serão os campos de texto, a lista suspensa, talvez um botão de opção se incluir isso também. Diferentes botões em geral, uma caixa de seleção alternar e, em seguida, o dia no seletor de tempo. Então você pode dar uma olhada nisso aqui do lado direito, meio que ter uma idéia de como isso iria parecer. Isso normalmente vai ser com diferentes softwares ou diferentes tipos de programas. Onde, digamos, por exemplo, você tem como um software ou programa de gravação de áudio. Aqui é tipicamente onde você vai ver muitos desses botões diferentes lá, como o rádio, talvez falta a energia ligada ou desligada. Então isso é o que você pode esperar muitas vezes nos diferentes tipos de aplicativos de programa. Se você está interessado em dar uma olhada talvez uma interface de usuário realmente agradável para um aplicativo de criação de áudio, então eu recomendo que você confira Fruity Loops. Na verdade, é um programa. Você pode fazer contas, você pode fazer música, e tem uma interface de usuário muito agradável. E eles te dão uma boa idéia que eu estou me referindo aqui, na medida em que o controle. Então a próxima coisa que você deve ter em mente aqui é o campo de texto. E isso vai ser agradável e simples para apenas ter seu texto lá e é muitas vezes apenas vai ter um lugar titular. Tão agradável e simples aqui para o campo de texto. E depois o menu suspenso. Vamos dizer que quando você está em um site e você vê no menu lá em cima, no topo, você pode ver portfólio, por exemplo. Sob isso, você vai ver o menu suspenso e você vai ver que, digamos, um portfólio de fotografia, portfólio de web design, portfólio de diferentes aplicações, certo? É assim que você pode pensar sobre o trabalho para baixo. Vai ser onde você tem como uma navegação de cabeçalho. Você tem um assunto em particular. São como, digamos, serviços, certo? E então você vai ter lá embaixo diferentes tipos de serviços dentro desse rótulo específico. O próximo que vamos olhar é o botão de rádio. E isso normalmente vai ser em um aplicativo de software onde você está trabalhando nele e você está criando diferentes tipos digitais de produtos, diferentes tipos de mídia digital, como vídeos, como áudio. E é aqui que você vai ter a habilidade que basta clicar no pequeno botão lá. E ele vai ser capaz de ser ligado, verificado ou desativado. E vamos dar uma olhada em alguns dos mais comuns, que são os botões que você normalmente verá na maioria dos sites, a maioria dos aplicativos diferentes. Nós somos mais frequentemente do que não, os botões vão ter algum tipo de chamada à ação onde eles estão dizendo para você comprar aqui, Adicionar ao carrinho, aprender mais, obter uma cotação, certo? E dentro dos botões você às vezes pode ter como um emoji. Às vezes você pode ter como um ícone que vai realmente trazer o botão, além de ter algum JavaScript no botão, bem como, tornando-o mais destacado por também ser capaz de ter um interativo, ter diferentes esquemas de cores em alguns matriz de sombra de 2 vias. Há muitas coisas diferentes que você pode fazer com botões. E eu adoro trabalhar com botões porque é realmente o que permite que o usuário dê o próximo passo em sua página de destino ou em sua página de vendas, certo? Porque quando eles estão nessa página de vendas específica, por exemplo, eles estão procurando comprar seu produto e você quer ter esse botão lá. Isso é super fácil, super simples para eles clicarem, certo? E ele se destaca. E é realmente deixá-los saber que eles precisam clicar neste botão. E está realmente captando a atenção deles, certo? Aqui está alguns tipos adicionais de controles também. Temos as caixas de seleção aqui. Estes são normalmente vai estar em diferentes interfaces de usuário também. Você normalmente vai ver isso como em algum tipo de questionário, talvez como algum tipo de pesquisa tipo de software. Um dos softwares que eu posso pensar em cima da minha cabeça é como o Survey Monkey, onde você pode essencialmente reunir feedback de seus clientes ou onde as empresas podem realmente enviar pesquisas para seus clientes reais e obter esse feedback. Muitas vezes você vai ver isso nesses tipos de perguntas onde é múltipla escolha ou realmente apenas a qualquer momento que há algum tipo de questionário, ok? E estes serão sempre melhor dispostos verticalmente. Você não quer ter isso horizontalmente, certo? Porque ele simplesmente não parece bom. E então certifique-se de que quando você estiver adicionando estes, você tê-los dispostos de forma vertical, ok? Então temos os outros aqui que é o botão. Estes também vão ser fantásticos para a perna e para fora. Aqui é onde você vai ver isso na maioria das vezes. Mais uma vez, isso vai ser como no tipo de produção musical de aplicativos de software. Muito onde você está ligando algo, desligando algo, talvez como um rádio online também. É onde você normalmente vai ver isso. E, em seguida, a interface do usuário controla até o seletor de data e hora também. Este é um belo layout aqui. Você pode ver que muitas vezes há em blogs diferentes. Você pode ter isso em, você sabe, sites específicos. No entanto, isso vai ser visto principalmente em como diferentes aplicações de gerenciamento de projetos, certo? Como você é capaz de ter uma visão panorâmica do mês real ou mesmo do ano real em que normalmente vai ser como uma lista suspensa. No entanto, assim como eu mencionei, este é o lugar onde você realmente vai ver isso é no espaço do aplicativo de gerenciamento de projetos. Outra coisa a ter em mente aqui quando se trata controles de interface do usuário é realmente entender as grades, porque isso vai lhe dar uma idéia muito boa, tanto quanto a legibilidade e a acessibilidade de um determinado aplicativo ou site, certo? Você quer pensar em termos de grade para que você tenha o conteúdo definido de uma maneira precisa que está seguindo essas grades. Então é mais fácil de digerir, mais fácil de consumir, e é uma experiência prazerosa onde as coisas não estão por todo o lado, não estão, sabe, confusos. É tudo de uma maneira muito precisa que o conduz. Assim, os usuários são capazes de consumir a informação de forma prazerosa e ter uma grande experiência. Então, isso vai ser aqui para os controles de interface do usuário, e veremos você no próximo. 57. Aula de XD - Mobile e Desktop: Design de cabeçalho: E esta lição irá explorar o componente da maioria das UIs onde interfaces de usuário que repreender cabeçalho e vamos discutir tipos de layouts, também irá explorar um pouco a versão móvel para cabeçalho. Ok, vamos começar. Primeiro de tudo, por que o cabeçalho é importante? importância é devido ao é uma posição fixa elementos que irá apresentar em cada uma de suas páginas, telas, ou outros tipos de janelas e usuário vai vê-lo o tempo todo. Então é por isso que o cabeçalho devidamente fatorado é muito útil para a experiência do usuário e design da interface do usuário. K, com a ajuda do cabeçalho, somos capazes de orientar o usuário. Então vamos servir um propósito de navegação, como uma espécie de navegação superior. E também podemos orientar uma pessoa para a sua conta pessoal, para o carrinho, mostrar o número de telefone, por exemplo, ou destacar algumas ações culturais específicas ou outros elementos que são importantes e serão importantes durante todos os sessão de visitar o site ou aplicativo móvel. Ok, então vamos descrever os tipos de navegação. Então vamos imaginar que este é o logotipo. Normalmente logotipo é colocado aqui ou no centro, no meio, dependendo do layout que você escolher. Mas vamos começar de maneira mais tradicional. E o logotipo geralmente está aqui. Então tudo veio de jornais de lá, onde as pessoas lêem o jornal do canto superior esquerdo. Estas regras são vieram da célula de impressão de jornal por isso que geralmente usamos logotipo no lado esquerdo. É abordagem mais tradicional, mas às vezes podemos ver logotipo centrado para cabeçalho. Certo, vamos criar uma notificação. Os Serviços e contatos Sobre Nós . Ok. Então, neste caso, o cabeçalho servirá a função de navegação e moagem, ok, ou a orientação. Por isso, às vezes, a primeira abordagem móvel responsiva faz com que os dispositivos pareçam assim. É um menu de hambúrguer. Colocado normalmente aqui. Há um mentor. Ele transmite um menu suspenso que serve a mesma função de navegação. Ou seja, esconda-o atrás do ícone. Na minha opinião, se você tem o espaço para colocar o seu menu, neste caso para ajudar o usuário a encontrar o seu caminho facilmente. Ok. Então isso requer esforço adicional, como clicar em procurar por uma categoria de item específico e, em seguida, ir para lá. Então, é muito mais fácil clicar aqui, e isso é tudo. Então, para Mobile, eu sugiro que você, é claro, para usar algo assim. É a maneira tradicional. Nada extravagante. Porque não temos muito espaço como temos na área de trabalho para colocar vários elementos. Então, normalmente, podemos quebrar esta seção em quatro partes. E quando se trata de quatro ou mais 56, torna-se muito difícil para as pessoas lerem. Então eu sugiro que você fique com três no máximo para grupos de elementos. Pode ser um logotipo que também é agrupado. Menu de hambúrguer e seção Conta podem ser colocados aqui junto com o carrinho. Então eles estão um pouco mais perto um do outro, em vez de logotipo do menu. Ok, vamos tentar adicionar duas seções para contagem e cartão. Vamos ver como essas páginas, esses links poderiam ser implementados em uma tela tão pequena. Certo, estou desenhando um desenho de linha. Normalmente temos um contraste aqui, adicionamos contraste por nós, quero dizer designers. Estes elementos estão lá, É categorias Kerala ou páginas web. Um ir aqui. Tenha cuidado com o tamanho da fonte usando em pequenos dispositivos. Então, se você tem apenas três, você pode adicionar rodada sete itens em 27 pixels Fonte. Está bem? Então, isso é apenas para você prever algum cenário se novas páginas ocorrerão, como você gerenciará como o sistema gerenciará essa atualização? Agora você pode ter três colocando no topo centrado, bit inferior pode fazer assim. Só curto-circuito no menu. Vamos tentar ver como o nosso protótipo ficará com o menu suspenso. A Char. C, muito fácil. E em outros pediu para adicionar mais itens, se necessário, porque geralmente sites, aplicativos, a mudança e você tem que estar pronto para isso. Certo, vamos voltar para os nossos grupos. Então temos três grupos aqui. Um servindo a função de navegação, logotipo, é a marca. E aqui temos também funcionalidade, um grupo, estes dois juntos porque é composição mais ou menos equilibrada, apenas a cor um pouco e o tamanho. E o cabeçalho perfeito. Além do menu, a navegação, as configurações da conta, o carrinho ou outras configurações ou outras seções. Também pode haver uma função de pesquisa. Uma função de pesquisa também pode ser ocultá-la atrás do ícone. Depois de pressionar no ícone de pesquisa, a porta de entrada é expandida e, em seguida, você é capaz de digitar sua consulta de pesquisa. Às vezes, a barra de pesquisa já está aqui. Então você pode projetar uma barra de pesquisa como esta. Aqui você pode considerar o trabalho é feito para a barra de pesquisa, porque uma vez que uma pessoa vai clicar no campo de pesquisa, decadência Bard irá expandir para o sistema Android ou IOS, irá mostrar que as letras ao lado com o botão Enter. Então aqui não precisamos de outros elementos. E mais do que isso, substituímos um elemento aqui, como Go ou botão como ou seta que mostra algum processo pai para prosseguir. A informação significa que faremos reações, que é em primeiro lugar, estamos clicando na barra de pesquisa. Depois escrevemos o coro aqui em algum lugar do teclado, e depois voltamos e pressionamos este botão. Esta transição não é tão difícil, mas ainda assim podemos evitar esta ação adicional, implementando botão tímido para Android ou iPhone. Ok, deixe-me, aqui vamos nós. Agora você vê esse botão de que eu falei. Hoje em dia, as pessoas geralmente estão começando a partir de design móvel murmura layout porque mais pessoas usando telefones celulares para servir internet. E é por isso que a abordagem Mobile-First é muito importante e muito real sob demanda. Hoje em dia, é mais fácil quando você tem uma área menor para design, transferi-lo para uma área mais ampla e você não vai encontrar problemas com o espaço uma vez que você encontrou o espaço em uma tela de dimensão menor novamente, aqui, eu também sugiro para ficar com um menor número de grupos, mas ainda podemos integrar coisa adicional como número. Por exemplo, fofo como este. Não me leve a mal. É um protótipo, é o arame mostrando a estrutura do cabeçalho, certo? E você vê nesta tela isso é mais ou menos confiável do que se nós, por exemplo, colocarmos esse número aqui. Parece um pouco legível. Mas, novamente, não é a abordagem perfeita. Se você colocar seu número de telefone, por favor tente encontrar maneiras mais estéticas fazer isso em vez de fazer como eu mostrei na amostra. Ok, outra coisa que é interessante no título, pode haver um nível adicional de navegação ou outra informação. Pode ser telefone, pode ser termos legais. Então use toda a informação. Sim, informação útil. Muito obrigado pela sua atenção. Espero que esta lição seja útil. 58. XD - Mobile e desktop: Design: Neste vídeo, nós vamos aprender como criar um menu suspenso. Para dropdown, temos que criar dois estados. Primeiro é padrão e o R1, que já está expandido menu ou algo assim. Então vamos gráfico eu vou criar um menu abstrato. Este é o nosso estado padrão. Agora precisamos fazer um componente a partir deste grupo de elementos. Então, usando o controle k, agora temos a capacidade de adicionar estados adicionais ao nosso elemento, e é um estado de foco. Então, vemos esse estado padrão e o estado de foco no estado de foco, estamos projetando o visual do nosso menu suspenso. Vamos tentar. Esquecemos de mudar o triângulo. Veja. Você também pode usar onclick evento, mas para isso, você tem que criar outro quadro de arte e leva mais tempo. Mas em alguns casos é inevitável porque a interação funciona no onclick. Assim, a expansão do seu trabalho para baixo estará disponível somente depois que você clicar no elemento. Para este fim, você precisa criar a bordo adicional e conectar essas placas de arte entre si. Vou mostrar-lhe um exemplo de como ele se parece. Eu apaguei o estado de pairar, então um interfere com o nosso protótipo. Então, uma vez que eu cliquei, eu vejo elemento adicional. Você pode integrar efeito hover para cada um destes que é necessário porque seu usuário tem que entender qual elemento aqui ela está prestes a selecionar. Então, seria bom se você pudesse adicionar algum destaque aqui para os elementos que serão selecionados na lista. meu pequeno destaque é o nosso transporte. Esta abordagem, este método poderia ser usado em menus móveis. Novamente, poderia ser pairar, poderia ser onclick Reino Unido presumir que haverá alguma funcionalidade adicional, algum menu adicional que você usa. Então, neste caso, é mais provável que usamos placas de arte separadas porque a interação será baseada no clique. Portanto, haverá duas telas diferentes mostrando colapso fechado em um menu recolhido. Está bem, deixa-me mostrar-te um exemplo. Então eu estou desenhando dois retângulos, conectando-os entre si, criando uma espécie de fundo que deve ser contrastante. Estes elementos serão alterados para x, por assim dizer, ou ícone do quilo não prestar muita atenção nos blocos enormes. Claro que você tem que ser mais preciso, design mais recente. Está bem? E aqui temos Vout. Aqui vamos nós. Minha posição é diferente. Esse não é o caso aqui. Vamos tentar. Então eu cliquei e temos uma pequena animação aqui, o que é bom. Essa abordagem é usada geralmente para um celular em primeiro lugar soneca. Deixe-me apresentar recebendo botão de toque desta maneira. Agora. Agora você tem esses conhecimentos como criar menus interativos, suspensos. Você pode aplicar esse conhecimento para suspensões em seu kit de interface do usuário, seja um sistema complexo ou simples, 1 de maio aplicar isso ao projetar a navegação para o seu site e, claro, o menu para o seu aplicativo móvel. Tente um par de vezes por UMA coisa sobre as áreas de aplicação e componentes como este onde eles podem ser úteis. Obrigado pela sua atenção. Vemo-nos na nossa próxima lição. 59. Visão Visão comum: Ok, então neste vídeo, vamos rever alguns dos layouts mais comuns para conteúdo em um determinado site ou aplicativo, seja lá o que for. Então vamos percorrer vários exemplos diferentes aqui. E então Arthur vai orientá-los sobre como configurar isso e criar isso e Adobe XD. Então, como você pode ver aqui, nós temos este site em particular que estamos olhando. E o que estamos vendo aqui é como o conteúdo é definido, certo? E eu realmente gosto deste exemplo particular aqui, porque você pode ver aqui em baixo que tem como um H1 bem aqui. E então eles têm o texto do parágrafo logo abaixo disso. E eu realmente gosto de como há um monte de espaços em branco aqui porque ele realmente chama a atenção para o texto, para a sua imagem, faz com que os usuários realmente prestem atenção a isso. E então nós descemos aqui. Aqui é onde fica um pouco confuso aqui em cima. Há um pouco de coisas, no entanto, você pode se safar com isso porque parece bom. No entanto, para mim, eu dividiria isso em talvez duas ou três seções diferentes. Acho que tem muita coisa acontecendo aqui e pode ficar um pouco confuso aqui em cima. Agora, este é um bom layout aqui também. Eu gosto disso, tanto quanto o ícone e , em seguida, algum texto e, em seguida, um pouco de texto parágrafo sob isso. E então tem um botão bem aqui. Mas eu realmente amei apenas este branco ou este espaçamento aqui. Quanto ao texto aqui, o conteúdo do botão. E há essa enorme lacuna aqui porque ele realmente quer que você atraia seus olhos para esse conteúdo em particular. E eles também fazem um bom trabalho aqui em baixo também. Isto também é muito bom aqui. Eles só têm texto de edição aqui com o parágrafo e , em seguida, eles têm as empresas reais com as quais eles trabalham. Mas eu gosto deste aqui também, onde eles têm o ícone e, em seguida, o texto do cabeçalho, e, em seguida, um parágrafo curto e, em seguida, o botão real. Este é o que eu acredito ser um dos melhores tipos de layouts onde você tem um monte de espaço aberto. Você tem um ícone e, em seguida, você tem algum texto de cabeçalho, e, em seguida, o parágrafo. E isso vai ser mais frequentemente do que não, o melhor tipo de layout porque ele permite que você facilmente ser direcionado para este conteúdo aqui e realmente tomar qualquer ação que este site quer que você tome. Agora, se descermos aqui, não tão ruim, e então o resto do site parece muito bom e ver como eles têm seu blog aqui. Ok, então o blog deles está por todo o lado. Acho que é demais aqui. Talvez eu tivesse imagens menores. Vamos ver aqui. Está bem. Então o conteúdo do blog deles aqui não é para Matt também. Eles têm os títulos. Então isso seria como um H1, H2, H3 e assim por diante e assim por diante. Então agora vamos dar uma olhada no meu site aqui e eu quero mostrar a vocês como isso é apresentado aqui, tanto quanto o conteúdo. Então eu tenho aqui as três áreas principais. Eu tenho os três ícones diferentes e tenho o conteúdo sob isso. E então há algumas referências, e então há conteúdo bem aqui com o título. E a mesma coisa aqui também. E é bem simples, certo? E então há alguns testemunhos reais diferentes aqui, tanto quanto os clientes. E então deixe-me mostrar-lhe como o serviço é feito. E este é o meu favorito porque é muito preciso e é muito atraente para o usuário vir aqui e ser capaz de olhar para os diferentes serviços e como isso é definido é muito, muito preciso para que seja sedutor para o usuário. Então, como você pode ver aqui, há a imagem à esquerda e há o conteúdo à direita. E há um menu suspenso aqui, onde você pode ver o material completo. Portanto, este é um relatório abrangente aqui, revisão. E então eles podem olhar para os resultados completos e, no botão Saiba mais, mesma coisa aqui, SMB e divulgação corporativa. Há uma foto à direita e, em seguida, onde você pode ver o material de entrega completo. Então eu gosto deste tipo particular de layout porque permite fornecer contexto para o que o conteúdo é. Mas também é colocado de uma forma muito prazerosa e atraente, certo? Então, agora vamos dar uma olhada em alguns outros exemplos aqui. Vejamos este site de advogados em particular que vimos em outro vídeo. E vamos ver como eles estão dispostos aqui. Acho que isso é demais. Está tudo confuso aqui em cima. Em seguida, um monte de coisas que eles estão fazendo para como SEO, onde eles têm todos esses links diferentes aqui. Então pode ser por isso também, mas eu teria estes tipicamente no fundo aqui em baixo. Então vamos olhar para o seu lugar aqui. Ok, então o blog não é para bem definido apenas layout de blog simples aqui. Você tem seus cabeçalhos. Ok? Então, esses tipos de sites, você realmente não vai ver um monte de design de interface do usuário, porque sua principal intenção é apenas fazer você entrar neste site e fazer um telefonema ou contatá-los. Portanto, não é o melhor tipo de interface de usuário aqui. Mas vamos olhar para outro aqui. Esta é a visibilidade do Ignite. Isto é, acredito que é uma agência de marketing. E uma das coisas que eu não gosto neste site é que há muita coisa acontecendo aqui. Há muito conteúdo. Então bem aqui, você pode ver que há uma agência de marketing de topo e há um nome de empresa lá, como se estivéssemos apenas olhando para a escola de volta. Então, há o motor de busca número um. E depois nos EUA, Reino Unido e Canadá. E então tem tanta coisa acontecendo lá. Como três diferentes quatro cores diferentes. Certo? E eu acho que seria muito mais fácil ter isso mais claro e não tantas coisas acontecendo aqui. Então talvez eu tivesse como o texto verde ou talvez apenas um texto branco e iria expor isso até o que a empresa faz, certo? Em vez de ter todas essas coisas aqui porque, você sabe, há tanto para ler e depois ir e descer aqui. Isso está tudo muito confuso também. Eu acho que este poderia ser um design melhor. No entanto, ele ainda permite a facilidade de uso porque está tudo em um só lugar. Então isso é um benefício também. Vindo aqui, não tão ruim assim. E então vamos ver bem aqui. Eu acho que isso está muito confuso também. Eu acho que deve haver alguns textos acima disso que diz, nós somos capazes de fazer XYZ. Nós podemos ajudá-lo a realizar, você sabe, ABC e depois ter um botão lá. Como eu tenho aqui quando vamos para a casa aqui em baixo, como é como se estivesse pronto para mais projetos de segurança, certo? Sim. Eleito Saiba mais. Então eu acho que algo assim aqui onde diz pronto para mais clientes ou o que quer que seja. Eu acho que isso poderia realmente beneficiar este ano. Mas no geral, isso é muito bom também. Eu só acho que há um monte de coisas acontecendo aqui na maior parte, eu realmente olharia para tornar isso muito mais fácil, para navegar, muito mais fácil, tanto quanto não ter tanta coisa toda misturada em um só lugar. Está bem. Tal como eu mencionei anteriormente, acho que este aqui foi provavelmente o melhor porque eles têm muito espaço em branco, certo? Não temos espaço em branco suficiente no outro. Porque um monte de sua confusão bem aqui. Você tem um pouco de espaço branco bem ali, um pouco bem ali, nenhum aqui. E só um pouco aqui, certo? Muito, muito pouco contra este. Ter uma tonelada de espaços em branco. Espaço em branco aqui, classificação, tudo o que é é o conteúdo e o botão. E então bem aqui, tendo isso, você sabe, apenas estar no meio aqui. Este é um melhor tipo de design, melhor tipo de interface de usuário. É muito mais fácil para o usuário e permitir mais prazeroso para que eles venham a este site e, você sabe, cumprir qualquer ação que seja necessária. Então isso vai estar aqui para o layout comum. Então, você verá que Arthur irá orientá-lo em outra lição no Adobe XD sobre como criá-los e como configurá-los. Então isso vai estar aqui neste vídeo e nos veremos no próximo. 60. Aula XD - layouts comuns: Oi lá. Esta lição vamos falar sobre tipos de layouts, layouts diferentes para suas páginas. E gostaríamos de começar a partir de uma abordagem mais tradicional como imagem mais cabeçalho de texto. Então nada extravagante. Vou mostrar-lhe um diploma como ele é integrado em criar dois. Temos uma margem aqui e uma margem no lado direito parece espaçosa. Aqui você vê que o conteúdo pode demorar menos ou mais. Você pode ajustar a largura e Haidt realmente você pode ajustar apenas a largura do conteúdo porque Haidt geralmente calculado quando você tem conteúdo real dentro da caixa k. Então vamos dizer que temos apenas prolines e isso parece bom. Não parece tão legal. Ok? Então, se você tem menos conteúdo, tentou encolher sua caixa de texto, que ele parece compacto, verdadeiro. Ton tentou espalhar suas palavras por toda a página. Não vamos trabalhar. O mesmo aqui. Deixa a versão espelhada deste e eu só aumentei o tamanho da imagem à direita e diminuiu o tamanho do número de palavras dentro do recipiente. Então descubra que tipo de conteúdo o site terá nas seções e tente ajustar seus blogs ao seu comprimento para que pareça composição mais equilibrada. A outra maneira é fazê-lo passo a passo. Portanto, há um cabeçalho com uma caixa de texto, há uma imagem por esses elementos, presumo que não só as tags de cabeçalho e a imagem poderia ser elementos diferentes combinar de maneiras diferentes. Então tente aplicar essa abordagem ao seu design e pense não apenas na imagem e nas tags. Para ser um formulário de opt-in poderia ser um controle deslizante, o que quer que possa ser, basta tentar organizá-lo adequadamente para que pareça muito aconchegante para AI e amado pelos usuários nos dias de hoje, mais projetos são feitos usando primeira abordagem móvel no aqui Eu vou sugerir ter este layout tão como passo a passo, então é uma abordagem consistente, kay? Então há um elemento em outro, e o terceiro, deixe-me mostrar como ficou aqui. Ter um título de imagem. Então essa abordagem funciona melhor aqui. Mesmo que diminuamos o tamanho para seu aço mínimo, podemos usar algo assim para grade de coluna aqui. Uma palavra que bem, como no design da área de trabalho. Portanto, considere essa diferença ao fazer o design da área de trabalho primeiro, pense em como será a versão móvel. Acho que será consistente, o mesmo que aqui. imagem continua do lado esquerdo, significa que a imagem estará no topo. Se a imagem vai no lado direito como aqui do que no telefone bile, vai olhar para este lado. Ok. Observe que em cada um desses layouts, você precisa considerar um anexar seus elementos para o layout saudação k. lembre-se, você pode usar estes blocos e este bloco, este bloco, e depois o outro, apenas para ter alguma variação para que as pessoas não vai esquema, você é taxado tentando acionar o olho para ler um texto dentro dele e pressione o botão. Ok, eu vou mostrar o justo as barras e para referência. Certo, agora você vê como funciona. Com o peer de chamada à ação. Você pode colocar botão como este, mas você precisa trabalhar na parte visual. Então, esta área será junto com isso, onde seus elementos devem ser alinhados a algo porque uma vez que ele sai do credo, você, como usuário vai notar. Estes são os layouts mais comuns, mais populares e fáceis que você pode integrar e usar seu design. Claro, para sistemas complexos que não funcionam porque você tem que pensar sobre estrutura. Existem diferentes tipos de elementos e há muitos deles muito mais do que no site corporativo. Por isso, requer análise adicional e mais pesquisas sobre qual seria a melhor maneira, em que será a melhor estrutura para o seu conteúdo no painel, sobre os sistemas complexos, sobre os outros controles e assim por diante. Digo-vos que estes são dois tipos porque esta é a versão espelhada deste e a outra está mais adaptada aos telemóveis. E, claro, com os sistemas SAR complexos, você precisará de uma análise mais profunda do conteúdo da função e assim por diante e, e estruturar sua tela e controla o contrário. Então, isso é mais aplicável para sites que tem algumas páginas, até cinco páginas, layouts diferentes que você pode lembrar esses dois por agora para começar é suficiente. O segundo é mais apropriado para o design móvel. O primeiro é mais adaptado para desktop, e este é apenas versão espelho do segundo layout. Então, hoje em dia, mais frequentemente eu estou usando este, mesmo que de uma perspectiva estática, eu gosto deste mais, muito mais. Mas quando eu faço o primeiro projeto móvel, é claro, tem que manter um layout consistente. Muito obrigado pela sua atenção e nos vemos em nossa próxima lição. Tchau. 61. Visão Visão: Ok, então neste vídeo, vamos olhar para o design do rodapé. Agora, o design do rodapé é onde você vai ter tipicamente o seu logotipo em onde você vai ter quaisquer tipos diferentes de links. Para páginas diferentes. Você normalmente terá como seu saldo, seu contato, seu endereço. Às vezes você pode ter como um mapa lá de sua localização se você tem como um negócio local e onde as pessoas realmente saem para a sua localização, e também vários tipos de links para as cidades ou locais. E esse é o senhor. E, em seguida, também normalmente como um formulário de contato e como você pode ver aqui, cada um deles muitas vezes por que eles fazem isso tanto quanto para essa geolocalização e os serviços para fins de SEO, porque quando você tem um link, especialmente com o texto âncora, que é o texto aqui, você pode ver que diz Search Engine Optimization aqui. E, em seguida, na parte inferior esquerda tem Serviços barra SEO. Então, se abrirmos isso aqui, você pode ver que o URL é Ignite visibilidade serviços barra, forward barra SEO. Mas quando descemos aqui, o texto, o texto âncora é a otimização do motor de busca. Então eles estão realmente fazendo isso para fins de SEO, para que eles possam ser classificados no Google. E, obviamente, isso é extremamente inteligente. Este é o caminho certo para fazer isso. E assim eles têm diferentes tipos de links aqui para os serviços. E então isso é o que você normalmente vai encontrar em um tipo bem projetado de rodapé onde você tem os links para os serviços e, em seguida, eles estão usando esse SEO, suco e energia, as indústrias aqui, eu não sou realmente necessário. Mas, em seguida, o orgulhosamente servindo esparso para os locais. Isso é um grande negócio porque os locais, eu digo que eles estão tentando classificar no Google para, você sabe, anúncios do Facebook ou serviços de marketing digital em um determinado local, então é exatamente assim que eles fariam isso. Eles têm esses links aqui e eles têm os locais. E então, se você for para a página, tem como marketing digital de San Diego, certo? Você pode ver a URL aqui em cima. Diz marketing digital de San Diego. Então, tudo isso é feito estrategicamente para garantir que eles são capazes de classificar para esses serviços específicos nessas áreas. Está bem. E então aqui, você tem a equipe, você tem os valores clientes, e como essas coisas em particular aqui, como os valores e talvez algumas críticas, talvez algumas ferramentas e recursos, certo? Você não vai encontrá-lo aqui no cabeçalho. Normalmente, vai estar na parte inferior do rodapé onde você vai encontrar páginas como política de privacidade, onde você vai encontrar páginas Como Termos de Serviços, certo? Então é aqui que você normalmente vai ter essa informação no rodapé. E então você tem o endereço aqui para o local, o número de telefone. E então um pouco sobre a empresa aqui. E então isso é fantástico aqui. Este é um ótimo tipo de rodapé para ter o logotipo aqui. E para este aqui que tem o logotipo à direita, à direita. Então isso é só um rodapé. Lembre-se no rodapé, há regras diferentes pelas quais você joga. E realmente não importa se você tem um logotipo à esquerda ou à direita. Para o rodapé. E então eles têm um bom apelo à ação aqui. E na medida em que eles enviem suas informações. E então o social e eu gosto como o texto é como cinza claro ou prata claro porque ele não aparece como o título real aqui. E então ele está realmente lá apenas para ter como referência. E então eu realmente gosto desse design. Eu gosto de como isso é colocado para fora. Vamos dar uma olhada em alguns outros aqui até o menu de fotões. Então este é o site do advogado aqui. Você pode ver que eles têm seu social aqui. Eu teria este Social aqui em baixo ainda mais. E uma das coisas que eu noto aqui é este testemunho aqui que você mal pode ver. E então eu não sei por que eles têm isso assim. Eu teria este destaque mais ou fazer isso em texto branco real. E então eles têm o sitemap e, em seguida, eles têm o texto bem aqui, que é exatamente como eu mencionei quatro. Na maioria das vezes, vai ser para fins de SEO. Observe como eles têm aqui, advogado criminal de San Diego, esse é o texto âncora que está dando o poder e o poder a esse site em particular. E então eles têm a política de privacidade aqui também. E então eles têm as instruções aqui. Tenho a certeza que se clicar nisto, vai levar-te a um mapa, certo? Perfeito. Está bem. Sim, isso é ótimo. E aqui está o link para a página real do advogado de defesa criminal Escondido. Então, há mais poder de SEO indo lá. E então eles têm o social como eu mencionei. Mas deve haver um apelo à ação aqui. Deve haver como um botão aqui que permite que as pessoas enviem uma mensagem ou até mesmo para ligar se quisessem ouvir direito, basta clicar neste número aqui, mas isso é para a maior parte vai ficar bem. Normalmente, você verá esse tipo de layout e muitos sites de negócios locais. Agora vamos dar uma olhada em outro aqui, que é z F7 criativo. Este aqui é muito mais simples, certo? Eles não têm um monte de coisas acontecendo aqui, como as outras. Este é apenas um número de telefone aqui, endereço e, em seguida, informações de parceria diferentes. Eles não estão realmente fazendo um monte de SEO aqui porque esses caras são mais uma agência criativa. E assim eles ainda têm que o Google Partner aqui, eles têm a marca aqui. O serviço é sobre, mas eles realmente não têm como o particular, você sabe, serviços de marketing de San Diego ou XYZ tipo de links porque eles não estão realmente indo para o SEO, porque esta empresa é mais de um tipo criativo de agência. Independentemente disso, eles ainda poderiam usar um pouco desse suco de SEO também. O rodapé, tanto quanto ter alguns links lá. No entanto, este é um tipo mais agradável e simples de layouts InDesign. E então eles têm o social aqui embaixo. E assim eles não têm o logotipo ou algo assim. Eles só têm links simples. E, em seguida, ser capaz de fazer com que você realmente ligue para eles ou visitar a sua localização. Então estes são os diferentes tipos de rodapés que você vai ver. Obviamente, há muita variação entre eles, dependendo do tipo de sites, o que o cliente realmente quer e o que você sente que parece melhor com base em sua experiência no que você quer que o rodapé obtenha realizado. Então isso vai estar aqui para este, e nos vemos no próximo. 62. Aula de XD - Mobile e Desktop: design com rodapé: Olá novamente, Arthur está aqui e vamos falar sobre rodapé. Rodapé, é a parte mais baixa da sua maquete. E aqui nós incluímos tudo o que não podemos incluir no cabeçalho. Normalmente duplicamos informações do cabeçalho, duplicaria aqui, se necessário. Então vou explicar algumas coisas aqui. Quando temos páginas longas no site, podemos esquecer esta notificação e esta navegação escondê-lo, não corrigido, então podemos duplicar esta modificação no rodapé K. Quando os bebês não são tão longos, você tem um poucos pergaminhos. Eu não acho que é necessário duplicar em para incluir a navegação principal do cabeçalho e do rodapé k. normalmente, ele serve estes ampla. Quando você tem pequenos pedaços de conteúdo necessário, pode usar esta seção. Eles são direitos autorais. Deixe-me mostrar-lhe a cadeia de direitos autorais. Direitos autorais da nossa turnê. 2020. Além disso, você pode ver que algum rodapé pode ter redes sociais. Para dispositivos móveis, eu recomendaria usar um design de coluna. Às vezes, você pode colocar dois menus aqui, se necessário. Se funcionar, eu sugiro colocar os ícones desta forma. Ok. E, claro, não se esqueça de diferenciar por espaçamento ou algum tipo de divisor entre seções, entre grupos. Portanto, é mais fácil reconhecer informações. Deixe-me colocar o logotipo aqui. Você pode mudar o logger para a versão preto e branco ou inverter as cores. Você acha que é legal? Claro, você pode ter outra cor do fundo, mas geralmente eles são mais escuros do que o resto do conteúdo. Às vezes, rodapé pode incluir roteiro. Vamos reestruturar o debate. Também não se esqueça sobre o se estiver usando o mapa no celular. Lembre-se que está pressionando o mapa. Se uma pessoa para rolar pressionando a multidão iniciará a interação com o próprio mapa. Eu uso banda aqui. Vamos tentar onde dizer, e eu pressionar Call e é chamado de mapa. Tenha cuidado com isso. Às vezes podemos usar algumas margens para permitir que uma pessoa toque nesta área, não para interferir com a seção do mapa. Se formos considerados a quantidade de quatro itens de menu, não há problema em usar um layout centrado. Talvez assim. Bem, PSAP para você. Talvez assim, mas com algumas dicas, alguma bala mostrando que duas seções diferentes. O mesmo acontece com o design da área de trabalho, porque é mais fácil criar uma área de trabalho quando você tem muito espaço aqui, k E geralmente vai dB como este. Crie um mapa mais amplo. Direitos autorais. Novamente, não é uma regra, mas toda a sua equipe de projeto vai apreciar se você usar verde. Por isso, pode parecer onde você pode mover elementos para diferentes. Para isso, vamos usar a mesma largura que a seção Conteúdo. Passe algum tempo jogando elementos de asa de 1 para outro e encontrando o lugar perfeito para elementos. ganância irá ajudá-lo nisso porque ele mostra onde seu elemento ou grupo de elementos pode ser tocado. O colocado. Ok, isso é tudo para rodapés. Muito obrigado pela sua atenção. Te vejo na próxima vez. 63. Visão Visão: Ok, então neste vídeo, vamos rever os diferentes tipos de design de um botão. Na próxima lição, Arthur irá guiá-lo através dos diferentes tipos de botões, bem como no Adobe XD. E ele vai mostrar-lhe como criar o. Então, para este aqui, eu vou apenas rever alguns tipos diferentes de projetos de botões em diferentes sites que lhe dão uma visão geral rápida aqui. Então vamos em frente e saltar aqui, podemos ver os primeiros tipos de botões aqui neste site em particular. Você pode ver que eles têm os serviços aqui. E então nosso trabalho você pode notar aqui. E o que eu realmente gosto sobre isso aqui é que eles têm o botão aqui com a caixa branca simples dentro com o texto branco real no meio. E então, uma vez que você paira sobre isso, você vê que ele fica azul. Então eu realmente gosto desses tipos de botões aqui porque eles permitem que você se destaque, mas então também ser capaz de enviar ainda mais uma vez que você paira sobre e escrever toda a característica dinâmica deste e, em seguida, este aqui. Eles realmente têm uma característica onde ele realmente levanta o botão aqui e torna um pouco mais leve. Então eu gosto desse tipo de botões aqui. E então vamos descer aqui e olhar para alguns outros tipos diferentes de botões aqui também. Eu gosto deste também. Um quando você passa o mouse sobre ele, ele se transforma em uma flecha aqui em sua dinâmica. Além disso, você notará que há um pouco de sombra no fundo também. Quando você passa o mouse sobre isso e você pode ver a sombra em torno dele, no entanto, você realmente não tem uma sombra quando é apenas eles são estáticos, certo? Mas a sombra também é outra grande característica. E depois descendo aqui, aqui está o botão dele também. Mesma coisa. Você tem a sombra que aparece lá em cima e depois a seta. Ok? E então este botão aqui é fantástico. Adorei o botão dele aqui. Isto é muito, muito único. Uma vez que você pousa nesta seção inteira aqui, este botão à direita se transforma em um quadrado de um círculo e, em seguida, um fundo realmente muda a cor também. Então esses tipos de botões dinâmicos são muito, muito bons também. E então vamos em frente e olhar para alguns outros tipos de botões que temos aqui neste exemplo. Então este botão aqui é para o site do advogado, como você pode ver aqui, eles têm o envio e, em seguida, eles têm como um tipo ouro de botão aqui. E então eles têm um pouco de sombra mais escura lá no fundo também. Então ele meio que dá o tipo três D de olhar, exatamente onde tipo de apoiado, certo? Você tem esse tipo de visual 3D. E quando você passa o mouse sobre ele, ele realmente muda isso para um texto branco, certo? E então fica um pouco mais escuro aqui, tanto quanto um botão. E então vamos até aqui e dar uma olhada neste botão aqui. Então eu gosto de como este texto está aqui em cima bem acima do botão. Você sempre quer ter textos acima um botão específico que tenha ajudado as pessoas sobre o que se trata. E então este, fica um pouco mais escuro uma vez que você está emprestando e você normalmente terá como um botão que é tipo de bordas arredondadas como este, ou um quadrado completo, ou você tem um botão como um círculo, certo? E então esses são os diferentes tipos de botões que você normalmente verá. Você pode ver que este aqui tem um pouco de sombra lá com o olho negro como se essa sombra fosse realmente faz com que ele apareça e se destaque. E então este aqui, só mais um botão de símbolo. E então vamos ao meu site em particular aqui. E este botão aqui é um botão quadrado puro, e então ele realmente fica mais escuro uma vez que você realmente passa o mouse sobre um botão particular aqui, e então clique sobre isso, e ele leva você para o botão de contato conosco. E este aqui será essencialmente um botão de envio. Isto não vai ser nada chique. Você pode torná-lo chique. No entanto, é bastante simples. Observe como este, fica um pouco mais escuro quando você paira sobre ele. Então, na maior parte, você vai notar que diferentes tipos de botões terão diferentes tipos de funções dinâmicas para eles. Alguns deles destacarão em cores diferentes. Alguns deles terão elementos diferentes sobre eles. E eu gosto deste aqui. Na medida em que este tipo de botão aqui, tanto quanto seu vídeo de reprodução, você pode ver como ele destaca em torno de. E é muito diferente porque isto é para um vídeo aqui. Não é para um botão em particular, tem como um design de círculo. É, Ei, reproduza este vídeo aqui, e é um design muito bonito e único. E então descer aqui, como este aqui, bem aqui, onde você tem apenas um esboço branco claro aqui para o botão. E então você tem o texto branco no meio. E então, quando você o realça, ele realmente aparece. Você tem que texto branco com os destaques azuis em torno dele até que ele realmente apareça. Então esta é uma lição rápida aqui sobre os diferentes tipos de botões que você vai ver. Normalmente os quadrados ou os que são normalmente um pouco arredondados, certo? Ou um tipo de design de botão arredondado completo que você verá. Então, na próxima lição vai orientá-lo através de como criar esses botões. E isso vai estar aqui para este. E nos vemos no próximo. 64. Aula de XD - Mobile e Desktop: Design de botões: Neste pequeno vídeo, vamos falar sobre pechinchas e como projetá-las no XD. Vamos lá. Você vê três botões aqui. Um tem os cantos arredondados, um com os cantos quadrados, e outro com um canto ligeiramente arredondado. Portanto, esse recurso é facilmente controlado. Será que esta função de x D notícia muito agradável para o futuro. Alguém que trabalha no Photoshop sabe que você também pode ter cantos tre sem qualquer raio e leve reduzir aqui. Além disso, para diferenciar seu curso de encargos, você pode usar cores diferentes. Geralmente são as cores principais, verde, azul, vermelho para alguma atenção. Ok, a seguir, onde você pode fazer é colocar o título em maiúsculas aqui. Além disso, você também pode aplicar o espaçamento entre letras. Quero dizer, você pode aumentar o espaçamento das letras para uma melhor consistência, se necessário. O botão de sombra recentemente introduzido, que tem apenas o contorno P2. E este tipo de biden, geralmente conhecido como bastão sombra ou vai botão K. Então, além dessas manipulações, você pode adicionar a sombra quando necessário, por favor, não use mais sombras para todos os elementos. Se o engarrafamento transmite pressionando, clicando em alguns slides, sombra está bem. A cor pode ser gradiente. Tente é c cubo p um gradiente para o seu kit de interface do usuário, que é a combinação de que é a coleção de seus elementos de interface do usuário sobre o projeto tem que ter esquema de cores consistente, como já falamos sobre Isso. E você tem que definir regras para seus botões como esta cor e esta forma será usada para isso e aquilo, esta cor será usada este tipo de funções, botões vermelhos normalmente usados para excluir operações que podem ser desfeitas. E é claro que você não vai usar quadrado e arredondado fundo em uma tela em vai olhar terrível. Eu mostro-te. Então, por exemplo, nós compramos agora editar ou eu mudaria. Então aqui está o exemplo da combinação, como as cores em equilíbrio funcionam juntas. Então aparecer agora é a função que todos nós estamos interessados em transmite algo positivo, cor verde, cor azul transmite outra coisa. Algo diferença em média entre o bem e o mal, talvez. E é usado aqui para edição. E advogado significa que você vai pular este script de tela, esta janela, e retornar de volta. Viemos da palavra. Você pode usá-lo para excluir um elemento e dados de linha, qualquer coisa. Para aplicar essa abordagem em todos os seus projetos, principalmente usado em sistemas SaaS complexos, painéis e assim por diante. Talvez você possa implementar esta abordagem no carrinho ou minha seção carrinho em algum e-commerce. Então a idéia é atribuir cores e provavelmente formas a um grupo de botões. Assim, você não terá uma tela onde você tem que comprar agora e editar, respectivamente, cores verde e azul e aconselhar com o vermelho. E então, de repente, a próxima tela terá nítida. Agora aqui, edite Brad e advogado. Ok. Agora você vê a diferença. Se você vir essa combinação, você talvez será confuso para licitar porque você está acostumado com cores vermelhas, cor de aviso. A cor azul é mais ou menos ok para a loja agora, mas a cor vermelha para edição como algo não apropriado. Então, essa abordagem é chamada de codificação de cores. Quando você tem funções que são semelhantes e você aplicar as mesmas cores, dois botões que estão em seu projeto. Também é chamado de botão primário, secundário e terceiro. Ok? Então o botão primário é disparado agora, secundário é adicionado. O meu cartão. E o botão terceiro vai projetou esse estilo. Portanto, é fácil quando você começa a fazer isso, quando você tem funções primárias e secundárias, é assim que você aplica essa codificação de cores aos elementos da interface do usuário. E não importa se você tem cantos arredondados onde somos co-proprietários. Você só precisa ter a consistência em toda a sua interface de usuário. Então, quando o usuário está acostumado com suas cores, ele ou ela já vai esperar, vai mudar depois de clicar no botão vermelho, depois de clicar no botão verde ou azul, ok. Assim, além da atribuição de prioridades aos seus botões, por favor, considere os diferentes estados do botão padrão. Como este. Desativado. Normalmente desabilitado têm cor cinza ao passar o mouse. E pressionado. Ou ativo. Ativo significa que o botão foi pressionado. Ei, estas são datas básicas de botão que você pode considerar. Mas em x D, Você pode criar sobre os dois destes, tão normal e em Hoover. E eu acho que isso é suficiente para treinadores para trabalhar em sua simulação até o botão desativado talvez vai ser o mesmo estilo para todos os seus botões sólidos. O estilo desabilitado geralmente vai, o estilo desabilitado geralmente vai, além desses dois. Quer dizer, mexa-se um pouco. Então estilo desabilitado é geralmente vem como uma adição aos seus estados inferiores, mas esses dois ou três estados, por favor, ilustre como seus fardos Luke sobre como eles olham quando eles são pressionados. Não se trata apenas de sobrecargas em seus capacetes interativos que têm alguma interação, mesmo micro interação é muito útil para ilustrá-lo, mostrar, frontend equipe para que eles sejam capazes de implementar seus pensamentos de design e o marcação eo projeto além dos estados razão outra coisa que chamado saudação. E será legal se seus botões se encaixam na creta k, seja três colunas, seja duas colunas ou quatro colunas e assim por diante. Você pode até projetar vários tamanhos, botões pequenos e grandes, se necessário. Eu poderia dizer-lhe que você pode preparar uma interface perfeita keyed antes de passar por cima do projeto. E felizmente, na maioria das vezes é impossível porque você não tem certeza de quais funções, quais elementos você precisará e quão pequeno ou grande eles devem ser resolvidos. Você tem compreensão suficiente sobre como projetar não só botões bonitos, mas também significativos, Como comprar chamadores para criar gradação entre primário, secundário e terciário. E você também pode ajustar o estilo, ajustar os cantos na sombra, gradiente de raio e grau de curso em diferentes estados. E a última coisa é a ganância. A ganância passa por cima de todas as suas páginas, janelas, seja lá o que for. Então seus elementos precisamente botões tem que ser o mesmo com não só o mesmo, mas também ter o número preciso de colunas para que eles se encaixem na sua ganância C, Então três colunas, cinco colunas, seis colunas, K. Tente evitar tal tamanho como este Ou este, K, eu vou ser muito mais fácil de trabalhar com o seu maquete. Muito obrigado pela sua atenção. Espero que esta lição tenha sido útil. Vemo-nos na nossa próxima lição. 65. Aula de XD - Mobile e Desktop: Design de entrada: Bem-vinda de volta. Nesta lição, vamos projetar a área de texto, que é o elemento da maioria dos kits de interface do usuário e da interface do usuário em geral. Então não será tão desafiador essa arte. Design, a área de texto ou entrada, mas algumas coisas que você deve considerar, a fim de criar uma interface de usuário consistente. Garoto, certo, da nossa lição anterior, você sabe como criar botões e quais tipos existem? Quais são as suas prioridades? Eu só quero acrescentar. Uma coisa que você pode fazer no Adobe X-Y é criar um efeito sobre o botão. Assim, uma vez que a pessoa passa com o cursor sobre o botão, ela mudou de aparência. Kay, digamos, você diz, Aqui vamos nós. Apenas mantenha isso em mente. Ok, então vamos voltar para as nossas entradas. Primeiro de tudo, em termos de entradas, você precisará começar com o ódio de sua entrada. E isso é interessante porque você tem que saber qual o tamanho da fonte será usado em sua interface. Tudo bem se você estiver trabalhando com alguns tanques padrão e o tamanho da fonte estiver entre 1624 pixels. Isso não vai fazer tanta diferença. Mas quando se trata de algumas interfaces de usuário excelentes para enfrentar enormes telefones carecas, às vezes é necessário dab área de texto para esse tamanho e para o Sasso parece, você sabe, como uma casa única. Ok, então toda vez que você começar a projetar a entrada, por favor digite o espaço reservado de texto dentro dela. Então geralmente é nome ou nome completo. Ok. Então o tamanho dessa fonte é 27 pixels, e essa área é muito grande para esse tamanho de telefone, mesmo que pareça espaçosa, mas ainda podemos deduzir um pouco do Haidt, então, oh, parece mais compacto. Podemos deduzir um pouco mais. Tente manter essas dimensões de seus elementos claras. Soviética não 6163. E agora vemos que com quase 30 tamanho formado, temos entrada de 60 pixels de altura. O outro lado deste elemento é que ele geralmente funciona em conjunto com botão. Então, se tomarmos botão e colocá-lo aqui, vai olhar um pouco desequilibrado como estas duas alturas são diferentes. Mesmo que façamos assim, vemos que este elemento leva muito menos ênfase em comparação com o botão cancelar. E este é o problema. Porque os elementos devem ser iguais, então você pode colocá-lo juntos de maneiras diferentes. Então, temos duas maneiras aqui. Torne o nosso botão menor ou eles cobrem a entrada mais alta. Então, aqui vou diminuir o tamanho do botão. Mas quando você está projetando seu kit de interface do usuário, você precisa começar com o tamanho da fonte. Se você está fazendo textblock, se você está fazendo Barton, se você está fazendo input, textarea, checkbox, botões de opção, lag drop-down e assim por diante. Você tem que começar a partir do tamanho do texto. E uma vez que você tem o tamanho certo da fonte, então seus elementos serão enrolados em torno disso. O ponto de partida é o tamanho do telefone na interface do usuário. Então, temos 24 pixels, o que é suficiente para legibilidade. E nosso ódio de entrada é de 60 pixels. Então o mesmo será quatro botões. Em relação ao estilo destes elemento simples, Devo salientar que se você está fazendo um cantos arredondados para o seu curso Barton, você precisa manter um preservado o mesmo estilo aqui. Use o mesmo raio de canto radial, raio de borda para suas entradas, bem como no botão, sua entrada pode ter três estados. primeiro é o estado padrão, o outro é o estado desabilitado e o outro está ativo ou sem foco. Então, uma vez em foco, talvez você tenha o cursor aqui em seus desativáveis. Talvez ele tenha mais brilhante. E eu acho que é útil incluir o usuário. Outro estado como texto digitado, ok, porque há uma diferença entre o texto do usuário e o espaço reservado. Então vamos descrevê-lo novamente. Deixe-me reorganizar um pouco. Ok? Então, aqui está a condição padrão que representa a entrada com texto de espaço reservado. Depois de clicar nessa área, seu espaço reservado geralmente desaparece e você vê o cursor ou digitação e, em seguida, digita o texto. estado adicional para entrada está desativado. Desativado é usado quando algo não está disponível para você alterar no momento, e o estado do pairar será este. Vamos ter em mente que às vezes até mesmo em espaço reservado Hoover e permanece lá até que você comece a realmente digitar algo. Ok. Portanto, permanece lá apenas até que você esteja começando a pressionar qualquer tecla no teclado. Agora você sabe como combinar esses elementos principais em sua interface do usuário. Próximas lições, discutiremos elementos adicionais que ajudarão você a criar seu kit de interface do usuário. Muito obrigado pela sua atenção por. 66. Visão geral de filtro móvel e Desktop: Neste vídeo, vamos rever os diferentes tipos de design de filtro nos diferentes tipos de design de pesquisa. Então, isso é normalmente o que você vai ver em uma loja de comércio eletrônico onde você está comprando um determinado produto, um item específico, e você tem diferentes variações que você pode escolher. E, em seguida, também na barra de pesquisa, onde você pode essencialmente usá-lo para procurar produtos diferentes, itens diferentes em uma determinada loja. Então vamos em frente e pular aqui. Então este primeiro site aqui. Então este primeiro site aqui que você pode ver é participar foods.com. Parece que eles vendem um monte de diferentes tipos de biscoitos. E então o que eu quero mostrar aqui é como eles têm seu design de filtro específico definido. Então vamos em frente e olhar para um desses produtos em particular. Então temos os biscoitos crocantes de chocolate. Você pode ver aqui. Eles têm as críticas aqui, o que é ótimo porque permite a prova social, certo? Para que as pessoas possam ver que este é realmente um bom produto. E então eles têm os diferentes tipos de tamanhos. Ou você quer três caixas ou você quer seis caixas? E então você pode ver aqui as mudanças de preço, certo? E então você pode se inscrever em uma assinatura para eles sejam entregues a cada duas semanas, a cada quatro semanas. E então este é um tipo de tipos diferentes de filtros que você vai ver em vários sites. Agora, o design vai diferir, certo? Dependendo da aparência desses sites em particular. Eu só quero mostrar-lhe alguns exemplos aqui de diferentes tipos de loja de e-commerce online. Então, tudo bem. Então aqui você pode alterar a quantidade e, em seguida, você pode adicionar ao carrinho aqui. Então este vai ser um tipo de design de filtro aqui. E agora vamos até aqui para a barra de pesquisa. Você pode ver, você pode apenas digitando aqui, digamos que estávamos procurando por um tipo particular de cookie. Então vamos amaciar Bates. Ok, então vamos em frente e digite aqui biscoitos macios cozidos. Ok, então ele puxa aqui os diferentes tipos de biscoitos de chocolate macios cozidos. Agora, esta barra de pesquisa, o design de pesquisa vai ser bem simples. Você vai ver isso no topo dos sites muitas vezes, em também, como eu mencionei anteriormente em outros vídeos, você vai ter o logotipo no meio ou no lado esquerdo. Então este aparecer também é uma grande coisa para lojas de e-commerce, onde você tem no topo como um código de cupom ou um cupom, certo? Permite que as pessoas sejam mais atraídas a querer fazer uma compra, certo? Então este é um design de filtro de pesquisa muito simples aqui, bem como o tipo de filtro para o produto. Então agora vamos olhar para um tipo diferente de site aqui. Vamos para este site em particular, que é o pacote appreciate.com. E digamos que clicamos neste produto específico aqui. E você pode ver que este tem um tipo muito padrão de design de filtro. Você tem o estilo aqui, preto, areia e marrom. E então você tem a quantidade, direita que atualiza automaticamente aqui em baixo. E então você pode adicionar isso ao seu carrinho real. Então vamos para diferentes aqui. Vamos a um kit de mercado. E para isso parece que só há um disponível aqui, certo? Estes estão todos esgotados e ver se podemos encontrar diferentes tipos de produtos aqui que estão realmente disponíveis. Então vamos para o kit de viagem aqui. Neste tipicamente terá cores diferentes. No entanto, para este é apenas um. Mas você pode ver que este é um bem simples. E aqui você tem a quantidade, nada de especial sobre ela. Se formos aqui, podemos ver que é apenas um tipo diferente de cores. E é isso que o, o que você vai notar nos designs do filtro, você vai ver tipicamente o preço, a quantidade, diferentes variações de cor, diferentes variações de tamanho. Amazon.com faz é muito bem onde você tem diferentes tipos de recursos, como eu mencionei, como tamanho, design, layout, certo? E depois os preços. E aqui está um site de café que é a lâmpada preta. E vamos dar uma olhada em alguns destes têm algum design de filtro também. Então vamos olhar para este aqui. Então, este pode ser filtrado por tamanho, normalmente tem tamanhos diferentes aqui. E então você pode ter como feijão inteiro ou gotejamento ou imprensa francesa, certo? E então você tem a opção de ter uma compra única aqui e um suscribe. Ok. E então este é apenas um pequeno vídeo muito rápido. O que eu fiz foi subir e procurei nas principais lojas da Shopify, e então eu passei pelos três primeiros e selecionei estes aqui porque quero mostrar o que algumas das principais lojas estão usando quatro tipos diferentes de designs de filtro e, em seguida, Pesquisar layouts de design, certo? Muito, muito simples aqui. Este tem uma busca no topo. Na maioria das vezes, você verá as lojas da Shopify onde elas têm uma barra de pesquisa muito simples aqui. Ou eles têm uma pequena moldura de lupa. Você vai ver que mesmo neste aqui, no topo, você vai ver a lupa. E então você pode procurar o produto que você está procurando. Este é apenas um tipo muito simples de filtro e layout de pesquisa. Aqui no próximo vídeo, Arthur irá orientá-lo através de outras variações e outros tipos de design de filtros e projetos de barras de pesquisa também. Então isso vai estar aqui para este, e nos vemos no próximo. 67. Aula Adobe XD - Mobile e desktop: Design de filtro: Neste vídeo, vamos falar sobre design de filtros. Então, vamos começar com uma descrição simples do que é o filtro. Filtro é uma maneira de economizar espaço em sua interface de usuário ao mesmo tempo, proporcionando conveniência ao usuário. Assim, a abordagem que é usado no design do filtro é geralmente simples como menu drop-down que discutimos na lição anterior, mas alguma diferença. Então, geralmente vemos um ícone de filtro. Em seguida, estamos pressionando o ícone de filtro e ver algum conteúdo original. Este conteúdo é, na verdade, a representação de parâmetros de filtro ou critérios pelos quais outro elemento de interface do usuário será trabalhado. Ou essa será a maneira de reduzir nossos resultados de pesquisa de conteúdo na página em que já estamos. Então digamos que você está procurando sapatos por US $18, então você vê escolher que, tem as cores diferentes. E você não gosta de vermelho, verde ou azul, você quer Brown simples. Este é o lugar onde os filtros podem ser úteis. No nosso caso, teremos os seguintes parâmetros. Agora temos quatro parâmetros que somos capazes de filtrar ou filtrar. A abordagem aqui é usada incluindo-os uma vez que eles são selecionados. E se eu quiser sapatos castanhos apenas isolar cor marrom e talvez eu precise de algum outro controle que irá ajudá-lo a fechar esta janela depois que eu acabei de selecionar. Então é assim que resolvemos sapatos de cor marrom. A outra coisa é o filtro e o controle deslizante que ajudam você a classificar o valor numérico preciso do seu catálogo ou outro conteúdo. Normalmente, em telas maiores, você pode adicionar controle deslizante, que irá ajudá-lo a selecionar um dados numéricos precisos, se é um preço, tamanho, quantidades de algo, e assim por diante. Vamos ter um preço aqui. Então, isso mostrará a faixa de preço que você está procurando. Também poderia ser como se estivéssemos falando de alguns critérios selecionáveis. Eu usaria uma ilustração mais simples. Uma vez que uma pessoa decidiu selecionar alguma faixa de preço, existem várias abordagens para isso. Pode-se selecionar este preço baixo, o preço médio ou o preço alto. Por isso, também pode ser aplicável no seu filtro. Existem muitos elementos modernos que entraram em u i nos últimos dois anos. Portanto, eles geralmente não são incluídos em kits básicos de interface do usuário da maioria dos frameworks, mas tags, controles deslizantes. Então, um, tornando a vida do usuário mais fácil, representando a mesma funcionalidade. Eles têm melhor estilo, urso visual para que ele se adapte às necessidades do usuário e tendências recentes de telas pequenas. Portanto, é mais confortável selecionar um desses três itens. Aqui temos de k. No nosso caso, este usuário caso tem que se concentrar neste elemento, o preço mais baixo, e depois pensar sobre o preço mais alto e depois pressionar alguns botões. Então vamos contar. Primeiro, nós selecionamos, essa é a primeira interação que petite. Então, como você vê, isso não é a mudança de interfaces de usuário, mudando para a abordagem para os dados. Sabemos que as máquinas são bastante precisas neste caso, mas aqui queremos tornar a vida do usuário mais fácil. Temos que mudar a linguagem do usuário para um idioma de usuário, não a linguagem de máquina. Então, uma vez que eu vejo essa abreviatura, sinal de dólar, eu automaticamente entendo o que se entende por esses três ícones, ok, e pelo contexto deste aplicativo, nós entendemos que todos os produtos dividem em três categorias. Às vezes não seria aplicável, mas ainda assim, há muitas coisas que você pode repensar e explicar aos usuários de uma maneira diferente. Então vamos voltar aos filtros dela. Então você vê que podemos usar vários tipos de elemento, bem como elementos tradicionais como botões de rádio. Então temos couro ou letra igual, um ou outro. E uma vez que selecionamos couro, não seremos capazes de selecionar letra eco ou vice-versa. Não é possível selecionar os dois. Então é uma opção única. Você pode até mesmo implementar ícones, seu filtro para selecionar alguns critérios. Também é linguagem de usuário. Você não está mostrando uma enorme lista de categorias que é chato, que é chato, mas você mostra a eles a representação, o suporte visual. Então, eles não estão adivinhando sobre o que eles querem pedir para comer, apenas mostrando-lhes ícones. E isso parece mais fácil do que ler entre todas as listas de opções. E há mais um que também foi usado em nosso aplicativo. Digamos que queremos mostrar apenas produtos especiais. Então podemos usar um botão desligado aqui. E agora vemos que este está desativado, está bem? E este está habilitado. Portanto, não queremos ver apenas produtos parciais. Queremos ver apenas em estoque antes. Eles estão disponíveis no estoque imediatamente. O que mais anúncio altura vai esconder e preço, por exemplo, eu adicionaria sem salário algumas funções muito agradáveis e aconchegantes que são realmente apreciá-lo em alguns resultados de pesquisa ou alguns catálogos, talvez alguns sistemas, sistemas complexos. Pense sobre o que você apreciaria como função de filtro em seus sites favoritos e pense em como você conseguiu isso dentro. O que você acha que seria apreciado em seus aplicativos móveis favoritos? Que coisas poderiam ser reorganizadas. Essas observações irão ajudá-lo muito. Está bem, vejo-te na nossa próxima lição. 68. Aula Adobe XD - Mobile e Desktop: Design: Oi lá. Bem-vindos de volta ao nosso trabalho I aulas. Então hoje eu gostaria de falar sobre pesquisa e pesquisa, que é uma pesquisa de coisas bastante simples. Mas como você pode ver na tela, eu ilustrei três partes de busca que têm visual completamente diferente apenas por causa da substituição dos elementos dentro desta caixa. Então aqui temos o ícone de pesquisa, que é zoom. Eu posso então pequeno espaçamento e palavra-chave ou TI, então você não tem nada porque é esperado para pressionar Enter visualmente este elemento e este olhar bastante diferente. E eu diria que isso é por causa dos nossos hábitos. Costumávamos procurar aqui em todos os lugares. Se quisermos procurar algo, gostaríamos de ter este modal, às vezes também usar assim, mas esses elementos, na minha opinião, colocados muito longe um do outro. Então, se você gostaria que os usuários lessem facilmente e rapidamente a função do seu elemento, por favor, tente colocar elementos mais perto do canto esquerdo, especialmente quando você trabalha com fontes e usa uma linguagem mais tradicional que é pesquisa, não palavra-chave ou ID específica. Em alguns dizem, eu entendo que pode haver algumas coisas, mas essas buscam para nós, para muitas pessoas parece mais natural do que essas duas, só por causa de mudar o texto neste pequeno campo de texto, pesquisa poderia ser Tecnicamente pesquisa ao vivo. Você começa a digitar e, em seguida, algumas opções podem aparecer. Em seguida, você seleciona a opção e talvez vá. O outro é quando você usa dados precisos como surdos 25. Agora gostaria de procurar por essas idéias. A maioria dos elementos de interface do usuário tem os estados e seus estados são mais parecidos, os estados de entrada de texto usual. Então lembre-se que este é o estado padrão. O outro motivo focado, terceiro é o texto do usuário e desativar a pesquisa também pode ser desabilitado às vezes. Então você pode considerar este e os outros casos para textos do usuário e passar o mouse. Por favor, considere essas condições que isso indica em seu UiKit, para que sua interface de usuário seja mais interativa. Os desenvolvedores terão menos perguntas sobre como você acha que o pairar vai olhar como um passado desenvolvedores dos EUA foram o único que estilizou esses ícones, que projetou essas interações? Como pequenas animações, pequenos elementos de interatividade, eles não estavam disponíveis no Photoshop, era bastante difícil criar estados diferentes para elementos. Você criou outro a bordo para cada estado e assim por diante. Em x D, temos a chance de destacar facilmente a interação do elemento e facilmente criar para gerenciar, passar e manter esses objetos entre todos os projetos. Muito obrigado, organizou um 69. Visão geral de UI: Neste vídeo, vamos rever kits de interface do usuário. Assim, as crianças da interface do usuário são essencialmente diferentes tipos de componentes, diferentes tipos de recursos e funcionalidades que um determinado aplicativo ou site terá tipicamente. E na próxima palestra, Arthur vai guiar você sobre como criar isso. Mas nesta palestra em vídeo aqui, eu vou orientá-los através de onde você pode encontrar estes se você não quiser criá-los por conta própria e onde você pode obter idéias diferentes. Então os kits de interface do usuário, como eu mencionei, estas serão coisas que você cria para um determinado site, em particular aplicação, tanto quanto projetos de botões, diferentes tipos de textos, diferentes tipos de fonte, diferentes tipos de ícones, certo? Então vamos em frente e olhar para alguns desses diferentes tipos de kits de interface do usuário aqui. Então você pode ver este primeiro aqui. Ele tem um monte de diferentes tipos de recursos e funcionalidades já incorporados que você pode usar para um determinado aplicativo em que você não precisa criá-los a partir do zero rank. Você pode usá-los e colocá-los em seu portfólio. E como você pode ver aqui, os diferentes tipos de telas que diferentes tipos de visualizações, certo? Estes tipos de vistas aqui são muito, muito agradáveis e simples. E eles fazem com que seja fácil para o usuário navegar em uma, uma compra, certo? E aqui estão alguns dos destaques. Camada bem organizada, personalização super fácil, diferentes tipos de fonte do Google, design moderno da interface do usuário, certo? E você pode comprar isso por, eu acredito US $20. E assim você pode ir na força tema, todos esses diferentes tipos de sites e realmente apenas digitar no kit de interface do usuário no Google e você vai encontrar um monte de recursos diferentes. Então vamos passar por aqui agora e ir para o design de pontos da loja de interface do usuário. E podemos olhar para alguns diferentes aqui também. Isso é para design de modelo de página de aterrissagem no Adobe XD, A Seagull. Veja isso, você pode ver todos esses tipos diferentes de design de página de destino, certo? E como eu disse, você pode comprá-los ou você pode baixar gratuitamente dependendo do site em que você está. E então vamos para o labs.com. Aqui está outro recurso onde você pode comprar algumas leituras feitas para você modelos. Vamos ver este azul aqui. Este parece muito bom. Então este aqui, você pode comprar por 99 por mês por um custo mensal real, ou você pode comprar isso com uma taxa única por US $29. Está bem. E eu acredito que isso é mais para um tipo de bate-papo de mensagens de recurso lá e ver se podemos encontrar alguns diferentes aqui. Design de aplicativos de educação. Isto é para modelos de página de destino da moda que vêem aqui aplicativo quiz. Vamos dar uma olhada neste e-commerce aqui. Então este é um layout muito bonito aqui. Mais uma vez, estes são modelos diferentes, UI template kids que você será capaz de comprar e ter esses projetos já configurados e prontos para você ser capaz de usar. E você também pode usá-los e adicioná-los ao seu portfólio, certo? Mas você não precisará criá-los a partir do zero se você não quiser, porque você pode tirar ideias diferentes disso. Você pode usar alguns dos diferentes elementos, certo? E componentes, e talvez os tenha mudado um pouco. A menos que você queira criar um kit de interface do zero, você sabe, isso vai ser algo que você faz por conta própria onde você está desenvolvendo, digamos um site ou um aplicativo. E você quer criar um kit de interface do usuário para os codificadores e para outros designers que podem estar trabalhando nesse aplicativo ou site em particular. Mas esta é apenas uma visão geral rápida aqui de mostrar diferentes tipos de kits de interface do usuário, projetos de interface do usuário que já estão disponíveis para você usar, certo? Como este é um bom aqui também para uma loja real que vende sapatos ou talvez qualquer tipo de produtos esportivos, certo? Isso vai ser algo que você pode usar como um tipo típico de design. E, em seguida, também aqui em um elementos Varro, você pode comprar alguns pronto feito para você, modelos de interface do usuário também. Então este aqui é para uma loja de e-commerce, anos para o site de construção. Aqui está outra para uma empresa de marketing. Vamos olhar para este aqui. Aproveite o poder do email marketing. Então ele vem com apenas este negócio de página de destino particular aqui. Está bem? Então, sim, isso vai ser um recurso aqui que você pode olhar quando você está procurando por kits de interface do usuário, certo? Você pode simplesmente digitar em kits de interface do usuário do Google e você vai ser levado para um monte de recursos diferentes. Você pode usar esses kits de interface do usuário e comprá-los e usá-los como referências ou talvez usá-los para um design específico. Você raramente tem que criar modelos de interface do zero, a menos que você queira, a menos que você tenha algo muito exclusivo e classificação do cliente. E, em seguida, Arthur vai orientá-los no próximo vídeo sobre como configurar um kit de interface do usuário. Então isso vai estar aqui para este, e nos vemos no próximo. 70. Aula XD - Desktop e móvel: Kit UI: Oi lá. Vamos falar sobre o kit de interface do usuário. Uikit é a coleção de elementos que podem ser usados em todo o seu projeto. Uikit está relacionado com a interface do usuário. Pode incluir cores, ícones, topografia, barras de controle, botões, cartões, controles, controles deslizantes, rótulos e assim por diante. Então, uma vez que você precisa criar uma página adicional para você, será fácil escolher a cor primária, secundária ou terciária. Escolha o tamanho da fonte e o estilo da fonte necessários, ícone, se necessário, botão e assim por diante, e crie outro novo layout para sua interface de usuário. Então, digamos que temos um sistema que teve uma atualização e precisamos implementar de alguma forma essa atualização para que ela não se destaque como separado deste conceito de design. Então, vamos escolher o cartão, vamos escolher o mesmo controle deslizante, se necessário, botão e assim por diante e assim por diante. Assim, seremos capazes de preservar o mesmo estilo sobre todo o projeto em que estamos trabalhando. Em. Outra coisa é UiKit Jesus, para quando o seu projeto é passado para a equipe de desenvolvedores. E esses caras serão capazes de criar, para gerar algumas novas páginas, novas telas sem qualquer esforço de você. Então eles não vão te incomodar. E eles não terão muitas perguntas como qual cor eu deveria usar se eu precisar criar a barra de pesquisa para página de quatro categorias, por exemplo, aqui você terá as regras para cores, terá ícone T definido. Você definitivamente incluirá a hierarquia tipográfica, os estilos de parágrafo, elementos e assim por diante. Então eles vão escolher a cor necessária, fontes, barras, se necessário, etiquetas cartões Barton, e vamos criar a interface necessária. Além disso, eles poderiam implementar essa funcionalidade no sistema em que você trabalha. Então, esses novos modelos lá serão gerados automaticamente sem qualquer esforço, nem de você, nem de desenvolvedores front-end. Ok? Então, para pequenos projetos, uma página, várias páginas. Sites, como sites corporativos, não acham que é necessário criar kit de interface do usuário, mas seria bom passar o UIKit juntamente com seu maquete para desenvolvedores. Assim, eles serão capazes de adicionar alguma funcionalidade com antecedência usando seu kit de interface do usuário que usando os elementos que você sugere. Mas para coisas mais complexas como SAS, redes sociais, quaisquer outros tipos que têm muitas telas. Claro, é quase necessário ter este kit de interface do usuário porque muitas mudanças podem ocorrer enquanto o desenvolvimento, enquanto o projeto, estrutura de design deve ser flexível. Assim, ele se adapta às necessidades do projeto, seja sua escalabilidade ou é a capacidade de resposta ou outra coisa. Mas você tem que manter essas coisas principais dentro do seu kit de interface do usuário. E uma vez que você tem este sistema que tem 40-50 telas dentro, é claro, você vai usar o mesmo elemento, o mesmo estilo em todo o seu projeto. Então tente criar kit de interface do usuário para projetos complexos, porque você vai precisar deles mesmo. Porque pode haver algumas edições, pode haver algumas atualizações. E uma vez que você tem tudo à mão, você já definiu regras. Eles não são rígidos, eles são flexíveis. Você vai criar uma nova página com estes sem quebrar o trabalho de codificadores femininos. Nossos outros caras dentro do kit de interface do usuário da equipe do projeto é muito semelhante ao livro da marca ou guia da marca porque tem principalmente os mesmos elementos. Mas, neste caso, é mais técnico e você pode pegar emprestado o ícone a partir daqui. Copie colar em seu arquivo de trabalho. Alguns UIKit podem não ter alguns elementos que são ilustrados aqui. Alguns podem ter alguns elementos adicionais. Quanto mais elementos você tiver dentro deste arquivo, menos esforço será para criar novas telas. Em outro recurso útil de UI Kit é que ele ajuda a passar seu projeto para outro designer nos casos em que você não é capaz de continuar o trabalho por alguns motivos. Digamos que você fez o trabalho, concluiu o projeto, mas algumas atualizações ocorreram. Seu cliente pode trabalhar com outro designer sem incomodá-lo qual elemento precisamos usar aqui ou ali. Novamente, é como guia de branding para interface de usuário e incentivá-lo a gastar tempo e para criar essas bibliotecas de elementos para projetos que são complexos, que podem exigir novo layout, novos recursos, e será muito útil para você e sua equipe. Muito obrigado pela sua atenção. Espero que tenha sido útil. Muito obrigado pela sua atenção. Espero que tenha sido útil e eu realmente amo criar Kit de interface e espero que você vai adorar vê-lo em nossa próxima lição. 71. Visão: Neste vídeo, vamos rever as micro-interações. Agora, micro-interações são muito, muito comuns em diferentes plataformas de mídia social, em diferentes sites, certo? Você provavelmente usa isso o tempo todo, especialmente se você é como no Facebook onde você está constantemente se engajando com as postagens das pessoas, com o conteúdo das pessoas e deu-lhes um polegar para cima, talvez Harding, um comentário ou o que quer que pode ser. Todos esses serão exemplos de micro interações. E na próxima aula de vídeo, Lá vai mostrar como criar microinterações diferentes e como elas funcionam no Adobe XD. No entanto, para este vídeo, isso vai ser mais uma visão geral. Então, como você pode ver aqui, micro-interações são realmente aqueles tipos de engajamentos que fazem com que seja muito tão e agradável experiência para o usuário realmente interagir com esse aplicativo ou esse site. E como podem ver aqui, as micro-interações têm quatro partes. O primeiro é o gatilho, que vai ser a iniciação, que vai iniciar a micro interação, seja como um gosto ou um coração que você faz em um determinado post no Facebook. E há regras que determinam o que acontece. Uma micro interação é acionada, por exemplo, uma vez que você gosta de um comentário específico ou uma postagem, certo? Isso passa automaticamente de cinza para azul. Uma vez que você gosta disso, certo, então você tem o feedback, deixa as pessoas saberem o que está acontecendo e, em seguida, os loops e o fosso, certo? Isso está determinando essencialmente os minerais da interação do microondas. E então o que realmente micro-interações devidas para o usuário real é que eles tornam emocionante e atraente para o usuário navegar e usar o site, certo? Porque quando você tem um site que apenas pura estática e não é muito único e realmente não há nenhum tipo de tipo dinâmico de componentes, então ele pode ficar bastante chato. Então aqui temos alguns exemplos de um furto. Você também pode pensar em diferentes aplicativos de namoro lá fora como Tinder que têm esse recurso branco também. Tudo isso vai ser micro-interações. E vamos descer e olhar para alguns outros aqui. Aqui está uma entrada de dados, onde você insere os dados aqui. E então ele lhe dá um medidor de força lá dependendo da força do site, um monte de sites terá estes onde você tem que se inscrever como um usuário e você precisa criar uma senha para que você possa passar a criação suas informações de login reais, certo? Você precisa ser capaz de definir uma senha que é forte e não é muito fácil e simples de realmente descobrir. E então esses tipos de interações macro são ótimos porque eles dinâmicos e eles também fornecem ao usuário a sensação de segurança de como, Ei, queremos que você crie uma senha que vai manter suas informações pessoais seguras. E então descer aqui, isso é como um tipo de carregamento ou status atual do sistema, certo? Só mais um tipo de micro interação aqui. E, em seguida, este vai ser para como fazer upload seus projetos ou upload de um arquivo particular fez muito, muito agradável e muito atraente também. E então isso é mais um apelo à ação aqui, onde você essencialmente está convidando as pessoas a tomar uma ação específica. Estes são muito importantes em um site ou aplicativo onde você quer que as pessoas se apoiem lá e tomem uma ação específica, para clicar em um link ou botão específico para poder, você sabe, levá-los a fazer o que você quer que eles façam, certo? Para que eles possam realizar o que quer que você esteja tentando fazê-los fazer, certo? Na maioria das vezes, vai ser você para comprar um produto ou agendar algum tipo de compromisso ou telefonema, certo? E então nós temos aqui os botões animados aqui onde eles vêm pela direita. Muitas vezes você vai encontrar os botões animados ou como os capelães. No lado inferior direito de um site. Você vai ver isso um pouco. Você verá como o recurso de bate-papo pop-up ou até mesmo como um bate-papo do Facebook Messenger que você pode incorporar em um site. E então é aí que você vai ver aqueles em um site também. E, em seguida, o botão de upload animado aqui. Esta vai ser outra interação de microondas aqui, mas as micro-interações são tipicamente aquelas que você vê em diferentes sites de mídia social, em diferentes sites onde eles estão olhando para adicionar um pouco de funcionalidade dinâmica, certo? E interatividade com a aparência real do site ou aplicativo. E então, como você desenha microinterações? Artistas vão entrar em um vídeo disso na próxima lição. No entanto, aqui estão algumas das coisas que você quer ter em mente. Você quer se colocar no lugar do usuário. Queremos ter certeza de que você está sempre olhando para ele da perspectiva do cliente e certificando-se de que você está se divertindo com o direito. Então não é como se fosse ser intrusivo. Não é irritante. E onde é como não combinar com o que o usuário está tentando fazer. Você quer torná-lo uma experiência de degustação muito prazerosa. E isso é essencialmente o que são as micro-interações. Pense nos gostos do Facebook. Pense em qualquer momento que você está amando a postagem de alguém ou você está interagindo com um site ou aplicativo específico, certo? Esses serão exemplos das micro interações e como elas estão se tornando muito mais prevalentes nos dias de hoje, tanto quanto os aplicativos e sites. Então isso vai estar aqui para este, e nos vemos no próximo. 72. Aulas do Adobe XD - Microinteractions: Bem-vindo às micro-interações no XD. Hoje vamos explorar os fundamentos foram rolar para alterar tipos de transição de animação em pairar e assim por diante. Por boa interação é quando você pode modificar o processo de transição entre as placas de arte de um e em outro quadro de arte. Então para fora poderia ser pop-up, eu comprei, poderia ser página de tela, página da web, e assim por diante. Vamos começar com a animação O2. Veja, eu criei dois gráficos quase similares, mas com exceção das ondas de aquecimento aqui. E eu selecionei este elemento também feita apenas em interação para um tipo de ação, mesmo aqui. Então essas duas telas estão ligadas entre si e vão para frente e para trás. E vamos começar com o segundo. Então, você vê, há uma ligeira animação nesta bola macia. Observe que as camadas devem ter o mesmo nome e a mesma posição. A ordem da camada. Porque aqui estão eles, esconde-o atrás da tigela. Se eu excluir isso, não veremos essa animação como a vemos atualmente. Vamos tentar. Sim. Veja essas camadas aparecem instantaneamente como desvanecimento e desvanecimento. Mas isso não nos dá uma sensação de movimento como aqui. Portanto, observe que o outro tipo de interações é a transição. Transição significa que iremos a este barco estranho sem qualquer efeito. Bem, há um pequeno desvanecimento, mas é quase nada. O mesmo para nossas placas, que tem elementos de interface de usuário. Aqui temos animação automática. Deixe-me tentar novamente porque o logotipo tem o mesmo nome, a mesma camada. Ele sobe e desce. O que acontece se eu selecionar a transição? Portanto, nenhum efeito é aplicado. Overlay é o tipo de interação que é útil para pop-ups ou para outras janelas que são menores do que suas placas de arte base, como no nosso caso, temos ícone de filtro seletivo e seleção de sobreposição para filtro pop-up. E vamos ver como funciona novamente. Só para me lembrar. Você vê que ele sobrepõe a maquete principal com esta tela. Eu também adicionei uma pequena tonalidade para fundo, então ele adiciona mais focado para o filtro de pesquisa. Exterior coisa que eu gostaria de explicar é rolar para, rolar também, é útil quando você tem página longa. E outro, um fato útil está pairando, geralmente usado nos Barton, raramente usado nos Ícones. Primeiro de tudo, você tem que criar um componente a partir do seu botão. E você verá que haverá um estado padrão. Você pode adicionar outro estado, que seria o estado de foco. E em estados de foco dentro do recipiente, você pode ajustar a parte visual do seu fundo e vamos ver, Mesmo para seus outros botões. Lembre-se de criar o efeito sobre o mouse para todos os seus elementos que podem ser pressionados ou passar o mouse se encaixa no aplicativo móvel, por favor, crie um estado clicado para o seu botão. Você pode dizer que é conflito. Torná-lo um pouco mais escuro. Ok, eu criaria o estado de pairamento. Por favor, note que estes efeitos devem ser muito ligeiros porque têm de ser naturais. Novamente, você pode alterar o tamanho de seus bots e odiar a cor do texto. Na pista inferior, não veremos efeito sobre o dispositivo móvel. É mais relevante para interfaces de área de trabalho, no entanto, você precisa criar os estados adicionais. Então, seus desenvolvedores querem gás, como esses botões vai olhar quando ele é pressionado ou movido ou arrastar e assim por diante. Então eu acho que o CCS suficiente para você experimentar com micro-interações em XD. E o último é o quadro de arte anterior, que geralmente leva o usuário de volta como aqui, nós temos o botão de volta. Você pode converter esse elemento em componente e atribuir o tipo de quadro de arte anterior e copiá-lo para locais onde você simulou o apoiou. Mas, e cada vez que um usuário clicar neste botão, ele irá levá-lo de volta. É útil para tal coisa como aqui para filtro. O filtro será usado em pelo menos duas telas, refeições e restaurantes. Então, em vez de criar um ícone de roupas e atribuí-lo, ok, vamos imaginar que temos este filtro. Eu gostaria de ter a transição ou barco ímpar anterior e eu atribui a sobreposição para a seção de restaurantes e refeições. Assim, você verá que o filtro de pesquisa apareceu com um botão Causa. E eu só volto para as refeições. Uma vez que eu estou nos restaurantes e eu pressione Filter, ele me retorna para restaurantes. Então você pode adicionar esses dois elementos reutilizáveis em seu aplicativo, como pop-ups, que aparecem aqui e ali em alguns lugares. Se não vamos ter esta função, você vai precisar criar o outro filtro que pop-up, aparece da seção de restaurantes e atribuir, estes não nascem com corridas deprimidas. O mesmo aqui. Bem, tem um filtro de pesquisa separado pop-up, que terá o ícone de fechamento para as refeições. É mais fácil criar esses elementos que poderiam ser usados em vários lugares em seu aplicativo. Eu acho que isso é tudo por agora por experimento interações de microondas, experimentá-lo sozinho e desejo-lhe boa sorte com isso como coisa muito interessante para explorar e ter um bom por. 73. Componentes solicitados: Neste vídeo, vamos rever os diferentes tipos de componentes de navegação. Agora isso é algo que você normalmente vai estar vendo no topo de um site ou no topo de um aplicativo onde você tem, digamos, diferentes componentes da barra de pesquisa, diferentes tipos de barras de menu, certo? Então vamos em frente e saltar para os componentes de navegação. Ok, então os diferentes tipos mais comuns de componentes de navegação que você vai ver em um site ou aplicativo ou qualquer tipo de software que você está usando vai ser a barra de pesquisa. Você tem pão ralado, etiquetas de paginação, controle deslizante, ícones diferentes e o carrossel. Então vamos em frente e mergulhar neles um pouco mais. Então o primeiro aqui é a barra de pesquisa, certo? E isso é tipicamente onde você tem a capacidade de pesquisar em qualquer coisa no site lá se você quiser encontrar, digamos um indivíduo, se você quiser encontrar um determinado artigo, determinado post de blog, ou um determinado pedaço de informação. Aqui é onde você vai ser capaz de usar a barra de pesquisa aqui. E ele fornece uma tonelada de valor para o usuário final porque eles são capazes de encontrar algo muito rapidamente, certo? Se eles estão ligados, digamos YouTube, certo? Eles querem ser capazes de encontrar um vídeo específico indo lá e digitando certas palavras-chave, certos nomes, certo? Em. Vai ser muitas vezes muito simples e fácil para eles encontrar o que estão procurando. O próximo que vamos cobrir aqui são as migalhas de pão. Isto é essencialmente algum tipo de linha que está mostrando o caminho atual para o local real. Então você vai ver aqui, nós temos a casa, então nós temos uma barra para a frente Sobre Nós. E a barra é realmente a migalha de pão porque está mostrando a hierarquia, certo? Você tem no topo, você tem casa, e então você tem sobre nós sob isso. E então, em Sobre Nós, você tem história, certo? E está mostrando todos os diferentes níveis dentro dessa seção específica. E depois a paginação aqui. Aqui é onde você pode olhar para o fundo, digamos, de um blog ou tipo de publicação de notícias particular de site onde você pode olhar para todas as páginas diferentes e até mesmo páginas atuais em que o site tem conteúdo, certo? Então este é um tipo muito simples de navegação para criar e configurar. É só olhar para o post anterior e, em seguida, ser capaz de se atualizar para o post mais recente, certo? E então temos as etiquetas aqui. E esse normalmente será o nível mais baixo de hierarquia para encontrar conteúdo preciso. Porque você pode facilmente ir para a barra de pesquisa, digitando o que você está procurando lá. Você pode digitar como tags diferentes, como design de UX, branding, o que quer que seja. No entanto, na maior parte, a maneira mais fácil e o que as pessoas vão ser normalmente e comumente usando é apenas a barra de pesquisa e também a navegação de cabeçalho no menu para ser capaz de procurar exatamente o que eles estão procurando. E então temos o controle deslizante. E isso é usado para definir o valor de organizar ou valores e, em particular determinado conjunto. Então, normalmente vai mostrar a vocês como, hey, este é o público-alvo entre, você sabe, 25 a 45, ou está mostrando, você sabe, o que você prefere. Ou aqui no topo, ele está dizendo para você ajustar o peso de seus animais de estimação. Vinte e cinco, até, digamos um par de 100 libras ou algo assim. Ou se você estiver em quilogramas, obviamente isso vai ser diferente. Mas isso normalmente vai ser algo que é mostrado horizontalmente. Porque se você fizer verticalmente, vai ocupar muito espaço e não vai parecer muito bem. Então, isso é melhor colocado em um tipo horizontal de layout. E então temos os ícones aqui. Ícones ou um dos meus mais favoritos aqui porque eles realmente te dão uma indicação do que é essa área em particular sobre, certo? Como se você olhar para o fundo lá, você tem um e-commerce, legal e compliance. Você tem um bom pequeno ícones lá com os textos embaixo deles. E eles realmente dão uma ótima indicação do que essa seção é sobre. Então eu gosto muito destes. Há obviamente um osso para diferentes tipos de ícones e layouts diferentes. E a grande coisa sobre estes também é que você pode colocá-los de forma vertical ou horizontal também. E ambos vão parecer fantásticos. Obviamente, o que a vertical, você quer ter ícones menores para que você não está ocupando muito espaço, muito espaço. No entanto, o que os horizontais, você pode torná-los muito maiores, assim como temos aqui na parte inferior com o e-comm, legal e compliance, e, em seguida, o financiamento e bancário. Mas eles funcionam fantásticos. Eles parecem ótimos também. E depois temos o carrossel. Normalmente, é aqui que você verá um portfólio onde você tem muitos projetos diferentes que você já fez no passado. Talvez obras de arte diferentes, fotografia diferente. Vai ser o melhor para isso. É onde você pode fazer isso. Então isso é clicável. E digamos que alguém esteja em seu site e esteja procurando por seu portfólio. Você pode ter um carrossel lá que permite que ele veja imagens diferentes se eu sou projetos em que você trabalhou e então eles podem clicar nelas especificamente e ser levado para uma página específica que lhes dá mais informações sobre isso projeto específico. Ok, então vamos dar uma olhada em alguns dos diferentes fatores quando se trata das especificações móveis aqui. Ok, então lembre-se, quando você está projetando um aplicativo web, é importante para você entender as diferenças com fontes diferentes, elementos diferentes e o tamanho que será necessário em um desktop versus um celular, certo? Porque ele vai ser obviamente completamente diferente tipo de layout, interface de usuário para um telefone celular. E você precisa ser capaz de estar ciente da diferença lá. De modo que se você tem um aplicativo muito bonito que funciona bem na área de trabalho, mas pode estar ficando aquém do design nas especificações móveis. Você precisa ter isso em mente o tempo todo. E alguns dos fatores-chave que você quer ter em mente aqui obviamente são o tamanho da fonte, elementos diferentes, formas diferentes. Se você tem como pessoas preenchendo aplicativos e em geral o layout e design, bem como para que você seja capaz de maximizar a quantidade de espaço que você tem e você não está carregando tudo confuso. Por isso, é fácil para a pessoa navegar. Porque lembre-se, os telefones celulares são essencialmente os líderes agora em fontes de tráfego. E é aí que a maioria do tráfego virá para aplicativos de sites. E assim queremos tornar o mais fácil e simples e suave possível para esses indivíduos navegarem no aplicativo, no site, seja lá o que for certo através de seus telefones celulares. Vamos dar uma olhada nas especificações móveis um pouco mais profundo. Então, qual é o tamanho da fonte aqui? Queremos ter certeza de que temos pelo menos 16 pixels e, em seguida, também aumentar o espaçamento entre linhas. Você pode ver aqui nesta imagem à direita, este é um tipo fantástico de interface de usuário. Eles são agradáveis, design, agradáveis e simples. Você não tem muito, eles estão acontecendo. E então também o tamanho de um elemento, pelo menos 44 por 44, modo que ele não é muito grande, não muito pequeno, mas é muito fácil de olhar e navegar através. E então o mapa de calor, aqui é onde você obviamente vai estar olhando para onde as pessoas estão clicando, onde as pessoas estão realmente gastando seu tempo, se eles estão girando em um momento, digamos, lendo artigos versus em uma página específica, você quer ser capaz de ver o que esses indivíduos estão fazendo em seu celular quando eles estão usando meu aplicativo, quando eles estão no meu site, certo? Muito importante lá. E depois os fóruns, certo? Se você está tendo algum tipo de aplicativo que faz com que as pessoas preencham suas informações, você está coletando ou você está fazendo com que as pessoas se inscrevam como um usuário, certo? Criando um nome de usuário, tendo uma senha lá. Você também quer considerar ter um mapa de calor aqui e torná-lo para que seja agradável e simples, certo? Aqui é onde eles têm a página inteira essencialmente como a forma real que é tudo o que lá realmente focando, certo? Porque basta pensar em ter um formulário em um determinado site, página de destino ou o que quer que seja, certo? E você tem esse formulário que está apenas em um pequeno pedaço desse site em particular no layout do celular, certo? Vai ser muito distrativo para o usuário. Então você quer que eles cliquem em um botão e levá-los para realmente se registrar, de modo que isso é tudo o que eles têm na frente deles para que eles possam se concentrar em apenas fazer isso e realmente se inscrever, certo? Menos distrações. E então vamos dar uma olhada em algumas grades de layout aqui. Você quer preservar a legibilidade. Você quer ter mais ar no espaço, certo? Você não quer ter as coisas confusas. Você quer ter três livros didáticos para uma coluna, cinco itens por linha. Considere ter uma estrutura específica e personalizada para o que você deseja realizar aqui. Mas este aqui, você pode ver a partir deste celular aqui é ótimo porque não há muita coisa acontecendo lá. É muito fácil ver o que está acontecendo lá e o que você pode escolher, o que você pode selecionar. Então realmente pense sobre as diferentes grades de layout e as especificações sobre isso. Ok, então vamos dar uma olhada nas especificações do celular aqui para um telefone Android, certo? Porque eles vão ser um pouco diferente do que como um IOS, telefone Apple e vários outros fabricantes de telefones lá fora. Então, para retrato móvel, estas são as diferentes especificações que você deseja manter em mente. A mesma coisa para a paisagem móvel, um retrato para tablets e, em seguida, uma paisagem para um tablet também. Então, quando você está projetando elementos diferentes, componentes diferentes, certo? Você quer manter estes em mente para o Android. E então aqui está para o iPhone, você quer ter certeza que você tem a coluna e 16 margem. E, em seguida, para o iPad, você quer ter uma coluna e 16 margem também. E, obviamente, você terá uma orientação diferente para cenário do iPad e, em seguida, também para o layout da área de trabalho. Então certifique-se de que você tem uma compreensão dos diferentes layouts, as especificações, certo? Quando você está criando aplicativos diferentes, porque na maioria das vezes, quando você está projetando ou criando diferentes aplicativos que serão usados praticamente exclusivamente no telefone ou em dispositivos portáteis. Então você quer ter certeza de que você tem as especificações certas, os tipos certos de colunas por tipos de margem, para que eles apareçam bem nos dispositivos apropriados. E aqui estão algumas especificações para o Bootstrap. Você quer olhar para os telefones em nossos 768 pixels ou os tablets. Você quer olhar para 768 pixels, 15 pixels em cada lado da coluna. Novamente, isso é algo que você quer ser capaz de olhar e usar e navegar por conta própria. Só estou te dando algumas especificações diferentes que você deve ter em mente. E o que você pode fazer. Muitas vezes é apenas ir em diferentes aplicativos, sites diferentes, e olhar para quais são as tendências atuais, certo? Olhe para os diferentes relatórios e essencialmente ser capaz de imitar como esses caras têm definido seus projetos atuais e ser capaz de olhar para, ok, quais são algumas coisas que eu sou idéias, alguns frameworks diferentes que eu posso tirar estes indivíduos, a partir destas diferentes aplicações, estes diferentes desenhos. E então eu posso usar em meus próprios projetos também. E, finalmente, aqui temos a orientação do usuário. E isso é ótimo para novos usuários introduzindo novas atualizações de recursos em uma interface de usuário. E então isso é tipicamente o que você vai ver quando você tem alguém entrar em um site que tem diferentes conteúdos, diferentes tipos de informações onde você quer que as pessoas se inscrevam, certo? Ou talvez seja um serviço que é gratuito ou talvez pago, ou talvez eles tenham uma versão gratuita e então você pode atualizar. Você quer tornar agradável e simples e fácil para eles se inscrever, inserir suas informações, e ser capaz de se inscrever como um usuário e fazer parte desse site específico ou aplicativo de software. E então isso vai ser aqui para os componentes de navegação da interface do usuário. E nos vemos no próximo. 74. Visão geral de seção de otimização: Neste vídeo, vamos rever a visão geral da seção de otimização. Então, esta vai ser uma seção aqui onde estamos revisando coisas diferentes, como como obter feedback reivindicado, perguntas diferentes que perguntam como otimizar um aplicativo ou site específico depois que ele foi criado. Como você pode usar análises, como você pode usar dados e diferentes ferramentas para maximizar e otimizar o desempenho do aplicativo do site ou qualquer tipo de projeto que você desenvolveu. Vamos em frente e saltar para a otimização. Então, uma das primeiras coisas que vamos rever é o feedback dos clientes. Como dar feedback do cliente. Também obter referências e ser capaz de obter novos clientes, novos clientes. E então a regra acima da dobra, a importância disso, como isso funciona, como isso vai tornar o site muito mais fácil de ler e navegar. E então vamos passar sobre como usar ferramentas analíticas. Como usar diferentes ferramentas para poder coletar dados, para ser capaz de olhar de onde vem o tráfego, para ser capaz de analisar uma demografia e ser capaz de usar esses dados para otimizar de forma mais eficaz o desempenho do site ou o próprio aplicativo. E então vamos rever o uso de mapas de calor e diferentes posicionamentos de elementos. Ele mapas são uma ótima coisa para ter em um site, especialmente quando você está olhando para descobrir onde todos interagindo com seu site para quais são os diferentes elementos em que eles estão realmente clicando? Quais são as diferentes áreas que eles estão visitando mais, onde eles passam mais tempo em mapas de calor em posicionamentos de elementos são muito importantes lá. Assim como as ferramentas para otimização vão passar por diferentes ferramentas que você pode usar se em recursos para melhorar o desempenho geral do site, certo? Porque você desenvolveu um site lá, você vai ter tráfego chegando e você quer ser capaz de ver de onde ele está vindo, que tipo de tráfego é, quais são as diferentes fontes? As campanhas publicitárias também estão sendo veiculadas? Então você quer ser capaz de realmente analisar esses dados, otimizar o aplicativo ou site Emacs. E então vamos rever algumas diretrizes de interface humana, algumas coisas que você deve ter em mente. E, finalmente, vai fornecer-lhe alguns links úteis que você pode usar para ser capaz de olhar para as diferentes ferramentas e recursos que são fornecidos para você nesta seção. Estamos muito entusiasmados por começarem e nos veremos no próximo. 75. Revisão e obter referências: Neste vídeo, vamos rever a obtenção comentários e referências da sua base de clientes existente. Este vai ser um fator muito importante aqui quando se trata de você fazer freelancing ou qualquer tipo de consultoria de cliente porque você quer ter certeza de que seus clientes estão felizes, insatisfeitos com os resultados em que você pode obter algum tipo adicional de clientes do relacionamento atual que você já estabeleceu. Porque conseguir clientes é um desafio por si só. E assim, quando você pode aproveitar os clientes existentes com os quais você trabalhou, que você foi capaz de fornecer diferentes projetos de aplicativos para diferentes web designs para a direita? Você quer aproveitá-los e ser capaz de obter referências desses clientes em particular. Então vamos entrar no feedback e receber indicações, ok, então uma das primeiras coisas que você quer fazer aqui depois de terminar um projeto é pedir feedback e uma revisão. Queres perguntar-lhes, como foi a tua experiência? Você está satisfeito com os resultados finais? Que coisas poderiam ter sido melhoradas? Há algo que poderia ter sido feito melhor, certo? Você sempre quer ser capaz de obter essas informações de volta ou sua própria preferência pessoal e, obviamente, sempre pedindo referências. Ei, você conhece alguém ou qualquer outra empresa que possa se beneficiar dos meus serviços também? E essas são as maneiras mais fáceis de obter clientes adicionais, certo? E uma das melhores maneiras que você pode coletar feedback do usuário e feedback do cliente é ter algum tipo de questionário de saída logo após você terminar um projeto, enviar isso para um cliente e deixá-los saber, hey, escute, Como foi a sua experiência? Tem perguntas como design até seus padrões, o que poderia ter sido melhorado? E uma coisa boa a usar são os formulários do Google. É muito simples de usar. Basta enviá-los através de um link criado nos Formulários do Google. E é muito fácil para eles responder às perguntas. Ou muitas vezes você pode simplesmente enviá-los por um e-mail e apenas ter uma lista de perguntas e deixá-los saber, hey, escute, esta é uma pergunta ou que nós temos e que enviamos para todos os nossos clientes porque queremos obter o tipo certo de feedback. Muito importante aqui. E quando você está trabalhando como freelancer, quando você está trabalhando com clientes, você quer ter algum tipo de saídas, talvez uma entrevista ou algum tipo de questionário de saída para que você saiba o que você pode melhorar. Você começa a ver algumas tendências em algumas das coisas onde você pode talvez melhorar que você tem deixado cair a bola em. E eu diria que provavelmente a maior coisa aqui a ter em mente é que pedir referências são muitas vezes as pessoas não querem incomodar os clientes ou não querem pedir referências porque um, você sabe, por qualquer motivo tem alguns tipo de medo por trás disso. No entanto, Essas são as melhores pessoas para realmente falar com novos clientes porque eles já experimentaram trabalhar com você. Eles já te pagaram, você pagou pelos seus serviços. E pelo menos, o que você quer obter com esses caras é algum tipo de estudo de caso ou algum tipo de e-mail que diz: “ Ei, trabalhar com isso e assim foi uma experiência prazerosa. Eles foram capazes de projetar, é até o par. E o design era incrivelmente bonito. Coisas dessa natureza onde eles podem fornecer algum tipo de referência de recomendação, escrever um estudo de caso que lhes permita saber que você fez um ótimo trabalho em que eles recomendariam você a outros clientes, porque então você pode usar isso em seu sites, em seus diferentes perfis, em diferentes sites freelance. E você pode usar isso para se alavancar para obter outros clientes também. Mas lembre-se sempre, peça referências de qualquer outra pessoa que eles considerem ou se eles conhecem alguém que também se beneficiaria de seus serviços. Então, ele vai estar aqui para a revisão de feedback e nos veremos na próxima. 76. Regra “Above: Neste vídeo, vamos cobrir a regra acima da dobra. Agora, isso é algo que é muito importante de entender ao desenvolver diferentes sites, mesmo com os próprios aplicativos. No entanto, os sites serão os mais importantes aqui, porque isso é o que normalmente vai ser mostrado no topo desses sites. É o primeiro tipo de interação ou informação que o usuário final real será visto nesse site. Por isso, é muito importante ter a disposição adequada, ter o tipo certo de coisas lá, e ter certeza de que é super simples e fácil para o usuário navegar. Mas eles também têm a visão geral e a idéia do que o site ou aplicativo é sobre. Mas principalmente para o direito do site, porque com o site, você quer ser capaz de ter o primeiro acima da dobra informações lá. Dizer exatamente o que é este site, onde se trata este negócio, ou como eles podem ajudá-lo, certo? Então vamos em frente e mergulhe na regra acima da dobra. Assim como eu mencionei, é a primeira imagem ou tela que o usuário vê. Este é o conteúdo de prioridade máxima aqui. Assim que eles chegarem ao seu site, você quer que eles saibam exatamente quem você é, o que você faz e por que isso é importante para eles, certo? Você quer que eles sejam capazes de ver, ok? Estou neste site. Eu sei exatamente o que eles fazem vs. Se você notar que você vai para alguns sites que não são muito bem dispostos embora têm todos os tipos diferentes de coisas na página inicial, na tela. E você realmente não sabe sobre o que é o site. E você tem que ir através do site para descobrir o que esse negócio ou essa marca ou o que quer que seja ou aplicação, certo, é sobre muito importante usá-lo sabiamente tanto quanto o acima da área de dobra e usar diferentes palavras poderosas. Deixe-os saber exatamente o que você faz, como você os ajuda ou como você atende o mercado. Se você está trabalhando com os clientes, você quer tomar nota de sua base de clientes específica, seu mercado, quem eles estão segmentando, e certificar-se de que está atendendo a esse mercado específico. Você não quer ter muitos tipos de pop-ups ou qualquer tipo de distrações. Você quer que ele seja direto ao ponto, muitas vezes como uma imagem ou você tem uma imagem com um fundo escuro e, em seguida, você tem como texto branco realmente trazer para fora o texto real que também tem a imagem no fundo. Então também considere diferentes tipos de dispositivos, os tamanhos, certo? E onde quer que você possa usar interação, interatividade para envolver o usuário sempre que possível. Muitas vezes, hoje em dia, onde você teria como um site de design moderno, você verá, tipicamente quando você pousa no site, tudo vai aparecer e será interativo. Então, as palavras virão como um deslizamento ou de cima, de baixo. A mesma coisa para a imagem. Portanto, certifique-se de usar alguns desses tipos de elementos também. E esta é uma captura de tela aqui para o meu site em particular para um dos meus negócios. Eu tenho a regra acima da dobra aqui que eu estou implementando Onde eu tenho no topo, eu tenho o menu, e então esta é a página inicial. Você pode ver lá que uma imagem em segundo plano, é essencialmente um tipo de imagem de segurança, e então há uma camada escura por trás dela também. E quando você pousa no meu site, você pode ver aqui a partir do texto e do botão lá, ele diz exatamente o que fazemos e como ajudamos as empresas. E então ele tem um botão lá para ser capaz de aprender mais. Por isso, ajudamos as empresas de segurança a agendar reuniões e a garantir contratos. Então, se alguém que desembarcou no meu site, certo, você está certo. Eles obviamente, desde o primeiro segundo em que eles pousaram aqui, não saberiam exatamente o que eu faço com o negócio faz, como isso ajuda, sabe, clientes diferentes e, finalmente, o que o negócio é realizado, certo? Então, isso é importante saber lá em notas que qualquer momento você está projetando qualquer lugar acima da dobra e você está usando esse espaço para torná-lo de modo que ele está interagindo com o usuário e ele está dizendo a eles exatamente o que é sobre. Então, tudo bem, então isso vai estar aqui para o, acima da dobra e acima da regra de dobra. Lembre-se, você quer fazer isso para que quando alguém aterrissar nessa área em particular, eles saibam exatamente o que o site é sobre e isso está fazendo com que eles entendam por que eles devem ficar aqui ou tomar qualquer ação que você quer que eles Diga, certo? Então isso vai estar aqui para este, e nos vemos no próximo. 77. Acima,: Oi lá. Neste vídeo, vamos projetar acima da seção de quedas para dispositivos móveis e desktop. Vamos começar com uma descrição do padrão acima. Acima da falha é a primeira área vista. Estas linhas pontilhadas em x D mostra-nos onde esta secção está. Deixe-me mostrar-lhe um exemplo. Este é o nível ao qual a maquete de uma cena. Então é a primeira tela sem rolagem. O mesmo para celular. Vamos começar a projetar algo bonito. Vou criar a navegação superior por enquanto. Deixe-me colocar um logotipo aqui. Tenho o logótipo. Alguns links para navegação. Em primeiro lugar, você tem que colocar um texto poderoso. Eu não estou fingindo ser um melhor CodeWriter acima da dobra pode não ter nenhuma chamada à ação ou ter uma call-to-action ou várias chamadas tração. Como eu mostrar-lhe o padrão Bob com dois CO, duas ações. Vamos definir o tamanho do BALTAM. Estes, que este será a principal prioridade. Eu acho que o caminho certo seria o chamado à ação de alta prioridade. O outro será o botão secundário. Agora temos uma estrutura de ambos que gostaríamos de incluir no nosso acima da dobra. Agora é hora de definir o fundo, que é claro ser atraente, fascinante, notável. Um que eu vou usar em espirrar Paxos.com porque eles têm ativos livres. Aqui está a imagem. Claro, a imagem deve ser emocional. O processo de escolher a imagem é mais desafiador qualquer coisa. Agora é hora de tornar o texto legível. Aqui temos o botão Fantasma. E nós podemos sob carinho que queremos. Então, temos usado OS falha todos os maiúsculas. Agora é hora de matizar a imagem um pouco para que o texto seja adequado. Ou mentimos para opções obscuras para tags. Bem, nós vamos fazer é criar outra camada com uma capacidade com algum filtro. Bem, melhor do que eu era, mas ainda assim não é perfeito. Isso é colheita. Alguns casos em que você tem a chance de inverter seu logotipo para branco em vez de ser preto. Você pode fazê-lo, a fim de criar uma seção perfeita sobre padrão. E assim se parece com isso. Certifique-se de que sua marca suporta inverter cores no logotipo. Então eu vou trabalhar em fundo escuro, parece melhor. Então eu gostaria de acrescentar alguma ênfase aqui nesses botões, tão mais atraentes e na moda. Mesmo termo. Acho que é tudo. Você pode terminá-lo criando o componente a partir desta parte inferior. Controle mais K, n é pequena animação. Podemos mover a flecha um pouco para a esquerda. Talvez uma passagem seja demais aqui, pode ficar sem ela. Vamos tentar. E para recursos, podemos adicionar alguma capacidade no porto. Apenas esta pequena capacidade em pairar. Então parece interativo. Talvez precisemos de mais capacidade. Ok. Você pode fazer alguns efeitos semelhantes para dois deles. Ok, agora, o que resta é anexar o link para seus botões para que o Leve seu usuário na direção certa. Espero que este vídeo tenha sido útil. Muito obrigado pela sua atenção. Vemo-nos na nossa próxima lição. 78. Usando o Analytics para otimização: Neste vídeo, vamos passar por cima do poder do uso da análise. Então você desenha um site, você projetou um aplicativo específico, algum tipo de software. E agora você está recebendo tráfego através de publicidade paga ou qualquer tipo de pesquisa orgânica ou o que quer que seja, certo? Você está tendo visitantes lá, você tem usuários interagindo com a plataforma, o aplicativo. E então o que você quer fazer agora é começar a analisar esses dados e começar a analisar esses usuários, como, onde eles estão vindo? Quanto tempo eles ficam nos sites que tinham sido fontes de tráfego, certo? Então, é aqui que vamos estar pulando, sendo capazes de analisar todos esses usuários, todo esse tráfego, e como você pode olhar para diferentes pontos de dados chave. Então você pode usar esses dados para sua vantagem. Então vamos em frente e começar a usar a análise. Então, com o uso de analytics, certo, você vai ser capaz de descobrir tantas coisas diferentes sobre seu tráfego, sobre o site, tanto quanto a proporção de novos usuários versus visitantes retornados. Pontos de dados adicionais, como página uma taxa de rejeição, que significa que quantas vezes alguém vai para um site ou uma página inicial, certo? E a proporção ou a porcentagem de pessoas que saem logo depois de acessarem o site porque não é o que estão procurando. Você quer que essa taxa de rejeição seja muito baixa porque você quer que as pessoas estejam realmente indo para o seu site porque eles o encontraram na pesquisa, ou eles clicaram em seu anúncio ou qualquer tipo de método que eles escolheram ou eles tomaram para realmente vá para o seu site e tenha tudo isso relevante, certo? Porque digamos que você tem como um funil de vendas, você tem um anúncio que está falando sobre alguma oferta específica ou algum recurso específico ou o que quer que seja, certo? Sua intenção é levá-los para o seu site, para a sua página inicial. Agora, se eles estão passando pelo funil de vendas e eles estão clicando em certas páginas. E eles finalmente, depois de algumas etapas diferentes, chegam ao seu site e, em seguida, eles saem rapidamente porque as informações que você apresentou no anúncio e na página de destino não são relevantes para o que eles estão procurando. É aí que você vai ter uma alta taxa de rejeição. Um grande exemplo disso é digamos que você tem como um negócio que é um tijolo e argamassa. Este é apenas um exemplo aqui. E você tem um dentista que está oferecendo uma oferta de implantes dentários 4909, certo? Um dos outros exemplos que fizemos no funil de vendas e nas páginas de destino. Então, se esse indivíduo clicar no anúncio real e na página de destino, digamos que talvez fale sobre limpeza ou não fale nada sobre os implantes dentários. Bem, eles vão saltar para fora dessa página muito rapidamente porque não é relevante para o que eles escolheram, o que eles clicaram, tanto quanto o que eles viram no anúncio. Então é por isso que é muito importante que a taxa de rejeição seja reduzida. E você tem os anúncios, você tem suas consultas de pesquisa lá fora. Todos eles são relevantes para o que os indivíduos procuram. O próximo par de dados é a fonte de tráfego. E então também entender se você é algum tipo de idioma, você sabe, às vezes você pode precisar adicionar um idioma diferente se você está percebendo que pessoas de diferentes países estão indo lá como obviamente o que as pessoas estão usando a maioria do tempo. E é apenas uma ótima maneira de poder olhar para o dispositivo móvel versus desktop, mas também olhar para o tipo específico de dispositivos que estão usando. E outra coisa que você pode descobrir com o uso de análises é olhar para o público e olhar para o usuário Pat. Então, que tipo de caminho eles estão tomando para realmente aterrissar em seu site? Eles estão vindo de um link externo ou de vir diretamente para os sites? Eles estão vindo de um anúncio específico, certo, para que você possa realmente acompanhar como esse usuário acabou no site, informações muito importantes. E então também ser capaz de executar testes AB, certo? Teste AB é essencialmente onde você tem dois anúncios diferentes que têm tipo essencialmente semelhante de material de conteúdo. Mas há um pequeno componente que é alterado em um dos anúncios para que você esteja testando, digamos uma manchete, digamos uma imagem. No entanto, para a maior parte, você vai ter que eles sejam os mesmos com apenas um componente específico que é alterado. Um bom exemplo disso é, digamos que você tem dois tipos diferentes de anúncios, você está testando e você tem a mesma cópia de mensagens em ambos os anúncios. No entanto, o único componente que você está testando é a imagem. Então você quer ver qual imagem é realmente a que mais ressoou com as pessoas. Então é isso que você consideraria um tipo AB de testes divididos, certo? Onde você está testando apenas um componente lá e onde você poderá encontrar todos esses dados é com o Google Analytics, algo que é altamente recomendado. É gratuito todos os sites ou aplicações web. Se for saúde on-line, você pode anexar o Google Analytics a ele e ser capaz de olhar para todos esses dados diferentes. Então você pode realmente olhar para que tipo de usuários estão realmente envolvente e interagindo com o site ou aplicativo. Então isso vai ser aqui para o uso de analytics. E nos vemos no próximo. 79. Maps e canais de calor e elementos: Neste vídeo, vamos rever o importante de usar heatmaps e um monte de outros recursos diferentes que você vai precisar para ter certeza de que você está analisando o site ou qualquer tipo de produto que você desenvolvido onde você tem tráfego constante, você tem interação constante com diferentes públicos. Então, vamos em frente e saltar para o uso de mapas de calor e alguns recursos adicionais. Agora, quando se trata de experiência do usuário e interface do usuário, os mapas de calor são uma das maneiras mais poderosas que você pode realmente medir o design geral desse aplicativo ou site específico. Porque você pode ver onde as pessoas estão gastando seu tempo. Se eles estão gastando seu tempo na navegação do cabeçalho ou o passar o tempo na verdade, você sabe, jogando com os diferentes fatores no site, como o corpo do texto ou na barra lateral, ou eles estão clicando em um botão específico que você deseja que eles cliquem para que eles possam ir para a próxima etapa do seu funil de vendas, são a compra de um produto, certo? Digamos que há uma loja de e-commerce. Você quer ter certeza e olhar para onde as pessoas estão indo. Os realmente estão selecionando o adicionar ao carrinho, são os realmente check-out? Por que eles não estão verificando? Onde passam a maior parte do tempo? E então o que você pode fazer é usar agrupamento para diferenciar u, iv e seções, certo? Você pode usar o cabeçalho e quer ter certeza, hey, quantos emprestar seu tempo no cabeçalho, como novo gastar seu tempo no rodapé, Holman, você está realmente clicando em certos botões. Então você realmente quer que isso seja muito preciso. E uma das coisas que você pode fazer é também usar um pouco o espaço em branco para preservar a legibilidade, especialmente em dispositivos móveis, você quer torná-lo para que haja muito espaço em branco. Então isso é fácil de ler, é fácil de navegar através de uma experiência prazerosa, certo? Porque se você tem tanta coisa em uma determinada página, basta pensar sobre esta imagem aqui. Obviamente este não é um site ou um aplicativo, é apenas mostrar-lhe diferentes elementos. No entanto, imagine se você aterrissasse em um site que tivesse todos esses botões diferentes, todos esses componentes diferentes e se misturasse assim juntos, certo? Não seria uma experiência muito prazerosa ou excitante. Você ficaria confuso. Seria muita coisa acontecendo de uma só vez. Eles são muito importantes para garantir que você está preservando o espaço em branco para melhor legibilidade e que você está aumentando o espaçamento de comprimento nos dispositivos móveis. E uma das coisas que você também pode fazer é procurar usar textos mais curtos, certo? Então, se você olhar para esta imagem aqui, você só tem pequenos pedaços de texto, como registro, login. Você tem, digamos, quadro de mensagens ou última mensagem, coisas que vão ser pedaços muito curtos de textos ou eles não estão comendo muito espaço. E você sempre quer lembrar os fundamentos da interface do usuário, certo? Você quer ter certeza de que você tem espaço suficiente para todos os diferentes componentes, todos os diferentes elementos. E você está usando-os apropriadamente e você não está sobrecarregando um usuário quando ele está usando os sites, quando ele está no site ou quando ele está usando um aplicativo específico. Ok, então agora vamos dar uma olhada em algumas ferramentas aqui para pesquisa que você vai ser capaz de usar. Como eu mencionei anteriormente, um Google Analytics vai lhe dar uma ótima visão geral de onde o tráfego está vindo. Tipos, tráfego que os dados demográficos que localizam, as idades e dispositivos. mesma coisa com o índice i, no entanto, Google Analytics é provavelmente o mais confiável, tanto quanto a fonte lá, porque você pode simplesmente conectá-lo ao site e ele vai ser capaz de puxar em todos os diferentes tipos de fontes. Então, a próxima coisa que você quer ver é a diretriz de design de interface humana, certificando-se de que você tem as diretrizes corretas configuradas para os diferentes dispositivos iOS, certo? Em um laptop, em um tablet real, o relógio real também, certo? E isso é algo que é bastante novo no mercado, e também na Apple TVs. E, em seguida, aqui estão alguns links úteis que você pode usar também. Então nós temos n um in-group dot com Material, dot au design barra, I design inspiration.com, e, em seguida, um monte de outros recursos diferentes, bem como que você pode verificar, tanto quanto para a melhoria geral na otimização do o aplicativo ou qualquer produto que você tenha desenvolvido ou criado. Então isso vai ser aqui para os mapas de calor, colocações e recursos adicionais. E nos vemos no próximo. 80. Elaboração de um relatório de usabilidade: Neste vídeo, vamos rever a elaboração do seu relatório de usabilidade. Então esse tipo de relatório será ótimo para uma auditoria. Digamos que você tenha um cliente em potencial que está querendo algum trabalho e que eles quisessem obter uma visão geral de seu site atual e sua funcionalidade. Uma das coisas que você pode fazer é criar um relatório de usabilidade para mostrá-los e identificar diferentes oportunidades, diferentes tipos de projetos que realmente os ajudariam e mostrariam diferentes problemas técnicos, diferentes problemas de velocidade do site, diferentes problemas de SEO, e realmente falar sobre diferentes tipos de melhoria. Em segundo lugar, realmente melhorar esse site ou o aplicativo. E isso vai ser um longo caminho, especialmente na fase inicial de licitação onde digamos que você está licitando neste projeto em particular e o cliente quer que você mostre o seu melhor pé à frente, certo? Coloque o seu melhor pé para a frente. Bem, você pode enviar-lhes um relatório de usabilidade particular e mostrar-lhes, ei, isto é o que eu encontrei no seu site. Estes são os problemas, os problemas, você sabe, as oportunidades que eu encontrei. E então ele realmente coloca você à frente da curva. E isso coloca você em um nível diferente sua concorrência porque você está disposto a fornecer valor antecipadamente antes de ser pago por qualquer um dos serviços reais. Então, mais uma vez, o relatório vai ser para um cliente e alguns dos objetivos mais comuns aqui que você vai percorrer e realmente incluir é identificar as oportunidades, procurando por diferentes mudanças de design que podem facilmente aumentar sua experiência de usuário, interface de usuário, e, em seguida, também identificar diferentes problemas técnicos que eu mencionei. E então número quatro, você pode discutir diferentes tipos de melhorias. Então, quando você olha para os objetivos de negócios aqui, esta vai ser a primeira coisa que você tem que entender. Você tem que entender o que eles estão finalmente tentando alcançar ou eles estão tentando vender um produto? Estão tentando vender um serviço? Ou eles estão apenas tentando obter inscrições por e-mail, ou eles estão apenas tentando fazer com que os usuários se inscrevam em um aplicativo específico. Sabes, o que é que eles estão à procura de realizar? Realmente quero ser capaz de entender isso. E uma vez que você tem o objetivo final de seus clientes, e então tudo o resto pode simplesmente seguir. Então você entende os objetivos de negócios, o objetivo final que você está procurando alcançar. Agora você quer entender os fluxos da persona e do usuário. Eles têm o tipo certo de mercado-alvo que vão atrás? Eles entendem seu mercado-alvo? Eles entendem as necessidades, os desejos, certo? E eles têm um fluxo específico ou jornada do cliente ou até mesmo funil de vendas, certo, para que eles sigam e realmente passem para se tornar um cliente pagante ou para realmente se inscrever em uma lista de e-mail ou o que quer que seja, qualquer ação Eles querem que eles levem. E então você pode desenhar isso aqui no Adobe XD, e nós vamos ter isso no Adobe X z. Na próxima lição, nós estamos Arthur vai orientá-lo sobre como criar um relatório de usabilidade do zero. Você não precisa criá-lo do zero. Você pode obter um modelo. Basta alterar algumas das informações você mesmo, no entanto, você será capaz de ver como criar isso no Adobe XD do zero. Neste desenho particular aqui é criado no sorteio que I0. Esta é uma ótima ferramenta que realmente lhe dá a capacidade de layout e mapear um fluxo de usuário específico, certo? E depois, indo para cá, trabalhando com dados, foi aqui que você conseguiu ter acesso ao Google Analytics ou a qualquer tipo de software analítico que mostre a eles quais são os dados demográficos desse tráfego? Que tipo de dispositivos eles estão usando? Você pode usar sites como SEMrush que realmente lhe dão uma boa indicação dos visitantes reais do site quanto tráfego esse tráfego está vindo, quer eles tenham ou não um tráfego também. E então você não precisa ter acesso ao Google Analytics deles menos que eles realmente tenham dado acesso a isso, certo? E então descer aqui, análise de usabilidade, olhando para ele andando, talvez digamos comprar um produto ou se inscrever como um e-mail opt-in, certo? Seja o que for, você quer percorrer a experiência de usabilidade e passar por ela como se fosse um cliente que você possa obter uma boa compreensão de como ele funciona em diferentes áreas para melhorar isso, certo? E depois as viagens do usuário, certo? Você quer entender de onde eles estão realmente vindo, quanta informação você fornece a eles. Você quer ter certeza de que o design é consistente em todas as páginas diferentes, que não há quaisquer problemas com o alinhamento, que há bons esquemas de cores, que não há nenhum tipo de problemas seria hierarquia de página ou taxa de hierarquia de conteúdo. E, em seguida, certificando-se de que ele é móvel responsivo em que ele também mostra na área de trabalho em um estupro muito bom. E isso obviamente mostra muito bem na área de trabalho também. E aqui está uma coisa que você não precisa incluir tudo aqui. Eu acho que o mais importante, como eu mencionei no início, é apenas dar-lhes como uma análise swot, pontos fortes, fraquezas, oportunidades e ameaças, certo? E, em seguida, dando-lhes finalmente uma estratégia ou um plano go-to como, hey, isso é o que você pode melhorar para realmente aumentar e melhorar seu UX, certo, seu UX para nova interface do usuário. E, em seguida, aqui, este é o desempenho de um site que você pode facilmente ir, eu acho que é o farol do Google, ou você pode simplesmente digitar no Google, ferramenta de pesquisa do Google SEO ou algo assim. E você pode puxar para cima e você pode colocar o URL do site lá dentro. E mostrará a rapidez com que o site carrega. Seo velocidade, problemas com problemas técnicos com o site. E por isso é um grande recurso. E aqui embaixo, isso é para esquemas de cores diferentes. E então a revisão técnica, eu mencionei o desempenho do site, certificando-se de que ele está realmente otimizando seu carregamento rápido o suficiente, certo? Porque muitas vezes eles estão recebendo tanta coisa acontecendo, em um site ou há tantos dados e talvez as imagens são muito grandes. Os vídeos ocupam muito espaço ou o que quer que seja, que está custando o site real, sabe, muito tempo para carregar. E então você quer que ele seja normalmente dentro de um a dois segundos, o site carregando. E então você quer ter certeza de que você está realizando um tipo de análise de velocidade do site também. E, em seguida, descer aqui e para as melhores práticas e deixá-los saber o que eles devem esperar, o que eles devem ter em seu título particular, certificando-se de que seguindo o tipo certo de especificações para como móvel em diferentes tipos de dispositivos móveis, certo? E depois SEO, certo? Ter certeza de que eles têm uma boa otimização do motor de busca e que eles estão usando isso para sua vantagem, certo? E então, finalmente, as oportunidades aqui que você quer mostrar a eles, ei, isso é o que você está perdendo. Isto é o que você pode fazer para melhorar e isso é o quanto um iria melhorar seu site particular. Então este é um vídeo agradável e simples aqui, apenas dando a você uma visão geral de um relatório de usabilidade. Você pode encontrá-los em qualquer lugar. Você vai, literalmente apenas o relatório de usabilidade do Google e eles podem ficar bastante complexos, mas você não precisa deles para ser super-duper complexo. Bom. Cinco a dez páginas deve estar bem. Acho que uma destas aqui, esta é uma das 43 páginas aqui. Esta é uma experiência de usuário ADI aqui, relatório de exemplo. Você não precisa ir tão fundo. No entanto, você pode ver o que isso tem aqui, certo? Você tem um índice e veja aqui a página inicial. E então tem aqui navegação e localização, certo? E depois a análise de busca. E então ele mostra a página mais eixo, certo? Então ele mostra essencialmente o que você pode esperar. E isso é como eu disse, muito em profundidade. Você não precisa ser de cinco a dez páginas. Você não precisa ter 40 páginas. Você só precisa que ele seja, você sabe, boas 5-10 páginas e dar-lhes uma visão geral do que você foi capaz de encontrar e em seguida, as oportunidades que eles estão perdendo e como eles podem melhorar a experiência geral no site. Então isso vai estar aqui para este. Como eu disse, Arthur vai te mostrar como criar um relatório de usabilidade no próximo vídeo. Então é isso para este vídeo, e nos vemos no próximo. 81. Aulas do Adobe XD - criando relatórios no XD: Bem-vinda de volta. E esta será a última lição em que mostrarei como criar seu relatório de usabilidade ou qualquer outro relatório durante o processo de UX. E antes de tudo, eu gostaria de começar com uma estrutura de dados ou estrutura de informação na tela. Prefiro criar um layout de solução de problema com uma captura de tela se estes estiverem disponíveis. Então vamos começar e trazer captura de tela de exemplo. Então, seu problema de tela e tipo. Então a solução. Desculpe, é importante encontrar um. E esta deve ser a lista de problemas que encontrou. Deixe-me mudar o fundo um pouco. Então, tem um pequeno contraste. Então design agora não é um delta importante, como você já deve perceber. E primeiro vai mal ou, ou qualidade da imagem principal, então o layout não é responsivo. É apenas por exemplo, Adobe.com não tem nada. Com isso. Surge está mostrando os exemplos. E o terceiro será muito pequeno. Font é usado no corpo. Então, se o seu leitor, pessoas que lerão seu relatório, é bom ter esses marcadores para serem refletidos na tela também. Então, para este fazer isso, você precisa pegar uma cor contrastante. Normalmente laranja. E é bom ter e pequeno esboço para que ele não se misture com o, com o conteúdo. E temos algum ponto aqui. Será um PIN número um. E a má qualidade da imagem principal irá aqui. Ok, vamos imaginar que isso não é SVG para isso. Isso é algo muito comprimido. Está bem? Muito bem, cor mais brilhante, ok. Você pode adicionar sombra se quisermos nos destacar um pouco mais. Esta é a bala número um. O marcador número dois, o layout não responde. Você pode colocá-lo em algum lugar aqui. Porque é coisa geral. Fontes muito pequenas são usadas para o corpo. E aqui vai o terceiro. Ok. Agora você vê, podemos ler, podemos olhar, ver o que se entende por esses três pontos. Claro, você tem que encontrar soluções, porque caso contrário, ele será carregado sem análise. Então você tem que propor algumas soluções. E vamos imaginar que tudo onde escrevi é real e a imagem deve ser rastreada no SVG. Ok, então nós temos que usar a imagem original de como, vamos imaginar que esta é uma imagem JPEG. Construa o arquivo vetorial e exporta-o para SVG para que não ocorra perda de qualidade. O layout não é responsivo. Ok, isso é simples, criar em on deficiência para o layout. Ok, fontes muito pequenas são usadas para o corpo. E o corpo usa pelo menos 60 pixels. Sem serif. Certo, então agora, você não só aponta para o problema, como também fornece uma solução. O mesmo se aplica para uma janela, cada tela ou cada página que você está revisando e como você pode enviá-lo para o seu cliente. Se uma pessoa os revisa no computador, é melhor usar o layout da paisagem. Se você quiser imprimir este relatório. Talvez você possa considerar o layout do retrato. Embora seja um pouco mais difícil implementar a estrutura para a paisagem. Mas se estamos falando de formato A4 ou formato de letra, eu acho que é algo próximo de onde eu tenho, a proporção é próxima do que eu acabei de projetar. Uma vez que você descobriu todos os problemas, ele descobriu, você pode começar a encontrar soluções. Você pode criar um documento de texto separado para encontrá-los, mas também, por favor, tenha em mente que você tem que fazer. Você tem que fazer capturas de tela. Então você quer fazer o trabalho duplo. Você pode criar um documento de texto separado onde encontrar. Você coloca problemas e soluções. Também temos duas capturas de tela para que você possa copiá-las facilmente para seus barcos ímpares no XD. Está bem? E, claro, você pode gostar de adicionar um pouco de estilo. Vamos escolher um logotipo para nós. Temos um logótipo. Agora vamos fazer um pouco de estilo. Permite que algum estilo para a nossa fonte. Você pode usar Criar layout para criar slides consistentes. Vamos adicionar nossa data atual para obter Sobre o número da página. E uma coisa que perdi foi a seção ou página que você está revisando. página inicial deve ser escrita aqui. Agora temos algumas dificuldades com aqui veio em algum pequeno ícone que trará alguma diversidade para o seu slide. Você pode adicionar seu e-mail. E o fundo, se quisermos. A outra coisa é que você precisa ter uma introdução Larry Page, que mostrará sua introdução, que irá explicar quais fatores você considerou enquanto você projetou sua usabilidade lhe devia. Vamos tentar fazer algumas coisas. Primeiro de tudo, eu preciso criar outra página. Vamos dar o nome de introdução. Você pode adicionar seu nome pessoal ou nome da empresa dependendo de como você se apresentar aqui. Por. E as mulheres colocam um fundo leve para torná-lo mais graficamente interessante. Então vamos adicionar uma imagem. Aqui. Eu só quero manter essas luzes estilo. Agora você pode exportar seu documento para, vejamos, exportar todos os barcos. Aqui. Selecione PDF. Você quer que ele seja um arquivo pdf múltiplo. Então, cada página seria um arquivo PDF separado. Você seleciona vários arquivos PDF. Se você quiser. Seu relatório seria tudo em um arquivo, mas com as várias páginas dentro dele, você basta selecionar um único arquivo PDF. E eu abri este documento e vejo que há duas páginas de texto que pode ser selecionado, pode ser copiado, colado e, claro, pode ser impresso. Mais uma vez, se você quiser que seja impresso inicialmente, apenas sem mostrar em displays digitais, é melhor para se preparar. O layout de retrato para o formato A4 ou letra depende da região, país, além da capa e das páginas de conteúdo, é bom criar outra página que irá indicar o que é este relatório? Qual é a sua capacidade ou e aqui eu tenho o texto que eu estou usando sobre todos os meus relatórios apenas para deixar o cliente saber o que você está fazendo e para que. A outra coisa que você pode usar é adicionar uma seção onde você comparar boa e má experiência do usuário. Vamos fazer isso. Tão bom que você age é algo que coloca em detectado dez despercebido. Ele fornece aos usuários preenchimento de simplicidade e elegância que existem nos bastidores nos pequenos detalhes. Mas é essencial para a sua empresa. E as pessoas que usam seus produtos. Por UX também estabelece despercebido e despercebido. No entanto, resulta em frustração desordem, sentimentos de desgosto. As pessoas vão salvar este produto é confuso ou algo simplesmente não está certo, ou eu estou perdido, uma experiência ruim e usabilidade pode não afastar imediatamente os clientes, mas com o tempo ele vai. Então vamos ler a descrição. Uma experiência de usuário, oh, fez é uma avaliação da usabilidade do site ou aplicativo de software por uma experiência de usuário ou designer de UX. Concentramos seus objetivos de negócios e seus objetivos de público-alvo para avaliar se há algo em seu site que esteja impedindo você ou seus usuários de atingir essas metas. Tudo, desde a tipografia, layout e fluxo, é avaliado de acordo com princípios de usabilidade estabelecidos, pesquisas científicas, práticas e tendências atuais para criar sites intuitivos que ressoam com a maneira como seu usuário. Obrigado. Então, quando a pessoa abre sua auditoria, então temos o título, temos informações. Qual é a experiência do usuário? Oh, fez o que é boa e má experiência de usuário? E o conteúdo vai em cada página que você está revisando terá a solução do problema e essas capturas de tela final como suporte visual para suas descobertas. Outra coisa que eu sugiro para você incluir é a pontuação geral ou conclusão em seu relatório como uma última página. Eu tenho o mesmo layout que suas páginas de texto anteriores, mas terei a conclusão. Você pode escrever aqui. No geral, o site parece bom, mas no entanto, impede que os usuários atinjam seus objetivos. Devido a estas razões, as seguintes razões. Devido à ausência de fontes ou gráficos adequados, seja o que for. Devido à interação complexa, devido à estrutura complexa, devido à ausência de navegação amigável. Nós estamos navegação tem que ser repensar e assim por diante e assim por diante. E outra coisa é quebrar algumas categorias de produtos digitais. E você pode ter uma pontuação da banda para Overview. E ter uma classificação de pesquisa como os três primeiros comentários e erros. 19 a dez, orientação da tarefa. 90 a dez. Então 90 é bom, dez é ruim. Quero dizer, 90%. Fóruns e entrada de dados. Pode ser que a página principal, a pontuação geral da Página Principal, Layout e design visual, navegação, nível de confiança, conteúdo, qualidade. E podemos incluir Page Speed. Portanto, dependendo do assunto da sua pesquisa, você pode adicionar essas seções sua pontuação geral no laboratório na última página do seu relatório. Deixe-me explicar um pouco. Penso que isso tem de ser explicado com mais pormenor. Ok, eu pré-projetei o poço nesta seção. Então a busca é o Lugar. Pesquisa corresponde à posição deste site nos motores de busca usando as palavras-chave que são relevantes, feedback e erros é quando um usuário entender quando o sistema se comunica com o usuário e fornecer feedback sobre alguns eventos. Se é um erro, se está tudo bem ou assim por diante e assim por diante. Fóruns e entrada de dados é a pontuação da interação de trabalho com os formulários e inserir os dados. Bem, acho que fala por si. Como conforto, quão fácil é a estrutura de fóruns que teste de QI neste site são? Sistema. A pontuação da página principal é apenas a pontuação geral da página principal e é abstrata, você pode medi-la. Claro, tudo depende da sua experiência e do seu conhecimento e do seu julgamento, layout e design visual. Esta é também a pontuação abstrata para a modificação geral do projeto. Como é fácil navegar em um site. E acho que perdi a orientação da tarefa. Este parâmetro é a indicação de quão fácil é entender o que eu tenho que fazer para ir do ponto a ao ponto B. Vamos imaginar que eu gostaria de comprar bilhetes para o concerto e ter que saber por onde começar o meu processo de compra, onde eu tenho que pressionar, onde tem que clicar. Vamos imaginar um gostaria de comprar bilhetes para um concerto. A boa orientação de tarefas é quando haverá uma pesquisa de botões muito clara para bilhetes, por exemplo, e haverá uma listagem de filtros fácil e assim por diante, a fim de facilitar o processo de pesquisa e compra de bilhetes. Então basicamente a orientação da tarefa é o caminho que eu tenho que passar do ponto a ao ponto B. Deve ser claro, se não for, significa que a pontuação será menor. O nível de confiança para sites pode ser distribuído para várias categorias, como você pode confiar neste site em termos de compartilhamento de suas informações pessoais, suas informações financeiras ou informações comerciais em outras informações confidenciais. E também requer ter protocolos adicionais como SSL ou outros protocolos que são necessários para processamento de transferências de dinheiro ou outras transações financeiras. E se você encontrou alguma evidência de que este site era suspeito de fraude ou algo assim ou outro feedback negativo. Isso significa que o nível de confiança será menor. qualidade do conteúdo reflete a pontuação geral de todo o conteúdo em conjunto, que inclui tags e conteúdo de mídia. Se é interessante se imagens da Ford que são usadas são feitas sob medida, não imagens de estoque. Se textos Grã-Bretanha é interessante, se o artigo tem imagem de capa relevante e assim por diante e assim por diante. velocidade da página é o serviço trazido pelo Google e calcula a velocidade geral da página e sugere melhorar algumas partes do site, a fim de aumentar a capacidade de descoberta. Então pode haver algumas coisas técnicas. Pode haver algumas coisas projetando, corrigindo um código ou substituindo imagem, ou convertendo imagens para um formato mais moderno, citando algumas palavras-chave meta de páginas. E mostra claramente como este site é visto pelo Google. Então você quer que seu site seja amigável ao Google. Você tem que corrigir esses erros que pulpy encontrado em seu site pela velocidade da página. Portanto, supervisionando conclusão são a, digamos, uma espécie de versão estendida do Relatório. E novamente, você vai exportar isso como todas as nossas placas e único arquivo PDF. E teremos todas as páginas em um PDF para revisão por suas partes interessadas. Então, acho que é tudo por enquanto. Muito obrigado pela sua atenção. Desejo-lhe boa sorte com a elaboração de sua experiência de usuário visibilidade, relatórios. 82. Visão geral de UX/UI: Neste vídeo, vamos recomeçar uma carreira no campo UX UI. Agora esta seção em particular aqui vai ser bastante intensiva. Aqui vamos ter muito conteúdo, muito material. Porque vamos passar por cima um pouco. Eu vou percorrer várias coisas diferentes, como como construir uma marca, marca pessoal, como configurar um site, ter uma rede, todas essas coisas incríveis que você precisa entender e saber sobre quando você está começando uma carreira no o campo UX UI. Uma das coisas que eu mencionei anteriormente em uma das outras palestras e, e ao longo deste programa em geral é que você quer ser multifacetado quando você está pisando na sensação UX UI, especialmente se você está indo para ser trabalhando para organizações menores, empresas de pequeno a médio porte, ou mesmo organizações de startups, certo? Você quer ser alguém que entenda não apenas UX UI, mas também entenda funis de vendas. Psicologia comportamental, psicologia do usuário, certo? Para que você não só pode entender seus papéis, mas também entender os papéis dos outros na fase de design real na organização, tanto quanto o design, que você possa ser muito mais valioso para uma organização. E por qualquer motivo, se há algum tempo que há demissões do que você vai ser a pessoa que fica por causa do seu valor fora de apenas ter a UX UI, certo? Você entende como escrever cópia, estrutura de cópia, funis de vendas, jornada do cliente, todos esses tipos adicionais de habilidades e conhecimento que não um designer de UX típico conheceria. Então vamos em frente e saltar para o início de uma carreira na visão geral da seção UX UI. Algumas das coisas que vamos cobrir aqui são a consultoria freelance e cliente. Vamos percorrer vários sites independentes. Vou mostrar-te como configurar o teu website. Vou mostrar-lhe como também começar com a consultoria Clang. Vou dar-lhe alguns exemplos de Arthur e seu perfil particular no Upwork e, em seguida, também várias outras plataformas diferentes também. E dar-lhe algumas dicas sobre isso. E então eu vou passar por algo que é extremamente poderoso, que provavelmente vale mais do que um curso inteiro em si mesmo. E estes serão os meus modelos particulares que eu uso na noção de que é para a sua vida pessoal e para o seu negócio e trabalho reais. E com esses modelos em particular, você vai ser capaz de executar toda a sua vida fora disso, bem como qualquer tipo de projetos de cliente trabalhando dentro de uma equipe ou o que quer, então um b, você vai ver o quão poderoso isso é. É um modelos pré-fabricados onde você tem seções diferentes. Você tem áreas diferentes para projetos, você terá áreas diferentes para clientes. Eu tenho diferentes áreas para suas coisas pessoais e vai ser apenas algo que você será capaz de usar para toda a sua vida ou também para o seu projeto. Estou muito entusiasmado por poder apresentar isso a vocês e mostrar o verdadeiro poder disso. E então vamos falar sobre construir uma marca, marca pessoal, entender o que é uma marca, a importância dela. E como você pode desenvolver e como aproveitar identidade visual pessoal para divulgar seu nome como designer de UX UX. E isso é extremamente importante, especialmente se você estiver indo para a rota freelance e você quiser obter seus próprios clientes. Você quer ser capaz de estar lá fora na web, certo? Em tantos lugares diferentes quanto possível. Especialmente se você está procurando um emprego. Uma das primeiras coisas que os empregadores vão fazer agora quando eles recebem um pedido é o aplicativo para olhar para a experiência e o que não. Mas eles também estarão olhando para o Google. Haverá pesquisando o candidato no Google para olhar, eles estão online? Que tipo de, sabe, como são os perfis online? Eles têm uma página no Facebook que eles têm uma página de negócios, certo? Todas essas coisas diferentes são, os empregadores vão levar em conta porque eles querem no indivíduo real lá que é único, que é diferente, que vai se diferenciar do resto do a competição, que só tem, digamos, um aplicativo, escrever um currículo com alguma experiência, certo? E então vamos rever a importância de ter um site e blog e como você pode realmente mostrar seu portfólio. Mostre talvez alguns depoimentos de trabalhar com clientes. Então alguém, seu trabalho, certo? Isso vai ser algo que é extremamente poderoso para você ter, especialmente se você estiver indo para o modo freelancer e depois networking. Isso também vai ser extremamente importante para a obtenção de clientes, mas também seria conseguir empregos certo? Ser capaz de entender como você pode alavancar sua rede existente, mas também ser capaz de sair e se conectar com os outros e ser capaz apresentá-los ao nosso colocá-lo em posições para ser capaz de encontrar certas posições, certas pessoas que podem se transformar em um cliente ou potenciais empregadores. E então vamos percorrer alguns dos melhores sites freelance. Alguns dos melhores que eu recomendo, alguns dos que você deveria estar, alguns dos que você não deveria estar. Perda vai percorrer alguns dos diferentes sites para que você possa colocar seu portfólio em e você pode realmente obter alguns empregos e obter alguns clientes. E então vamos passar por algumas das perguntas que você deseja ter até o escopo de um projeto para UX e UI, certo? Você quer ser capaz de ter um conjunto de perguntas que você está fazendo seu potencial cliente ou quando você está começando e você está trabalhando em uma equipe. Ou talvez você esteja fazendo uma interface de usuário em uma organização menor. Você quer ter esses tipos de perguntas configuradas para que você possa iniciar o projeto real e realmente entrar na fase de design, certo? E, finalmente, vamos terminar com os melhores lugares para encontrar UI e UX trabalho. Então isso vai ser um recurso aqui. Vou mostrar-lhe por cima do ombro diferentes sites e você pode ir e realmente procurar posições abertas. Algumas das coisas para tomar nota, algumas das melhores maneiras de abrir suas mensagens, certo? E então esta vai ser uma grande seção aqui. Estou animada para você começar. E isso vai estar aqui para começar uma carreira na visão geral da seção UX da UI. E nos vemos no próximo. 83. Seu Hub de produtividade diária: Ok, então neste vídeo, vamos rever a sua ferramenta de produtividade diária, que vai ser através da noção. Agora a noção aqui é uma ferramenta de produtividade fantástica semelhante a uma sauna Trello. Alguns dos principais grandes nomes lá fora, no entanto, noção tem uma tonelada de mais recursos que estão disponíveis para você e é 100% gratuito. E como você pode ver aqui, você pode criar diferentes tipos de espaços de trabalho. Você pode acompanhar seus projetos, sua lista de tarefas. Terei tantas coisas diferentes que você pode fazer. E o que eu tenho sido capaz de configurar para você é um feito para você modelos onde ele tem lá sua visão, seus objetivos e seus resultados, seus diferentes projetos, sua produtividade diária, tanto quanto suas tarefas, e então seu CRM para seus clientes. Então você vai ser capaz de gerenciar tudo através deste hub. Você será capaz de gerenciar seus clientes, sua lista de tarefas, olhar para seus diferentes projetos com seus clientes. É apenas uma ferramenta fantástica para poder vir aqui todos os dias. E em vez de suas tarefas, atualize seu CRM, seus diferentes marcos. Então vamos em frente e faça o login aqui. Tudo que você precisa fazer é se inscrever e apenas usar seu e-mail cadastrado. Então vamos fazer login aqui. Vai continuar. Isto é praticamente um piscar de olhos. Há muitas coisas diferentes que podemos fazer. No entanto, vamos instalar o modelo feito para você que eu criei para você. Então deixe-me ir em frente e pegar isso aqui. Então você vai ter acesso a um link especial. Então você tem que copiar esse link, colocá-lo aqui. Então este é o modelo real aqui que vamos configurar. Então vamos duplicar. E isso está sendo adicionado ao seu hub real particular aqui. Assim, podemos ver aqui que ele foi adicionado. E é aqui que vamos trabalhar todos os dias. Então, todos os dias, quando você vem aqui, você quer olhar para suas diferentes tarefas. Você quer olhar para o seu CRM. E como você pode ver aqui, ele fala sobre como delinear sua visão e seus objetivos e, em seguida, seu resultado. Então seus objetivos são essencialmente o que você quer fazer e os resultados são essencialmente o resultado do que você vai fazer, certo? Como você vai realmente conseguir isso. E então temos os projetos, depois temos os marcos, e depois as tarefas, e depois um CRM, e então temos os objetivos e os resultados. Então, como você pode ver aqui, nós temos os resultados. E então este é o resultado real do que queremos do nosso objetivo. Então eu tenho um objetivo aqui para me organizar mais. Bem, qual é o resultado direto disso? Certo. Bem, eu preciso planejar cada semana com base em um dia de trabalho de oito horas. Está bem. E então bem aqui B em cima de minhas finanças, manter o controle diário de minhas finanças criando orçamentos mensais bem, bem aqui. Crie 350 vídeos do YouTube para este ano. E então como vou conseguir isso? Bem, eu vou gravar vídeos em lote no sábado e postar vídeos diários no YouTube. E depois vamos para aqui. Quero pesar 225 quilos. Então, como é que vou fazer isso? Bem, ir à academia de manhã e depois focar em saladas e verduras. Então é assim que você vai definir seus resultados. Lembre-se, os resultados são o resultado direto e como você vai conseguir isso, certo? Portanto, é importante para você ter seus objetivos aqui e, em seguida, seus resultados bem ali, e você verá que tudo está ligado. Então vamos aqui para o resultado real aqui. Então planeje cada semana com base em oito horas de trabalho. E está ligado a este objectivo em particular. Está bem. E você pode adicionar aqui uma data específica se você quiser fazer um dia real específico no tempo, data de início e hora. E então aqui você pode colocar o status aqui. Você pode colocar no caminho certo, e então também podemos atribuí-lo a um trimestre específico. Então, digamos que você queria fazer todos os trimestres aqui o ano inteiro. Então vamos em frente e preparar isso e então isso vai mostrar todos os aposentos aqui, ok? Então você quer que isso seja feito e o ano inteiro, então você tem todos os quatro trimestres aqui. Se você quer apenas ter um ou dois, você pode fazer isso também. E então você pode atribuir tarefas diferentes a ele. Você pode vir aqui e adicionar algumas informações adicionais, seja lá o que for, certo? Esta é uma ferramenta muito, muito boa para você poder definir seus objetivos, seus resultados, certo, nesta área particular aqui. Então é assim que você define seus objetivos, seus resultados, muito simples de configurar. Vamos em frente e voltar aqui. Quero mostrar-te mais uma coisa. Eles têm emojis diferentes. Você pode ir ao aleatório aqui e eu coloco o que você quiser. Ou você pode ir por aqui e encontrar qualquer emoji que você quer aquela configuração lá com, certo? E então vamos em frente e sair dessa. E então vamos descer aqui. Então temos projetos. Ok? Então projetos são como para seus clientes, certo? Se você estiver trabalhando com um cliente específico, você deseja configurá-lo em um projeto específico. E você quer colocar aqui as datas na medida em que e quando você começa com elas, quando é que o acordo termina? Você sabe, normalmente se você está trabalhando com clientes, você estará fazendo qualquer lugar entre 3612 meses de contratos. Digamos que este aqui é para um cliente em particular. Aqui nós colocamos as datas. Podemos atribuir isto a uma determinada pessoa. Podemos colocar o mais gordo aqui. E então nós descemos aqui e então podemos ver o calendário real onde podemos colocar em informações diferentes. Digamos que aqui, podemos colocar a página inicial de configuração, certo? E isso para ser feito aqui, digamos o décimo, ok? E então podemos adicionar o que quisermos aqui para a carinha sorridente baixa, ok? E então é resfriado de volta. Então nós temos isso bem ali. E, em seguida, aqui temos as tarefas de fluxo Kanban onde você pode adicionar em diferentes tarefas. Você pode colocar em meses diferentes aqui. Você pode mudar isso quatro dias, o que você quiser fazer aqui. É muito fácil mudar isso e você pode adicionar coisas diferentes. Então vamos, vamos até fazer assim. Então, basicamente, tudo o que você tem que fazer, se você quiser adicionar algo aqui, você vai para este lugar bem aqui em nosso show você diferentes elementos que você pode adicionar aqui. Então, se você quiser adicionar apenas texto, se você quiser adicionar uma página, você deseja adicionar uma lista de tarefas. Se você quiser adicionar o título um, o cabeçalho dois. Se você quiser adicionar uma lista de marcadores. Certo, numerados. Alterna este divisor de cotações. Você pode adicionar tabelas diferentes, quadros diferentes, como o que temos aqui. E então, você sabe, aqui está como uma galeria. Aqui está um calendário de lista simples. Então você tem tantas coisas diferentes aqui que você pode adicionar e modificar com esta ferramenta específica. Você pode adicionar diferentes mídias, vídeo, áudio, você pode incorporar de diferentes lugares. Então esta é apenas uma ótima ferramenta, certo? Se eu quisesse vir aqui e adicionar outro, digamos calendário. Está bem. Isto é ir aqui para baixo. Calendário bem ali. Boom. Então é assim que é simples adicionar um calendário, certo? Tudo isso é muito simples, muito fácil de navegar e usar. E como eu disse, você quer ter todos os seus tipos em projetos separados, ok? E aqui é onde você pode gerenciar tudo aqui. Então vamos até aqui para os marcos. E isto é para cada trimestre. Então isso seria, você sabe, hey, para Q um, estes são os marcos que eu quero ter na minha agência. Eu quero essa receita, eu quero que isso seja feito, e eu quero ser capaz de realizar isso. Quero que isso seja feito, certo? Todas essas coisas diferentes que você quer realizar em cada trimestre particular, certo? Você será capaz de configurar isso aqui. E é ótimo ter porque você quer ser capaz medir o que você está fazendo e certificar-se de que você está no caminho certo e que você não tem datas que você está seguindo em diferentes marcos que você está olhando para alcançar diretamente através seu trabalho diário. Então vamos até aqui agora e vamos para Tarefas. Agora. Este é o seu ranking de tarefas diárias. E isso é ótimo. Quero dizer, eu queria ter algo assim quando comecei, onde você pode literalmente passar toda a sua vida por aqui, assim como pela sua agência. Então, digamos que você queira configurar uma nova campanha de email na qual você configuraria uma nova tarefa. Então você colocaria a data, a pessoa anexada a qualquer um desses outros fatores aqui que você quer colocar aqui. Digamos que queríamos mudar o status aqui para In Progress, certo? E então podemos adicionar as notas que quisermos aqui. Podemos colocar. Tudo é necessário. É a lista de e-mails, certo? Ou você pode colocar isso em notas aqui, certo? Se quiser deixar notas para si mesmo, pode copiar isto. E então vá aqui, adicione um comentário, ok? E então boom, e então bem ali, e então ele vai colocar as notas, certo? Então esta é uma ferramenta fantástica. Eu não posso falar sobre isso o suficiente. Esta ferramenta é um salva-vidas completo. Você pode gerenciar, como eu disse, toda a sua vida assim como sua agência por aqui. Então isso é o quão simples você configuraria isso. E digamos que você foi capaz de terminar isso. Ok, ótimo, feito. É assim que é simples. E aí você pode ver que há um pequeno comentário lá, certo? E aqui em baixo, este é o seu CRM. Então é aqui que você se prepararia para seus clientes, certo? Digamos que você tinha, você sabe, para este aqui, as pistas, certo. Você pode colocar no site. Quaisquer outros recursos adicionais aqui que você deseja adicionar e, em seguida, os comentários na nota. Então, você sabe, vamos dizer que você veio aqui e ser como, você sabe, falou com o cliente e eles querem começar. Na próxima semana. Você pode adicionar um como este ou você pode apenas copiar e ir para lá e colocar isso bem ali. E uma das outras coisas que você pode fazer é adicionar um comentário a esta linha em particular aqui. Então vamos dizer que você colocar nós vamos acompanhar. Mas o cliente na próxima semana. Está bem. E depois osso. E agora você pode ver que há um pequeno comentário bem ali. Então esta é apenas uma ferramenta fantástica. Quero dizer, eu não posso falar sobre isso o suficiente. Como eu disse, esta é apenas uma daquelas ferramentas onde você gostaria de ter isso, você sabe, quando você começou ou quando eu comecei. Quem me dera ter algo assim que me permitisse controlar e montar toda a minha vida, assim como o meu negócio. Ok? Então é assim que você quer usar o CRM aqui, também pode anexar isso a projetos específicos, metas específicas, certo? Então aqui, eu não quero anexá-lo a isso, certo? Porque isto é para este cliente. Digamos que esse cliente foi o único que se inscreveu, certo? Então agora podemos ver isso é anexado ao cliente XYZ aparecer, certo? E então é assim que nós vamos configurar isso. Então é assim que você vai ser capaz de gerenciar seus clientes aqui com o CRM, gerenciar sua lista de tarefas todos os dias, tanto quanto suas tarefas, seus objetivos, seus resultados para si mesmo, para sua agência, classificação e apenas ser capaz de gerenciar tudo em um só lugar. É só uma ferramenta fantástica. E então aqui em baixo, nós temos o nosso melhor dia, se você quiser ter algo específico que você teve sucesso ao longo do dia, você pode adicionar isso aqui mesmo. Aqui está o da semana, se você quiser adicionar em particular quando você teve, digamos no domingo e, em seguida, talvez layout como uma vitória da semana. E então temos uma revisão semanal aqui também, tipo do que você fez, como as coisas foram. Você pode ver aqui a eficácia, gratidão, baixos, desafios, vitórias, certo? Então, uma maneira fantástica de configurar suas avaliações semanais. E então também aqui o que a revisão mensal, certo? Então, mais uma vez, tudo que você precisa fazer para obter esta configuração aqui é obter um link especial uma vez que você se inscrever e seguida, você será capaz de copiar este modelo e configurá-lo em seu hub particular aqui. E este é o seu centro de produtividade diário. Tudo que você tem que fazer é vir aqui todos os dias em termos de sua visão aqui, certo? Assim que você colocar isso para fora, você quer colocar os links aqui para que você possa visitar isso todos os dias, certo, diariamente. E então seus objetivos e resultados, certo? Certificando-se de que você está no caminho certo e que você está fazendo o que precisa fazer. E você montou tudo aqui e então seus projetos para seus clientes ou até mesmo projetos pessoais ou o que quer que seja que você está fazendo certo? Você quer ter certeza de que você manter o controle de seus diferentes projetos, tanto quanto trabalhar com clientes e estar fazendo em uma espécie de branding talvez para si mesmo, certo? Como eu disse, você pode gerenciar não só o seu negócio, mas toda a sua vida aqui, ok? Uma ferramenta muito poderosa. E, obviamente, aqui com os marcos, certificando-se de que você tem números específicos ou coisas que você está tentando realizar, certo, a cada trimestre. E então suas tarefas aqui, produtividade diária, certificando-se de que você está no caminho certo até o que você precisa fazer hoje? O que você precisa fazer amanhã, certo? E então seu CRM aqui em baixo, ok, ferramenta tão fantástica. Isto é o que vai permitir que você realmente mantenha tudo em linha, mantenha tudo organizado e seja o mais produtivo possível. Então isso vai estar aqui para este, e nos vemos no próximo. 84. Como começar Freelance: Neste vídeo, vamos revisar o freelancing. Agora isso é algo que, se você está apenas começando em sua carreira UX UI, então o freelancing é algo que você pode querer começar trabalhando com porque ele vai lhe dar alguma experiência. Vai permitir que você consiga algum trabalho sob seu cinto, alguns estudos de caso, certo? Algumas referências, depoimentos. E então você será capaz de alavancar isso para conseguir mais clientes ou até mesmo para conseguir um emprego se esse é o seu objetivo final, certo? Então vamos em frente e saltar para o freelancing e o que você pode esperar de ser um designer de UX freelance. Então, com o freelancing, você é essencialmente autônomo e você assume um trabalho de contrato para outras empresas e você normalmente vai estar trabalhando dentro como um site freelance, como Upwork, Freelancer ou fibra ou qualquer um desses outros aqueles lá fora que estão no mercado onde você tem clientes vindo para você com projetos e, em seguida, você vai e você essencialmente licitar sobre eles. E você coloca o seu melhor pé na frente e você realmente consegue esses contratos. Essa é uma das melhores coisas sobre freelancing nessas plataformas é que você não precisa ir lá e gastar tempo, energia e recursos na aquisição de clientes, certo? Porque se você é um negócio autônomo e não estiver usando essas plataformas, será um grande desafio para você conseguir clientes. E especialmente você não teria experiência em conseguir clientes, certo? Portanto, o freelancing é uma ótima maneira de começar, porque você tem a capacidade de ter clientes vindo até você, projetos vêm até você e você começa a escolher para quais projetos específicos você quer trabalhar. Agora, uma das melhores maneiras de usar esses diferentes sites freelance é ter certeza de que, no início, se você está apenas começando, certo, talvez você tenha passado por este curso, você teve alguns formação. Você deseja começar com trabalhos de design de UX UI. Bem, o que você deve procurar quando você está apenas começando pequenos trabalhos de UX UI que você pode trabalhar em custos muito baixos, certo? Você não quer se preocupar com o quanto você está sendo pago agora. Porque, à medida que a sua experiência e a sua base real do projeto provam e aumentam, você poderá subir lentamente as suas taxas horárias ou a sua taxa de projeto. E você será capaz de comandar preços mais altos, certo? Vou explicar mais tarde nesta lição aqui um exemplo de Arthur e seu perfil, como ele foi capaz de fazer o mesmo onde no início ele começou alguns trabalhos de nível inferior. Agora ele tem um monte de trabalhos que vêm até ele diretamente e ele é essencialmente escolher e escolher. E assim como eu mencionei, toda a intenção aqui é que você queira ter pequenos empregos que você possa essencialmente obter algum feedback. Largura, consegue depoimentos, estudos de casos, aumenta a pontuação do seu perfil, certo? E, em seguida, ser capaz de aumentar a sua taxa horária. Agora, aqui está a coisa. Ao se candidatar a vagas freelance. Você quer ter certeza em seu aplicativo que ele é atendido e específico para esse projeto, certo. Porque eu mesmo postar um monte de empregos no Upwork e você ficaria surpreso com quantas vezes as pessoas vão responder. Posto de trabalho com apenas um tipo de placa de caldeira de currículo de aplicação. Eles essencialmente não lêem o perfil ou a descrição do trabalho, certo? E então isso é muito importante lá e uma grande bandeira vermelha para os empregadores. Eles querem saber que você passou o tempo para ler a descrição do trabalho. Você entende o que é necessário, o que é necessário, e que você está sendo capaz de se apresentar como alguém que é, você sabe, que é qualificado. Mas também tem, você sabe, o que o projeto em particular implica porque você levou tempo para ler a descrição real, certo? E uma das outras coisas que você pode fazer para realmente levar suas propostas para o próximo nível é poder ter algum tipo de vídeos. Então, se você pode criar como um vídeo de valor ou um vídeo específico para essa descrição do trabalho e sua taxa de entrevista vai aumentar. Porque quando você está fazendo uma abordagem muito personalizada enviando um vídeo que diz, ei, você sabe, eu dei uma olhada na descrição do seu trabalho. Sabes, isto é o que estou a recomendar isto como a minha experiência. Isto é o que eu tenho sido capaz de fazer por outros ou isto é o que eu estou recomendando, certo? E o Reino Unido interage no seu trabalho específico, então a probabilidade de você ser aceito e ser entrevistado é muito, muito alta porque você está se separando da concorrência. Ok, então agora vamos em frente e voltar para o meu computador. Vamos dar uma olhada no nosso perfil de impulso e no Upwork. E eu vou mostrar a vocês o que ele fez, como ele tem todo o seu perfil ascendente. Então você pode meio que tirar algumas dicas de como ele tem uma configuração e então como você pode configurar seu perfil. Ok, então estamos de volta aqui no meu computador e como você pode ver aqui, não há uma taxa de 100% de sucesso no trabalho. Obviamente, ele é o melhor do que faz. Ele é fantástico. Ele é um designer de UX UI extremamente talentoso. E, obviamente, o feedback aqui mostra isso. Então, como você pode ver aqui, suas taxas para tipos específicos de empregos variam. Então, para design de UI e UX, quarenta e cinco dólares por hora para design gráfico e 40 hora para qualquer tipo de design de produto que é muito personalizado, específico, sua taxa sobe porque, você sabe, é o nível de Dificuldade, certo? E assim ele ganhou mais de 100 mil dólares em seu perfil particular aqui em cima. E então uma das coisas que ele tem é um bom vídeo aqui e ele passa por alguns dados, algumas informações. Outra coisa que realmente ajudaria é ter um vídeo de si mesmo, talvez falando sobre sua experiência. Talvez falando de si mesmo, falando sobre, você sabe, o que você traz para a mesa, o valor que você é capaz de fornecer, certo? E isso seria um longo caminho também porque as pessoas querem ver seu rosto, querem ver que você é uma pessoa real, certo? E você teria um vídeo lá que explicasse, você sabe, sobre o que você faz, sua experiência ou apenas você atrás do microfone lá falando sobre o que você pode fazer no valor que você traz definitivamente iria ao longo do caminho. E como podem ver aqui, ele tem perfis diferentes, essencialmente quatro tipos diferentes de trabalho. Para o trabalho UX UI, ele tem um tipo específico de descrição de perfil aqui. A mesma coisa aqui para o design gráfico, certo? Ele tem uma descrição diferente aqui. E então você pode ir em frente e olhar para os diferentes tipos de empregos que ele tem. Agora, se nós sentarmos aqui e olhar para UI UX, e você voltar para isso por cinco, você volta para sete aqui. Quando ele começou, acho que foi ou acho que não foi quando ele começou. Acho que foi mais quando ele começou a fazer freelancing no Upwork. Mas você quer olhar para alguns desses diferentes tipos de comentários aqui e voltar o mais longe possível. Então este está de volta em 2015. Você pode ver que este trabalho que ele tinha era para um redesenho de quadros, certo? Em 2015, certo. Então isso é um grande negócio aqui. Quero que tome nota de que Arthur não começou a cobrar 50 dólares por hora, certo? Isso é algo que ele construiu e trabalhou até uma ordem para chegar a essa porcentagem em particular, certo? Então é exatamente isso que você quer fazer também. Você quer construir um perfil com pequenos empregos, certo? E começar a mostrar às pessoas que, hey, você sabe o que você está fazendo, você sabe como obter resultados, e então você pode aumentar sua taxa horária aqui é 27, 78, certo. E eu acredito que ele tem agora até 45. Portanto, tenha em mente que quando você está começando em diferentes sites de freelancing, você realmente é capaz de construir seu perfil primeiro e, em seguida, ser capaz de começar a aumentar seus preços e comandar quantidades mais altas e começar a obter realmente enviados para você quando você começa a escolher. Ok, então isso vai estar aqui para a aula freelance, e nos vemos na próxima. 85. Consultoria para clientes: Neste vídeo, vamos falar sobre consultoria de clientes. Agora isso é algo que é diferente do freelancing. Onde freelancing é mais de projetos que estão vindo até você em vários sites de freelancing dizendo onde você está apenas trabalhando tipo de um único proprietário, você realmente não tem uma empresa, você não tem uma organização, Certo? E com a equipe de Controle de Cliente, este é um jogo totalmente diferente. É aqui que você vai sair. Você está recebendo seus próprios clientes através de diferentes esforços de marketing, como, digamos, publicidade paga, e-mail frio, qualquer uma das diferentes formas de anúncios ou promoções ou métodos de marketing lá fora, certo? Mas você é responsável por conseguir seus clientes. Talvez tenha o seu próprio negócio, certo? Você pode ter alguns funcionários que trabalham com você são freelancers, certo? Isto é obviamente no final da estrada depois que você começar com algum freelancing, no entanto, consultoria leão vai ser uma boa rota na estrada, bem como se você quiser prosseguir para esta rota porque você será capaz de nós somos clientes maiores, Você seria capaz de manter muito mais dos lucros, cobrar taxas mais altas, certo? Porque você é uma empresa e você está recebendo seus próprios clientes versus ter pessoas vindo até você ou você licitando em diferentes projetos, certo? Há muito mais competição. Então vamos em frente e percorrer a consultoria de clientes. Como eu mencionei, com consultoria de clientes, é aqui que você está montando sua própria empresa ou você pode ter o nome de sua própria empresa, mas você normalmente tem como uma LLC ou uma S Corp, as mais comuns. E você tem o seu próprio site com o seu negócio em sua. E o que eu recomendo no início é que você faça alguns projetos freelance. Você tem algum trabalho sob seu cinto, você tem um portfólio construído, e então você começa a ser capaz de ir lá fora e obter Klein por conta própria. Porque você vai ter um trabalho que você vai ser capaz de alavancar. Você terá chuva de depoimentos. E então uma das melhores maneiras de conseguir clientes por conta própria é ir para baixo, fazer algumas pesquisas em diferentes negócios, sites diferentes, certo? Ao entrar em contato com o departamento de marketing ou o proprietário, mencionando a eles sobre qualquer tipo de recomendações que você encontrou ou que você recomenda em seu site, em sua aplicação, certo? Seja qual for o produto que possa ser. Então essa vai ser uma das melhores maneiras de realmente obter clientes para si mesmo é fazer um pouco de pesquisa em seu site ou talvez o aplicativo, descobrir algo sobre esses bits individuais, o proprietário ou o marketing Departamento, diretor de marketing. E depois ser capaz de chegar e dizer, ei, eu me deparei com o seu negócio, seu nível de aplicação de site, o que vocês estão fazendo. E encontrei isto aqui, quanto à minha recomendação, ou notei isto ali, certo? E, em seguida, ser capaz de adicionar valor antecipadamente, e, em seguida, ser capaz de obtê-los através uma chamada rápida Discovery para descobrir um pouco sobre sua situação atual. Então a consultoria do cliente vai ser a mais gratificante porque você pode cobrar montagens mais altas, certo? Como sua base de projeto, mas aqui está a coisa. Vai ser o mais difícil porque você não está recebendo clientes vindo até você, certo? Com o freelancing, você acabou de se inscrever como um freelancer particular na plataforma. Você vai lá fora, você escolhe e escolhe quais empregos você vai se candidatar, certo? E tudo está vindo para você. Você está pegando cerejas versus com uma consultoria gentil. Isto é mais uma abordagem de saída, certo? Você está coletando dados, coletando diferentes clientes potenciais e queria atingir o alvo. E você estendendo a mão com seu próprio tipo de mensagens de marketing, seu próprio e-mail, seu próprio tipo, promoções diferentes, certo? E você está estendendo a mão para poder trabalhar com você para ver se eles têm algum tipo de projeto em andamento, certo? Então é isso que você pode esperar de Clank até a equipe. Isso é algo que eu não recomendo que você pule em um como você já teve alguma experiência com freelancing, você tem um portfólio, você tem alguns depoimentos e estudos de caso que você pode alavancar para obter alguns clientes, certo? Então, ele vai estar aqui para a aula de consultoria do cliente, e nos vemos na próxima. 86. Criando uma marca: Neste vídeo, vamos rever a construção de uma marca. Então isso vai ser muito importante, não só para você, mas também para quando você está fazendo isso, digamos algum trabalho de design gráfico ou você olha para assumir alguns clientes que querem fazer algum remapeamento da marca atual. Queremos entender o que é uma marca, o que ela representa, quais são os componentes-chave em torno do que uma marca representa? Quais são alguns dos fatores-chave quando se trata de construir uma marca e muitas das diferentes coisas que você precisa para manter um olho e estar ciente quando você está desenvolvendo uma marca para você ou um cliente em potencial. Então vamos em frente e pular aqui para construir uma marca. Então, uma marca não é apenas um logotipo, é aí que muitas pessoas ficam aquém. E eles ficaram confusos pensando que uma marca é apenas um logotipo, certo? Não é apenas um logotipo porque um logotipo é apenas uma representação visual de uma marca. Mas uma marca é realmente uma promessa. É essencialmente uma proposta de venda única. E se você não está familiarizado com isso, isso é essencialmente o que o diferencia no mercado. Digamos que você tenha algum tipo de processo único ou metodologia de design única. E não tem que ser algo extraordinário, certo? Esta é uma maneira muito simples aqui para se destacar no mercado onde você pode tornar sua marca conhecida ou ajudar os clientes a obter suas marcas conhecidas, é ajudando-os a desenvolver uma proposta de venda única, certo? E você pode criar algum tipo de processo simples ou ter um processo e nomeá-lo algo único e diferente, certo? E que seja seu próprio processo único. No entanto, pode ser algo super simples. No entanto, quando você é capaz de dar-lhe um nome e você é capaz de trazê-lo para fora, então é aí que a criação de uma proposta de venda única, porque você pode dizer a outros potenciais clientes ou potenciais clientes que eu quero entrar e você pode estar licitando contra outra pessoa disse, hey, nós não temos uma metodologia única. Temos uma metodologia de design única ou temos um processo único que usamos para ir para nossos projetos para garantir que estamos criando e desenvolvendo marcas e designs de classe mundial, certo? Então todas as marcas têm uma mensagem, muito importante aqui para entender. É realmente central para qualquer tipo de marca. A marca representa algo. E quando você cria uma marca, a razão pela qual você está criando a marca é entregar a mensagem, certo? Porque está dizendo algo, está entregando uma mensagem. Está transmitindo algo sobre você ou a empresa ou o que ela representa, certo? Muito importante lá. E branding não é sobre o que você sente, o que você pensaria, certo? Pense tentar se dar um apelido, certo? Não funciona assim mesmo. Os apelidos são tipicamente dados por outras pessoas e é assim que eles ficam. Porque é sobre o que as outras pessoas pensam, sentem e dizem sobre judeus, não sobre o que você pensa, certo? Porque você pode pensar que sua marca é a melhor do mundo e você faz isso, você faz aquilo. Mas se o mercado está dizendo o contrário, então você precisa prestar atenção a isso. E isso vai te dar toda a indicação de que você precisa saber que, hey, escute, minha marca, eu queria ser conhecido para defender isso. E então todas as minhas ações, tudo o que eu fizer, vai estar de acordo com isso, certo? E uma das questões-chave que você quer fazer a si mesmo quando você está começando a definir sua marca é, Ei, para que eu quero que as pessoas conheçam o produto ou serviço, para me conhecerem, certo? E isso é grande quando você está trabalhando com clientes também. E quando você está fazendo como um redesign de logotipo para um cliente ou um desenvolvimento de marca completamente novo, certo? Redesenvolvimento de toda a sua marca. Você quer fazer perguntas como essas, tipo, hey, por que você quer que seu negócio seja conhecido? Quais são alguns dos principais valores, características-chave, coisas importantes que você quer que seu negócio seja conhecido no mercado, certo? O que você quer que as pessoas pensem, o que você quer que as pessoas imaginem ou pensem quando estão ouvindo ou vendo sua marca, certo? Muito importante lá porque, como designer de UX UI, você sabe, você faz as pazes no campo UX. Você pode fazer alguns trabalhos de UX a partir de trabalhos de interface do usuário, e você pode fazer algum design gráfico. E então você vai ser multifacetado para ser capaz de entender, hey, se uma marca está sendo redesenvolvida ou completamente renovada de uma marca ou do zero. Você quer ter essas perguntas chave e entendimentos que Haidt é um grande, está entregando uma mensagem. E em termos de cliente, o que você quer que essa marca seja conhecida, certo? Tão importante quando se trata de construir uma marca. E um bom exemplo de uma grande marca é a Starbucks, certo? Pense no que representa. Você sabe, quando você está bebendo café Starbucks e as pessoas te vêem, certo? Está representando que você é essencialmente classe alta, por assim dizer, que você é diferente, você é único e você está bem e disposto a gastar mais por uma xícara de café que poderia custar um par de dólares ou dólar, certo? No Dunkin Donuts, certo? Então é sobre pensar diferente, ser diferente. E também com a entrada em um local da Starbucks, certo? Se tiveres um certo campo, vais sobreviver. Você tem uma certa iluminação lá dentro, e tudo vai ser o mesmo não importa onde você vá para Starbucks no mundo, certo? Então há uma certa mensagem que está sendo transmitida aqui. E sempre que você vê pessoas bebendo Starbucks, certo? É transmitir uma mensagem de que eles são diferentes. Eles são únicos. E não me importo de gastar 4 a 5 dólares num café, numa bebida, certo? Isso poderia ser feito facilmente por dólar, dólar, que pode ser facilmente feito por um dólar ou US $2, certo? Então é isso que você quer pensar sobre uma marca. É o que representa, como faz as pessoas se sentirem, e o que vem à mente quando vêem a marca. E outra grande marca aqui, provavelmente número um, vai ser a Apple, certo? Porque lembre-se, a Apple não fabrica um produto superior, muito superior ao, digamos, HP ou Dell, ou qualquer um desses fabricantes de desktops ou computadores, certo? O que realmente os diferencia vai ser o elemento de marca tanto quanto o que representa e como faz as pessoas se sentirem, certo? As pessoas vão gastar alguns milhares de dólares em um computador Apple porque é o que ele representa para os outros e para o mundo, para a sociedade sobre eles como hey, eu acho diferente, eu sou único. Eu sou, você sabe, escalão superior. Não sou o teu Joe normal, não sou o teu pensador comum. Eu sou alguém que é criativo, que gosta de pensar fora da caixa, certo? Então isso é algo que você realmente quer levar em conta para levar em consideração porque a Apple está transmitindo uma mensagem o tempo todo, certo? Porque lembre-se da funcionalidade do computador dele. Há realmente muito pouca diferença entre uma maçã ou como um Dell ou um HP com especificações semelhantes, certo? Mas é a marca Apple que as pessoas estão se conectando e ressoando. E isso é muito importante de entender. É sobre como você está fazendo as pessoas se sentirem e a mensagem que está entregando ao mercado, certo? E então vamos repassar algumas razões pelas quais construir uma marca é importante, certo? Então, ter uma marca junto com uma presença on-line irá imediatamente diferenciá-lo de todos os outros candidatos que acabaram de ter currículo com experiência, certo? Porque uma das primeiras coisas que os empregadores fazem hoje em dia é o olhar para cima no Google para ver se você tem outros interesses lá fora fora do trabalho. Se você tem um blog, se você tem algum tipo de presença, certo? Porque você tem que se lembrar, na era digital de hoje, tudo está online. Tudo é digital. E então você quer ser capaz de se diferenciar. Então apenas alguém que tem, digamos, um aplicativo que já experimentou que tem, você sabe, um bom currículo, mas talvez eles não tenham uma presença online, certo? Isso é algo a levar em consideração quando você está desenvolvendo um perfil online. Você sabe, ter perfis de mídia social, ter um site, ter um blog , você sabe, ficar ativo nas mídias sociais vai acontecer. E vamos entrar em perfis de mídia social em outra lição. Mas só quero dar-te uma visão geral rápida disso. E então quando você combina experiência, um currículo com uma presença on-line junto com a marca, certo? E você tem tudo isso trabalhando a seu favor, então você tem a fórmula vencedora que os empregadores estão procurando na era digital de hoje, certo? Porque você pode representar sua marca para o mercado e mostrar aos outros, tanto quanto clientes, potenciais clientes que são capazes de fazer por si mesmo e depois deixá-los saber, hey, ouça, isso é o que eu fiz para mim mesmo e isso é o que eu fiz pode fazer por você em especialmente no espaço do empregador, certo? Eles podem ver que você sabe como desenvolver uma marca. Eles vêem que o seu ato de on-line no seu, no quadro de espaço de mídia social e você tem outros interesses fora do trabalho, então você está realmente se separando da concorrência. E é isso que os empregadores estão procurando. E especialmente se você estiver seguindo a rota de consultoria de clientes, sua marca irá junto com potenciais clientes, especialmente se você estiver solicitando, para qualquer tipo de design gráfico ou qualquer tipo de projeto. Se conseguires mostrar-lhes isso, criei a minha própria marca. Eu tenho meu próprio portfólio, certo? Minha marca representa isso. Isto é o que eu defendo, são os meus valores, certo? Esta é a minha proposta única de venda. Então, todos eles vão jogar um fator. E você conseguir um emprego ou conseguir clientes no espaço Freeland, ou mesmo sair e conseguir seus próprios clãs, certo? E então isso vai estar aqui para construir uma marca. E nos vemos no próximo. 87. Marca pessoal: Neste vídeo, vamos rever a marca pessoal. Então, na lição anterior, passamos por cima de branding em si mesmo. Você falou sobre como construir uma marca. Esta lição em particular aqui, vamos entrar nos detalhes de se marcar como essa marca, certo? Porque há uma grande diferença aqui como uma organização versus construir uma marca pessoal. Então vamos em frente e saltar para a construção de uma marca pessoal. Então, o que é marca pessoal, certo? A marca pessoal é realmente o mesmo conceito que uma marca, exceto por um, uma marca pessoal individual real. Você é a marca, certo? Essa é a maior diferença aqui. Quando você está construindo uma marca para um negócio, certo? Para uma entidade fora de si mesmo, então vai ser onde o negócio está, a marca. Quando você está fazendo marca pessoal, você é a marca real, certo? Sua personalidade online. Você sabe como você se representa online, como você postar em diferentes plataformas, o que você postar, o que é apenas dizer, certo? E permite que o mundo exterior perceba diretamente suas habilidades, personalidade e experiências, certo? E assim marca pessoal provavelmente vai ser onde você está sendo capaz de tirar o máximo proveito de suas ações, certo? E o máximo do seu trabalho, porque com a marca pessoal, na maior parte, você estará se marcando como a marca. Você vai estar posando em diferentes plataformas de mídia social, diferentes perfis de mídia social são executados. Você vai estar no Instagram, você vai estar no Facebook, certo? E todas essas outras plataformas de mídia social diferentes que realmente permitem que as pessoas saibam que você está ativo e que você está levando sua marca a sério. E, finalmente, que marca pessoal, esta é realmente a melhor maneira de ser capaz de se colocar em uma posição estratégica para transmitir o valor que você traz como designer de UX e UI, certo? Porque lembre-se como um designer de UX UI, muitas vezes você vai fazer como projetos de sites, projetos de aplicativos, também desenhos gráficos para gráficos diferentes, talvez fazendo, digamos, um design gráfico para cartões de visita, logotipos , certo? Há muitas coisas diferentes que estão dentro do reino UX UI, por assim dizer, certo? Então vamos olhar para algumas das diferentes maneiras que você pode colocar seu nome lá fora como um designer de UX UI. Então aqui vai uma coisa. Você pode ser o melhor designer do mundo, certo? Mas se você está sentado sozinho em seu porão e ninguém sabe sobre você é o que você faz ou como você pode ajudá-los, então não importa, certo? Você não vai ter muito impacto. E então o que você quer fazer é ser alguém que seja bom no que você faz. E isso está melhorando constantemente Wright, mas é capaz de alavancar sua presença on-line, certo? E ser capaz de colocar seu nome lá fora com uma pequena quantidade de habilidade que está se desenvolvendo, certo? Vai superar ter uma tonelada de habilidade sem ninguém saber sobre a verdadeira ou nenhuma reputação, certo? É por isso que é importante realmente ser capaz de ir lá fora e ter diferentes perfis de mídia social e estar realmente atuando nesses perfis, certo? Pense em um mercado específico que você pode querer segmentar também. Você gostaria de atingir, digamos, a indústria do entretenimento, a indústria do comércio, talvez a indústria de software, software como um serviço, certo? Então realmente pensando sobre o tipo de mercados que você quer segmentar e entender que você pode ser o melhor designer do mundo, mas se ninguém sabe sobre você, então vai estar fora ou não, certo? Então, aqui está um fator chave para poder construir sua marca pessoal é ter os perfis de mídia social ativos e você não precisa estar lá todos os dias, certo? Mas você pode estar lá, você sabe, uma vez por semana ou assim, postar e coisas diferentes. E, no mínimo, você deve ter LinkedIn, Facebook e Instagram, certo? E como eu disse, você não tem que postar todos os dias, apenas certificando-se de que você está lá e mostrando que você está realmente levando a sério. E o que você também pode fazer se você não quiser fazer nenhuma das postagens você mesmo, você pode se inscrever para um programa chamado buffer e Q. E juntos eles custam cerca de 20 dólares por mês. E o que eles fazem é buffer permite que você conecte isso aos seus perfis de mídia social e seja capaz de automatizar a postagem, certo? Todos os dias ou mesmo meses fora e adiantamento, dias de antecedência. E, em seguida, ter todas as suas postagens saindo automaticamente sem que você tenha que tocá-lo. E, em seguida, q dá-lhe a capacidade de procurar conteúdo diferente que está relacionado com o seu tópico, certo? Para o seu mercado, para o seu setor, para projetar, para UX UI. E, em seguida, ser capaz de pegar esse conteúdo e ser capaz de publicá-lo em seu perfil que você tenha conteúdo relevante que está sendo publicado em seus perfis. E assim está mostrando que você está ativo, você está realmente levando isso a sério. E isso vai ser um longo caminho com a sua marca também. E então isso vai ser aqui para a construção de uma marca pessoal. Lembre-se, você quer ser muito ativo nas mídias sociais. Você quer ter certeza e entender que você é a pessoa que está por trás da marca. É você que é a marca. E você quer ser capaz de se colocar lá fora. E mesmo se você não tem uma tonelada de habilidade, certo, apenas ser capaz de mostrar que você tem alguma habilidade e que você está querendo obter seu nome lá fora vai ao longo do caminho contra você ser o melhor do mundo e não ter ninguém a saber de ti, certo? Então isso vai estar aqui para este, e nos vemos no próximo. 88. A importância de ter um site: Neste vídeo, vamos rever a importância de ter um site e um blog. Então, passamos nas outras lições, a importância do branding, a importância do branding pessoal. E aqui vamos falar sobre por que é importante se você está desenvolvendo sua própria marca, se você está fazendo branding pessoal, ter seu próprio site e potencialmente seu blog, que você possa realmente se destacar do resto dos candidatos lá fora se você está olhando para obter um emprego ou se você está fazendo freelancing, Clang consultoria, vamos em frente e saltar para a importância de construir um site. Então, tendo um site, vamos adicionar credibilidade instantânea à sua marca pessoal, certo? Como eu mencionei, se você tem uma marca e você tem em todas as mídias sociais. No entanto, se você não tem um site ou pelo menos um blog, e isso vai fazer muito mais mal do que bem. Você quer um pouco de consistência. Se você tem uma marca, você tem que ter um site, certo? É apenas um dado dado, especialmente agora na era digital de hoje. E então o que você pode fazer é criar um site para sua empresa ou para você mesmo. Gostamos de uma rampa de marca pessoal. Você pode fazer qualquer um ou isso vai funcionar. E então, para um site, é super barato. Quero dizer, realmente, tudo que você precisa é de um domínio, digamos por $10 e depois $5 por mês para hospedagem. Você pode ir para o nome barato, e então WordPress é de graça. E eu acredito que eles lhe dão um certificado SSL de um ano gratuito, então muito barato. deve haver nenhuma razão para você não ter um site, ok? E o que você pode fazer é ir para, digamos, floresta de equipe ou sobre o mercado e obtê-lo tema para, digamos 30 ou 40 dólares. E você pode obter um site rapidamente indo para fibra e dor alguém $10 e dizendo, hey, escute, eu acabei de comprar este tema do mercado, da floresta temática. Eu queria parecer igual à demo, certo? E então o que você vai fazer é ir para fibra e, em seguida, você vai gastar US $10 ou mais e você seria capaz de obter o site instalado exatamente como ele é mostrado na demonstração. E, em seguida, ter um blog também permitirá que você seja capaz escrever algum conteúdo e tê-lo escolhido pelo Google. E isso realmente mostra sua credibilidade e experiência. Então, seus visitantes, certo? Então é um, você tem um cliente em potencial e eles chegam em seu site e eles vêem que você tem algum post no blog e você sabe do que você está falando, certo? Você está fornecendo valor que vai aumentar a sua credibilidade, certo? E então vamos em frente e ir para o meu computador. Vou guiá-lo através de alguns recursos. Eu vou orientá-lo através de que ser aplicada e mercado garrafa para que você possa ver diferentes tipos de modelos lá fora. E, em seguida, também mostrar-lhe alguns recursos em fibra onde você pode conseguir alguém por US $10 ou mais. E, em seguida, onde eles podem colocar seu site em funcionamento em nenhum momento. Ok, então estamos aqui de volta no meu computador e estamos no tema do mercado de automóveis para nós.net. E o que esta plataforma é aqui é onde você pode encontrar diferentes tipos de modelos de sites que você pode usar para diferentes projetos, para diferentes coisas que você está procurando para criar um, digamos que você deseja desenvolver um tipo específico de sites ou talvez um certo tipo de design gráfico. Este é um ótimo lugar anos longe Zimbardo mercado para obter um monte de recomendações, tanto quanto o que está quente lá fora no mercado. Podemos ter ideias diferentes, certo? Você pode olhar aqui diferentes modelos de interface do usuário. Você pode olhar para coisas que são populares, coisas que são, você sabe, top sellers, tanto quanto os diferentes tipos de modelos. Mas realmente este vídeo aqui vai ser mais para um site e nós vamos procurar um site para seu negócio particular, tanto quanto se você vai estar indo para ele do ponto de vista da marca ou onde você quer ser a marca você mesmo. Certo, então vamos ao WordPress aqui. E isso é o que vamos usar até o CMS. E então o que podemos fazer aqui é digitar, digamos agência digital. E isso vai trazer um monte de diferentes tipos de modelos que podemos usar para o nosso site. Então o que queremos é que queremos WordPress. Queremos ter certeza de que ele está no WordPress. Então o que vamos fazer é ir ao WordPress aqui mesmo, está bem? E então vamos olhar para dois aqui. Criativo. Temos tecnologia, temos comércio, temos empresas. Nós podemos quebrar isso por best-sellers são mais bem avaliados. Vejamos os best-sellers aqui. Ok? Então podemos olhar para alguns dos mais vendidos aqui. Podemos ver que ela tem quase 646 mil depoimentos aqui. Então queremos olhar para algo que é quente, que está estourando, certo? E então vamos dar uma olhada neste aqui, o primeiro. Ok, esta é uma ótima segunda olhada nisso. Ok, então este é um modelo muito bom aqui, agradável e direto e tem um monte de elementos diferentes que estamos procurando. Ok, ótimo. E então este é o tipo de processo que você vai passar aqui, tanto quanto para olhar para diferentes tipos de modelos web, diferentes tipos de temas, certo? Porque o que você vai fazer é instalar o WordPress e, em seguida, você será capaz instalar esses modelos na plataforma WordPress real que seu site está hospedado em. E então você poderá personalizar isso manualmente, assim como a demonstração. Então vamos voltar aqui e ver se encontramos outro aqui. Vamos ver o seu multipropósito responsivo total. Vamos ver aqui, vamos à agência e também trazer alguns deles aqui. Então isso é polivalente bem aqui. Eu meio que gosto deste aqui. Apenas confira. Certo, Pré-visualização ao vivo. E assim eles têm diferentes tipos de pré-visualizações aqui que você pode usar para seu site específico. Ok, então aqui está este é para hospedagem. Então, obviamente, você gostaria de mudar isso para o que você está procurando fazer lá. Mas isso é mais da interface do usuário aqui, o layout, o design. Isto é algo que você gosta e você pode obviamente usar algo assim também. E assim apenas passei algum tempo aqui olhando através dos diferentes tipos de temas. E se algum desses ressoar com você e se conectar com você para sua agência digital, se você está executando algo onde você vai criar uma marca como um negócio real, certo? É uma entidade separada. Ou você vai fazer marca pessoal e ter sua marca realmente ser centrada em torno de você, certo? Então você quer ter como agência XYZ ou XYZ criativa ou qualquer nome de marca que você quiser. Se você vai seguir esse caminho e se você vai seguir a marca pessoal ao redor, então você pode muito bem apenas registrar seu nome pessoal domínio do Azure, certo? Então este é um recurso rápido aqui onde você vai ser capaz de encontrar diferentes modelos de sites, diferentes temas para o seu site em particular. E então também se você quiser olhar para alguns modelos diferentes aqui para diferentes idéias, certo? E então vamos passar aqui para fibra neste é onde você iria realmente ter o tema instalado em seu site. Então você compraria os arquivos reais daqui, do mercado de convidados. E então você iria aqui para fibra e você pediria a um desses caras $510 para instalar o tema real no site que você tem lá, assim como a demo, certo? E assim como você pode ver aqui, para cinco a 10 dólares para a maior parte vai ser, você sabe, US $10 ou mais. E apenas ter esses caras instalado o tema em seu site WordPress, assim como ele parece tão longe quanto o tema aqui, certo? E então você pode personalizá-lo manualmente agora. E se você não quiser passar todo o tempo olhando através de modelos diferentes, temas diferentes. E você quer simplesmente desistir de algo em funcionamento muito rápido, muito facilmente, e então ser capaz de modificar e ajustar na estrada. E então eu vou te mostrar em outro vídeo. Agora orientá-lo por todo o processo de registro de um domínio, obter hospedagem, obter seus certificados SSL e, em seguida, instalar um tema gratuito específico em seu site para que você possa começar a funcionar. Então isso vai estar aqui para este vídeo e nos vemos no próximo. 89. Criando um logotipo: Ok, então neste vídeo, nós vamos percorrer através da criação de um logotipo muito rápido e fácil. Então isso vai ser através do canva.com aqui, Canadá é uma ótima ferramenta para usar para diferentes tipos de design, diferentes tipos de apresentações. Você pode criar logotipos, você pode criar diferentes tipos de animações e muitos tipos diferentes de designs que são facilmente criados através do Canvas. No entanto, isso é mais para um iniciante. E se você quiser brincar com Canva, eu recomendo que você faça para que você possa começar e aprender a fazer alguns designs diferentes, porque eles também têm um monte de modelos aqui. Então vamos em frente e pular aqui e criar um logotipo para o nosso site. Então você pode entrar aqui e digitar diferentes tipos de logotipos. Você pode ver aqui há alguns jogos de relações públicas, há alguma profissão. Existem algumas para diferentes marcas aqui. Vamos até fazer algo assim. E o que podemos fazer, podemos mudar em torno de alguns deste texto. Então deixe-me ir assim. Quero um tipo diferente de fundo aqui. Quero que seja branco. E depois quero que isto seja lavado. Vamos fazer isso primeiro. Quero mudar essas cores e quero que elas sejam roxas. Ok? Então isso mudou. Agora vamos mudar isso para branco aqui. Ok? E então vamos mover isso. Eu não gosto deste texto aqui, então vamos mudar este texto aqui. Vamos apagar. Ok? E então eu gosto disso aqui. Então o que vamos fazer é mover isto para cá, está bem? E depois fechamos isto assim, certo? E vamos tentar algo aqui. Vamos para um grupo. E eu quero mudar isso para cá. Ok, lá vamos nós. Então, assim, bem aqui. E eu quero fazer isso um pouco maior. E então agora vamos trazer agora algum texto. Vamos ver aqui, bem aqui, assim. E a empresa é chamada de projeto da bomba, então o projeto do vínculo, ok, algo assim, é excluir aquilo. Então podemos arrastar isto, fazer este k. menor e vamos ver se conseguimos fazer isto. Há alguma maneira de tornar isto mais grosso aqui? Tenho certeza que há. Mas veja aqui. Ok, agora isso deve ficar bem, apenas bem. E então podemos usar um tipo de texto um pouco mais magro. Talvez algo assim ou assim. Vamos ver se podemos mudar isso aqui. Um pouco disso. Ok, então vamos ver aqui, ok, então algo assim ficaria muito bom. Vamos voltar e ir a algo um pouco mais grosso. Então vamos para algo assim. Projeto da bomba. Ok? Queremos algo um pouco mais grosso como isto. E assim podemos fazer SQL como este. Torná-lo maior. Ok, algo assim, agradável e simples. Temos aquele preto ali, e isto pode ser muito melhor. Estou apenas criando isso para fins de amostra para que você possa ver como isso ficaria. Então você pode ver como nós iria configurar um logotipo particular e como é fácil em símbolo para criar um. Ok? Ok, então vamos ver como isso parece. Se fosse capitalizado. O projeto da bomba. Acho que podemos fazer assim, o design do laço. Ou podemos ir assim. A capital parece um pouco melhor, então vamos assim. Simpático e simples. Vamos trazer isso para fora um pouco mais. Ok, então vamos baixar PNG, baixar isso aqui. E agora estamos prontos para usar, prontos para carregar o logotipo para o site específico. Então vamos em frente e saltar para o site e realmente configurar tudo. No próximo vídeo, instalaremos o logotipo e prepararemos o site. Então isso vai estar aqui para este, e nos vemos no próximo. 90. Configuração de sites etapa a passo: Ok, então neste vídeo, eu vou orientá-lo através de como registrar um domínio, como configurar sua hospedagem, como obter o certificado SSL para o seu site, e como configurar tudo para que você possa ter um site pronto que você não tem que pagar, tanto quanto ter que comprar tema, você vai ser capaz de obter acesso a um reitor livre aqui. E eu vou te guiar passo a passo sobre como preparar tudo. Então a primeira coisa que você vai precisar é de um domínio. Um domínio é essencialmente um endereço web. Esse é o seu site realmente vai ser hospedado em, certo? Então a primeira coisa que precisamos fazer aqui é ir para a busca de nome de domínio aqui, ok? E então nós queremos digitar aqui um que eu já tenha configurado a bomba designs.com. E então nós vamos aqui e vamos adicionar este o carro e você pode ver que custa $9 por ano. E então vamos passar e realmente comprar isso aqui é chamado de checkout. E então eu vou em frente e rapidamente passar por isso aqui. Ok, então nós passamos e passamos pela página de checkout até comprar o domínio, você quer ir para isso. Você pode fazer isso sozinho, mas basta seguir os passos. Adicionando suas informações de pagamento e, em seguida, você poderá comprar esse domínio. Então, uma vez que você compra esse domínio agora você precisa de hospedagem, certo? Você precisa ser capaz de hospedar esse site on-line. E então o pacote que eu recomendo vai ser este aqui. O 488 ao mês, muito barato. Isso significa que $5 por mês não é nada certo para ser capaz de hospedar seu site on-line. E isso é necessário, certo? Porque cada site lá fora no mercado tem hospedagem, certo? Eles são hospedados em um servidor para que eles estejam ao vivo. Então, pegue esse aqui. Eu recomendo para 88 chamado Chip tem um ótimo serviço ao cliente para orientá-lo e ajudá-lo a resolver qualquer tipo de problemas ou problemas que você está enfrentando. E então você deve estar pronto para ir. Então você quer pegar isso aqui. E então você também quer pegar o certificado SSL, certo? Você precisa disso em seu site e isso aqui em cima. Se você olhar para isso, você vê que há um certificado lá e não há um lá, então ele vai mostrá-lo como não seguro. Então este é o HTTP aqui que permite que o site seja protegido tanto quanto qualquer tipo de intrusão. E também protege os usuários quando eles estão pousando no site para que eles se sintam mais protegidos e seguros, certo? Então você pode escolher um desses aqui também. Eu iria com o certificado SSL positivo aqui. E você pode comprar isso apenas por um ano. E quando você vem aqui, isso é automaticamente definido para cinco anos. No entanto, você quer quebrar isso para 234 seja lá o que for, certo? Você pode apenas ir com um aqui e então torná-lo agradável e simples. Confirme o pedido. E então eu vou passar pelo processo de pagamento aqui. Ok, então você comprou o domínio, você comprou hospedagem, e agora você realmente comprou o certificado SSL, certo? Então, agora o que você quer fazer é entrar aqui e certificar-se de que seu domínio está configurado para os servidores de hospedagem Name Cheap. E eu vou te mostrar como fazer isso aqui. Então você quer ir para a sua conta aqui você quer ir para o painel. E então você quer ir aqui para o seu domínio ali mesmo, vá para gerenciar. E, em seguida, vá para os servidores de nomes e vá para Nome de hospedagem web barato. Clique em OK e você deve estar pronto para ir lá. Então agora isso está dizendo aos servidores de hospedagem Name Cheap que você quer seu domínio seja hospedado nos serviços de hospedagem ou que você acabou de comprar, certo? E se você tiver alguma dúvida quanto à hospedagem, como configurar isso, como configurar o cPanel, todas essas coisas. Você pode entrar em contato com o suporte de vida que eles têm que renomear barato e eles vão ajudá-lo. Eles vão te guiar por tudo passo a passo. Ok. Então, uma vez que configuramos isso aqui, agora queremos ir para o cPanel e queremos instalar o WordPress. Ok, então o que eles vão fazer é você vai dar-lhe um tipo específico de link que vai mostrar-lhe e dizer-lhe, hey, escute, este é o lugar onde sua hospedagem real vai ser configurado no cPanel. E o que você pode fazer um monte de diferentes modificações e onde você pode instalar o tema WordPress real. Então vamos em frente e assinar para este aqui. Ok, então esta é a tela que você vai ver. Uma vez que você entrar no cPanel, você vai obter as informações de login de nomeado barato. Eles vão enviá-lo para você e enviar um e-mail. Você tem toda essa informação disponível. Então é aqui que vamos instalar o WordPress CMS e também o certificado SSL. Então, a primeira coisa que queremos fazer aqui é que queremos descer aqui e ir para o WordPress, e é ir para a instalação do cliente. Está bem? Certo, então vamos selecionar nosso domínio aqui. Vamos ver aqui, bem aqui, bem ali. Ok, então nós queremos deixar este HTTP porque ele irá automaticamente encaminhar para o HTTPS quando instalamos o certificado SSL. Então vamos deixá-lo aqui assim. E podemos deixar isso, digamos, a empresa de design de bombas. Nós, vamos descer aqui. Nós fornecemos UX, UI e design gráfico, certo? Algo agradável e simples. E então aqui, o que você pode fazer é você pode definir seu nome de usuário e sua senha. Vou essencialmente criar um aqui do zero. Agora você pode ter isso mudado aqui. Você pode fazer assim e ele irá criar automaticamente um para você. Vou esconder-me aqui, e vou datilografar aqui. Ok, então isso deve ser bom para ir logo ali. E depois descemos aqui. E então vamos para Instalar. Agora você deseja que isso seja enviado para o seu e-mail até os detalhes da instalação. Ok. Então eu vou colocá-lo aqui, meu e-mail e ter este Go Install aqui. Ok, então parece que eu preciso que a senha seja mais longa, então vamos adicionar uma senha diferente aqui. Certo, isso deve ser bom. Ok, então agora estamos prontos para ir. Então agora este CMS, certo, o WordPress está instalado em nosso domínio. Ok, acabei de me lembrar antes de realmente instalar esses modelos, onde queremos fazer é configurá-lo para o certificado SSL. Ok, então aqui para nomear SSL barato, vamos clicar sobre isso. E, em seguida, vamos adicionar no certificado para o domínio. Então vamos instalar aqui. E então queremos selecionar o domínio. Perfeito. E então vamos instalar o certificado. E então ele irá automaticamente encaminhar para o HTTPS. Ok, então não devemos ter nenhum tipo de problema com isso. Este é o backend do WordPress. Você pode ver aqui é apenas um tipo simples de modelo aqui. E então o que queríamos fazer era que queríamos ir, há algumas coisas que queremos fazer aqui. Queremos ir para as configurações e queremos ir para a leitura. Queremos fazer uma estática, a página de exemplo aqui. E depois queremos ir para permalink. Quero ir para o nome da postagem. Ok, e então o que vamos fazer é ir para plug-ins e vamos adicionar um plug-in grátis aqui, Astra. E então isso vai ser essencialmente onde temos o elemento rasgado instalado aqui, tanto quanto um construtor web e também tipos livres de modelos que podemos usar também. Então vamos agora para a aparência é ir para temas. Você pode ver que esta é a equipe que temos aqui. Então, agora, se formos até os modelos iniciais, ok, selecionamos um tipo de construtor de página. Você pode ir para o elemento dois estão aqui. E agora temos acesso a um monte de modelos diferentes que podemos pagar ou que podemos acessar gratuitamente. Vamos descer aqui. Vamos dar uma olhada em alguns desses. O C aqui, tem este aqui. Há um aqui que eu gostaria, tanto quanto o design, quanto para ser livre e, e nós definitivamente podemos modificar isso e ajustado para o negócio. Então, vamos descer aqui. Acredito que foi para o design. Então, algo assim. Isto é perfeito aqui. Então todas essas páginas aqui serão instaladas. A página inicial, a página sobre e, em seguida, os serviços e o Fale Conosco. Então tudo está literalmente definido para nós. Tudo o que precisamos fazer é adicionar nossas próprias informações. Então isso é extremamente poderoso aqui. E então o que vamos fazer aqui, vamos instalar este modelo aqui. E então vamos criar um logotipo. E vamos configurá-lo como se fosse um negócio real. Ok, então vamos em frente e importar o site completo. E importa tudo aqui. Ok, então o site está instalado aqui. Vamos em frente e dar uma olhada em como o site parece. Ok, lá vamos nós. Este é o site. E é incrível como isso é instalado automaticamente por si só. E onde temos todas essas páginas diferentes aqui já prontas para ir. E então nós temos a casa sobre serviços contato teria o Pedido Cotação aqui em cima. Então vamos em frente e editar este ano. Vamos editar com um mentor. E esta vai ser a página inicial aqui. E o que queremos fazer é adicionar um pouco de espaço aqui em cima para que possamos colocar em nosso logotipo, então vamos fazer assim bem ali. E então vamos para avançado aqui. E nós vamos, digamos cerca de 115. Ok, note como no exterior nesta pequena área bem ali. E então poderemos colocar nosso logotipo aqui. Então vamos para Salvar ou atualizar aqui. Ok, então estamos bem lá. E agora o que vamos fazer é ir em frente e mudar algumas coisas aqui. Vamos apagar isto aqui. Vai apagar assim. E não precisamos disso aqui também. Como você pode ver aqui. Este é um arrastar e soltar muito simples. Digamos que aqui criamos sites de negócios incríveis, certo? Ou digamos aqui, design gráfico. Na verdade, vamos em frente e deixar assim. Criamos o incrível Lee, lindo. Como mudar isso aqui. A Kay? Assim como este. Ok, nós criamos sites incrivelmente bonitos, ok? Simpático e simples. Como excluir isso aqui. E vamos mudar isso para o meio, assim mesmo. E nós podemos realmente mover isso um pouco mais alto. Deixe-me atualizar aqui em baixo. Certo, então o que podemos fazer, podemos ir aqui e mover isso para cima assim. Ok, agradável e simples. E depois vamos ao “Save”. Certo, queremos atualizar. E então é assim que vai parecer. Então, se formos para duplicar aqui, podemos ver como vai ficar. Ou podemos ir assim. É assim que o site parece. Ok, então o que queremos fazer aqui é ir para personalizar. Ok, então nós queremos ir para o cabeçalho aqui, e nós queremos ir para a identidade do site. E queremos adicionar um logotipo aqui, certo? O logotipo que conseguimos criar no Canvas ou simplesmente arrastá-lo para aqui. E o que queremos fazer é editar isso e queremos cortá-lo. Então vai ser assim. Simplesmente assim. E vamos clicar nisso. E que atualizações. Está bem. E então vamos para Select. E vai pedir-nos para o fazer de novo. Vamos para cortar a imagem. Certo, então vamos assim. E vamos remover esse erro. Vamos, removemos isso. E assim podemos fazer isso um pouco maior. Vamos voltar à identidade do site. Aqui vamos nós. Vamos torná-lo um pouco maior. Lá vamos nós. Algo assim ali, o projeto da bomba, certo? E tem que publicar. E agora temos o nosso site com o nosso design aqui, com o nosso logotipo. Temos o contato sobre serviços. E então você só entra aqui e essencialmente clica em qualquer área que você deseja atualizar. Então vamos sair dessa e voltar para onde tínhamos, as páginas. E assim a página inicial aqui edita com Ella Mentor. Certo. Então você viria aqui e editaria todos os lugares diferentes até aqui em baixo, como podemos ajudar? Talvez você queira apenas ter design, desenvolvimento e marketing ou e-commerce ou o que quer que seja, certo? Você pode usar esses ícones diferentes aqui. Você pode mudar isso. Você pode remover isso. Você pode adicionar uma informação aqui em baixo, e é aí que você vai encontrar essa informação lá. Está bem. E então aqui, estes são os diferentes tipos de áreas que você pode personalizar para este tema. Você também pode descer aqui, cabeçalho, rodapé e blocos. E isso vai permitir que você ajuste os blocos no rodapé. Então vamos dar uma olhada nisso aqui agora mostrar a você como aqui, mudar isso aqui, o logotipo, colocar no endereço da empresa, informações da empresa, certo? É assim que você vai editar isso aqui, e também esta área aqui. Então isso vai ser um aqui para o site. vez, este é um site agradável e simples que é literalmente de graça. Você tem todas essas páginas. Tudo o que você tem que fazer é colocar essa informação que você quer para o seu negócio particular, para si mesmo, certo? E então altere e modifique algumas dessas seções. É realmente apenas clicar, arrastar e soltar. E agora você tem todos esses elementos diferentes aqui. Você literalmente apenas clica em uma dessas áreas e você pode editar o conteúdo, certo? Você pode olhar para coisas diferentes que você pode arrastar em seus diferentes elementos, certo? E tudo super simples. Basta clicar nele. Você pode editar, você pode remover coisas, você pode adicionar coisas, certo? Então este vai ser um bom site aqui que você pode projetar e configurar, certo? Para o seu negócio em particular. Se você está fazendo isso até criar uma marca, ou se você está fazendo isso para, você sabe, realmente configurá-lo para si mesmo como uma nova marca pessoal. Lembre-se, cada página que você vai precisar fazer isso aqui, tanto quanto ter o menu lá em cima para seu logotipo onde você vai estar indo para estilo ou realmente para vance aqui. E você quer ir para cerca de 151? Acho que foi ou 150, algo assim. Certo? Baseado no que fizemos anteriormente. E você quer ter aproximadamente a mesma quantidade de espaço aqui que você tem na página inicial para que você possa ter seu logotipo aqui, certo? Então essa vai ser toda a seção aqui para o site. Brincar com isso. Você pode projetar isso como quiser. Você pode ver aqui muitos desses elementos já estão incluídos aqui. Então você pode simplesmente adicionar em seu próprio conteúdo a essas páginas. Ok, então isso vai estar aqui para a configuração do site no layout, e nos vemos no próximo. 91. Templates de UI: Ok, então estamos aqui na rede forced.net. E no outro vídeo, procuramos um site para a nossa marca. Se estamos fazendo marca pessoal para nós mesmos, certo? Ou se estamos fazendo o negócio real branding onde vamos ter um negócio real ser a marca versus nós mesmos. E agora neste vídeo, eu quero rever os diferentes tipos de modelos aqui que você pode usar como quadros de referência para seus projetos específicos. E especificamente entrando aqui nos modelos de interface do usuário. Porque o que você pode fazer aqui é essencialmente olhar para fora quais são os tipos mais quentes de modelos de interface do usuário que estão lá fora no mercado. Então você pode tornar seu processo de design muito mais fácil e muito mais suave, certo? Porque você não precisa reinventar a roda. Você só tem que olhar para o que é quente, o que está aparecendo lá fora e ser capaz de adicionar seu próprio toque único a esses projetos específicos que você já sabe que são realmente quentes no mercado, certo? Então vamos aqui para os modelos de interface do usuário. E você pode olhar para todos os diferentes tipos de modelos do Photoshop, Sketch sigma, Adobe XD, certo? Estamos trabalhando principalmente com o Adobe XD. E assim você pode ir até aqui e olhar para diferentes tipos de modelos em toda a linha se você quiser olhar para, digamos, entrega de alimentos, UiKit para celular. Digamos que você tem um cliente potencial ou talvez você queira entrar no tipo de interface do usuário de design para diferentes tipos de aplicativos móveis, então você pode pegar este kit particular aqui e ser capaz de usá-lo como uma referência, talvez projetar uma marca inventada ou composta tipo de aplicação. E você pode realmente usar isso como seu portfólio de design. Muito, muito poderoso aqui, ok, então o que você será capaz de fazer é olhar para alguns desses diferentes screenshots e ser capaz de, digamos, comprar este framework particular, certo, este tipo de design e ser capaz de usar para o seu trabalho real com seus clientes. E também ser capaz de talvez criar algo do zero até uma marca usando este tipo de interface e design e ser capaz de usar isso como seu portfólio real, que vai percorrer um longo caminho porque e isso é uma das maiores coisas que os clientes querem olhar antes deles, você sabe, escolhendo trabalhar conosco. Ei, o que você fez no passado? Qual é a sua experiência? Resumindo alguns projetos. Então, essa é uma ótima maneira de você poder mostrar suas habilidades de design aproveitando os tipos de interfaces de usuário existentes, certo? Então vamos descer aqui e olhar para alguns dos diferentes layouts aqui. Você pode ver que tudo aqui já está configurado no design. Você pode simplesmente usar esses modelos específicos e ser capaz de inserir informações diferentes. Então é muito, muito poderoso, certo? E é apenas algo que você pode usar em seu portfólio específico que é tão poderoso. Então, tão poderoso, não pode enfatizar isso o suficiente. Então você pode ver aqui isso é do lado do cliente. Vamos ver aqui. Selecione a comida de restaurantes. Porque tenha em mente, muito, muito poucas empresas. Ou, você sabe, as empresas lá fora realmente vêm com algo único e criativo do zero. Há um monte de modelos pré-fabricados, projetos que já estão configurados e meio padrão. E então o designer irá modificar e ajustar e adicionar seu próprio toque único para ele e ser capaz de torná-lo seu próprio. No entanto, na maior parte, muitos desses projetos já estão disponíveis, 30 feitos. No entanto, um cliente obviamente não vai vir aqui e olhar para todos esses diferentes modelos de interface do usuário, taxa de estruturas de design de interface agradável. Eles vão a um especialista como você, certo? Um designer de UX UI para fazer tudo isso para lá pode porque você entende isso. E, basicamente, você sabe, você pode olhar para todos os diferentes recursos aqui, funcionalidades. E então ser capaz de comprar isso por US $60 e ser capaz de ter isso, você sabe, em seu portfólio, certo? E então vamos voltar para cá. Vamos dar uma olhada em outro aqui. Este é o modelo Adam e UI Kit para o site. Então isso é para o design do site aqui. E você pode dar uma olhada em alguns outros tipos diferentes de sites configurados aqui onde eles têm os componentes aqui, a navegação que você pode ver, então eles têm os diferentes elementos também. E, em seguida, o cabeçalho aqui e todos os diferentes tipos de elementos. E lembre-se, você não está criando coisas do zero muito poucas vezes um U realmente criando algo que é original, completamente novo, indiferente, certo? Um monte de designers, o que eles vão fazer é eles vão conseguir um trabalho particular que vai vir em seu caminho embora, ter uma idéia sobre o que eles estão pensando. Mas eles estão sempre, na maior parte, indo para fora e olhando para o que já está disponível no mercado e obtendo alguns quadros de referência, olhando para o que está lá fora que já está funcionando, indo para fora e olhando para o que já está disponível no mercado e obtendo alguns quadros de referência, olhando para o que está lá fora que já está funcionando, parece ótimo, isso parece fantástico. E então lá será capaz de modificar e ajustar e torná-lo seu próprio, mas você realmente não precisa, como eu disse, reinventar a roda. Você pode pegar muitos desses projetos e torná-los seus próprios. Então estes são os, todos os diferentes tipos de imagens e páginas. Se você estiver indo para acertar, aqui está um painel, então este é um lugar fantástico para você vir aqui, obter alguns modelos tanto quanto para o design da interface do usuário e ser capaz de criar alguns de seus próprios projetos você mesmo, talvez fazer algumas marcas ou qualquer outra coisa, e então ser capaz de usar isso como seu portfólio porque é apenas enorme, enorme potencial aqui para você ser capaz de ter um monte de projetos diferentes em seu portfólio diretamente fora dos portões Então você pode começar a conseguir alguns empregos, certo? Porque, como eu disse, muitas pessoas que estão procurando diferentes trabalhos de design gráfico UX querem ver seu trabalho anterior, e essa será a melhor maneira de você conseguir fazer isso, certo? E mostre isso. Aqui estão alguns tipos diferentes de modelos de interface do usuário também. Você pode passar algum tempo olhando para essas cenas que um é meio que ressonar com você mais e ser capaz de tomar estes e adicioná-los em seu portfólio. Então, isso vai estar aqui para os modelos de interface do usuário e vamos vê-lo no próximo. 92. Modelos de logotipos: Ok, então neste vídeo vamos rever modelos de logotipo. Então nós estamos de volta aqui na floresta, assim como eu mencionei nos outros vídeos, este é um recurso tão grande para você poder obter referências diferentes, diferentes tipos de idéias de design, e tipo de ver o que o mercado é, você sabe, até o momento no que está aparecendo e o que é muito popular. Então vamos até aqui e eu quero mostrar-lhe a ferramenta global maker aqui, que irá automaticamente cuspir um logotipo para você com base em seu mercado ou seu nome de empresa no tipo de design. Você poderá usar isso como referência para criar seus próprios logotipos do zero, ou alguns deles como referências de design. Ou talvez apenas ter este logotipo criado apenas usando esta ferramenta. Muito, muito simples. Então vamos em frente e pular aqui. Certo, como você vê aqui, tudo o que precisamos fazer é digitar uma marca, digamos ABC, UX, design de interface do usuário. Ok? E depois vamos para o próximo. E depois descemos aqui. Escolhemos design, certo? Somos uma empresa desenhada. E então vamos. E então o que isso faz é cuspir um monte de diferentes tipos de recomendações locais com o nome da empresa, certo? E você pode escolher diferentes tipos de gráficos aqui. Você pode adicionar elementos diferentes. E ele escolhe para o seu tipo de design específico. Digamos que você tenha um cliente que pode estar em um setor diferente. Talvez eles estejam no campo médico, talvez haja padaria, talvez eles sejam um salão de beleza ou, ou algo diferente obviamente do que você é até uma agência de design digital, certo? Então você pode olhar por aqui, olhar para diferentes tipos de modelos de logotipo, diferentes idéias de design. Você pode pegar estes e correr com eles. Então eu não tenho certeza quanto ao preço aqui. Eu acho que pode haver um pequeno custo, no entanto, ser capaz de obter este tipo de modelo aqui para 5.20, $10 dólares no máximo, eu diria que ainda é completamente valioso. Então venha aqui. Você pode editar o texto. Você pode editar diferentes tipos de esquemas de cores. Você pode adicionar outro gráfico, você pode alterar o plano de fundo. Você pode fazer tanto aqui com esta ferramenta em particular. E vamos tentar um tipo diferente de negócio que dizia que estávamos trabalhando com um salão de beleza e eles queriam uma renovação completa do logotipo aqui. Então vamos para XYZ e salão de beleza, ok, e então vamos descer aqui. Beleza Sco. E então ele vai se aplicar. E então vamos ver o tipo de desenhos diferentes que isso recomenda. Tão perfeito ksi, só leva em conta o nicho, certo? O mercado, a indústria, e é capaz de criar diferentes logotipos com base no que a marca está centrada em torno. Então isso é tão fantástico aqui. Essa é uma ótima ferramenta. Você pode usar isso para seus próprios projetos. Você pode vender logotipos facilmente começando em fibra por, você sabe, 102040, US $50 o pop e ser o que é um bom design aqui? E você sabe, facilmente começar a construir seu portfólio, certo? Porque lembre-se, é tudo sobre dar a você um portfólio construído para que você tenha algum trabalho para mostrar às pessoas. E especialmente se você quer conseguir um emprego ou você está apenas olhando para obter um cargo em uma organização. Você quer ser capaz de colocar em seu currículo que você experimentou, que você tem diferentes projetos de design. Você tem um portfólio, e obviamente a mesma coisa em trabalhar com clientes. Eles querem ter certeza de que você foi capaz de fazer algo no passado e você sabe o que está fazendo, certo? Então, apenas um vídeo rápido aqui repassando os diferentes modelos de logotipo que você pode ter acesso no mercado. E quão rápido e simples você pode criar logotipos muito bonitos e incrivelmente bonitos em questão de minutos. Então isso vai estar aqui para modelos globais, e nos veremos no próximo. 93. Como criar um e-mail: Vamos em frente e pular. A plataforma número um que eu recomendo que você use para configurar seu e-mail comercial será o G Suite muito barata e muito fácil de configurar. Então, vou guiar-te passo a passo como fazemos isto. Então, a primeira coisa que quero mostrar aqui é o preço. O melhor aqui que você vai usar se você está apenas começando, vai ser o ano básico, $6 por mês. Você recebe o e-mail de negócios, você recebe videoconferência, calendários de mensagens de equipe, 30 GB de armazenamento ligado. Então você obtém apoio e obtém diferentes controles de segurança e administração, o que vale a pena. Assim, você também recebe uma avaliação gratuita de 14 dias. Recomendo que você se prepare, eu vou ir em frente e te guiar sobre como fazer isso rolar. Então, a primeira coisa que faremos aqui é ir ao G Suite dot google.com. E então nós vamos para começar. Ok? E então queremos colocar no nome da empresa aqui e isso é colocar a empresa ADC. E, em seguida, se você quiser colocar apenas você ou para negar funcionários dependendo de quantos funcionários você tem. Então vamos lá, só você a seguir. Quero colocar o seu primeiro nome. Vou puxar Kuan Galvin e colocar meu endereço de e-mail em um fungo upon.com. E depois o próximo. E então você coloca sim, eu tenho um que posso usar. Agora, se você não tem um domínio e deseja comprar um, você pode ir em frente e fazê-lo através dele. Mas eu recomendo que você vá e compre um domínio através Nome barato, muito fácil, configuração muito simples. Então, Tenex, seu clients.com. Próximo. Ok, ótimo. E depois vamos para a próxima. E então é aqui que vamos criar nosso nome de usuário. Então nós estamos indo para ir para, vamos ir um em qualquer que nossa URL está lá e, em seguida, senha. Deseja definir uma senha? Posso não ser um robô? Vamos ao que temos que fazer isso aqui rapidinho. Concordo e continuo. Vamos precisar dele, verifique o domínio. E eu vou te mostrar como fazer isso também. Ok, então é aqui que precisamos selecionar o plano flexível ou o plano anual sobre plano flexível vai ser o melhor. Agora, com esta página, você precisa inserir as informações do seu cartão de crédito. Vou em frente e fazer isso bem rápido. Tudo bem. Então, enviamos nossas informações de pagamento e estamos prontos para passar para a próxima etapa. Então é aqui que vamos verificar nosso domínio na configuração de nossos registros MX. Agora, quando você está verificando seu domínio, eu recomendo que a maneira mais rápida e fácil de configurar isso é adicionar um registro TXT. Vou mostrar-te como se faz isso. Portanto, certifique-se de que você nomeou configuração de hospedagem barata. E eu vou mostrar a vocês onde você vai adicionar esse registro TXT em particular. Então nós queremos ir para baixo aqui e ir para eu ter logado com sucesso em seu cPanel. Sempre que você recebe hospedagem com nome barato, você vai receber um e-mail. E eles vão fornecer-lhe os detalhes de login para a sua publicação barata sem nome. E daí você vai para o Editor de Zonas e então você vai adicionar o registro. Vou mostrar-te como se faz isso. Então ele está dizendo aqui para ir para o nome particular t postando cPanel. Ok, ótimo. E então você vai obter esse código de verificação do site do Google em particular. E você vai querer adicionar isso como um registro. E deixe-me mostrar-lhe como você faria isso. Então estamos aqui no cPanel e você quer ir para o Editor de Zona. Tudo bem? E seu cPanel do meu nome, barato. Tudo bem, então estamos aqui no editor de zona de 10 polegadas ou clientes e queremos adicionar este código aqui agora. Este é um Caudell anterior foi adicionado. Então vamos em frente e adicionar o novo. Vamos copiar o que vamos salvar aqui. Ok, ótimo. Então vamos ver este registros, Verificar domínio e configurar. Agora isso vai levar um tempo para carregar, mas esse é o processo que você vai fazer. Agora, vou mostrar agora o que você vai fazer a seguir, que é adicionar os registros MX e, e isso é realmente importante porque vai vincular seu e-mail do G Suite à sua hospedagem específica. Então deixe-me mostrar-lhe como você vai configurar isso aqui. Então, aqui no Editor de zona nós adicionamos um registro TXT e queremos ir para o registro MX. E você vai querer adicionar esses códigos específicos aqui também na prioridade um, prioridade cinco. Agora você pode facilmente encontrar esses registros MX literalmente indo para o Google. Se formos ao Google MX Records, lá vamos nós. Então você pode facilmente apenas copiar isso aqui, mas esses são os que estão indo para ir no cPanel particular aqui, certo? Você vai ao Amex adicionar esses registros MX em particular. E então você deseja ir para o TXT e verificar o domínio aqui em baixo. Então, é basicamente assim que você vai querer obter essa configuração e você vai para, volta para seus domínios aqui. Isso, ele diz MEU digital, mas eu realmente vou querer ter certeza de que você está selecionando nomeado web hosting DNS barato, ou que ele se propaga corretamente lá. Portanto, esse é essencialmente o processo para que você possa criar um e-mail comercial para sua empresa específica por meio do G Suite apenas US$6 por mês, altamente recomendável. Então é isso para este vídeo aqui, e nos vemos no próximo. Obrigado. 94. Networking de o centro e Don'ts: Neste vídeo, vamos rever a rede. Agora, a rede de contatos é extremamente importante, quer você esteja indo para a rota de freelancing ou se você está indo para procurar um emprego agora, trabalhar pode abrir uma tonelada de portas para você. Então, nesta lição, vamos analisar como alavancar sua rede existente, como trabalhar agora da maneira certa. Algumas das coisas e não fazer, como ter certeza de que você está se apresentando do tipo certo de maneira quando você está tentando se envolver e trabalhar em rede e como evitar representar-se no tipo errado de peso. Então vamos em frente e saltar para a rede. Então aqui estão alguns pontos-chave quando se trata de rede. Construir uma rede é uma das coisas mais importantes que você pode fazer para sua carreira. E isso é se você vai ou não entrar em freelancing, você vai procurar um emprego. É sempre sobre conhecer o tipo certo de pessoas que podem ajudá-lo a apontar para a direção certa, certo? E o LinkedIn é, de longe, o melhor lugar online para a rede. Você pode ter conexões diferentes. Você pode ter pessoas diferentes que podem estar conectadas a pessoas que você deseja obter na frente. E você pode alavancar sua rede existente para ajudá-lo a colocar o pé na porta, por assim dizer, certo? E como diz o velho ditado, não é o que você sabe, é quem você conhece, certo? E obviamente você quer ser capaz de ter habilidades. Você quer ser capaz de ter o conhecimento, a perícia, certo? Muitas vezes são as pessoas com as quais você é capaz de se conectar e interagir e a rede que é capaz de abrir um monte de portas para você que você pode não ter tido antes. Então, uma das principais coisas a ter em mente aqui com a rede é, muitas pessoas fazem isso da maneira errada. Eu não sei se você já esteve em algum tipo de evento de rede ou já fez ou tentou networking antes. Mais frequentemente do que não as pessoas, o que eles vão fazer é que eles sempre vêm a algum tipo de evento ou eles vão sobre a rede de uma maneira muito egoísta. Então fale sobre, ei, isso é o que eu quero que você faça, ou você pode fazer isso por mim ou tudo sobre seus próprios interesses egoístas? Bem, você realmente precisa tomar a abordagem oposta a isso porque é isso que vai permitir que você leve seu jogo de networking para o próximo nível. Você quer olhar para encontrar onde você pode adicionar valor para o indivíduo, certo? Digamos que você esteja tentando se conectar com alguém em sua rede ou alguém fora da sua rede que talvez tenha uma conexão com alguém dentro da sua rede, certo? Você sempre quer se aproximar de, ei, o que posso fazer por você? Como posso agregar valor a você e depois ser capaz de pedir-lhes um favor, certo? Porque mesmo que não faças o que lhes dizes que estás a recomendar ou que estás a oferecer, certo? Só a oferta sozinha vai ser um longo caminho. E especialmente com você sendo capaz de ir no perfil deles, talvez procurá-los online e mencionar, ei, escute, eu notei que você faz X, Y e Z. Eu procurei você, certo? Deixá-los saber que você realmente gastar algum tempo para pesquisá-los, para olhar para o seu passado é realmente vai ser um longo caminho. Você quer ficar longe de apenas enviar mensagens que têm puro interesse próprio. Ou não há nada em troca porque ninguém quer se sentir usado, certo? E quando você está indo com seu próprio interesse egoísta, então isso é realmente afastar e afastar as potenciais relações e oportunidades de networking que podem estar vindo em seu caminho. Então esta é uma rápida visão geral aqui da rede. Lembre-se de sempre analisar o valor quando você está se conectando com as pessoas e quando estiver trabalhando em rede, fazendo perguntas sobre elas, sobre o que elas são, sobre seus negócios. E então, inevitavelmente, você receberá perguntas sobre você e seu negócio também. E, na maior parte, se você realmente quer levar seu jogo de rede para o próximo nível, concentre-se puramente no LinkedIn e comece a construir seu perfil. Comece a postar um monte de conteúdo relacionado ao seu tópico e realmente procure desenvolver uma ótima rede no LinkedIn. Então isso vai estar aqui para a rede, e nos vemos no próximo. 95. Principais sites Freelance: Neste vídeo, vamos rever alguns dos principais sites freelance que você pode se inscrever. Comece a trabalhar sob seu cinto, comece a construir seu portfólio. E a melhor coisa sobre esses sites freelance é que todos os projetos estarão lá para você poder dar lances, certo? Você não tem que ir lá fora e realmente procurar emprego. Todos os trabalhos estarão na plataforma. E você começa a se inscrever como um usuário, ser capaz de verificar sua identidade e, em seguida, ser capaz de obter empregos apresentados a você. E então você pode realmente dar lances nesses trabalhos bem fora do portão. Então vamos em frente e saltar para o topo. Diferentes sites freelance com os quais você pode se inscrever para um designer de UX UI, certo? Então vamos em frente e olhar para alguns dos melhores sites freelance. Então, como você pode ver aqui, nós temos o primeiro que é Upwork.com. Este vai ser provavelmente o maior, o melhor para o qual você se inscreve porque é essencialmente um dos melhores no mercado. Você vai ter uma tonelada de empregos, toneladas de oportunidades para escolher. E então o segundo é Fiverr.com. Este é mais um tipo de trabalho ou barra de trabalho de plataforma. No entanto, há algumas oportunidades lá para licitar em shows personalizados que as pessoas colocam lá. E depois há freelancer.com. Isto é provavelmente comparável ao Upwork, na medida em que é o número dois no mercado para freelancers. E então temos as duas plataformas específicas para designers, que é drible e Behance. Ambas as plataformas são fantásticas para mostrar o seu trabalho e também ser capaz de obter empregos específicos chegando em seu caminho. E, em seguida, as fontes adicionais aqui são pessoas por hora..com. Este é um no Reino Unido. Esta também é boa. No entanto, você normalmente vai ter mais sucesso com o que eu vi, o que eu experimentei na maior liberdade, isso é sites também. No entanto, se você estiver no Reino Unido, talvez esta seja uma boa fonte para você. E então temos google.com, que também está em outro site freelance também. Então vamos em frente e saltar para estes individualmente. Então, o primeiro aqui, freelancing no Upwork, Escreva uma grande, grande plataforma, altamente recomendo. Ele está olhando para alguns dos profissionais. Os prós são que eles têm um processo de triagem e eles têm ambos fixos e nossos contratos. E, em seguida, mini-projetos que estão disponíveis. Escala diferente, certo? Você pode começar com sua carreira e ter um pequeno projeto por talvez 40, $50 apenas para mostrar seu trabalho, obter essa experiência certa. E então você tem proteção de contrato de hora em hora, que protege você como uma hora o ganhador de salário. E alguns dos contras aqui são que é um desafio conseguir seu primeiro projeto. No entanto, se você estiver usando muitas das dicas diferentes que são explicadas neste curso, certo? Onde você quer realmente ler a descrição do trabalho. Você quer ter certeza de que você está apresentando seu lance e apresentando-o de uma forma que permita que o cliente final saiba que você realmente leu a descrição do trabalho. Você está familiarizado com o você tem as habilidades para ser capaz de fazer o projeto. E adicionar um vídeo percorrerá um longo caminho. Então pense nisso também. Então, para muitas pessoas, sim, você pode dizer que vai ser um desafio, mas como você tem este curso, você tem acesso a este conteúdo, a este material, a essas dicas. Vai ser muito mais fácil para você conseguir seu primeiro projeto, certo? E então, obviamente, há competição. Há um monte de pessoas diferentes lá com taxas mais baixas do que você. E é por isso que você quer ter algo onde suas taxas são muito baixas no início. Então você põe o pé na porta com os trabalhos, certo? E, em seguida, outro golpe aqui é que a pontuação de sucesso no trabalho cai automaticamente se você não trabalhar no Upwork por um tempo. Portanto, certificando-se de que seu perfil está atualizado. Você está constantemente, você sabe, conseguindo um novo emprego e você está trabalhando vai manter sua pontuação no mais alto, e depois fazer freelancers em freelancer. E esta também é uma ótima plataforma. Eles têm um processo de triagem. Eles têm um processo pode obter verificado, bem como onde eu acredito que você paga cerca de US $100 e eles verificar sua identidade, eles verificar seu histórico e eles verificar algumas outras coisas para se certificar de que você é um freelancer veted e verificado . E então eles têm fixo cenário os contratos, bem como, muitos projetos diferentes ou escala diferente, certo? Você pode realmente construir seu portfólio, bem como obtendo um pequeno projeto e, em seguida, trabalhando a partir daí. E então eles têm um programa de freelancer preferido também. Onde se você é um freelancer que é preferido, você tem uma pontuação alta, você vai conseguir um monte de empregos não agir você a partir de freelancer em si. E então você vai ter uma oportunidade de ganhar muitos desses empregos, no entanto, você tem que construir seu perfil e obter essa experiência certa. E então os contras aqui, desafiando o seu primeiro projeto. No entanto, obviamente, entrar neste material, não será um grande desafio para você. E então um monte de rivais lá fora, um monte de competição iria baixar as taxas. Mas novamente, é uma daquelas coisas onde, como você pode se separar, certo? Como você pode criar talvez algum tipo de processo ou metodologia que é exclusivo para o mercado. E você tem que estar no topo dos trabalhos. Tens de estar sempre à procura de novas oportunidades, novos projectos a caminho. E então temos Fiverr.com. Fiverr.com é uma ótima plataforma também. É muito fácil e simples de começar. E então você tem dois tipos diferentes de projetos aqui. Você tem shows, e então você tem projetos que são essencialmente feitos do zero. Então alguém pode entrar lá e colocar um trabalho ou projeto em particular, certo? E então as pessoas podem fazer lances lá. Ou você pode definir como seus próprios shows selecionar, digamos, para um design UX para um aplicativo móvel, você pode ter um show para isso com um determinado preço. E então, talvez, digamos, para um design de logotipo. E você pode ter isso como um show e você pode ter um preço fixo para isso. Então é como montar sua própria loja, certo? Onde você tem shows diferentes, projetos diferentes, e então eles estão todos a preços fixos. E então você tem o profissional de fibra para os melhores talentos. Há um processo de triagem para isso. E se você tem um monte de habilidade e você realmente qualificado direito, então você pode passar por este processo aqui e ter acesso a muitos dos diferentes clientes que estão dispostos a pagar nível superior. E, novamente, esta é uma ótima maneira de construir seu portfólio, construir depoimentos. E alguns dos contras aqui é que os projetos começam um $5, que vai ser de baixo custo. E você pode olhar para isso de forma positiva ou negativa. Sim, é lamentável que o preço seja bastante baixo. No entanto, é uma ótima maneira de você também ser capaz trabalhar em seu portfólio e começar realmente a receber alguns comentários, algumas referências, algumas recomendações, depoimentos, certo? E assim algumas colunas adicionais aqui, pedidos podem ser colocados sem qualquer comunicação. Digamos que alguém queira um design ou logotipo ridiculamente complexo ou o que quer que seja, pode fazer um pedido sem entrar em contato com você porque você tem um show lá como na sua loja, certo? E se precisarem cancelar o pedido , contará contra você na sua pontuação. Então não é uma grande coisa lá, é lamentável, mas eu sempre recomendo que você colocar hey, entre em contato comigo antes de cada ordem. Certo. E assim como eu mencionei, se o pedido for cancelado, você receberá um aviso em sua conta e, em seguida, os preços são definidos em base de projeto. Então há muito pouco espaço de manobra lá, ou espaço para negociação. Quando você tem um preço de como, digamos, $30 ou $20 para um logotipo brilhante, você realmente não pode voltar e tentar negociar isso. Você não pode realmente voltar e tentar negociar isso com o comprador porque é isso que seu preço está definido. Portanto, independentemente disso, esta é uma ótima plataforma para começar por causa do baixo custo, você pode começar a construir seu portfólio e ser capaz usá-lo para obter clientes adicionais no caminho. E então temos drible aqui. Esta é uma plataforma especificamente para designers. E então a abordagem aqui é que é, é fácil publicar seu trabalho livre para usar. Há diferentes trabalhos e quadros de projetos lá. Bem, você pode ir lá e procurar por diferentes projetos que podem encontrar critérios ou empregos diferentes que você pode querer ser capaz de procurar. E a melhor coisa aqui é que eles têm empregos remotos onde você pode trabalhar sozinho como freelancer ou trabalhar em casa, ou você tem a oportunidade de encontrar empregos lá. Eles vão ser internos, dentro de uma agência ou dentro de algum tipo de grandes organizações corporativas. E alguns dos contras aqui são essencialmente muitos dos recursos que fazem esta plataforma funcionar. Muitas das coisas diferentes só estão disponíveis para contas profissionais. Então, se você quiser mostrar o seu trabalho, se você quiser fazer muitas das coisas diferentes que esta plataforma faz, você vai precisar pagar por isso. Então, tenha isso em mente. E depois temos o Behance aqui. Esta também é uma plataforma muito simples e fácil. É fácil criar um portfólio da Adobe, designs personalizados para cada um dos seus casos. Estatísticas úteis de perfil, quantas pessoas visitaram seu perfil, certo? E então você tem uma área para procurar em tempo integral, freelance ou mesmo estágios também. Então pense sobre isso. Isso pode ser algo que você procura também. Talvez você esteja apenas começando. Você passou por este curso, você obteve muita educação aqui, muitos desenvolvimentos de habilidades no espaço de design UX UI. E talvez queira um estágio, certo? E aprenda no trabalho. Às vezes isso pode ser pago, às vezes pode ser gratuito. No entanto, você quer procurar um pago que pode até mesmo dar-lhe apenas uma baixa quantidade de pagamentos, entanto, você é capaz de aprender no trabalho. E então os contras aqui é que isso não é necessariamente uma plataforma de trabalho. Isto é mais apenas uma plataforma para mostrar o seu trabalho. Ok? Outro golpe aqui é que alguns empregos só podem ser solicitados para usar um formulário de terceiros, que leva muito tempo para preencher e muito demorado, certo? Então não vai ser agradável e simples para você preencher o pedido de emprego. E não há salário indicado em muitos desses posts aqui, então eles terão um polonês lá. Estou procurando pelo designer XYZ. Estou procurando por esse tipo de trabalho, mas eles não estão mostrando quanto você vai receber. Então isso é um, você sabe, Khan infelizmente, mas ainda é uma ótima plataforma para ser capaz de mostrar seu trabalho e dar algum trabalho potencial. Então isso vai estar aqui para os melhores sites freelance. E nos vemos no próximo. 96. Perguntas de UX/UUI Projeto: Neste vídeo, vamos rever as perguntas típicas e comuns do projeto UX UI. Estas são algumas das perguntas que você quer ser capaz de estar ciente e estar fazendo ao seu cliente ou quando você está trabalhando com membros da equipe, certo? Isto é algo onde você quer ser capaz de entender o escopo do projeto, os resultados, linha do tempo, as finanças escrevem tudo que você precisa saber antes de iniciar um projeto. Então, digamos que se você está trabalhando com um cliente e ele é capaz de ser entregue no momento certo que eles estão esperando pelo custo mais acessível, certo? Então, ser capaz de entender o tipo de perguntas, a conversa inicial que você precisa ter com os clientes faz você parecer muito mais credível que você realmente se depare com que você sabe o que está fazendo. Você já fez isso antes e este é apenas mais um dia na vizinhança, certo? Está bem. Então, os tipos de perguntas que você vai fazer normalmente, você pode olhar para diferentes tipos de perguntas de escopo de projeto para entender o que exatamente eles estão procurando realizar, certo? Como é esse objetivo final? Como será esse produto acabado? E depois o tipo de perguntas da linha do tempo, certo? Você quer saber qual é o cronograma deles para terminar este projeto? Eles têm marcos diferentes em seu desejo ou necessidade de realmente atender? E então a comunicação, você vai estar se comunicando com um adolescente ou você vai estar se comunicando com um indivíduo que vai ser seu ponto de contato e quantas vezes eles esperam que você esteja em contato com eles hoje mesmo? Exigir qualquer tipo de atualizações diárias, semanais, quinzenais. O que é que isso se parece? Certo. E depois o direito financeiro. Entendendo, qual é o seu orçamento, quanto eles estão dispostos a gastar? Com o que você pode trabalhar? E então, obviamente, ser capaz de ter certeza de que você está sendo compensado de forma justa. Então, se você olhar para o gráfico à direita ali, isso vai lhe dar uma indicação realmente boa dos diferentes tipos de tarefas, e então os materiais de entrega, e então o tempo de estimativa, e então a linha de tempo real data de entrega. Então é apenas algo que você pode realmente olhar e usar para quando você está olhando para construir diferentes projetos e quando você está chegando a essa fase de entrevista para que você está falando com seus potenciais clientes o seu essencialmente um médico e você é capaz de analisar e entender sua situação atual. E então B, o que prescrever-lhes o tipo certo de medicação, por assim dizer, certo. Onde você está dizendo, hey, baseado no que você está procurando realizar e o que você quer fazer aqui com isso é o que nós estamos recomendando tanto quanto o escopo do projeto, tanto quanto o que você vai precisar, tanto quanto todos os diferentes estágios. Aqui está o tipo de entregas, aqui está a estimativa, e então aqui está essencialmente uma linha de tempo estimada para que possamos concluir estes. Ok, então vamos ver agora alguns dos tipos específicos de perguntas que você quer fazer antes de iniciar um projeto. Então, algumas das perguntas aqui são, quais são os marcos e prazos, certo? Você quer saber o que exatamente eles querem concluído em cada marco particular, e qual é exatamente essa data? E então qual entrega é necessária para cada marco, certo? Você quer saber o que eles estão realmente querendo ser entregue como ele vai ser um protótipo. São apenas alguns desenhos, certo? Alguns gráficos? O que é que isso se parece? E então quantas revisões você gostaria de incluir? Você sabe, normalmente, quando você está fazendo um projeto, haverá várias revisões e muitas vezes recebendo feedback do usuário, obtendo dados do usuário, e sendo capaz de modificar e ajustar para que você queira ter certeza de que entende O que isso parece para eles para você possa dar a eles exatamente o que eles querem, certo? E então o que é um orçamento para este projeto em particular, certo? Bastante simples lá. E então quem vai participar de uma discussão ou quem vai estar na equipe, certo? Se você está trabalhando em um ambiente baseado em equipe, você quer ser capaz de colaborar com o tipo certo de pessoas e ter certeza de que você não está ultrapassando os limites de alguém e entender o seu papel em toda a Projeto, certo? E então a comunicação, como eles gostam de ser comunicados com? Eles preferem apenas trabalhar através da plataforma se você está fazendo como freelancing ou eles gostam de usar o Slack, que vai agir para usar o Facebook, o que quer que seja, certo? Quanto a um método de comunicação, você quer ser capaz de entender como isso parece e por que é importante para eles e, em seguida, quem aprova um projeto? Vai ser a pessoa com quem você está trabalhando? É alguém mais alto, certo? Você quer ser capaz de entender essas questões importantes aqui. E então estas são algumas perguntas de Mike Montero. Acho que o nome dele é da Mule Design. Então aqui estão algumas de suas perguntas específicas que ele normalmente faz. Onde ele tem aqui, o, quais são os requisitos de negócios que devem ser atendidos? Como as necessidades do usuário podem ser atendidas melhor? Quem são seus públicos-alvo e o que você quer fazer com eles? Você sabe, acredite ou não, muitas empresas diferentes terão dificuldade em explicar em um processo específico muito detalhado ou declaração quem é seu público real, o que isso parece. Eles são avatar de verdade. Então isso vai fazer parte da sua pesquisa e análise, certo? Compreender quem é o público real, quem são os usuários, quais são dados demográficos? O que eles não gostam e ser capaz de criar uma personalidade de usuário real a partir dessa informação. E então quem vai manter o site após os lançamentos? Ou, você sabe, a mesma coisa para um aplicativo. E então como você vai medir o sucesso? Isto é crucial aqui. Esta é uma questão muito importante. Como você vai medir o sucesso? Como é que sabias que depois de concebermos isto ou construirmos isto ou criarmos isto, que é realmente bem sucedido e que na verdade obteve bons resultados. Então você precisa ser capaz de entender quais são essas métricas e quais são os KPIs também. Para que você possa entender e olhar para o que o sucesso parece para eles. E então quais são os riscos do projeto onde eles vêem, você sabe, medida em que qualquer tipo de mudança ou risco potencial que eles podem enfrentar. E depois de lançar o novo site ou aplicativo, o que mudará para sua organização? Will, vai mudar para seus usuários, certo? Será que vai ser uma experiência totalmente diferente que eles não estão acostumados, é talvez levar algum tempo para se acostumar com o que exatamente vai mudar para que você possa compreendê-los a partir de sua perspectiva real de Benin organização e, em seguida, também do ponto de vista do cliente também. Ok, então agora vamos dar uma olhada em algumas perguntas que gostaríamos de fazer quando estamos fazendo um redesenho completo. Então isso é algo onde há uma marca já é direitos existentes. Eles já têm um site, talvez eles tenham um aplicativo, e eles querem fazer uma renovação completa ou mudar seu logotipo ou mudar o site real, seja lá o que for, certo, mas É um redesenho. Não é necessariamente algo do zero. Às vezes pode ser algo do zero, mas na maior parte, é apenas um redesenho, certo? Por que você está redesenhando o site? O que faz o site atual? Bem, onde é que falta? Quais desafios você enfrentou em seu trabalho anterior com parceiros de design, certo? Então você quer ver por que eles estão redesenhando o site. Isso é importante. É porque ele está apenas faltando em áreas específicas, tanto quanto a experiência do usuário, ou é apenas uma interface ruim, você sabe, o que quer que seja, você quer entender por que eles estão realmente olhando para fazer um redesign, certo? E talvez algo de cima que eles só querem pegar todo o site e começar de novo, certo? E então o que o site atual faz? Bem, quais são as coisas que eles fazem atualmente bem, que possamos olhar para implementar e manter alguns daqueles que estão funcionando bem. E então podemos consertar as áreas onde falta, certo? E então isso é algo onde você realmente quer ser capaz de olhar para cima e prestar atenção a essas respostas, certo? Porque você vai dizer por que eles estão fazendo isso, por que é importante para eles, e quais são algumas das coisas que você pode implementar neste novo design, certo? E, em seguida, a terceira questão particular aqui, esta é mais para entender como os escolhidos para trabalhar com diferentes parceiros em algumas das coisas que eles enfrentam anteriormente, para que você possa se diferenciar sobre por que você seria Um parceiro melhor, certo? E então, finalmente, temos aqui a autodisciplina e realmente ser capaz de fazer o trabalho logo após você ter um cliente, você tem alguns projetos em que você está trabalhando? Você quer ser capaz de realmente entregar e cumprir. E então algumas das coisas que consideram aqui, você está realmente fazendo seu trabalho e você está realmente criando seus projetos é ter como brain dot fm ou algum tipo de música em segundo plano que permite que você se concentre e estudar e manter sua atenção no que você precisa estar fazendo, certo? Você pode usar como um rastreador de tempo, como temporizador de tomate. Você pode usar a meditação para ajudá-lo a relaxar e acalmar as coisas. Você pode fazer alguma meditação antes de começar a trabalhar para que você possa se acalmar e entrar nesse estado de foco. E quanto ao agendamento de aplicativos, você vai ser capaz de obter isso e noção sobre com a madeira que é fornecida neste curso. Então você realmente quer entender que uma vez que você recebe o cliente e você recebe os projetos, você precisa ir para o trabalho. E você quer ser capaz de trabalhar o mais eficaz possível com distrações mínimas são realmente nenhuma distração em tudo. E ser capaz de ter alguma música em segundo plano enquanto você está trabalhando, talvez ter algum tipo de temporizador vai realmente ajudá-lo. E então isso vai estar aqui para as perguntas do projeto UX UI e veremos você na próxima. 97. Ferramentas a laser e produtividade: Tudo bem, então neste vídeo, eu vou orientá-lo através de algumas ferramentas de produtividade que você pode usar para ajudar a aumentar seu foco para ter certeza de que você não está se distraindo, indo para o YouTube, navegando na web, e não fazendo o que Você não precisa fazer. E realmente apenas focando no que deveria estar fazendo, que é fazer o trabalho, certo? E então o que isso permite que você faça é selecionar diferentes tipos de música de foco que você pode ouvir que irá ajudá-lo a aumentar seu foco, sua produtividade, e minimizar suas distrações. Então deixe-me mostrar-lhe aqui como isso parece dentro. Quero dizer, eu uso todos os dias, extremamente poderoso. Então você tem aqui diferentes blocos de tempo. Você tem 30 minutos de bloqueio quando nosso bloco para o nosso bloco, certo? E se você ouvir um desses tocar e não gostar de como isso soa, pode ir em frente e pular isso, ok? Ou você pode ir até aqui e você pode ir para mais música. Então você pode ir com foco lo-fi, foco clássico. Você pode ir para o relaxamento, dormir. Obviamente você não quer esses dois aqui a menos que queira relaxar. No entanto, esta ferramenta vai ser principalmente para foco, ok? E então realmente o que eu faria é quando você está tentando fazer algo, colocar um pouco de música focada aqui, eu diria que por duas horas bloco e começar a trabalhar. E isso está cientificamente comprovado para realmente ajudá-lo a aumentar seu foco. Então não são só as pessoas dizendo: “Ei, ouça essa música e você vai ser dez vezes mais produtivo. Isso te deixa no estado de espírito onde você está em fluxo e você está completamente relaxado. Você está focado no que precisa fazer e não há distrações. Então eu recomendo esta ferramenta para que você possa aumentar seu foco, certo? Aumente sua produtividade e tenha blocos de tempo específicos de, digamos, duas horas. Ou se você quiser ir duro na pintura e você quiser colocar isso em um limitado Bem, você pode ir trabalhar por, você sabe, quatro ou 56 horas. Eu não recomendaria isso. No entanto, esta ferramenta aqui é extremamente importante. Então eu recomendo vivamente que você pegue isso. Acho que é de 5 a 10 dólares por mês. No entanto, como eu disse, vai valer a pena com seu aumento de produtividade e seu aumento de foco, ok? E então a próxima coisa que quero compartilhar com vocês aqui é o método ideal, certo? E isso é mais uma rotina diária. E o que isso é aqui é que lhe dá um conjunto de passos para fazer todas as noites. Então, basicamente, no final de cada dia de trabalho, você quer anotar as seis coisas mais importantes que você precisa realizar amanhã, no dia seguinte. Agora, é importante aqui que você não escreva mais de seis porque pode ficar bastante esmagador. E então você deseja priorizar esses seis itens para Verdadeiro e portas. E então o que é que você precisa fazer primeiro? E então, você sabe, número aqueles de um a seis. E então quando você se levanta de manhã ou quando começa seu dia, certo? Você quer se concentrar nessa primeira tarefa e trabalhar nela até que ela esteja completamente terminada antes de passar para a próxima, certo? E então você quer abordar o resto do seu dia dessa maneira, certo, em que você está fazendo sua primeira tarefa, você está fazendo o que você precisa fazer para terminá-los, e então você está indo para a próxima. Então isso é enorme aqui. Então, toda noite, quando você for para a cama ou antes de ir para a cama, anote as seis coisas que você precisa fazer no dia seguinte, e então priorize-as, você sabe, até o mais importante para o menos importante, certo? E faça isso todos os dias para que saiba o que precisa fazer no dia seguinte, certo? Planeje para amanhã. Hoje, ok, muito, muito poderoso. E então a próxima coisa que eu recomendo que você faça é instalar o feed erradicado para seu perfil no Facebook, ok? Porque isso vai limitar suas distrações. Então, se você vê aqui no meu, eu tenho isso instalado aqui, o que significa que eu não posso ver nenhum anúncio. E isso me limita de entrar no Facebook no meu computador. Sim, então tem no meu telefone. No entanto, outra coisa que eu faço com meu telefone é escondê-lo, o que é outra coisa que eu recomendo. Se você está trabalhando e você está tentando fazer as coisas, você está ouvindo o cérebro dot fm, pegar seu telefone e escondê-lo em algum lugar, ou colocá-lo em algum tipo de armário e algum tipo de desenho ou algum tipo de mesa para que ele está longe de você. Não é facilmente acessível, certo? Tudo que você tem que fazer é colocá-lo na extensão do Chrome aqui, instalar isso aqui em cima. E assim permite que você bloqueie todo o seu feed de notícias. Muito, muito poderoso. E então a outra coisa que eu queria compartilhar com vocês aqui é o conceito de lotes, ok? aqui que você está essencialmente bloqueando um homossexual ou um certo conjunto nosso, onde você se dedica apenas a trabalhar no que você precisa fazer. Por exemplo, aqui, para mim, crio vídeos do YouTube e tento postá-los, três ou quatro ou cinco vezes por semana. Agora, eu não crio meus vídeos. No dia do Wright. Na verdade, gravo os meus vídeos num só dia. Então, no sábado, o que eu vou fazer é bloquear o dia inteiro para apenas gravar vídeos do YouTube. E o nosso disco de cinco ou seis vídeos é esse. Então durante toda a semana eu posso tropeçá-los, certo? E então o que me permite fazer é em vez de ter o trabalho, refocar o trabalho, refocar o trabalho, certo? Refocar o trabalho. Em vez de passar por todo esse processo, agora posso bloquear um dia, derrubar tudo de uma vez, e ter tempo livre para fazer o que eu quiser. Então pense em como você pode usar isso a seu favor. Como você pode bloquear o tempo ou até mesmo dias em que você apenas se concentrar em uma coisa e você é capaz de nocautear isso e executar em outras tarefas. Então isso vai estar aqui para as ferramentas de produtividade, e nos veremos na próxima. 98. Lugares para encontrar UX: Neste vídeo, vamos rever os melhores lugares para encontrar UX e UI emprego. Então isso vai ser aqui uma lista de vários recursos diferentes que você pode usar para encontrar um Java real. Isso é o que você está procurando. Você não está necessariamente seguindo o caminho da consultoria de clientes ou freelancing. Você quer começar a trabalhar em uma equipe e um negócio em uma determinada empresa que tem bom histórico que é capaz de fornecer-lhe um trabalho estável e estável. E então vamos em frente e saltar para os melhores lugares para encontrar emprego. Então, o primeiro lugar recomendado aqui será glassdoor.com. Esta vai ser uma fonte fantástica aqui porque você pode realmente olhar para diferentes empregos por seu salário. Você pode olhar para diferentes posições. Você pode olhar para o que algumas das tendências são tão longe quanto essa posição particular ou mesmo posições de nível de entrada, certo? Muitas configurações de perfil diferentes. Você pode olhar para diferentes empregos. Eles têm um fantástico filtro de busca de emprego e é muito fácil de aplicar para as diferentes posições. Você pode ver as avaliações da empresa. Isso é fantástico porque lhe dá uma visão geral do tipo de ambiente no local de trabalho que você pode esperar para trabalhar, que você pode esperar ver nessa empresa, certo? Dando a você uma idéia realmente boa da cultura da empresa para que você não está indo para uma cultura onde acompanhar tipo de ambiente que pode não ter o melhor tipo de ambiente para você, especialmente se você está apenas começando e você está novinho em folha. E esta é a ferramenta que está disponível em muitos países. Portanto, independentemente de onde você está, você deve ser capaz de usar glassdoor.com. E mostra o salário real por posição. Então você pode olhar, ok. O que esta posição parece aqui, tanto quanto os requisitos, a descrição, quais são as taxas de salário reais ou você será capaz de ver tudo isso direito na página real. Então o próximo aqui será simplesmente Hired.com. Isto é semelhante à Porta de Vidro. No entanto, você não tem tantos recursos. Você não tem como classificação da empresa, avaliações da empresa. Isto é mais como um quadro de emprego real aqui, site de emprego onde você está olhando para diferentes filtros de pesquisa, onde você tem diferentes posições, diferentes empregos, e você pode usar o filtro de pesquisa lá para percorrer essas posições. E na maior parte, eles têm o salário real. No entanto, às vezes eles não têm um salário. E uma das coisas que têm em mente é que isto é apenas baseado nos EUA, ok? Então, se você estiver em outras partes do país, você não será capaz de usar Simply Hired.com. E o próximo aqui é indeed.com. Este é outro grande recurso também. Muitas configurações de perfil diferentes, filtro de pesquisa de emprego detalhado, facilmente capaz de se candidatar. Isso vai ser baseado nos EUA, e então você tem que manter isso em mente. No entanto, ele geralmente mostra os salários reais para cada posição. E então temos o angel.com. Este será um dos melhores lugares para você vir aqui e procurar emprego em startups. Porque não só você será capaz obter experiência em uma ampla variedade de áreas diferentes, certo? Mas também você será capaz de obter algum patrimônio nessas empresas e ser capaz de potencialmente fazer uma quantidade significativa quando essa empresa realmente é vendida ou quando essa empresa sair. É uma grande oportunidade para você começar como alguém cuja nova marca, apenas começando, tem alguma experiência. Você passou por esse treinamento. Você passou pelos exercícios, criou um logotipo, criou um site, todas essas coisas diferentes que você foi capaz de fazer. Esta vai ser uma grande experiência para você poder vir aqui, procurar um start-up que precisa de algum tipo de designer, alguém do departamento de marketing. E você pode vir aqui e ser capaz de potencialmente obter uma participação de capital na empresa, bem como ser capaz de trabalhar com uma grande variedade de indivíduos diferentes e também fazer um monte de coisas diferentes dentro da organização. E então o último aqui que não está listado, que deve ser bastante comum em já conhecido, é Linkedin.com. Isso provavelmente vai ser um ano melhores lugares para ir e realmente encontrar posições porque vai haver praticamente todas as empresas do mundo que estão no LinkedIn no espaço profissional, certo? E muitas vezes não tem todos os empregos postados lá também. Às vezes eles não vão ter os trabalhos no LinkedIn e, em seguida, eles têm como, digamos porta de vidro, embora têm Amman como Simply Hired ou outra plataforma diferente. Assim, para o LinkedIn, certifique-se de que você é capaz de ir lá e olhar para diferentes empresas, sair e olhar para diferentes avaliações antes de você realmente está enviando inscrições para que você esteja entrando com a empresa que tem um Boa reputação. Então isso vai estar aqui para os melhores lugares para encontrar emprego. E nos vemos no próximo.