Design de UI/UX com IA generativa: como criar interfaces fáceis de usar | Chris Raharja | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Design de UI/UX com IA generativa: como criar interfaces fáceis de usar

teacher avatar Chris Raharja, Data Scientist & AI Enthusiasts

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Apresentação

      1:49

    • 2.

      Como criar uma UI para aplicativo de aprendizado de idiomas com o Uizard

      7:28

    • 3.

      Como criar uma interface de usuário com o Google Stitch e Figma

      5:16

    • 4.

      Como criar design de UI para aplicativo de entrega de supermercado com Banani, Nano Banana e Manus

      5:13

    • 5.

      Como criar o design de UI para sites de comércio eletrônico com o Wind Frame

      5:20

    • 6.

      Como criar uma UI para sites Marketplace com V0

      3:54

    • 7.

      Criando uma interface na Web com o Teleport HQ

      4:49

    • 8.

      Como converter captura de tela para UI Design com o Uizard

      6:45

    • 9.

      Convertendo esboço em UI Design com o Visily AI

      3:19

    • 10.

      Como criar uma página de inscrição simples no Figma

      5:56

    • 11.

      Como criar fluxograma de usuários com Miro

      4:20

    • 12.

      Como analisar a atenção do usuário com IA

      6:11

    • 13.

      Como conduzir pesquisas de UX com o UX Pilot

      6:20

    • 14.

      Conclusão e resumo

      4:32

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

50

Estudantes

2

Projetos

Sobre este curso

Bem-vindo ao Design de UI/UX com IA generativa: criando interfaces fáceis de usar.
Este curso é um tutorial abrangente para designers de UI/UX que estejam interessados em explorar como a IA generativa pode suportar a criação de designs de interface de alta qualidade e centrados no usuário. O curso apresenta ferramentas e fluxos de trabalho atuais de IA usados no design de UI e UX, e analisa como elas podem complementar as práticas tradicionais de design  Nos últimos anos, a inteligência artificial evoluiu para apoiar tarefas como gerar layouts de interface a partir de prompts de texto, transformar referências visuais em designs editáveis, e auxiliar na pesquisa da experiência do usuário. Neste curso, você vai explorar como essas ferramentas são aplicadas atualmente nos fluxos de trabalho de UI/UX reais. Na sessão de introdução, você vai aprender sobre diferentes aplicativos de IA no design de UI/UX e entender como eles podem ajudar com tarefas como ideação, prototipagem e análise. O foco é como a IA pode ajudar a agilizar partes do processo de design, enquanto os designers mantêm controle sobre as decisões de usabilidade e design.

A primeira seção do projeto se concentra na geração de designs de UI usando ferramentas baseadas em IA, como Uizard, Visily AI, Wind Frame, V0, Google Stitch, Figma, Banani, Nano Banana, Manus e Teleport HQ. Você vai aprender como escrever prompts que descrevem os requisitos de interface, incluindo recursos, preferências de layout, estilos e esquemas de cores. Você também vai explorar como ferramentas de IA podem converter capturas de tela e esboços desenhados à mão em designs de UI editáveis. Na segunda seção, o foco muda para o design manual de UI usando o Figma. Embora a IA possa ajudar na geração de design, é igualmente importante entender como fazer o design de interfaces do zero. Nesta seção, você vai criar uma página de inscrição simples manualmente, aprendendo os princípios principais de UI, como estrutura layout, espaçamento, tipografia e hierarquia visual. Na terceira seção, você vai aprender a criar diagramas de fluxo do usuário usando o Miro. Os fluxos de usuários são uma parte fundamental do design de UX, ajudando os designers a visualizar como os usuários navegam por um produto e interagem com diferentes telas. Na quarta seção, você vai explorar como a IA pode ajudar na análise da atenção do usuário usando um plugin do Figma. Esta seção demonstra como a análise de atenção visual pode apoiar a avaliação do layout e as avaliações de usabilidade. Por fim, você vai conduzir uma análise da experiência do usuário usando o UX Pilot. gu Você vai descobrir como a IA é capaz de revisar o seu design e fornecer análises UX detalhadas, e também transformar esses insights em resultados de pesquisa de UX estruturados.

Em primeiro lugar, antes de entrar no curso, precisamos nos fazer esta pergunta: por que devemos usar a IA para projetar interfaces de usuários? Bem, existem muitas razões, da perspectiva de um designer, gerar novas ideias e traduzi-las em interfaces utilizáveis pode ser demorado. A IA pode atuar como um assistente criativo e analítico, oferecendo sugestões de design e suporte para tarefas de pesquisa, permitindo que os designers explorem ideias de forma mais eficiente, mantendo a qualidade do design.

Abaixo estão coisas que você pode esperar aprender com este curso:

  • Aprenda a criar uma UI para um aplicativo de aprendizado de idiomas usando o Uizard

  • Aprenda a converter capturas de tela em designs de UI usando o Uizard

  • Aprenda a converter esboços em designs de UI usando a Visily AI

  • Aprenda a criar uma UI para um site de comércio eletrônico usando o Wind Frame

  • Aprenda a criar uma UI para um painel de análise usando o V0

  • Aprenda a criar uma UI para um aplicativo de entrega de supermercado usando Banani, Nano Banana e Manus

  • Aprenda a criar uma UI para software de análise de vendas usando o Google Stitch e o Figma

  • Aprenda a projetar interfaces web usando o Teleport HQ

  • Aprenda a criar uma página de inscrição simples usando o Figma

  • Aprender a criar diagramas de fluxo de usuários usando o Miro

  • Aprenda a conduzir pesquisas de UX usando o UX Pilot

Conheça seu professor

Teacher Profile Image

Chris Raharja

Data Scientist & AI Enthusiasts

Professor

Hello, I'm Chris. My expertise is in data science, machine learning, generative AI, e-commerce, and web design. I graduated from the University of Washington with a BS in Mathematics and have experience as a technology risk consultant at one of the Big Four firms. My passion for teaching began as a volunteer math tutor in high school and has continued to flourish. My goal is to share my skills and build a vibrant community where we can explore and learn about a wide range of topics together.

Visualizar o perfil completo

Habilidades relacionadas

