Curso de UI/UX Design para iniciantes

Fala galera meu nome é André sad nesse curso eu quero te explicar os fundamentos básicos de yox da maneira mais visual possível para que você não tenha dúvida principalmente para você que tá começando eu vou começar bem do básico mesmo explicando o que que o ywx designer faz ele basicamente cria todas as interfaces que você vê aí em websites e aplicativos que você usa no seu dia a dia e falando em aplicativos que você usa no seu dia a dia eu separei dois aqui bem famosos para te mostrar então como vocês podem ver na esquerda

a a gente tem aqui o Spotify né que você usa para escutar música podcast essas coisas e na direita nós temos o Netflix eles são aplicativos completamente diferentes com público alvos também diferentes mas tem elementos muito parecidos na hora da navegação tá vendo isso daqui ó nessa parte de cima aqui do nosso aplicativo do Spotify Se você olhar o Netflix você consegue ver que ele tem uma navegação parecida tá vendo que essas partes de filtragem aqui de séries filmes categorias a gente tem aqui ó e música podcast E audiobooks então esse tipo de filtragem é

muito similar o que que eu quero dizer com isso que existem padrões para você seguir na hora que você tiver desenvolvendo uma interface uma bem famosa e bem usada essa barra aqui inferior Você sabe por que ela tá aqui a gente tem essa barra aqui embaixo porque ela é próxima do seu dedão e muita gente usa aqui o telefone com uma mão só e na maioria das vezes vezes à direita então para ela ficar mais fácil o acesso ali com o seu dedão essa barra é posicionada ali embaixo e um outro padrão também que você

pode ver é esse daqui ó tá vendo que a gente tem aqui todas as fotos aqui no caso é como se fossem playlists né a gente tem aqui essas playlists que você pode fazer um scroll horizontal né Você pode deslizar horizontalmente e aqui funciona também da mesma forma você vê que o componente ele é muito parecido então mesmo esses aplicativos sendo diferente aqui você consegue ver essas similaridades Então isso é muito importante para que isso entre na sua cabeça que para desenvolver uma interface você pode seguir certos padrões Mas você pode estar pensando mas André

Putz então o designer ele é meio preguiçoso né ele não precisa sair criando m de coisa não calma esses padrões são exatamente pensados para facilitar a vida do usuário e um bom designer de verdade sabe identificar esses padrões e criar em cima disso e para você que tá começando O importante mesmo é entender esses padrões para que você consiga replicar isso e Tem empresas aí como Apple Google que ditam esses padrões um outro ponto importante que eu gosto de pensar é que o design funciona como se fosse um lego imagina que você tem várias peças

repetidas que você pode ir montando e no final você tem uma interface bem completa e bem pensada quer ver eu vou mostrar para vocês vamos aqui direto pra tela olha só dá uma olhada no site das Americanas Se você começar a quebrar ele você vai encontrar um padrão repetitivo bem constante por exemplo você tem essa opção aqui de baixar o aplicativo liquidação de verão entrega hoje todos esses quadradinhos aqui né com as bordas arredondadas eles são pecinhas do Lego então se você scrollar aqui para baixo né deslizar Aqui para baixo você vai conseguir encontrar por

exemplo nessas czin que eu gosto de falar que são essas peças onde tem os produtos elas se repetem completamente e o que muda basicamente é informação é o texto é o preço são as estrelinhas essas informações mudam mas o corpo e a estrutura dele é praticamente igual você vê que todos eles aqui respeitam o mesmo tipo de conteúdo Então essa é uma parte do Lego que se repete Quer ver Esse aqui é um outro tipo de card né ele funciona basicamente com a mesma informação S porém com uma estrutura um pouco diferente já aqui que

a gente tem Aproveite as melhores ofertas cada cardz inho desse você vê que ele tem o mesmo design então ele tem a mesma dimensão a mesma largura a mesma altura então todos Eles seguem esse mesmo padrão e você como designer vai ter que criar esses elementos aqui e saber aonde você vai ter que botar na tela porque imagina só por que que eu Aproveite as melhores ofertas tá aqui embaixo se a gente vira aqui para cima por que que essa barra aqui com todos esses menus aqui estão aqui em cima tem um propósito tem um

