Como dominar o design e desenvolvimento de UX da UI: noções básicas para brilhar

1. Introdução ao curso: Bem-vindo ao curso interativo e divertido mais fácil que existe. Isso o levará dos fundamentos do design e desenvolvimento da UIUX até o que é necessário para dominar a habilidade Antes de começarmos, deixe-me mostrar o que aprenderemos. Eu dividi este curso em design e pesquisa de UIUX, onde você aprenderá os fatores, os estágios e onde você aprenderá os fatores, os estágios Em design e desenvolvimento de interface de usuário, eu o dividi novamente em fundamentos de design gráfico, onde você estará bem versado em ferramentas como Photoshop Desenvolvimento de interface de usuário, aprenderemos o básico de HTML, CSS e JavaScript. Agora, para uma pequena introdução sobre mim, eu sou Mariam e este é meu rosto, e você pode encontrar meu trabalho em Mariam parvs.in Como aviso, sempre mostrei que estou no reino da animação desde o 11º padrão Eu fiz animação PSE na minha graduação. Em seguida, fui selecionado para estágios na Deloit como designer gráfico Mas em 2019, eu me senti confinado. Foi quando me deparei com o design UIUX. Desde que descobri o design UIUX, nunca olhei para trás porque esse campo é divertido e procurado Agora tenho seis anos de experiência, é por isso que acredito que é hora de passar o toque ensinando minhas habilidades em plataformas online. Vamos começar. 2. O que é design de UX?: Ok, então o que significa UX? É a experiência do usuário e o que isso significa? É como os usuários interagem com algo. Agora, o que significa design? É a aparência e a funcionalidade de algo. Então, o que acontece quando juntamos os dois termos, design de UX? Portanto, o design de UX é basicamente projetar a aparência e o funcionamento de algo para torná-lo simples e divertido para outras pessoas. Ainda confusos, vamos dar uma olhada em alguns exemplos bons e ruins de UX para entender melhor a UX. Vamos? Agora, alguns exemplos de uma boa experiência de usuário podem ser sua escova de dentes ou uma garrafa de água ou simplesmente um interruptor de luz Deixe-me explicar isso um pouco mais para você. trabalho das escovas de dente é apenas colocar pasta de dente na escova e escovar os É isso mesmo. O que uma garrafa de água faz? Abrimos a garrafa, bebemos e fechamos. É só isso. O que um interruptor de luz faz? Nós apenas ligamos e desligamos quando precisamos da luz. Isso mostra o quão simples é uma boa experiência de usuário. Agora vamos dar uma olhada nos designs grandes. A primeira foto é de um restaurante. É um cartão de menos, e todos sabemos que é difícil escolher pratos de um cartão de menos quando não há fotos fornecidas e quando há muitos pratos listados. Que tal uma máquina de lavar? Existem tantos botões e às vezes é difícil até mesmo ligar uma máquina de lavar, a menos que você tenha orientação O mesmo com o forno de microondas. Não vamos compartimentar nossos exemplos com isso. Vamos dar uma olhada em outro exemplo de down normal. Este é um exemplo de porta de empurrar e puxar. É um exemplo clássico de como os designs podem ficar confusos, independentemente de você não ter certeza de empurrar ou puxar uma porta Quando há maçanetas nos dois lados da porta, a maçaneta sugere puxar pela porta de pressão, mas a placa foi pressionada, então fica confuso, obviamente Uma boa UX é uma placa plana para empurrar e uma alça para puxar Esse design indica claramente o que fazer. Nenhum sinal é necessário. Até agora, acho que estamos claros com o tópico UX design. Agora, vamos analisar os fatores de design de UX. Uma delas será a expectativa do usuário. O segundo será a facilidade de aprendizado. O terceiro é liberdade e controle, e o quarto é surpresa e prazer. Vamos analisar isso com um exemplo de flipcard. Agora, abrimos o aplicativo flipcard e vemos todos os produtos populares que as pessoas compram imediatamente quando o acessamos Se quisermos algo específico, tudo o que precisamos fazer é pesquisar o produto na barra de pesquisa, e é isso que os usuários esperam do flipcard Acredito que o Flip Card está fazendo um trabalho muito bom em atender a esse fator de UX Assim que você entra no flip Cart, o que você faz? Você procura o produto desejado e, depois de obtê-lo, você o compra. Não acho que seja nada difícil, mesmo para um usuário iniciante. Isso porque há facilidade de aprendizado quando eu uso esse aplicativo. Agora, e se eu mudar de ideia e quiser cancelar esse pedido? O que eu faço? Eu tenho a opção? Isso vai ser uma grande gordura. Também é muito fácil, então isso destaca o terceiro fator Qual é o quarto fator? É surpresa e prazer. Tudo o que o carrinho SuperCinsFlip tem, os códigos de cupom, os cartazes de vendas, os panfletos e os brindes que acompanham o pedido, só me deixa intrigado e uso ainda mais o só me deixa Agora sabemos o que é boa UX , UX ruim e conhecemos os fatores. Mas como projetamos o design de UX? Deve haver algumas etapas e etapas para fazer isso. Clique no próximo vídeo para começar com as etapas do design de UX. 3. Etapas do design de UX: Existem cinco estágios principais do processo de design da UIC e eles são entender, analisar, idealizar, validar e iterar. Vamos percorrer cada um desses estágios para que possamos aplicar esses princípios aos nossos projetos de forma eficaz. O primeiro passo é entender. Imagine que seu chefe tenha designado você para um novo projeto de cliente. Primeiro passo, você entende. Você se senta com o cliente para entender profundamente sua visão. Não se trata apenas de fazer perguntas superficiais, mas de chegar ao cerne do projeto. Você fará perguntas como qual é a finalidade do produto? Quem são os usuários-alvo? Quais paletas de cores você imagina? Quais são os requisitos e objetivos de negócios? Você também precisa pesquisar os produtos, usuários, concorrentes e tendências do setor. Nesse estágio, o objetivo é absorver o máximo de informações possível para obter uma compreensão clara do que o cliente e os usuários esperam desse projeto. Depois de reunir todas as informações, é hora de analisá-las e essa é a nossa segunda etapa. Aqui, conduziremos pesquisas quantitativas e qualitativas. O que são pesquisas qualitativas? É aqui que você se aprofundará nos insights dos usuários. Ao entrevistar um pequeno número de usuários, você faz perguntas abertas para obter respostas ricas e detalhadas Por exemplo, se você estiver criando uma plataforma de aprendizado de fitness, seus entrevistados podem ser entusiastas Aqui estão algumas perguntas abertas que você pode fazer. Como você mantém a consistência em sua rotina de exercícios? Quais desafios você enfrenta ao tentar se manter em forma? O que você acha do uso plataformas on-line para educação física? Agora, as perguntas abertas permitem que os usuários forneçam respostas mais ponderadas e elaboradas que ajudam você a entender suas verdadeiras necessidades e Agora vamos falar sobre pesquisas quantitativas. São mais sobre os números. Você enviará perguntas fechadas para um grupo maior de pessoas para obter uma perspectiva mais ampla. Agora, o que são perguntas fechadas? Eles exigem respostas limitadas específicas, como sim ou não, ou uma escolha entre determinadas opções. Vamos dar uma olhada em alguns exemplos. Com que frequência você se exercita toda semana? Você usa algum aplicativo de fitness regularmente? Você assiste e acompanha vídeos de fitness? Com pesquisas quantitativas, você coleta dados sobre tendências e padrões, o que é igualmente importante para entender as necessidades do usuário em uma escala maior ou em grande escala. Depois de coletar os dois tipos de pesquisa, você criará personas de usuário e mapas de empatia Essas ferramentas ajudam você a visualizar quem são seus usuários, o que eles precisam e como precisam se sentir em relação aos problemas que seu produto pretende resolver O que vem a seguir? Estágio três. Vamos idealizar. Agora que você tem uma compreensão sólida dos dois primeiros estágios, é hora de criar uma ideia. Essa é a parte divertida. Você gerará o máximo de ideias possível, não importa o quão loucas elas pareçam. A partir daqui, você começará a fazer um brainstorming, esboçar, criar quadros io, projetar O objetivo aqui é organizar todos os insights e ideias em soluções tangíveis Agora vamos para o estágio quatro, que é validar. Você tem seu design e protótipo agora, mas como você sabe que funcionará com os usuários, certo? É aqui que a validação entra em jogo. Um método popular é o teste de usabilidade. Você fará com que usuários reais interajam com seu produto para ver como é fácil de usar. Outro método é o teste A/B, em que você apresenta duas versões diferentes do seu design e vê qual delas tem melhor desempenho. O feedback desses testes é frio porque destaca os pontos fortes e fracos do seu design Em seguida, iteramos e esse é o nosso estágio cinco. O processo de design de UX não termina quando o produto é validado. É hora de refinar e melhorar. Você receberá o feedback recebido, analisará seus designs e fará as alterações necessárias. Então você testará novamente. Esse processo iterativo continua mesmo após o lançamento do produto , à medida que as necessidades do usuário e as tendências do mercado evoluem Esse ciclo de compreensão, análise, idealização, validação e iteração formam a espinha dorsal de um design de Não é um processo único, é contínuo, garantindo que seu produto continue melhorando com o tempo. Agora, no próximo vídeo, vamos dar uma olhada nos fundamentos do design gráfico 4. Fundamentos de design gráfico: O que é design gráfico? É tudo o que você vê que envolve linhas, formas, texturas e equilíbrio Vamos detalhar isso. As linhas podem ser finas, grossas, curvas, qualquer coisa que separe elementos e acrescente significado Por exemplo, o site do New York Times. Ele usa linhas para guiar seus olhos pelo conteúdo, facilitando a navegação na interface do usuário e mantendo as coisas extremamente simples. Temos dois tipos de formas, formas geométricas e orgânicas Agora, o que são formas geométricas? Círculos quadrados, triângulos, polígonos, hexágonos. Eles são os que você conhece desde a escola. Formas orgânicas como folhas, nuvens, montanhas que vêm da natureza e trazem uma vibração mais fluida e natural Eles são chamados de formas orgânicas. Agora vamos falar sobre formulários. A forma é apenas uma forma com profundidade, sombra e iluminação. Dê a um círculo plano um pouco de sombra, luz e profundidade, e bam, você tem uma esfera. O mesmo acontece com o triângulo. Veja este cartão de menu. A forma como sombras, linhas e formas funcionam juntas torna esse design mais interativo e divertido Sem esses elementos, pareceria plano e monótono. O mesmo acontece com este pôster. Agora vamos falar sobre equilíbrio. Equilíbrio é fazer com que as coisas pareçam iguais. Ela é afetada pela cor, pelo tamanho, pelo número de elementos e pela forma como você usa o espaço negativo. Acerte o equilíbrio e seu design ficará harmonioso e simplesmente escreverá Assim como este web design. As texturas podem criar ou destruir um design. Usados, eles adicionam profundidade, exageram e fica uma bagunça Como esse design, em que muita textura arruinou a aparência geral Agora vamos falar sobre a regra dos terços. Ele divide seu design em nove partes iguais, ajudando você a criar uma composição equilibrada Por exemplo, confira esta foto. Ao colocar o assunto fora do centro, ele enfatiza tanto o modelo quanto o fundo, tornando a imagem mais dinâmica A maioria dos designs segue essa regra porque ela guia naturalmente os olhos do espectador. Mas às vezes quebrá-lo pode ser apenas eficaz. Quero dizer, experimentar no final do dia é fundamental. Além disso, esses são os sites que serão úteis em sua carreira como designer gráfico ou designer de URUX Seja para ícones ou imagens, todos eles são isentos de direitos autorais Fique ligado e veremos como o layout e a composição reúnem todos esses elementos para criar designs incríveis 5. Layout e composição: O layout e a composição são fundamentais no design. Eles trazem estrutura e clareza por meio de cinco princípios principais: proximidade, espaço em branco, alinhamento, contraste, hierarquia e Vamos dividi-los. Proximidade significa agrupar itens relacionados para tornar o conteúdo mais claro e fácil de entender Por exemplo, pegue esse currículo. Detalhes como educação, experiência e habilidades estão bem agrupados Podemos acompanhar facilmente. Tudo está em seu lugar, tornando-o super legível Agora veja este site chamado Slice. Você pode ver como o texto e os gráficos são agrupados. Texto à direita, gráficos à esquerda, todos os elementos relacionados estão próximos, o que cria uma sensação de proximidade. O mesmo vale para aqueles cartões sobre pagamento automático de contas e análise de gastos Embora os designs sejam diferentes, eles são agrupados para comunicar um único tópico Em seguida, o espaço em branco, também conhecido como espaço negativo. Trata-se de usar o espaço vazio para reduzir a desordem e melhorar a clareza. Pense nisso assim. Já viu essas imagens minimalistas que apenas duas cores são usadas, mas você vê claramente dois homens frente a frente ou uma chave ou ursos se abraçando ou uma chave ou ursos Esse é o poder do espaço em branco no design. Tornando visuais complexos simples e limpos. Para o alinhamento, onde tudo se encaixa. Veja este site de cartão de crédito chamado OneCard. Você notará como o texto está alinhado à esquerda e os gráficos à direita Novamente, proximidade e espaço em branco também são usados aqui. Você consegue notá-los? Seja à esquerda, à direita ou no centro, alinhamento mantém as coisas organizadas e visualmente atraentes Agora vamos mergulhar no Figma para explorar o alinhamento por meio de uma atividade prática Aqui estão algumas formas e vamos alinhá-las às bordas dessa moldura Mas antes de fazermos isso, vamos começar com um arquivo de design primeiro no Figma Vá em frente e crie seu novo arquivo de design. Certifique-se de nomear seu arquivo de design. Vou nomear esse arquivo como meu primeiro projeto Figma. Agora eu também vou renomear essas páginas. A primeira página será sobre os fundamentos do alinhamento. Agora vou colar o trabalho básico de alinhamento que fiz para você clicando em Controle C, Controle V, ou eu poderia simplesmente clicar com o botão direito do mouse e Colar. Agora, vamos começar. Primeira forma, vou alinhá-la na parte superior esquerda na parte superior direita e esta na parte superior central Essas ferramentas à direita são muito úteis para fins de alinhamento. Vamos aos triângulos. Este para o centro esquerdo, último triângulo para o centro direito e o do meio permanece no centro. Agora, para os círculos. Primeiro na parte inferior esquerda, último círculo na parte inferior direita e o círculo médio na parte inferior central. Isso é tudo para esta atividade. Vamos aprender sobre contraste agora. O contraste é fundamental para fazer com que os elementos se destaquem, atenção e mostrem o que é importante no design. contraste pode melhorar ou destruir seu design, precisamos usá-lo com sabedoria Vamos usar a credibilidade como exemplo. Eles dependem muito do preto e branco. Por quê? Porque quer uma atmosfera minimalista e elegante que reflita sofisticação e simplicidade, alinhada Honestamente, tudo se resume a criar um forte impacto visual sem sobrecarregar o usuário Para verificar o contraste, temos ferramentas como o verificador de contraste da Adobe Isso ajuda a garantir que seu design seja acessível por meio da visualização de texto normal, texto grande e elementos gráficos Eu recomendo escolher duas cores contrastantes que passem nos três testes: texto normal, texto grande e elementos gráficos Se eles não passarem, eles forçarão os olhos do usuário e não se esqueça de verificar o daltonismo. De acordo com estudos, um em cada 12 homens e uma em cada 200 mulheres são daltônicos em todo o mundo. Use o botão no verificador de contraste para simular o para simular Isso garante que seu design seja claro para todos. Aqui estão alguns exemplos de contraste bom e ruim para que você possa ver a diferença. Agora vamos falar sobre hierarquia. Pense na hierarquia no design como uma cadeia de comando no local de trabalho Como novato, você não mostra seu trabalho ao cliente imediatamente. Primeiro, ele vai para o líder da equipe, depois para o gerente e, finalmente, para o cliente após várias aprovações. O mesmo conceito se aplica ao design. hierarquia orienta os usuários pelo seu conteúdo, enfatizando o que é mais importante Tome crédito novamente. Observe como os cabeçalhos são grandes e em negrito, o corpo do texto é muito menor Isso é hierarquia em ação. Ele te diz onde procurar primeiro. Entendi. Ok. Agora vamos começar com a repetição. A repetição cria consistência e reforça a identidade do É por isso que adotamos uma paleta de cores, estilos de fonte e componentes definidos em todo o projeto Mesmo que o projeto tenha cerca de 40 páginas da web. Veja Eudemi ou Skillshare, por exemplo, seus cartões de curso são repetidos no layout muitas vezes, reforçando a estrutura e a legibilidade do Porque, no final das contas, você quer atrair os usuários para se matricularem nos cursos em vez de ver o layout de design da Udemi ou da Skillshare Com isso, abordamos o layout e a composição. A seguir, fontes e tipografia. Nos vemos no próximo vídeo. 6. Próximo vídeo: próxima quarta-feira; fique atento: Ei, pessoal, só um aviso rápido. Meu próximo vídeo sai na próxima quarta-feira. Mas se você não quiser esperar, participe das minhas aulas on-line interativas para sessões presenciais ao vivo com feedback em tempo real. Para obter detalhes, entre em contato com meu gerente via Whatsapp através do link na biografia ou visite Mare Purves dot Nos vemos na próxima aula ou no próximo vídeo. Tata