Figma IA para design IA e inovação
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: Caramba, vocês estão interessados em projetar uma interface de usuário usando IA? Se a resposta for sim, então este curso pode ser para você. Então, neste curso, teremos vários projetos. Então, no primeiro projeto, vamos projetar a interface do usuário para o aplicativo de aprendizado de idiomas usando o UISR Essa ferramenta é muito fácil de usar. Tudo o que você precisa fazer é escrever o prompt descrevendo seu projeto e, em menos de um minuto, UIZR gerará designs de interface de usuário de alta qualidade como este. Muito legal, né? Em seguida, você também pode fazer uma captura de tela de um site ou aplicativo móvel, e o UizRT poderá converter essa captura de tela em designs de interface de usuário editáveis . Olha isso. No próximo projeto, você colocará uma interface de usuário no papel, poderá tirar uma foto da fezes e o upload dessa foto, e fisicamente a IA será capaz de converter essa amostra em designs de interface editáveis Muito legal, né? No próximo projeto, projetaremos a interface do usuário para o site de comércio eletrônico usando o Wind Frame Em seguida, também projetaremos uma interface de usuário para análise de receita de vendas usando FSL Olha esses caras. Muito legal, certo? Em seguida, vamos projetar a interface do usuário para a página de inscrição. Vamos projetar a interface do usuário para criar blocos manualmente A seguir, analisaremos as atenções do usuário usando a IA Assim, você obterá o hitmp e o hitmp mostrará onde a atenção do usuário está mais concentrada E, por fim, vamos realizar uma pesquisa de experiência do usuário usando o UX Pilot 2. Como criar uma UI para aplicativo de aprendizado de idiomas com o Uizard: Santo elenco, bem-vindo de volta ao curso. Neste vídeo, vamos projetar a interface do usuário usando o UizRT Ok, então agora, vamos começar. A primeira coisa que você precisa fazer é se inscrever. Então, basta clicar em Inscrever-se gratuitamente e você será redirecionado para esta página Como vocês podem ver, vocês têm duas opções. Você pode se inscrever usando sua conta do Gmail. Você também pode se inscrever usando sua conta da Microsoft. Então, depende totalmente de você. Nesse caso, vou me inscrever usando minha conta do Gmail Como vocês podem ver aqui, fui redirecionado para o meu painel Ok, então aqui, há quatro opções. A primeira opção é um novo projeto em branco. Assim, você pode criar a interface do usuário do zero. A segunda opção é começar a partir da captura de tela. Assim, você pode fazer uma captura de tela de um site ou aplicativo móvel e, em seguida, fazer o upload dessa captura de tela, e o UISRT converterá essa captura de tela em designs essa captura A terceira opção é gerar os designs de interface do usuário usando o Auto Designer, e a quarta opção é começar a partir de modelos. Como vocês sabem, o UISRT tem muitos modelos, então você pode escolher um desses modelos e personalizá-lo como quiser No entanto, neste vídeo, vamos nos concentrar principalmente nesse recurso, designer de automóveis Então, basta clicar aqui e ele será redirecionado para esta página. Tudo bem. Então, agora vamos começar. Em primeiro lugar, você precisará selecionar para qual dispositivo você está projetando? Como vocês podem ver aqui, existem três opções: celular, tablet e desktop. Vou selecionar celular. Em seguida, você precisará escrever o prompt descrevendo seu projeto. Ok, então neste exemplo, vou criar uma interface de usuário para aplicativo Language Learning. Ok, então eu vou escrever algo assim, um aplicativo de aprendizado de idiomas para estudantes e taurinos Ok, então, em seguida, você precisará descrever o estilo de design. Você pode especificar coisas como cores e layouts. Ok, então vamos escrever as descrições de um aplicativo moderno com equipe azul claro. Em seguida, você também pode selecionar algumas dessas palavras-chave. Vou selecionar leve, moderado e elegante. Ok, então a seguir, basta clicar em Gerar meu projeto. Ok, então esperem, pessoal. O processo pode levar alguns minutos. Espero que não demore muito e estou super empolgada em ver minha interface de usuário. Ok, então espere. Na verdade, não quero que esse vídeo seja muito longo, então vou pular essa parte e voltarei quando o design da interface do usuário estiver pronto Ok, finalmente, os designs da interface do usuário estão prontos. Na verdade, o processo não demorou muito, pessoal. Demorou apenas 2 minutos ou talvez até menos de 2 minutos. Ok, agora vou clicar em Visualizar. E vamos clicar em Visão geral. Como vocês podem ver, o UizRT gerou várias páginas. Olha isso. Portanto, temos a página de boas-vindas, a página de inscrição, tela inicial, as configurações de pesquisa, perfil e conta. Olha esses caras. Muito legal. Ok, vou ampliar um pouco. Ok, olhem isso, pessoal. Muito legal, né? Ok, agora basta clicar em Visualizar. Basta clicar em Entendi. Ok, então basta clicar em Começar, cadastre-se agora. Ok, então isso é como a página inicial, pessoal. Olha isso. Se clicarmos no perfil, seremos redirecionados para esta página Se clicarmos na página inicial, seremos redirecionados de volta para esta página E se você clicar em um desses cursos, você será redirecionado para esta página. Olha isso, pessoal. Isso é incrível, certo? Ok, agora vamos voltar para a página de edição. Vou fechar essa guia. Então, se você não estiver satisfeito com os designs da interface do usuário, à vontade para personalizá-la, certo? Assim, você pode adicionar texto. Você pode adicionar botões. Você pode adicionar um formulário e muito mais, pessoal. Você também pode adicionar imagem, então basta clicar em Imagem. Como vocês podem ver, o UISRT tem sua própria biblioteca de imagens aqui. Você também pode gerar uma imagem usando IA, então basta clicar aqui e digitar seu baile aqui E se você clicar nos ícones, também poderá adicionar qualquer ícone à sua interface de usuário. Como vocês podem ver aqui, o ISAT tem muitos ícones diferentes aqui, pessoal. Olha isso. Além disso, você também pode editar a página. Então, basta selecionar a página que você deseja editar. Por exemplo, neste caso, eu quero editar o homestren para que você selecione Homestren e você possa Você pode modificar as posições, o tamanho. Você também pode alterar o estilo. Você pode alterar a cor da tela. Você pode agrupar ou desagrupar os objetos nesta página. Por fim, se você quiser baixar o design da interface do usuário, basta clicar em Exportar Como vocês podem ver aqui, vocês têm várias opções. Assim, você pode baixá-lo no formato PNG e no formato JPageFmat SVG ou PDF. Então, depende totalmente de você. Vou baixar esse design de interface do usuário no formato PNG. Então, basta clicar em Exportar. Ok, então o processo pode levar um ou dois minutos. Então, esperem, pessoal. Espero que não demore muito. Tudo bem, como vocês podem ver, baixamos esta imagem com sucesso Olha isso. Muito legal, né? Tudo bem, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vou ver caras no próximo vídeo em que criaremos design da interface do usuário usando outra ferramenta de IA. Então, vejo vocês lá. 3. Como criar uma interface de usuário com o Google Stitch e Figma: Oi, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos projetar a interface do usuário usando duas ferramentas de IA. O primeiro é o Google States e o segundo é o FiCMA AI Ok, vamos começar. Em primeiro lugar, vamos escrever o baile de formatura. Crie uma interface de usuário projetada para software de análise de vendas. Isso tem dois instaladores principais. O primeiro é o painel de acompanhamento de vendas. E a segunda são segmentações e visualizações de clientes Torne o design moderno e interativo. Em seguida, você pode selecionar o tipo de aplicativo que deseja criar. Se você quiser criar a interface do usuário para aplicativos móveis, clique aqui. Se você quiser criar a interface do usuário para o aplicativo web, clique aqui. Além disso, você também pode fazer upload de uma imagem ou esboço para se inspirar e clicar em Gerar design Ok, agora a IA está criando o design da interface e precisaremos responder a essas perguntas. Para criar um software abrangente de análise de vendas, posso criar as duas telas a seguir para você. Painel de acompanhamento de vendas. Portanto, essa tela fornecerá uma visão geral do desempenho de vendas com as principais métricas e gráficos interativos. E a segunda são visualizações de segmentação de clientes Essa tela exibirá segmentos de clientes por meio várias visualizações, permitindo insights mais profundos Devo ir em frente e projetar essas duas telas para você? Ok, agora, a IA vai criar o design. Isso levará alguns minutos. Então, esperem, pessoal. Espero que não demore muito e estou muito animada para ver o resultado Bem, não demorou muito, pessoal. Demorou apenas 1 minuto ou até menos de 1 minuto. Ok, aqui está o design da interface do usuário. Então, essa é a mesa de análise de vendas. Temos uma visão geral das vendas, receita total, valor médio de venda, clientes, vendas ao longo do tempo e vendas da Regent. E aqui estão as visualizações das segmentações de clientes. Portanto, temos distribuições de clientes valor da vida útil do cliente versus frequência de compra e os principais segmentos de clientes por receita. Ok, muito legal, pessoal. Se você quiser baixar esse design, é muito fácil. Basta clicar neste Download. Você também pode ver o código. Como vocês podem ver, temos o código DDML aqui. Você pode copiar o código e compilá-lo no código VS Ok, a seguir, vamos experimentar a segunda ferramenta de IA. O nome da ferramenta é Figma. Então, vamos usar o mesmo prompt. Então, vamos copiar e colar esse baile e colocá-lo aqui Mas antes disso, certifique-se de já dar uma olhada no FICMA Crie um design de interface de usuário para software analítico de vendas que tenha duas restrições principais, painel de rastreamento de vendas e segmentações e visualizações de clientes, tornando moderado e interativo E vamos clicar em Gerar. VICMA levará alguns minutos para gerar o design da interface do usuário. Então, esperem, pessoal. Espero que não demore muito. Bem, não demorou muito, pessoal. Demorou apenas um minuto ou até menos de um minuto. Ok, aqui está o painel de vendas. Temos uma visão geral da receita total, do total de pedidos, taxa de conversão de novos clientes. UI muito legal, pessoal, tendências de receita, vendas por categoria, métricas de desempenho, transações recentes, muito completa. E vamos clicar nas segmentações de clientes. Temos distribuições de segmentos, comparação métrica de segmentos. Uma métrica detalhada do segmento. Muito abrangente. E você também pode ver o código. Basta clicar aqui e você poderá ver o código. Você pode baixar o código e compilá-lo no código FAS. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 4. Como criar design de UI para aplicativo de entrega de supermercado com Banani, Nano Banana e Manus: Pessoal do Holi. Bem-vindo de volta ao curso. Neste vídeo, vamos projetar a interface do usuário para o aplicativo de entrega de alimentos usando três ferramentas de IA O primeiro é Banani. O segundo é Gêmeos e o terceiro é Manus Ok, vamos começar. Em primeiro lugar, vou fazer login. Vou fazer login usando minha conta do Gmail, então vamos clicar em Continuar com o Google Como vocês podem ver, eu me conectei com sucesso e aqui está minha placa de poeira Ok, vamos começar. Vamos escrever o baile de formatura. Crie um design de interface de usuário para o aplicativo de entrega de alimentos. Este aplicativo tem três instaladores principais. O primeiro é o mercado de produtos. Com cartão de compras. Portanto, se o usuário quiser comprar o produto, pode clicar no produto e adicioná-lo ao cartão de compras. O segundo recurso é rastreamento da entrega de pacotes em tempo real no mapa interativo. E o terceiro obstáculo é o painel do Analytics de gastos mensais Assim, o usuário poderá acompanhar e analisar seus gastos em cada mês. Ok, agora vamos clicar em Gerar. Isso levará alguns minutos, talvez um ou 2 minutos. Esperem, pessoal. Espero que não demore muito e eu esteja muito animada para ver o resultado Bem, não demorou muito. Demorou apenas um minuto ou até menos de um minuto. Ok, veja este painel do supermercado. Temos categorias de produtos, rastreamento ativo de entrega, gastos mensais. Olha isso. Muito legal. E aqui está outra alternativa. Olha isso. É relativamente semelhante, mas o design é um pouco diferente. E aqui está a terceira opção. Ok, muito legal. Se você quiser baixar essas imagens, basta clicar em Exportar. E você pode exportar essa imagem como PNG ou GPG. Depende totalmente de você e basta clicar em Exportar. Ok, agora vamos experimentar a segunda ferramenta de IA. Então, vamos abrir Jim andi. E neste caso, vamos usar o modelo Nanobanana. Então, vamos clicar em criar imagem. E vou copiar e colar o mesmo prompt. Então, vamos criar um design de interface de usuário para o aplicativo de entrega de alimentos. Ok, vamos clicar em Enviar. Ok, agora ele está carregando o modelo nano Banana. Isso levará alguns minutos, talvez um ou dois minutos. Então, esperem, pessoal. Espero que não demore muito. Ok, vamos lá. Aqui está o design. Ok, olha isso. Temos três recursos, certo? O mercado do produto, o rastreamento da entrega de pacotes em tempo real e a análise de gastos. tabuleiro. Olha isso. Muito legal. Ok, agora vamos experimentar a terceira ferramenta de IA. O nome da ferramenta é Manus. E vamos copiar e colar o baile, então vamos usar exatamente o mesmo prompt e vamos clicar em design Ok, agora, vamos clicar em Gerar. Bem, não demorou muito, pessoal. Demorou apenas 30 segundos ou até menos de 30 segundos. Ok, deixe-me ampliar um pouco. Então, aqui está o primeiro mercado de produtos mais restrito. E como vocês podem ver aqui, temos um carrinho de compras para que o usuário possa clicar e o produto será automaticamente adicionado ao carrinho de compras. E o segundo recurso é o rastreamento de entrega em tempo real. Este é o supermercado, esta é sua casa, o motorista está a caminho e você também tem o tempo estimado de chegada Olha isso. Muito legal, né? E aqui está o terceiro mais gordo. Painel de análise de gastos. Assim, você poderá analisar seus gastos de cada mês e também dividir seus gastos por categoria de produto. Muito legal. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 5. Como criar o design de UI para sites de comércio eletrônico com o Wind Frame: Holocausto, bem-vindo de volta ao curso. Neste vídeo, vamos criar um design de interface de usuário usando o Wind frame. Ok, então agora vamos começar. A primeira coisa que você precisa fazer é se inscrever. Então, basta clicar em Inscrever-se. Você será redirecionado para esta página. Como vocês podem ver, vocês têm duas opções. Você pode se inscrever usando sua conta do Github. Você também pode se inscrever usando sua conta do Gmail. Então, vou me inscrever usando minha conta do Gmail. Como vocês podem ver, fui redirecionado para o meu painel. Ok, agora vamos criar um novo projeto. Então, basta clicar em Criar projeto. Você precisará inserir o nome do projeto. Ok, então vou chamá-lo de design de interface de usuário. E eu vou clicar em Criar projeto. Ok, agora o Wind Frame está criando o projeto. E como vocês podem ver, fomos redirecionados para a página de edição Ok, então essa ferramenta é muito fácil de usar, pessoal. Tudo o que você precisa fazer é escrever o baile descrevendo a aparência da interface do usuário . Você pode especificar coisas como recursos, funcionalidades, cores, layout e estilos Ok, então, neste exemplo, vou criar designs de interface de usuário para o site de comércio eletrônico Ok, então agora vamos escrever o prompt. Catálogo de produtos, página para site de comércio eletrônico com layout de estética de equipe moderado E fundo escuro. Ok, então esse é o meu aviso. Agora, vamos clicar aqui. Então, o processo pode levar alguns minutos, pessoal. Então, espere. Espero que não demore muito. Estou muito animada para ver o resultado. Ok, eu não quero que esse vídeo seja muito longo, pessoal, então eu vou pular essa parte e vou voltar quando o design da interface do usuário estiver pronto, e vou mostrar para vocês Tudo bem, finalmente, o design da interface do usuário está pronto. Na verdade, não demorou muito, pessoal. Demorou apenas 2 minutos ou talvez até menos de 2 minutos. Ok, então, como vocês podem ver, esta é a página do catálogo de produtos do nosso site de comércio eletrônico Há cerca de duas listas de produtos aqui. Olha isso. Muito legal, né? Se você não estiver satisfeito com o resultado, à vontade para pedir à IA que redesenhe essa interface de usuário, para que você possa escrever o baile aqui e explicar qual parte deseja corrigir Ok, agora vou clicar em Adicionar ao Canvas. Ok, agora vamos criar outro design de interface de usuário usando o Wind Frame. Então, vamos escrever o prompt. Então, desta vez, vamos criar designs de interface de usuário para a página de checkout do produto Ok, então vamos escrever o baile. Página de pagamento do produto para o site de comércio eletrônico. Certifique-se de incluir a forma de pagamento e o botão de pagamento. Ok, agora vou clicar aqui, então o processo pode levar alguns minutos. Então, espere. Espero que não demore muito e estou muito animada para ver o resultado Ok, então o design da interface para os blocos de pagamento do produto está pronto Olha esses caras. Muito legal, né? Ok, agora vou adicionar essas almofadas de saída de produtos ao Canvas Então, basta clicar em Adicionar ao Canvas. Ok, então NX, vamos clicar no código. Você poderá ver o código dessa interface de usuário. Portanto, se você é desenvolvedor web ou desenvolvedor front-end, não precisa escrever o código do zero. Você pode usar esse código. Ok, então, por fim, vamos exportar esse projeto. Então, basta clicar em Exportar. Ok, como vocês podem ver, exportamos o projeto com sucesso Você tem três opções. As primeiras opções estão no DML A segunda opção é reagir e a terceira opção é poucas. Então, vou selecionar em DML e clicar em Baixar arquivo, certo? Baixamos o arquivo com sucesso. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau 6. Como criar uma UI para sites Marketplace com V0: Caramba, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos criar uma interface de usuário usando o Firsal Ok, então agora vamos começar. A primeira coisa que você precisa fazer é fazer login. Então, basta clicar em Login. Você pode fazer login usando sua conta do Gmail. Você também pode fazer login usando sua conta do Github. Ok, então, em seguida, vou clicar em preços. Eu vou te mostrar que essa ferramenta é realmente gratuita. Como vocês podem ver aqui, o Viral oferece um plano gratuito. Obviamente, existem algumas limitações. Quando se trata do plano gratuito, por exemplo, você tem apenas 200 créditos por mês, então esse é o seu limite máximo. OK. Agora vamos voltar para a página inicial Se você rolar para baixo, poderá ver os designs da interface do usuário que foram criados usando o FSL Olha isso. Ok, então vamos escolher um exemplo. Vamos clicar nesse. Ok, como vocês podem ver, esse é o baile que foi usado para gerar esse design de interface de usuário, um painel para análise de dados de KPIs industriais Olha esses caras. Muito legal, né? Então, tudo que você precisa fazer é escrever o baile, descrevendo seu projeto Você pode especificar coisas como recursos, funcionalidades, estilos, layout, cor, etc., e o Fir SL gerará um belo design de interface de usuário Ok, então vamos começar, pessoal. Ok, então vamos escrever o baile Alright, então, neste exemplo, vou criar uma interface de usuário para o site de comércio eletrônico Ok, agora vamos escrever o prompt. Comércio eletrônico, mercado com catálogo de produtos e etiquetas de preços Ok, agora vamos clicar em Enviar. O processo pode levar alguns minutos, pessoal, então espere. Espero que não demore muito. Como vocês podem ver agora, a Versal está projetando a interface do usuário Então espere, tudo bem. Finalmente, o design da interface do usuário está pronto. Ok, olha esse cara. Muito legal, né? Então, este é o nosso site de comércio eletrônico. Então essa é a página do Hub, pessoal. Como vocês podem ver, temos a barra de pesquisa aqui, é como a página de destino do produto Estas são as descrições do produto. E como vocês podem ver, esse é o catálogo de produtos. Olha isso. Vamos rolar um pouco para baixo. Como vocês podem ver, existe a lista de preços e também adicione o botão do gráfico. Então, se o cliente quiser comprar esse produto, ele ou ela clicará nesse botão, certo? Ok, então vamos clicar no outro design de interface do usuário. Esse é outro catálogo de produtos, pessoal. Muito legal, né? Então, se você quiser converter esse design em código, você pode clicar aqui. Como vocês podem ver, vocês têm duas opções. A primeira é reagir e a segunda é na CML Assim, você pode copiar e colar esse código e dar esse código aos desenvolvedores da web ou aos desenvolvedores front-end, e eles criarão o site para você. Ok, muito legal, certo? E por fim, se você quiser ouvir esse projeto, você pode clicar aqui, e ele copia automaticamente os links desse projeto, certo? E você pode gravá-lo para outras pessoas. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 7. Criando uma interface na Web com o Teleport HQ: Espírito Santo, bem-vindo de volta ao curso. Neste vídeo, vamos criar design de interface de usuário para um site usando o Teleport at Q. Ok, agora vamos começar A primeira coisa que você precisa fazer é se inscrever. Então, basta clicar em Começar. Você será redirecionado para esta espada. Como vocês podem ver, vocês têm duas opções. Você pode se inscrever usando sua conta do Gmail. Você também pode se inscrever usando sua conta do Github, então depende totalmente de você Ok, então, neste caso, vou me inscrever usando minha conta do Gmail Ok, então isso é Teleport atsqdbg. Ok, então vocês têm várias opções, pessoal. Você pode começar do zero. Você pode selecionar um desses modelos disponíveis e personalizá-lo como quiser. Como vocês podem ver, existem muitos modelos aqui. Você também pode gerar uma interface web usando IA, e é isso que vamos fazer neste vídeo. Ok, então basta clicar em Começar a construir. Essa ferramenta é muito fácil de usar. Tudo o que você precisa fazer é escrever o prompt descrevendo seu projeto. E em menos de um minuto, Teleport AdSq gerará uma interface de usuário de alta qualidade para Ok, então, neste exemplo, vou criar uma página de destino para meu software de web scrapping Ok, agora vamos escrever o prompt. Sites para desmantelamento na web. Software. Ok, agora é só clicar em Avançar. Ok, então aqui, você precisará selecionar a equipe para o seu site. Como vocês podem ver, existem várias opções: criativas, culturais, padrão, eBook, echo, financeiras, infantis, nutrição, esportes, startups e Ok, então vou selecionar Iniciar. Então, a equipe vai ficar assim. Então isso é como o modo de luz, pessoal. Se você quiser mudar para o modo escuro, basta clicar aqui. Então, depende totalmente de vocês. Nesse caso, vou selecionar o modo escuro. Acho que parece melhor. Ok, agora basta clicar em Gerar site. Então, o processo pode levar alguns minutos, pessoal. Então, espere. Espero que não demore muito e estou super animada para ver o resultado Ok, então espere. Como vocês podem ler, o conteúdo está sendo gerado. Ok, quase pronto. Ok, então, em seguida, basta clicar. Vá até a página. Ok, então esta é a página de edição, pessoal. Agora vou clicar em Visualizar. Ok, então você será redirecionado para a página de pré-visualização. Ok, então espere. Ok, vamos lá. Portanto, este é o nosso site. O nome do site é Scraper. Ok, sem o poder do web scraping. Como vocês podem ver aqui, temos cerca de cinco páginas, características da página inicial, como funciona, preços e contato. Há um botão para começar agora aqui. E se você rolar um pouco para baixo, há cerca de quatro recursos: extrações de dados personalizáveis, eliminação programada, exportação de proxy e garantia de qualidade de dados Muito legal, né? Ok, então isso é como as sessões de preços, não é o plano certo para sua necessidade de desmantelamento na web Plano básico e profissional gratuito aqui. Vamos rolar para baixo novamente. Ok, então isso é como as seções de perguntas frequentes. Ok, muito legal, pessoal. Há um botão de login aqui e também um botão de registro aqui. Ok, agora vou fechar esta etapa. Você pode se sentir à vontade para editar os sinais UID. Você pode mudar a cor. Você pode editar o texto. Ok, então, por fim, vou te mostrar o código. Então, basta clicar no código. Como vocês podem ver, existem dois arquivos. O primeiro é JavaScript e o segundo é CSS. Então, se você quiser colocar o projeto em negrito , pode usar esse código, para não precisar começar do zero, certo? Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 8. Como converter captura de tela para UI Design com o Uizard: Gás sagrado. Bem-vindo de volta ao curso. Neste vídeo, vamos converter uma captura de tela em um design de interface de usuário editável usando Ok, então o processo será muito simples. Tudo o que você precisa fazer é fazer uma captura de tela de um site ou aplicativo móvel Em seguida, faça o upload da captura de tela para o UISrt. Depois disso, o UISRT converterá isso em designs de interface de usuário que você poderá editar Ok, então vamos começar. Então, agora vou clicar em Iniciar a partir da captura de tela e seremos redirecionados para esta página Ok, então esperem, pessoal. O carregamento pode demorar um pouco. Tudo bem, pessoal, agora vamos fazer uma captura de tela deste site O nome do site é zero. Para aqueles que não sabem o que é zero, zi é um dos maiores mercados imobiliários onde as pessoas podem encontrar propriedades para venda e também propriedades para alugar. No entanto, você pode se sentir à vontade para fazer capturas de tela de qualquer outro site ou aplicativo móvel que desejar, certo? Ok, agora vamos fazer a captura Ok, então vamos fazer isso. Aqui vamos nós. Ok, acabei de fazer a captura de tela. Então, vou salvar essa imagem na minha área de trabalho e voltar para o UizRT Ok, por enquanto, vou fechar essa aba. O que vamos fazer a seguir é fazer o upload da captura de tela. Então, basta clicar no scanner de captura de tela e clicar em Carregar. Ok, então vou fazer o upload dessa captura de tela, pessoal, basta clicar em Abrir Ok, agora ele está fazendo o upload da imagem. O processo pode levar alguns segundos. Espero que não demore muito. Ok, então espere. Tudo bem, então a próxima coisa que vamos fazer é selecionar o tamanho da tela de saída Como vocês podem ver, você tem três opções: celular, tablet e descop. Vou selecionar Descop. E agora vamos clicar em Importar. Ok, agora estamos importando essa captura de tela. Então, esperem, pessoal. Espero que não demore muito. Ok, vamos lá. Ok, agora vamos editar essa interface de usuário. Ok, então há muitas coisas que vocês podem fazer. Por exemplo, você pode editar esse texto. Você pode escrever o que quiser aqui. Você também pode alterar a cor da fonte. Como vocês podem ver, no momento, a cor é azul, mas se você quiser alterá-la para uma cor diferente, talvez verde, basta selecionar verde, certo? Aqui vamos nós. Ok, você também pode alterar a cor desse botão, então basta clicar nesse ícone e, no momento, ele ainda está azul. Digamos que eu queira mudar a cor para vermelho. Então, basta clicar aqui. Ok, vamos lá. E você pode até mesmo usar a IA para dar uma sugestão. Então, basta clicar em sugerir. Como vocês estão aqui, IZR está gerando novos conteúdos só para vocês Pode levar alguns segundos. OK, então esperem, pessoal , espero que não demore muito. Ok, além disso, você também pode substituir essa imagem pela sua própria imagem, certo? Então você pode clicar nesta imagem e clicar nesses pontos da árvore e rolá-los um pouco Mas você pode enviar sua própria imagem, certo? Além disso, você também pode modificar as posições e o tamanho da imagem. Ok, agora, vou encerrar isso, e o que vamos fazer a seguir é redesenhar essa interface de usuário usando IA Então, basta clicar aqui, selecionar gerar equipe e também selecionar o baile, certo? Ok, então agora vamos escrever o pino. Redesenhe essa interface de usuário. Com uma equipe mais sombria e moderna Ok, agora vou clicar em Gerar. Você também pode selecionar algumas dessas palavras-chave. Então, vou selecionar sujo e moderno. Ok, então basta clicar em Gerar. Ok, então esperem, pessoal, o processo pode levar alguns minutos. Espero que não demore muito. Como vocês podem ver, a Izard redesenhou com sucesso a interface do usuário Na verdade, o processo demorou um pouco mais do que eu esperava. Demorou quase 3 minutos, pessoal. Ok, agora, basta clicar em Aplicar. Ok, como vocês podem ver agora vocês estão inscrevendo a nova equipe, certo? Aqui vamos nós. Olha isso. Muito legal, né? Ok, agora, se você quiser exportar essa interface de usuário, basta clicar em Exportar. E eu vou baixar essa imagem no formato PNG. Então, basta clicar em PNG e clicar em Exportar, certo? Ok, como vocês podem ver agora, estamos baixando a imagem. Então, espere. Tudo bem, então baixamos a imagem com sucesso. Aqui vamos nós. Tudo bem, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau 9. Convertendo esboço em UI Design com o Visily AI: Holgays, bem-vindo de volta ao curso. Neste vídeo, vamos converter patins em design de interface de usuário usando o PhiSle Neste exemplo, vamos usar este SCATS, um aplicativo de gerenciamento de inventário de pés Você pode usar qualquer esboço escrito à mão e fazer o upload da imagem, e a IA poderá convertê-la em design de interface Ok, vamos começar. Em primeiro lugar, vou fazer o login. Então, vamos clicar aqui. Vou fazer login usando minha conta do Gmail. Mas você também pode fazer login usando sua conta do Github. Depende totalmente de você. Ok, isso levará alguns segundos. Como vocês podem ver, eu entrei com sucesso. Ok, agora vamos clicar em Bem-vindo ao facile e clicar em Começar com IA E você será redirecionado para esta página. Ok, primeiro, vamos fazer o upload da imagem. Então, vamos clicar aqui. E eu vou fazer o upload desse esboço. Vamos clicar em Abrir e vamos escrever o baile, converter esse esboço em um design de interface de usuário Para contextualizar, essa é interface do usuário do aplicativo Foot Inventory Management. Ok, então esse é o meu baile de formatura, e vamos clicar em Gerar Ok, isso levará alguns segundos. Então, esperem, pessoal. Espero que não demore muito. Estou muito animada para ver o resultado. Bem, não demorou muito. Demorou apenas 2 minutos ou até menos de 2 minutos. IA gerou dois estilos diferentes , estilo um e estilo dois. Mas, por enquanto, vamos dar uma olhada no primeiro estilo. Ok, vamos lá. Coisas de comida. Temos três toques nas listas de compras e receitas atuais. Frits pantry e também temos o botão Analisar. Olha isso. E também temos alertas de expiração. E você também pode clicar nesse botão de anúncio para adicionar mais comida. Ok, agora vamos dar uma olhada no estilo também. Vamos clicar aqui. Então, é basicamente o mesmo. A estrutura é a mesma, mas a cor é diferente. Para ser honesto com você, eu prefiro o estilo um porque acho que o design é mais adequado para o aplicativo de gerenciamento de inventário de alimentos. E você também pode clicar em Openboard, então você será redirecionado para a página de edição Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau 10. Como criar uma página de inscrição simples no Figma: Santo Deus, bem-vindo de volta ao curso. Neste vídeo, vamos aprender sobre o ICMA. Para aqueles que já estão familiarizados com o ICMA, sinta-se à vontade para pular este vídeo No entanto, se você é novo ICMA e quer saber mais, preste muita atenção a este vídeo Ok, então vamos começar. A primeira coisa que você precisa fazer é se inscrever. Então, basta clicar em Começar gratuitamente. Ok, então vou me inscrever usando minha conta do Gmail, então basta clicar em Continuar com o Google Como vocês podem ver, fui redirecionado para o meu Daskbk. Então, eu tenho vários projetos aqui no Figma. Ok, agora vamos criar um novo arquivo, certo? Então, basta clicar em Arquivo de design. E basta clicar em Criar novo design. Ok, então, como vocês podem ver, fomos redirecionados para a página de edição Ok, então neste vídeo, vou te ensinar passo a passo sobre como criar interface de usuário simples para uma página de inscrição. Ok, então vamos começar. Ok, então eu vou selecionar Frame. Ok, então esse vai ser o aplicativo móvel, certo? Em seguida, selecionarei um retângulo e criaremos três retângulos Então, o primeiro é para o nome do usuário. O segundo é para o e-mail e o terceiro é para a senha. Ok, então você pode criar dois outros retângulos manualmente, mas neste caso, vou copiar e colar isso, certo? Ok, vamos lá. Ok, então, a seguir, vou criar outro ângulo de quebra aqui embaixo, e esse será um botão de inscrição. Ok, legal. Então, em seguida, vamos adicionar texto a esse design de interface do usuário. Ok, então basta clicar no texto Ok, então eu vou digitar algo assim. Cadastre-se. Page, é muito pequeno, então vamos torná-lo um pouco maior, certo? Como vocês podem ver, o tamanho do telefone é 12, então vou mudar para 35. Ok, vamos lá. E eu vou colocá-lo no centro. Ok, muito legal. Em seguida, também vou adicionar texto para comer um retângulo. Então, vamos clicar nesse ícone. Ok, então eu vou mudar o tamanho do telefone 35-20. Ok, então vamos escrever algo aqui. Nome completo. Ok, então vamos copiar e colar isso. Ok, então esse será o endereço de e-mail. E a terceira será a senha. Ok, então quando o usuário quiser se cadastrar, ele precisa digitar seu nome completo, seu endereço de e-mail e também sua senha. Ok, então, a seguir, vou adicionar texto a esse botão. Então, vamos clicar aqui. Ok, então eu vou digitar inscrever-se. E vamos colocar isso no centro. Ok, vamos lá. Então, se o usuário quiser se cadastrar, ele ou ela precisa clicar nesse botão, certo? Ok, então a seguir, vou mudar o maior e as cores, pessoal. Ok, então eu vou bloquear isso. Aqui vamos nós. Como vocês podem ver, o padeiro e a cor são brancos, então vou mudar para azul claro Ok, eu acho que isso é bom o suficiente. Olha esses caras. Muito legal, né? Você também pode alterar a cor desse botão. Como vocês podem ver, agora, a cor é cinza, então vou mudar a cor para talvez verde claro assim. Ok, parece muito legal. Ok, pessoal, então é assim que você projeta interface do usuário manualmente no VIC 11. Como criar fluxograma de usuários com Miro: Olá, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos projetar o fluxo do usuário usando o Miro O fluxo do usuário é uma parte muito importante do design da experiência do usuário, portanto, preste muita atenção a este vídeo. Ok, vamos começar. Em primeiro lugar, vou fazer login. Então, vamos clicar em Ir para o painel e eu vou fazer login usando minha conta GML E vamos clicar em Continuar. Como vocês podem ver, eu entrei com sucesso e aqui está meu painel Ok, agora vamos clicar em AI Playground e você será redirecionado para a página de edição E vamos clicar nesse ícone. E vamos escrever o aviso. Crie um diagrama de fluxo do usuário para o aplicativo AI Travel Planner. Então, neste exemplo, vamos projetar fluxo do usuário para o AI Travel Planner Este aplicativo tem três grilhões principais. O primeiro é o localizador de passagens aéreas baratas e hotéis. O segundo obstáculo é o rastreamento do orçamento de viagens e o terceiro é o gerador de itinerário de IA Ok, agora vamos clicar em Gerar. Isso levará alguns segundos, talvez 20 ou 30 segundos. Então, do jeito que acontece. Espero que não demore muito. Ok, aqui está o diagrama. Eu vou fechar isso. Ok, vamos lá. E vamos clicar em adicionar ao Canvas. H dê uma olhada neste diagrama de fluxo do usuário. Então, o primeiro é fazer login. Depois que o usuário fizer login, ele precisará escolher um desses três filtros. O primeiro é o localizador de voos baratos e hotéis. Assim, o usuário poderá pesquisar o hotel mais barato e as passagens aéreas mais baratas. Em seguida, o usuário poderá visualizar os resultados e também poderá aplicar filtros. E ao final do processo, o usuário poderá reservar o voo e também o hotel. Então esse é o primeiro instalador. A segunda opção é o rastreamento do orçamento de viagens. Assim, o usuário poderá definir o orçamento. O usuário poderá adicionar despesas, aumentar os gastos, e o sistema verificará se os gastos estão acima do orçamento e, em seguida, o usuário receberá notificações ou alertas E aqui está o terceiro instalador, o gerador de itinerário de IA. Então, primeiro, o usuário inserirá as preferências e também os destinos da viagem. Então, a IA vai gerar o itinerário. Em seguida, o usuário revisará ou editará o itinerário. E aqui está a última etapa. O usuário salvará o itinerário. Ok, pessoal, esse é o fluxo de usuários desse aplicativo. Se você é designer de UIUX, é muito importante entender o fluxo de usuários do seu aplicativo É muito importante que você entenda como seu aplicativo será usado. Ok, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. 12. Como analisar a atenção do usuário com IA: Caramba, bem-vindo de volta às capas. Neste vídeo, analisaremos as atenções dos usuários usando esse plugin Figma O nome do plugin é attention Inside. Como vocês podem ler aqui, melhore o desempenho do design com análises de pré-lançamento Portanto, essa ferramenta de IA será capaz de prever instantaneamente onde os usuários cuidarão depois de interagir com seus projetos, para que você possa economizar tempo e evitar correções após o lançamento. Ok, então agora vamos começar. A primeira coisa que você precisa fazer é clicar para cima e finalizar. Como vocês podem ver, eu tenho vários arquivos aqui, então vou selecionar este aplicativo de jogos de arquivo. Como vocês podem ver, fui redirecionado para corrigir minha página de edição Ok, então a próxima coisa que você precisa fazer é selecionar qual quadro você deseja analisar. Ok, então vamos fazer isso. Por exemplo, neste caso, vou analisar esse quadro, então basta selecionar esse quadro. Em seguida, basta clicar em Executar e selecionar Analisar design. Como vocês podem ver. Este plugin Figma tem vários recursos, como desktop, celular, pôsteres, prateleiras de embalagens e material de marketing Ok, então vou selecionar Deskcop e landing porque, como vocês podem ver, isso é como uma página de inscrição, então vou considerar isso como uma página de destino Então, basta clicar aqui. Ok, como vocês podem ver agora, a atenção interna está analisando esse quadro, então espere. Espero que não demore muito. Ok, então vamos lá. Esse é o resultado. A propósito, se você não criou atenção dentro da conta, você precisa criar uma. Então, basta acessar este site, certo? E basta clicar em experimentar agora gratuitamente. Você precisará fazer login usando sua conta do Gmail. Ok, então agora vamos voltar para a FICMA. Como vocês podem ver, depois de realizar a análise, a IA gerou esse mapa de sucesso. Portanto, com base nesse mapa de sucesso, parece que as atenções do usuário estão concentradas principalmente nessas duas partes Ok, então você também pode sentir o mapa de foco. Mapa de contraste. Então, ao projetar sua interface de usuário, você deve considerar isso em concentrações, certo? E aqui embaixo, eu também dei pontuação de foco. Como vocês podem ver pela pontuação de foco, obtivemos 100, o que é muito bom. Você pode estar se perguntando o que é Fokicore. Portanto, ele mede o nível de concentração de atenção em sua imagem. OK. E para uma clareza ideal, obtivemos 77, o que também é muito bom na minha opinião, pessoal. Ok, então, em seguida, vou clicar em More Inside Okay, então precisaremos fazer login. Como vocês podem ver, vocês têm duas opções. Você pode fazer login usando sua conta do Facebook. Você também pode fazer login usando sua conta do Gmail, então depende totalmente de você Ok, nesse caso, vou fazer login usando minha conta do Gmail Ok, então, como vocês podem ver, fomos redirecionados para o painel Attention Inside Ok, então basta clicar nisso. Você pode baixar a análise. Então, basta clicar aqui. Em seguida, basta clicar na visualização atual. Ok, então esperem, pessoal. Pode levar alguns segundos. Tudo bem. Como vocês podem ver, baixamos com sucesso o mapa de sucesso. Ok, então vamos abrir isso. Ok, parece muito legal. A próxima coisa que faremos é baixar o relatório. Ok, então basta clicar em Obter relatório. Então, espere. Talvez eu demore alguns segundos. Ok, então você precisará selecionar o formato do arquivo. Você tem duas opções. O primeiro é PDF e o segundo é PowerPoint Vou selecionar PDF. Ok, agora ele está gerando o relatório. Então, esperem, pessoal. Espero que não demore muito. Ok, agora estamos baixando o arquivo PDF. Então, espere. Ok, vamos lá. Baixamos o relatório com sucesso. Tudo bem, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo onde conduziremos uma pesquisa sobre a experiência do usuário. Vejo vocês lá. Tchau. 13. Como conduzir pesquisas de UX com o UX Pilot: Olá pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos conduzir uma pesquisa de experiência do usuário usando o UX Pilot. Ok, então há muitas coisas que vocês podem fazer. Então, o primeiro é gerar wireframe. Você também pode transformar o texto em Interno. UX Pilot também tem a revisão de design do AIB UX, para que você possa fazer o upload do design da interface do usuário, e essa ferramenta analisará automaticamente seu design e fornecerá recomendações Você pode gerar um workshop personalizado e muito mais. E não se preocupem, pessoal. O uso da loja é totalmente gratuito. Ok, então eu vou te mostrar as seções de preços. Aqui vamos nós. Como vocês podem ver, seu piloto oferece um plano gratuito. Obviamente, existem algumas limitações quando se trata do plano gratuito. Por exemplo, você só pode obter uma prévia das entrevistas com os usuários. Você só pode obter uma prévia da entrevista de design. E você só pode ter cinco modelos de UX. Portanto, certifique-se de estar totalmente ciente dessas limitações. Ok, então agora vamos começar. A primeira coisa que você precisa fazer é se inscrever, então basta clicar em Iniciar gratuitamente. Você será redirecionado para esta página. Ok, então vou me inscrever usando minha conta do Gmail, então basta clicar aqui Como vocês podem ver, fui redirecionado para o meu painel. Ok, então neste vídeo, vamos nos concentrar principalmente na revisão do design. Ok, então revise o design de UX, aprimore seu design, espalhe criatividade com novas ideias e aprimore suas habilidades de UX com análises de design baseadas em IA Ok, então quando você está conduzindo uma análise da experiência do usuário, seu principal objetivo é encontrar o design mais ideal para seus clientes, certo? Você quer garantir que o usuário do seu aplicativo ou de seus sites tenha a melhor experiência possível ao interagir com seu aplicativo ou seu site E é isso que vamos fazer neste vídeo. Ok, então essa ferramenta é muito fácil de usar. Tudo o que você precisa fazer é fazer o upload do design. Ok, se você se lembra, nos vídeos anteriores, criamos vários designs de interface do usuário. Ok, então neste exemplo, vou usar o design criado pela Musso AI Então, vou fazer o upload dessa imagem. Tudo bem. Você pode se sentir à vontade para fazer o upload dos designs que quiser . Depende totalmente de você. Ok, então basta abrir minha pasta. Ok, vamos lá. E eu vou clicar em Abrir. Ok, agora ele está fazendo o upload do design. Então, espere. O processo pode levar alguns segundos. Espero que não demore muito. Ok, vamos lá. Ok, agora vou clicar em Iniciar a revisão. Então, agora a IA vai analisar esse design. E a IA vai dar recomendações para nós, certo? Como melhorar a experiência do usuário. Ok, então esperem, pessoal. A revisão pode levar alguns minutos. Espero que não demore muito. E estou super animada para ler a resenha. Ok, vamos lá. Tudo bem, então agora vamos ler a resenha. Em primeiro lugar, temos clareza e consistência. Portanto, o botão CTA ou Call to Action, para começar a conversar, carece de contextos Considere reformular a frase para iniciar bate-papo de jogo ou algo semelhante para se conectar ao serviço oferecido Nossas seções de questionário esclarecem o propósito com um subtítulo que explica as superfícies fornecidas Para o guia de configuração rápida, precisamos explicar quais recursos podem ser vistos pelo Linkin a um guia mais detalhado ou explicar as etapas de configuração Portanto, não devemos presumir que os usuários estejam familiarizados com a interface do usuário, certo? Por fim, precisamos garantir um estilo iconográfico consistente para avatares personalizados, bate-papo por voz e texto, detecção de jogos e transmissão ao vivo Ok, então essas são recomendações sobre clareza e consistência. Agora vamos ler a revisão da hierarquia visual. Ok, então, primeiro, precisaremos aumentar o contraste do texto de navegação, dos recursos do painel, etc., relação ao plano de fundo para melhor legibilidade Portanto, a recomendação é usar cores diferentes. Ok, então agora vamos para o segundo. Entre nas seções de aventura, precisamos diferenciar o começar do botão iniciar o bate-papo para distinguir o Bitwin iniciando um bate-papo e se inscrevendo como um novo usuário Ok, então talvez seja o mesmo. Basta usar cores diferentes. E, por fim, para as sessões de registro, precisamos aumentar o espaçamento entre as opções de inscrição do Google e as opções alternativas de inscrição por e-mail para melhores separações físicas Tudo bem, pessoal, essas são algumas recomendações que você precisa levar em consideração se quiser melhorar a experiência do usuário do seu aplicativo ou site. 14. Conclusão e resumo: Pessoal do Holi. Bem-vindo de volta ao curso. Neste vídeo, vou resumir tudo o que aprendemos neste curso também vou compartilhar dicas e truques sobre como melhorar a qualidade do design da interface do usuário Ok, vamos começar com o primeiro tópico, pesquisa de usuários. Você precisa realizar pesquisas com usuários para entender as necessidades, os comportamentos e as preferências do seu público-alvo. Essa visão orientará as decisões de design e garantirá que a interface esteja alinhada às expectativas do usuário Ok, primeiro, você precisará decidir quem é seu público-alvo. Por exemplo, se você está criando uma ferramenta de análise de vendas, obviamente, seu público-alvo são profissionais de vendas. Você precisa fazer perguntas como essa. Para profissionais de vendas, qual é a parte mais desafiadora quando eles estão analisando dados de vendas? Que ferramenta adicional pode ser criada para ajudá-los a analisar os dados de vendas? Então, essas são perguntas que você precisa fazer. Ok, vamos voltar ao mapa mental e falar sobre o segundo tópico, testes de usabilidade Você precisa realizar testes de usabilidade com usuários reais para obter seu feedback sobre a interface, a funcionalidade, a usabilidade e a experiência geral do usuário Além disso, o teste iterativo permite que você melhore continuamente seu produto com base nas informações do usuário Então você tem duas opções. Você pode encontrar uma pessoa real para testar seu aplicativo móvel ou site e obter o feedback dos usuários, ou também pode usar ferramentas de IA como UX Pilot ou Cloud. Você pode fazer o upload da captura de tela da interface do usuário e escrever o baile assim, realizar testes abrangentes de usabilidade Posicione-se como usuário deste aplicativo. Forneça feedback perspicaz. Ok, então esse é o meu baile de formatura, um baile muito simples. E levará alguns segundos, talvez dez ou 20 segundos para que a IA gere a resposta. Ok, vamos lá. Conduzirei um teste abrangente de usabilidade para a placa de teste de análise de vendas do ponto de vista do Ok, então aqui estão as primeiras impressões e a experiência geral Ok, essas são uma equipe forte, limpa e profissional, sombria, com bom contraste, informações claras, hierarquia com agrupamento lógico, e há duas Três tendas de dados sem blocos de ação claros e informações contextuais limitadas para E aqui embaixo, temos um feedback detalhado sobre usabilidade. Identificamos quatro problemas: localizações atuais pouco claras, geramos rótulos de navegação, trilhas de navegação ausentes e a funcionalidade de pesquisa E temos essas três recomendações. Ok, feedback muito legal e muito perspicaz, pessoal. E vamos rolar para baixo, e a IA também fornece um resumo. Olha isso. Temos recomendações prioritárias. Temos a perspectiva final do usuário. Ok, vamos ler isso. O que eu gosto. O painel parece profissional e apresenta as informações de forma limpa. O que me frustra é que eu posso ver os dados, mas não posso agir com base neles. Sei que minha receita total é de 2,5 milhões, mas não sei se isso é bom, ruim ou como se compara à última ou às minhas metas O gráfico parece bom, mas não me dê os detalhes de que preciso para tomar decisões. E aqui está o resultado final. Parece um relatório estático em vez de uma ferramenta de análise interativa. Preciso de mais contexto, comparação e interatividade para realmente analisar desempenho do meu celular e tomar decisões informadas E a pontuação geral de usabilidade é de seis em dez. Ok, agora, vamos voltar ao mapa mental e falar sobre o terceiro tópico: tipografia legível Você precisa usar tipografia legível e de tamanho adequado Considere fatores como estilo do telefone, espaçamento entre linhas e contraste para melhorar a legibilidade, especialmente para blocos de texto mais longos Isso é muito importante, pessoal. Ok, pessoal, esse é o fim do curso. Muito obrigado por concluir o curso e desejo a você tudo de bom. Tchau.