porquê por trás disso por que que fica mais fácil pro usuário botá l em cima a barra de navegação e não botar L embaixo tem padrões de comportamento que rolam por trás disso que estudando você consegue aprender para poder replicar isso nas interfaces E aí que entra o ux o ux a sigla significa user Experience E se eu for traduzir pro português é experiência do usuário o foco do IX é justamente o planejamento do Design o planejamento a estruturação e eu gosto de dividir o IX em entendimento e estruturação Porque pensa bem não tem como

você pegar uma interface você pegou lá um projeto para fazer e já sair rabiscando a interface num papel numa folha em branco sem saber de fato o que que você tem que fazer e para quem que você vai fazer você tem que se perguntar o que que é esse aplicativo o que que é esse website é um app de música é um e-commerce cada coisa vai ter um público alvo diferente vai ter um comportamento diferente vai ter uma maneira de você lidar com o design Através disso e até metodologias de pesquisa que você vai ter

que fazer para cada um Porque pensa bem aqui o e-commerce que a gente tem aqui você olhar aqui a barra de navegação Ela tá aqui porque o usuário normalmente escaneia a página da esquerda pra direita e de cima para baixo então Normalmente quando você entra no e-commer as chances de você já dar de cara com o produto que você quer é muito pequena então normalmente você tem que buscar o seu produto então por isso que essa barra lá em cima com o campo de texto para você adicionar o produto Ela é bem larga bem grande

e bem chamativa se você for olhar outro site da decolar.com a gente vê que a gente tem uma barra de navegação no topo muito parecida com todos os campos de texto porém tem uma necessidade completamente diferente uma coisa é ir na amicas comprar uma myir Fryer e outra coisa eu vir aqui e comprar uma passagem para São Paulo as necessidades do usuário são completamente diferentes mas a forma com que eu tenho que achar é muito parecida então como é importante eu encontrar aqui a parte da passagem né para eu poder buscar a passagem ela sempre

tem que est lá em cima chamando bastante atenção tudo isso tem que ser feito com muita pesquisa entrevista com usuário análise de concorrente Existem várias metodologias de que te ajudam a chegar no melhor resultado pro seu usuário porque não tem como cara você tem que entender a vida do seu usuário para que você planeje algo que vá suprir a necessidade dele porque esse é o seu objetivo Beleza agora que você entendeu o que você tem que fazer é hora de botar a mão na massa você vai começar a fazer os seus primeiros rascun para você

começar a tirar aquela coisa que tá dentro ali da sua cabeça e botar aquilo no papel você pode usar alguns softwares e você também pode usar um simples de papel e caneta vai de acordo com a sua preferência o importante é que você tire toda aquelas ideias que estão na sua cabeça para você começar a desenhar o máximo de ideias que você conseguir isso porque o design final ele já não sai pronto você simplesmente entende o que você tem que fazer e parte direto pro design final adicionando cores Fontes o design ele é feito passo

a passo primeira coisa como eu falei é você de fato botar toda essa sua ideia para fora e começar a fazer vários rabiscos e aí você mostra para as pessoas que estão envolvidas no projeto com você testa com elas testa com alguns usuários também ou potenciais usuários desse seu produto e esse design bem rascunhadas que eu vou te falar um pouquinho sobre ele tá vendo aqui eu tenho basicamente uma evolução do Design aqui é um projeto simples é um site de uma pizzaria eu quero te mostrar aqui a evolução até chegar no estágio final eu

começo super simples rabiscando mesmo todas as ideias e faço um Wire frame de baixa Fidelidade que é simplesmente para tirar aquilo que tá tudo preso dentro da minha cabeça e depois que eu vou mostrar pro pessoal que a galera tá entrando na mesma página que eu e tá de acordo com o que eu tô fazendo aí eu vou e passo para um wireframe de alta fidelidade e muitas vezes assim esse wireframe de alta fidelidade eu posso fazer até testes com usuários Caso seja um produto já existente E aí recebo feedbacks né tornos de como os

usuários estão usando esse Warframe que eu fiz e a partir daí eu vou e passo pro design mais elaborado com cores com fotos com fonte tendo uma cara mais de design final porque com base nisso eu já passei por várias etapas que validaram todo o meu design então eu tô pronto para deixar ele com a cara final para mandar pro desenvolvedor e muitas vezes a gente faz um protótipo também para voltar e ter está a versão final com usuários para que você receba mais feedbacks e ver como é que eles estão interagindo se eles estão

gostando se eles estão tendo algum tipo de dificuldade para você voltar aqui e acabar consertando as coisas que eles estão reclamando e a propósito esse software que vocês estão vendo aqui é o figma Eu uso o figma porque nesse momento que eu estou gravando esse vídeo ele é o software mais usado e mais pedido no mercado e o melhor de tudo é que ele tem a versão de graça E é bom para quem tá com é super simples de você aprender e no figma também você consegue fazer os seus protótipos aqui em de alta fidelidade

e botar no celular para você conseguir testar e ver também como é que ele funciona Olha que interessante a gente tem aquele mesmo projeto no formato mobile Onde eu posso ver todos aqui os meus as minhas pizzas aqui eu posso escolher Ah eu quero ver mais informações sobre a minha pista de Marguerita eu dou um clique aqui e consigo ver todas as informações a interação então a gente CONSEG consegue montar isso tudo dentro do figma isso é importante para que você mostre pro seu time como que isso vai funcionar e melhor ainda que você consegue

mostrar pro desenvolvedor exatamente a interação que você tá buscando e eu não sei se você reparou né nesse protótipo que eu mostrei para vocês ele tem vários efeitos de sombra de luz de cores interações Então quem pensa nisso é o ui design o ui né Ele é uma abreviação para user Inter fez ou interface do usuário é quem vai criar a interface para que ela fique memorável que ela tenha personalidade que ela transpareça o que aquela marca representa e no ui a gente usa várias técnicas que ajudam a gente criar um design bem equilibrado e

bonito quer ver vamos direto aqui pra tela que eu vou te mostrar algo bem maneiro normalmente num aplicativo a gente tem aquela barra inferior que eu mostrei para vocês né Tanto do Netflix quanto do Spotify mas existem formas de você fazer essa barra de navegação e tem psicologias por trás tanto de cores quanto de hierarquia para que você consiga fazer algo mais equilibrado Segue o exemplo aqui se você olhar essa barra aqui da esquerda a gente tem muita coisa chamando para esse botão demais e esse botão demais tá fazendo uma quebra de hierarquia e espaçamento

aqui tá vendo que o espaçamento entre uma opção e outra aqui da Barra inferior tá muito M grande e aqui tá muito pequena e aqui também tá diferente de um lado pro outro acaba que você não sabe o que que é mais importante e uma outra coisa também a gente tem aqui ó a gente tá no como se fosse no início aqui desse aplicativo né ISO aqui é como se fosse só uma parte da interface que eu resolvi dar um zoom aqui pra gente conseguir entender bem e aí você tem essa briga aqui o botão

de mais tá com uma cor azul super chamativa e aqui também o início também tá com azul super chamativo e eles acabam brigando uma outra coisa também é o espaçamento entre um e outro tá muito apertadinho Isso dificulta a leitura para caramba e todos eles aqui com esse texto em caixa alta que a gente fala que são todas essas letras maiúsculas dificultam também a leitura as letras acabam embaralhando Quando você vê isso dentro do seu celular então para ajustar essa barra inferior eu procuro deixar ela com espaçamentos iguais hierarquia e tamanhos de ícones de funções

parecidas para que eu consiga guiar o usuário e informar onde é que ele tá né de uma forma mais fácil porque se você olhar aqui ó dá uma olhada nas distâncias entre um elemento e outro estão exatamente iguais a distância entre o ícone e o texto também tá um pouco maior em relação a que a gente tinha aqui fazendo com que você consiga ler de uma forma mais fácil O legal é que mesmo o design seguindo o padrões já pré-estabelecidos no final do dia ele é único e para você desenvolver um design cada vez mais

único ele tem que ter personalidade e para você criar essa personalidade tem que fazer uma pesquisa e quando você tá fazendo essa pesquisa de design tá na sua fase de entendimento sabendo para quem esse design é você consegue definir tipo uma pegada pro seu design porque imagina só você pode estar sendo contratado para fazer um site de uma barbearia você pode ir para uma linha mais rústica seguindo aquelas barbearias lá dos anos 50 com aquele elemento clássico que você tem lá daquela coisinha que fica na porta com a cor vermelha e azul ou você pode

seguir uma linha mais moderna né que tem essa onda lá do visagismo Hoje em dia que a galera corta o cabelo seguindo aí toda o formato do seu rosto e isso Segue uma linha mais moderna então o estilo que você for seguir pra barbearia moderna vai ser diferente dessa que é mais rústica e para explicar essa visão que você tem pro seu cliente você tem que mergulhar mesmo de cabeça nas referências É mesmo você tem que ver o que que outros designers estão fazendos para você criar algo único você se influenciar você ficar inspirado para

que você crie algo especial melhor do que os seus concorrentes parece contraditório mas é muito raro você conseguir criar algo 100% da tua cabeça o que mais você vai ver na nossa profissão é de fato alguém pegando algum tipo de referência você vai achar alguma coisa interessante e você vai botar ele vai separar em algum lugar para que você consiga se influenciar você vai pegar vários elementos ali que você acha interessante para você conseguir botar dentro do seu projeto então criassem 100% sem você olhar nenhum tipo de referência muitas vezes é até um tiro no

pé e olha só eu mesmo tendo bastante experiência já trabalhando com vários projetos eu todo dia Faço um exercício de entrar em sites como o behance como dribble como Awards como outros sites que me inspiram para que eu mantenha a minha cabeça sempre fresca com novas referências e não fique estagnado preso no passado um outro ponto muito importante do Yi designer é garantir que o seu design ele vai funcionar em todos os dispositivos pode ser celular tablet desktop né um computador televisão smartwatch isso vai depender muito do seu usuário lá na parte de entendimento e

estruturação você vai descobrir isso quem é que usa mais o meu aplicativo ou Website para até você priorizar o seu design Às vezes você pode começar o seu design pelo mobile e depois ir pro desktop porque se você tem uma prioridade no mobile você tem que otimizar o seu design primeiro para mobile para depois você fazer ele no desktop e nos outros dispositivos agora Digamos que você fez um site lá para uma empresa você foi contratado lá para fazer uma Landing page que a gente fala que é como se fosse um site de uma página

só e depois de um tempo Eles vieram falar com você de novo Pô a gente gostou dessa página ela tá funcionando muito bem e a gente quer criar uma outra página pro mesmo site você vai começar tudo do zero claro que não essa outra página do mesmo site ela tem que seguir a mesma linha visual para que o usuário sinta que ele está no mesmo lugar e aí você vai reaproveitar os elementos que você fez da sua página inicial para essa nova página e esse reaproveitamento né desses elementos a gente surge um conceito chamado design

System design system é como se fosse uma biblioteca de elementos onde você vai encontrar botões Campos de texto barras de navegação elementos que se repetem durante o seu projeto ele te ajuda a manter a ência no seu projeto fazendo com que você tenha uma escalabilidade maior e também Facilite a criação do seu design mas eu sei o design System ele é uma parada mais avançada ele não é necessário para quem trabalhando num projeto simples para quem tá começando e mais um detalhe o design ele não simplesmente acaba quando você manda pro desenvolvedor o design é

uma parada que tá em constante evolução você nunca vai terminar um projeto e vai falar assim Putz tá perfeito eu nunca mais vou precisar mexer nisso aqui errado normalmente Você vai publicar o seu projeto alguns usuários vão utilizar e vão começar a identificar falhas e você também vai começar a identificar falhas que alguns usuários Não estão conseguindo completar ação ou uma forma de você facilitar a ação dele e você tá ali em constante melhoria E para isso existem plataformas como Hot jar maze Google Analytics que ajudam você a encontrar esses erros elas ajudam a ver

como os usuários estão interagindo com a plataforma Aonde eles estão clicando ele te ajudam a ter uma visão estratégica e métrica do seu design e depois cabe ao design pegar ali toda essa informação botar ela aqui embaixo do braço e resolver a sua função é resolver problemas e aí deu para entender o que que é ui Wax e a importância dele Claro que isso aqui é uma visão geral mas se você quisesse aprofundar mesmo de verdade e fazer uma imersão aí yx se liga no meu curso você vai conseguir aprender desde o zero até a

aplicação a vaga você vai passar por todos os conceitos de ui Ox você vai aprender o figma você vai fazer vários exercícios e projetos ele vai te ajudar a dar esse pontapé inicial para você que tá começando entrar de cabeça e ficar preparado pro mercado então não perde essa oportunidade clica aqui no link na descrição ou no botão que você tá vendo aqui embaixo caso você esteja buscando algo na área de tecnologia e o IX é uma excelente opção e eu te garanto que o meu curso vai te ajudar mais rápido a chegar lá beleza

eu vou ficando por aqui galera fui