Transcrições
1. Introdução: Oi. Meu nome é [inaudível]. Projeto experiência visual e do usuário para produtos digitais. O design sempre foi a minha maior paixão e tornou-se o papel principal da minha vida quando escolhi o design gráfico. Após a formatura, consegui meu primeiro emprego como designer gráfico em uma empresa que trabalha com produtos de saúde. Eu desenho modelos que certamente é amplamente projetado, para trabalhar com técnicos, interagir com designers dos EUA, [inaudível] medidas de produto, então [inaudível] a combinação de design e tecnologia coisas que você [inaudível] deve olhar para ele. No começo eu não sabia como fazê-lo, eu começo com eu mesmo como estudar, fazer cursos online, ler artigos e assistir tutoriais do YouTube. Levei um tempo para aprender os conceitos básicos do processo de design U I Unix, mitologias
mistas e aprender mais sobre como projetar um site, aplicativo
modal ou um painel a partir do zero. Agora [inaudível] que estou trabalhando como designer gráfico [inaudível]. Hoje nesta aula, eu vou levá-lo através de todos os passos que eu dei para algum pequeno design gráfico para U I Unix design. Mas vamos falar sobre as semelhanças e diferenças dos enchimentos de aço D. Bem, ou para ferramentas e software é que você precisa aprender o que você deve fazer para mudar para U I Unix design, e finalmente, vamos projetar um aplicativo de compartilhamento dividido juntos. Assim que gerar seu primeiro projeto U I Unix para seu portfólio. Vamos projetar este projeto em quatro etapas. Primeiro vamos redefinir, I aliados, mas também sobre entrevistas de usuários, pesquisas
on-line e compensar. Próximo ao segundo passo, onde tudo pode criar personas, storyboards e fluxos de usuários. [ inaudível] e ideias como esboçar, fazer protótipos e criar vibrações. Finalmente, você vai projetar o U I usando figma. Como [inaudível] para designers gráficos [inaudíveis]? [ inaudível] Design [inaudível] em si [inaudível].
2. Entendendo papéis de design: Antes de mergulhar no projeto, eu adoraria dar-lhe mais informações sobre [inaudível]. Era uma vez, design significa design gráfico. Mas hoje, há mais posições relacionadas ao design, como UI, UX, design visual, design de atração, [inaudível] continua acumulando. Estou prestes a lhe dar uma definição muito curta para um [inaudível] para que você não se confunda com os títulos. Vamos começar com design gráfico. O design gráfico tem provavelmente um
dos melhores novos títulos de emprego no mundo do design e tecnologia. Eles geralmente trabalham mais com desenhos de impressão e entregas. Os designers gráficos conhecem os fundamentos do design, como tipografia, teoria das cores, ilustração e até fotografia. O outro termo que você já ouviu frequentemente, é interface de usuário ou design de interface do usuário. Simplificando, a interface do usuário é todos os elementos visuais que um usuário pode interagir com outros dispositivos tecnológicos, incluindo aplicativos móveis e sites. Um designer de interface do usuário é essencialmente responsável por como tudo se alinha na página em relação uns aos outros. Ela decide o trabalho superior de elementos como [inaudível], têxteis, cores, etc. O objetivo é tornar a interação o mais simples e eficiente possível. Por outro lado, UX, que significa design de experiência do usuário. É principalmente preocupado com a sensação do produto. Os designers de UX olham para o design a partir da mentalidade de um usuário e resolvem possíveis problemas. Para fazer isso, eles pesquisam, esboçam, fazem protótipos de quadros brancos e fazem vários tipos de testes com os usuários para melhorar a ideia inicial. A interface do usuário está focada em como um produto parece e opera. Isso inclui tudo, desde projetar o fluxo de navegação de um site até seu design visual. UX, no entanto, está focada em como o produto se sente e
garante que tudo é satisfatório para os usuários e os deixa felizes. Imagine um corpo humano, os ossos são o código. UX é tudo dentro que faz com que o corpo funcione bem e UI é tudo fora que faz com que o corpo pareça atraente e agradável. A outra regra de design é o design visual. O design visual nasceu de uma mistura de design gráfico e interface do usuário. Ele se concentra em visuais de um site ou qualquer outro produto digital. O produto de acabamento parece bom? Essa é a pergunta que os designers visuais respondem. Além disso, você pode ter ouvido designer de produtos. Designer de produto é uma soma de termo para descrever um designer que geralmente está envolvido na criação da aparência,
interface do usuário, e sensação, UX, de um produto inteiro. Você entendeu os objetivos de negócios? Que problema este produto vai resolver? Quem tem esse problema? Eles trabalham com âmbitos maiores de responsabilidade e supervisiona a visão do produto de alto nível. Existem outras posições relacionadas com o design na indústria, mas eu queria destacar as que você pode ter ouvido frequentemente. No próximo vídeo, vamos falar sobre por que bons designers gráficos com recursos
de design fortes podem mudar facilmente para o design UI/UX. Quais são as semelhanças entre esses dois campos?
3. Grandes benefícios para designers gráficos se aventais em um design de UI/UX: Design gráfico e design UI/UX têm muitas habilidades sobrepostas. A mudança de carreira pode vir naturalmente para aqueles que já têm grandes habilidades de design. Uma das habilidades semelhantes é o design emocional. Tanto os designers gráficos quanto os designers de UX tentam criar uma conexão emocional com seus usuários. O design gráfico é sobre evocar emoções dos usuários através de imagens, cores e tipografia, mas os designers de UX estão limitados à parte visual do design. Focamos em: arquitetura de informação, design de
interação e acessibilidade de design. A outra habilidade que ambos têm é atenção aos detalhes. O design está nos detalhes, e as habilidades de design gráfico são muitas vezes orientadas para uma grande concentração de detalhes, como digitalização de texto e alinhamento de elementos. Os designers de UX são os mesmos; eles prestam muita atenção aos detalhes que melhorariam um produto e proporcionariam uma melhor experiência para os usuários. Além disso, ambos são qualificados em Creative Thinking. Designers são solucionadores de problemas. Designers gráficos e designers de UX são igualmente qualificados em pensamento criativo e resolução de problemas. Para entender por que os designers de UX precisam de habilidades de pensamento criativo, você deve primeiro aprender sobre o processo de pensamento de design UX. Design Thinking é um processo contínuo que flui através das seguintes etapas: empatizar, definir, idear, protótipo e testar. Dentro de cada estágio, os problemas são emoldurados, perguntas e ideias aparecem até que as melhores soluções apareçam. A outra habilidade sobreposta é Convenções de Design. Convenções são a seleção de boas soluções que os usuários gostaram ou encontraram fácil de entender ao longo dos anos. Para entender melhor, vamos considerar convenções sobre uso de cores e formas. O primeiro sinal usa duas convenções fortes para transmitir o perigo; a cor vermelha e a forma do losango. Embora o aviso de palavra seja visível em ambos os sinais, a primeira imagem pode transmitir a mensagem sem os textos. A segunda imagem requer um texto para identificá-lo instantaneamente. Muitos designers gráficos já estão familiarizados com convenções em design web ou aplicativo, que significa que eles podem se adaptar facilmente a uma função de design de UX. A outra habilidade semelhante é a estética. Um dos benefícios para o design gráfico mudar para o design UI/UX é que eles podem tornar as coisas bonitas. Os designers gráficos têm essa habilidade natural de tornar as coisas visualmente [inaudíveis] usando princípios de alinhamento da hierarquia visual. Mas o design visual pode melhorar
a experiência geral do usuário de um produto, fazendo com que os usuários se sintam melhor sobre ele. Não se esqueça de que as habilidades de design gráfico são um recurso ao trabalhar em um projeto de UX. Os campos de design são transferíveis,
então, se você pretende aprender uma nova especialidade, você só precisa praticar, nada é impossível.
4. Por que você deve mudar para o design de UI/UX: Trabalhar em tecnologia projetando produtos digitais
inovadores e interagindo com os consumidores é tão agradável. Quero lhe dar algumas razões pelas quais UI/UX é o melhor trabalho do mundo. Os designers de UI/UX estão em alta demanda. [ inaudível] eletrodomésticos inteligentes tornou-se uma parte essencial de nossas vidas. Com isso, constantemente para design UI/UX. A outra razão é que os designers de UI/UX são mais do que designers gráficos. Um designer de UX ganha mais do que um designer de interface do usuário, enquanto um designer de interface do usuário ganha mais do que um designer gráfico. De acordo com a PayScale, o salário médio para um designer gráfico em Amsterdã é de €29.000, enquanto um designer de UX médio recebe €58.000. A outra razão pela qual você deve mudar para UI/UX é que quando você está projetando um produto digital, você nunca se sentiria chato, porque designers de UX enfrentam diferentes tipos de perguntas todos os dias. Você está mudando a vida das pessoas. O papel central do design do produto é tornar a vida das
pessoas mais confortável do que nunca para que você, como designer
de produtos, se sinta tão satisfeito porque você está diretamente conectado aos usuários e você pode ver o impacto do seu design. Uma das razões mais importantes pelas quais eu amo UI/UX é o processo de design colaborativo que ele tem. Os designers de UX trabalham em estreita colaboração com outros designers, desenvolvedores, gerentes de produtos e até mesmo partes interessadas, a fim de garantir que os projetos finais correspondam às expectativas de todos. A outra razão para mudar para o campo
UI/UX é ter a chance de pesquisa de produtos e testes. Você vai fazer um monte de pesquisa e isso parece um passeio para você. Você vai precisar de muitas pessoas, falar com elas, e analisar como [inaudível] afeta suas vidas, como elas se sentem, o que precisam. Esta é uma grande vantagem em relação sites de design
tradicionais sentados atrás da mesa ao longo do tempo, e apenas projetando sem qualquer interação com o usuário final. A última razão é a demanda por designers multi-qualificados de UI/UX. As empresas preferem contratar um designer de UX/UI em vez de projetar uma regra específica para UX. [ inaudível] depende da escala ou orçamento da empresa, mas felizmente para designers gráficos virou designers UX, que você será capaz de se destacar de outros candidatos porque você já sabe design visual e de comunicação, e você é um designer multi-qualificado. Qual é o roteiro para designers gráficos se tornarem designers de UI/UX? No próximo vídeo, vamos falar sobre maneiras que você pode escolher para praticar essas habilidades.
5. Roteiro para designers gráficos: O design gráfico já está falando a linguagem do design. Você só precisa aprimorar suas habilidades para incluir aquelas que são exclusivas do design UI/UX. Neste vídeo, vamos falar sobre maneiras de aprimorar essas habilidades. A primeira é a educação. Podemos procurar suas melhores universidades locais que oferecem cursos especializados como: interação
homem-computador, design de experiência de usuário ou design de interação. A outra maneira de ganhar novas habilidades que eu mesmo sempre escolho é aprender com ótimos programas educacionais, plataformas
online como Skillshare, Coursera, Udemy e LinkUp. Existem muitas outras plataformas online. Acabei de listar os mais famosos. Além disso, você pode pesquisar no YouTube. O YouTube tem muitos tutoriais de designers que ensinam design de produtos, software de
design ou simplesmente expressam suas experiências. O número dois é ler artigos UI/UX. Um bom lugar para encontrar artigos UI/UX é Médio. Existem algumas boas publicações que você pode assinar como Muzli, Prototypr.io, UX Design, CC, UX Planet. organização. Outros sites para aprender sobre UX incluem a seção IDEO,
UX Magazine e Smashing Magazine UX. O número três é aprender prototipagem. protótipo interativo torna possível experimentar verdadeiramente o produto, por isso é essencial que qualquer designer de UI/UX aprenda uma ferramenta de prototipagem. Existem algumas ferramentas de prototipagem como InVision, Marvel App, Axure, Framer ou Flinto. número quatro está se atualizando com as tendências da interface do usuário. Ex-designers e Behance para ser ensinado com tendências de design de interface do usuário. No Behance, há muitos profissionais
criativos mostrando seus trabalhos mais recentes na plataforma. Dribbble é uma plataforma de portfólio de design social que é semelhante ao Behance, mas principalmente mostra trabalhos em ilustração e design de interface de usuário. Para postar seus trabalhos na plataforma, os usuários devem receber um convite de outros usuários. Faça uma pesquisa por convite e alterne para recente para novas publicações por usuários. Esses usuários geralmente realizam uma mini competição para revisar seus trabalhos antes de encaminhar um convite. Alternativamente, confira Uplabs e Awwwards. número cinco é começar a praticar UI/UX. Existem algumas maneiras de praticar o design UI/UX. Se você não tem projetos reais onde você pode se inscrever, conhecimento UI/UX, você pode participar do desafio diário de interface do usuário e colocar seus favoritos em seu portfólio. Você pode encontrar um monte de casos para estudos sobre design de um aplicativo ou site em Medium. Por último, mas não menos importante, você pode ganhar mais habilidades práticas aplicando-se a estágios. Você tem a chance de aprender com outros designers da equipe de design, bem
como a oportunidade de construir um portfólio a partir de um projeto real. Também não se esqueça de ter o hábito de pedir feedback. Novamente, Dribbble ou Behance são ótimos lugares para mostrar seu design. número seis está focando na construção de um portfólio UI/UX. Na indústria do design, sempre que você quiser se candidatar a uma posição de design, o empregador sempre pede um portfólio de design. Um dos melhores lugares para encontrar centenas de carteiras de design é Bestfolios.com. Você pode ver os portfólios do designer, seus projetos, estudos de caso ou seus currículos. Para o seu portfólio, você pode usar seus trabalhos de design gráfico como designs visuais, identidades de
marca, infográficos, logotipos. Estão todos a seu favor. As pessoas são criaturas visuais e gostam de ver um design muito bem trabalhado. Mas para o seu portfólio UI/UX, você deve escrever estudos de caso. Estudos de caso são processo ou registro de suas pesquisas e decisões para projetar um produto digital. Você deve mencionar o problema, suas soluções, seus pensamentos e tudo o que você experimentou durante o projeto. Também para criar seu portfólio, você não precisa necessariamente construir um site do zero. Existem alguns criadores de sites que oferecem modelos de
portfólio por um preço fixo por mês, como Squarespace, Wix ou Webflow. O número sete está participando de workshops e eventos. A ligação em rede é essencial. Às vezes, as melhores oportunidades são encontradas quando alguém no campo recomenda você para uma posição. Para redes, você deve encontrar comunidades locais de UI/UX. Você pode encontrar alguns em hackerthon.com ou simplesmente no Google para trabalhos de design ou competições de UX em sua área. Verifique também meetup.com para encontrar workshops, conferências e reuniões de UX perto de você. Se você quiser passar do design gráfico para o design UI/UX, não será tão difícil como você pode pensar. Embora haja uma lacuna entre as escalas de design gráfico e as escalas de design UI/UX, não
é imbatível. Você só precisa praticar e incluir aqueles que são exclusivos para o design UI/UX.
6. Pesquisa, de entrevistas de usuários: Esta parte é a melhor parte da nossa classe. Pouco antes de mergulhar no projeto, eu adoraria pedir-lhe, faça o projeto passo a passo comigo e carregue cada pedaço do projeto, atribuições no final de cada etapa. Também não se esqueça de fazer suas perguntas, não deixe nenhuma pergunta sem resposta. Vamos começar, com todo o design é Split Sharing Mobile Application. Eu escolhi este tópico para o projeto
desta classe porque eu pensei que você já está familiarizado com cenários em que um aplicativo de compartilhamento dividido é usado. Eu acho que você entende isso principalmente quando você sai com amigos para uma refeição e depois do jantar [inaudível]. Na maioria das vezes uma pausa, vamos em frente e seu cartão de crédito pagar a conta para cada um, não apenas estupidez, mas se é um grande grupo de amigos que é onde a dor começa. Quando você quiser projetar, um aplicativo móvel, site ou qualquer tipo de produto digital. O processo que você passa varia de acordo com a escala da empresa, o orçamento do projeto ou o período de tempo. No entanto, o processo de projeto normalmente começa com pesquisa e análise. Vamos definir o objetivo primeiro. Tenha uma mentalidade clara sobre o que vamos projetar. O objetivo deste aplicativo é resolver problemas, com conta dividindo entre amigos para um jantar. Em um projeto real quando você tem [inaudível] você obter mais informações através da realização é entrevista das partes interessadas. entrevista com as partes interessadas ajuda você a descobrir sobre escolas de negócios, restrições
técnicas nas partes interessadas atuais leads sobre as necessidades dos usuários. O principal objetivo desta entrevista é obter informações sobre quais são os objetivos de negócios? Existe algum material de pesquisa ou design existente? O que já se sabe sobre os usuários? Algum feedback? Por exemplo, feedback suficiente, chamadas de suporte
ao cliente, mensagens ,
comentários, o importante é que ele não substitua uma unidade adequada de pesquisa. Outras perguntas podem ser, quem são concorrentes conhecidos? Como o mercado se parece? Existem limitações tecnológicas? Outras especificações do projeto, como prazos, membros da equipe. Durante uma entrevista com as partes interessadas, é tão fácil que você pode fazer em três etapas. Primeiro, vocês devem preparar suas perguntas para não desperdiçarem o tempo um do outro, depois pensar na entrevista. Se é um projeto pequeno que você pode dar em uma entrevista, mas se é um projeto mais complexo e maior, você deve fazê-lo em várias entrevistas com várias pessoas como gerentes de produtos, proprietários de
produtos, gerente técnico, chumbo Designers. Na primeira etapa, você deve registrar os documentos todas as suas notas e suas respostas. O segundo passo ajuda você a obter mais informações sobre o projeto e evitar mal-entendidos. Pintado, viagem de usuário, imaginei que temos cinco amigos entrando em um restaurante, eles se sentam e então eles esperam pelo menu. Depois de navegar no menu para cenários podem acontecer. O garçom está pronto para receber o pedido? Se não, eles devem esperar mais e essa é a frustração. Destaco frustrações com cor vermelha. Se sim, eles vão pedir e obter comida. Depois de comer. Quando
terminarem, vão pedir a conta. Eles recebem a conta e começam a conversar sobre como pagar a conta. Dois casos são possíveis. Eles devem dividi-lo uniformemente ou por pagamento por item. Se eles dividirem uniformemente, então é muito mais fácil, pois um montante total será dividido por cinco pessoas. Mas na maioria dos casos, os
pratos são diferentes para um é mais caro, enquanto outro pode ter pedido um alimento mais barato, então eles devem calcular a participação de cada um. Amigos tiram seus cartões de crédito, dois cenários são possíveis. Se você encontrou payslip no método de pagamento, o que resulta em ponderações mais longas para o garçom processar o pagamento. Um pagamento [inaudível] paga toda a conta, então o resto deve calcular quanto cada um tem que pagar e como pagar? Qual é a frustração das contas para o nosso usuário objetivo? Então todos pagam a ele ou a ela de volta. No final, eles vão deixar a ponta e depois sair do restaurante. Vamos listar problemas hipotéticos de acordo com as frustrações do usuário na determinação disso. Aqui vamos nos concentrar nos problemas que eles
experimentaram com o compartilhamento da conta e do processo de pagamento. Os problemas hipotéticos estão pensando sobre como dividir a conta, para pagar divisor paga para todos. Quanto todos devem pagar se tivessem ordens diferentes, aguardando um garçom para processar o pagamento, então fazemos hipóteses sobre quem tem esse problema. Jovens com a faixa etária de 18-35 anos, então essa é uma boa primeira hipótese porque eles estão usando a tecnologia em uma base diária e já estão familiarizados com a realização de pagamentos através de um aplicativo. Para uma hipótese de validação você deve conversar com as pessoas. Por exemplo, você realizar cinco comensais é observação
crucial ou seus clientes entender suas necessidades, casa ou vidas são como e como seu produto se encaixaria em suas vidas. Para fazer uma entrevista inicial ao usuário. Você não precisa necessariamente convidar pessoas para o escritório. Você pode fazê-lo no café enquanto espera que seus amigos cheguem, ou até mesmo fazê-lo remotamente via Skype ou Google Hangout. Sempre apresentando seus testes de hipóteses no contexto, por exemplo, quando você está fora com seus amigos para uma refeição ou fazendo pesquisas on-line. Pesquisas on-line se eles são consultados com cuidado pode ser grande uso ainda. Especialmente se você usá-los como e conversa adicional e suplementar. Basta lembrar que quanto menor o seu questionário for melhor. Existem ótimas ferramentas para realizar uma pesquisa on-line, como Survey Monkey, Google Forms e Wufoo, se eu estiver pronunciando direito, eles fornecem dados claros em forma de resumo para cada resposta. Com base nos resultados do uso de tenures e pesquisas, você pode verificar qualquer hipótese nítida. Diga que não foi isso que aconteceu. A maioria das pessoas no interior, você mencionou que geralmente 1 por cento paga a conta e calcula para os outros e eles não têm problemas em esperar que um garçom processe o pagamento. Mas eles também acrescentaram que imputar itens manualmente é frustrante e é difícil dividir até mesmo as despesas do grupo, digamos sobre a hipótese do cliente. Entendemos que a maioria das entrevistas são estudantes universitários que vivem sozinhos, então eles se preocupam com seus gastos. Então você deve testar novas hipóteses e, se precisar delas, refiná-las. Iteramos o ciclo de desenvolvimento do cliente para nos aproximarmos do nosso potencial cliente. Fazemos hipóteses, testamo-las, e de acordo com os nossos conhecimentos, refinamo-las. Então, se você tiver uma melhor compreensão dos usuários contra o mercado para ver o que os aplicativos concorrentes estão fazendo. O que eles estão oferecendo aos clientes? Esta pesquisa é chamada de análise concorrente. Análise Competitiva é sobre marcar o que os concorrentes estão fazendo no momento. Apenas nua em mente para não copiar erros de seus concorrentes. Para evitar erros dos concorrentes. Você pode realizar testes de usuário do aplicativo ou site da concorrência. O objetivo é identificar seus erros não usá-los em seu projeto e procurar uma solução melhor. Para fazer um teste de usuário, você simplesmente precisa dar seu aplicativo campi para um amigo. Dê-lhes uma tarefa e anote quaisquer dificuldades que tenham. Por exemplo, para um aplicativo de compartilhamento dividido, vou dizer ao meu amigo para criar uma nova experiência com seus amigos e vou
anotar sempre que eu ver se ela fica confusa esses são os problemas mais recentes que você não deve copiar em seu design. Para encontrar concorrentes, você pode simplesmente Google Splitwise. Como você vê, há uma lista de coisas, split sharing apps que nos ajuda a encontrar nossos concorrentes. Uma das boas ferramentas é SimilarWeb. Ele permite que você verifique tudo em detalhes, até mesmo palavras-chave que o concorrente usou. A outra ferramenta que eu gosto para encontrar produtos relativos é Alternativeto.net. Quando você pesquisa na caixa de pesquisa, AlternativeTo mostra informações sobre o aplicativo, como site, ele levantar recursos, tags e também capturas de tela. Outra ferramenta para encontrar concorrentes é Caça ao Produto. Assim como AlternativeTo, você pode ver as informações do produto, bem como produtos relevantes. Aqui você lê as críticas das pessoas. Isto é tão bom. Ele permite que você saiba como as pessoas pensam sobre o Splitwise. Para sua análise de hipóteses, você deve escrever suas informações compostas, como endereço do site, screenshots a força como um bom recurso uma bela interface de usuário ou uma fraqueza como [inaudível] alunos. Para esta classe, vamos rever um Splitwise. Primeiro, vamos escrever um breve resumo para o produto. Você obtém tudo o que sabe sobre o produto, como endereço do site, taxa de produto no Google Play, loja [inaudível] e assim por diante. Quem é o cliente-alvo? No Splitwise, cliente-alvo são colegas de quarto e amigos que compartilham despesas. Sobre o produto, serviço
ou preços, um Splitwise é gratuito, mas oferece alguns recursos exclusivamente para usuários que se inscreveram por US$2,99 por mês. Você deve saber o que seu concorrente oferece aos seus clientes, porque você pode aproveitar isso. Pontos fortes aqui são grandes recursos como cálculo automático, divisão uniformemente e de forma desigual, fazer pagamentos através do aplicativo, solicitar pagamentos, atribuir itens a amigos, e exibir o histórico de pagamentos e fraquezas de recursos ou opções. Splitwise não oferece imputar itens automaticamente, não digitalizar recebido na versão gratuita e não ser em tempo real. Eu também salvar as capturas de tela e tentei verificar o aplicativo e anotar as notas. Além disso, eu trabalho com o aplicativo e gravo minha tela. Vejo a funcionalidade, os recursos, as animações e, se o concorrente fizer alterações e lançar novas versões, posso voltar às minhas gravações e estilingues. Para suas tarefas, baixe e instale um aplicativo de compartilhamento único ou use qualquer aplicativo de compartilhamento dividido que você já tenha em seu telefone. Como o exemplo aqui. Escreva uma coisa que goste, e uma coisa que veja pode ser melhor. Seria ótimo se você carregar as capturas de tela para o que você gosta e o que você não gosta para que seus colegas possam entender melhor seu ponto de vista. Tão bom ver e ler seus comentários.
7. Análise, de pessoas: Depois de falar como usuários reais com base nas informações que você obtém, você pode criar personas. Personas são personagens fictícios criados para representar diferentes tipos de usuários, que vão usar seu produto de uma forma muito semelhante. A melhor prática é definir 3-5 personas diferentes e descrevê-las como se fossem pessoas reais. Comece com um nome, um trabalho, vida e estilo, ou seus hobbies, e talvez até mesmo um código que o usuário possa dizer. Usaremos isto para criar um perfil real para cada pessoa. Por exemplo, aqui temos Dan. Dan tem 25 anos. Ele é estagiário de marketing. Ele é tão preciso. Ele se importa em não ser ferrado por seus amigos descuidos, quando se trata da conta. Ele paga principalmente por seus amigos, documenta o recibo, geralmente tirando uma foto, em
seguida, vai para casa e mensagens cada indivíduo da festa separadamente, para identificar o que eles têm antes de fazer a matemática é alguma calculadora. Ele raramente se esquecerá de cobrar. Normalmente, ele mandará um lembrete para amigos esquecidos. Também temos a Sarah. Ela tem 28 anos. Ela é uma designer gráfica, e ela não se importa com um par de centavos de diferença, muito para o Dan preciso. Ela geralmente deixa um par de eros para mensagens de texto e gorjeta, e dependendo de seu humor, ela vai ser mais mesquinha ou ser mais generosa com a quantidade que eles adicionam. Depois do jantar, ela vai proceder imediatamente pagar seu amigo divisor de contas para evitar esquecer mais tarde. Outra pessoa é Robin. Robin tem 22 anos e ele é um estudante. Robin é muito menos cuidadoso do que se trata de pagar, e muitas vezes é caçado por diferentes partes para pagar suas contas. Normalmente, ele tem um serviço de celular terrível e se abstém de pegar seu telefone para pagar suas dívidas imediatamente. É provável que encontre três tipos de personas em um grupo de amigos. Com personas, você pode criar storyboards. Storyboards são ótimas ferramentas para descrever e ilustrar como um usuário se atrai para o produto. Eles exibem qualquer tração necessária para alcançar um objetivo, como um quadrinhos. Dan, Sarah, Robin e Mia entram no restaurante. Eles se sentam e pedem comida. Eles terminam a refeição e Dan pede ao garçom para trazer a conta. Amigos começam a falar sobre quem paga a refeição. Dan tira o celular e sugere que paga por todos. Eles podem pagá-lo de volta. O garçom traz a conta, Dan paga o dinheiro. Em seguida, crie um grupo com seus amigos. Tira uma foto do Bill via Happy Split. Happy Split escaneia a foto e mostra listas de despesas para Dan. Dan atribui cada alimento para encomendar e toca na carga. Sarah, Robin Mia, recebe uma notificação no telefone deles. Eles batem no pagamento de volta. Os amigos saem do restaurante. Agora, com base em storyboards, podemos criar fluxo de usuários. Podemos usar a camada de fluxos do usuário para rever a jornada, e podemos criar referência em cima de cada passo. fluxo de usuário é o caminho que um usuário toma em um site ou aplicativo para concluir uma tarefa. Existem ferramentas incríveis que você pode usar para criar um fluxo de usuário. O que eu gostei de trabalhar com vários projetos é flowmap.com. É tão fácil trabalhar com ele. A outra ferramenta é macflow.com. Você também pode criar quadros de arame e sitemaps com estes. Para este projeto, eu gostaria de usar mapas de fluxo, então vamos começar. Dan abre o aplicativo. Ele quer criar um projeto de lei e, em seguida, criar um grupo. Então ele adiciona seus amigos ao grupo e, em seguida, ele pode digitalizar a conta ou itens de entrada manualmente. Quando a conta é adicionada, ele deve atribuir itens a cada amigo. Depois que ele adiciona dica e digite no botão de cobrança, ele vê uma página de sucesso, informando que seus amigos receberam a conta. Para sua tarefa, crie uma persona para um estudante universitário. Como a amostra, anote suas necessidades, seus objetivos e sua atitude. Estou ansioso para ver sua personalidade e discuti-las com você.
8. Explorar; esboço , fio frame e protótipo: Agora que você tem tudo pronto do seu [inaudível], pegue seu lápis e caderno e divirta-se. Para esta aula vamos trabalhar na tela inicial e adicionar uma nova despesa ou processo de construção. Vamos começar. Agora que vimos aplicativos concorrentes e sabemos o que estamos procurando nesta fase. Na primeira tela inicial, eu quero mostrar um resumo para o usuário, como um saldo total, a quantidade de dinheiro que ela deve
e, por outro lado, a quantidade de dinheiro que ela deve. Ela vê a lista de seus amigos e a quantidade de dinheiro que eles devem dar a ela ou ela deve pagar de volta. Na guia tudo que ela vê é amigos, grupos, botão
adicionar para adicionar uma nova conta, notificações e configurações. Além disso, adiciono esses livros para encontrar amigos e um botão para adicionar novos amigos. Se ela clicar no botão “Adicionar”, ela vai para uma página onde ela tem que escolher outros destinatários do projeto de lei. vez, temos uma caixa de pesquisa, os subgrupos, lista de amigos e na última lista de contatos. Quando meu amigo é escolhido, o próximo botão aparece. Se ela escolher mais de um amigo, o botão seguinte será convertido para criar grupo. Para que ela possa distinguir mais facilmente o que está acontecendo. Quando os destinatários são adicionados, ela tem que escanear a conta. Eu adiciono ícone de carne, se ela estiver usando o aplicativo na escuridão, assim como a câmera, ela também pode inserir itens manualmente. Quando essa conta é escaneada, tudo é dividido uniformemente entre amigos, mas ela pode escolher uma opção dividida de forma desigual. De repente, ela tem que atribuir cada item a um amigo ou atribuir um item a todo o grupo. Em seguida, toca no botão não confirmado. O passo menor é escolher o montante do imposto. Eu dou algumas opções como sem gorjeta, cinco por cento, 10%, e também inserir uma dica personalizada. Todas as despesas são listadas com os nomes dos destinatários. E, em seguida, quando ela toca no botão de carga, ela vê a página de sucesso que diz que amigos recebem a conta. É isso. prototipagem de papel, como você deve ter adivinhado, é um esboço de screenshots de papel para apresentá-lo como um produto digital. A prototipagem de papel tem diferentes níveis de complexidade. Os mais básicos são esboços de cada tela em um papel, e quaisquer testes de usabilidade,
os esboços são alternados de acordo com as ações do usuário. No entanto, você pode ir mais longe e produzir protótipos mais avançados com itens essenciais. Ele ajuda você a pré-criar botões e ícones de
forma rápida e precisa. No estágio mais avançado, você pode fazer upload de fotos de seus esboços em papel no software de prototipagem digital e adicionar interações reais com uma ferramenta como prototipagem pop no papel. Depois de testar seus protótipos de papel, se você encontrou algum problema, os usuários têm enquanto trabalham com seu protótipo, você pode iterar o processo novamente, isso torna seu esboço [inaudível] novamente. Se tudo correu bem e não houve problema, você pode estruturar sua ideia e adicionar mais detalhes para criar wireframes. Um wireframe é um esboço
simplificado e de baixa fidelidade do seu produto. wireframes são o verso para o design. Por que você não pode entrar em muitos detalhes. Você precisa criar uma representação sólida do design final. Você está no caminho da cidade para todo
o projeto e para as pessoas com quem você está trabalhando, como Gerentes de Projetos, outros designers, redatores e toda a equipe, então eles precisam de um wireframes bem criados e bem estruturados. Essas ferramentas para criar wireframes são [inaudíveis] que você já conhece, apenas em mente, que fornece elementos de interface do usuário para wireframes e protótipos de alta fidelidade. O outro é wireframe CC, é uma ferramenta mínima. Isso não torna a criação de wireframes complicada. O que eu amo usar hoje para criar nossos wireframes é [inaudível]. Assim como just-in-mind, os moqups tem stencils prontos para usar para todos os casos de uso populares. Além disso, podemos simplesmente criar seus wireframes em um esboço, [inaudível] ou mesmo no Photoshop. Eu crio wireframes em cima do fluxo de usuários para que eu não deixe nada para trás. Então vamos começar. Esta é a tela que você tem em Moqups para mudar o tamanho do seu quadro de arte. Vá para o Workspace e escolha as configurações da página. Este é o tamanho de um iPhone 8. Além disso, você pode encontrar iOS e componentes de design de materiais. Essas bibliotecas tornam o processo de criação de wireframes muito mais fácil. Começo por trazer e uso a barra de estatutos. Na seção de comentários, você pode encontrar todos os objetos comuns necessários para criar seu wireframe, como um retângulo, botão, texto preenchido e assim por diante. Para todos os nossos esboços não se esqueça de nada em seus wireframes. Às vezes, você pode precisar apresentar uma parte em seu design, mas normalmente é melhor não usar nenhum tipo de cor em seus wireframes. Wireframes são destruidores para o design e eles não devem apresentar nenhum tipo de especificação visual. Especialmente se você quiser apresentá-los em suas reuniões com o resto da equipe, como Desenvolvedores ou Gerentes de Produto. É melhor não distrair sua atenção para qualquer cor. Não faça com que fiogramas falsos. Os esboços, protótipos de papel e wireframes são ferramentas baratas para projetar e testar o produto. Não gaste muito tempo em algo que precisa de muitas iterações. Os wireframes não devem ser bonitos. A partir daí, transferimos wireframes para protótipos de baixa fidelidade. Queremos testar novas trações o mais rápido possível. Usamos o InVision para fazer um protótipo. Criar um protótipo no InVision é muito fácil. Nós só precisamos fazer upload de seus wireframes, imagens ou, se você projetou em um Sketch ou Photoshop, você pode baixar o plug-in de artesanato para afundar e enviar seus projetos facilmente para InVision. Para construir um protótipo, você precisa criar pontos de acesso. As áreas que serão vinculadas a outra página,
como um botão, em seguida, selecione o destino de colagem. Você também pode compartilhar um link para seu protótipo com sua equipe para que eles possam deixar comentários. Lembre-se que você deve testar o design em cada etapa. Primeiro com hipótese, depois com o esboço, o terceiro estágio com wireframes, e depois com o design final. Isso cada vez que você testar seu
refinamento e melhorar seu design e iterar o processo novamente. Para sua tarefa, desenhe suas ideias para todo
o aplicativo de compartilhamento de tela e, em seguida, encobrir seu esboço em um wireframe. Como o exemplo que vemos você esboçar uma tela inicial com os seguintes recursos: lista de amigos, lista de grupos, despesas adicionar botão para adicionar uma nova conta cara, notificações e configuração. Decida como você vai colocar todos esses recursos em uma única tela e, quando terminar de esboçar, escolha uma ferramenta para converter seu esboço em um wireframe mais detalhado. Pode ser [inaudível] ou simplesmente Photoshop. Carregue seu trabalho e receba feedback de seus colegas.
9. Criação, elementos de UI: É hora de adicionar mais detalhes e projetar uma interface do usuário, a interface do usuário, um quadro [inaudível]. Projetando a interface do usuário, a interface do usuário é o trabalho mais fácil para designers
gráficos porque você já está familiarizado com os designs visuais. Mas para fazer um aplicativo mais design, a primeira pergunta que você pode fazer é que como eu deveria saber as diferenças entre Android e iOS? Como devo saber as diretrizes? E quanto aos tamanhos? Vamos começar com as diferenças do Android e do iOS. Primeiro, eles têm diretrizes diferentes. Google usa Material Design, iOS usa design de interface humana. Mencionei seus links nos recursos do projeto. O Google criou uma linguagem de design chamada Material Design. Se você está projetando para Android, isso é algo que você definitivamente precisa conferir. Há tantas ferramentas excelentes para verificar, padrões de
interface do usuário, ícones, cores e projetos de teste. Por exemplo, a ferramenta de cores ajuda os designers a escolher partes de cores. Para iOS, há as diretrizes de design de interface humana da Apple. Esta é uma lista exaustiva de padrões de design para aplicativos iOS. Apple, até fornece alguns exemplos de recursos do Photoshop ou do Sketch neste site. Mover para trás e para frente entre telas é uma ação comum que os usuários tomam em aplicativos. No Android, há um universal [inaudível] na parte inferior. O botão Voltar é uma maneira fácil de voltar a uma tela anterior e funciona em todos os aplicativos. A abordagem no iOS é um pouco diferente. Obviamente, não há nenhum botão de volta universal aqui e isso muda um pouco o design. Todas as outras telas precisam ter um botão no canto superior esquerdo. Só para entender melhor, vamos comparar uma versão antiga do Facebook App. Configurações e opções do aplicativo. Os aplicativos para ambas as plataformas novamente seguem uma abordagem diferente aqui também. Os padrões mais populares aqui são o menu de hambúrguer no Android e tocou no menu no iOS. aplicativo Android do Medium tem um ícone de hambúrguer na parte superior, que mostra diferentes opções e áreas do aplicativo. Agora, chegando ao Medium para iOS, há a abordagem familiar de toque de botão. Observe como algumas opções
do hambúrguer de aplicativos do Android são empurradas para a guia de opções do usuário no iOS. Uniformidade. Afinal, sempre há exceções. Nem todos os aplicativos seguem diferentes interações e padrões de design de interface do usuário para as duas plataformas. Alguns aplicativos seguem padrões de design de materiais no iOS, como o Gmail, outros seguem o mesmo modelo de interface humana em ambos, como o Instagram. Por exemplo, em um esboço, você pode escolher seu quadro de arte e ver todos os tamanhos em diferentes dispositivos, como Apple, Android, protótipos responsivos da Web e papel. [ inaudível] é o mesmo, escolha placa de arte e você pode ver a lista de tamanhos de dispositivo. Também na Photo Shop e Illustrator. Você pode escolher o tamanho do seu dispositivo facilmente. Um elemento importante no design da interface do usuário é ícones. Os ícones devem ser tão simples e simplificados o suficiente que eles ficam ótimos na porta de exibição pequena de uma tela modelo. Em uma situação iOS você tem tempo suficiente para projetar seus próprios ícones para cada projeto, mas na realidade você está sob tanta pressão e você tem que usar os conjuntos de ícones prontos. Existem ótimos sites que você pode encontrar e baixar ícones como
Flaticon, Icon-Finder e Icons8. Basta lembrar que você é melhor usar um conjunto de ícones em vez de baixar ícones individualmente. Ele fornece um design mais consistente. Uma fonte pode ser facilmente o diferencial mais sutil e envolvente para o design da interface do usuário. Existem quatro fontes que eu uso principalmente para projetar um site ou aplicativo móvel. O primeiro é “Open Sans”. Open Sans é otimizado para impressão, web e interfaces móveis e tem excelente legibilidade. Roboto faz parte da família Google e são os telefones Android padrão desde 2012. Funciona bem para tipos de corpo. Avenir Next é uma face geométrica do tipo San Serif, é muito versátil com seis maneiras e é legível em todos os tamanhos. Proxima Nova é adequado para sites modernos centrados em conteúdo e aplicativos móveis. Igualmente ótimo para títulos e tipo de corpo. Um dos estágios vitais de sua criação são gráficos de cores, às vezes passamos horas para escolher a melhor paridade de cores. Agora, [inaudível] e dicas para escolher sua paridade de cor mais fácil. O primeiro é o significado de cor. Primeiro, você deve saber sobre conceitos fundamentais sobre cores. Cada cor tem um significado que varia dependendo da cultura. As cores das segundas instâncias criam emoções. Então você deve aprender sobre os significados para usá-lo no contexto certo. Por exemplo, o azul está associado à confiabilidade, produtividade, confiável e segurança. Você vê vários tons de cor azul nas principais plataformas de mídia social, como Facebook e Twitter. Inspire-se na natureza. As melhores combinações de cores vêm da natureza. Eles sempre parecerão naturais. Além disso, você nunca vê cinza puro ou preto puro na natureza. Então adicione um pouco de saturação à sua cor. Inconscientemente, parecerá mais natural e familiar para os usuários. O número três está chamando a atenção com contraste. Usando mistura de contraste, consumindo informações mais facilmente. Um exemplo muito comum é preto ou cinza escuro e branco. Essas duas cores produzem muito contraste. alto contraste pode realmente ajudar a tornar seu conteúdo mais legível. Exagere as diferenças de leveza entre as cores de primeiro plano e de
fundo e evite o uso de cores de leveza semelhante. Número quatro está se inspirando em Dribble ou Behance. Quando você está projetando UI, Dribble é um dos melhores lugares para obter idéias. Ele também permite que você pesquise por cor. Então, se você estiver fazendo uma pesquisa visual sobre uma determinada cor, como outros designers a usaram e qual combinação de cores se encaixa bem, você pode usar essa ferramenta. Existem algumas ferramentas populares que você pode usar para encontrar sua paridade de cores mais fácil. O primeiro é no Adobe Color CC, que foi originalmente chamado de Adobe Color. É uma ferramenta gratuita. Você simplesmente escolhe um estilo de esquema de cores e
arrasta as opções de cores para criar seu novo esquema de design. Você obterá detalhes hexadecimais RGB completos, e a maioria das cores pode ser ajustada para incluir tons mais claros e
escuros que ainda se encaixam no esquema. O outro é Paletton. É semelhante ao Adobe Color CC, mas você não está limitado a apenas cinco tons. Se você tem principalmente cores, você pode jogar com os tons adicionais. O outro é paleta de material. É uma ótima ferramenta para ver uma prévia das cores em ação. O aplicativo Web emparelha duas cores em um design de interface do usuário simulado com cores dominantes e subordinadas. Embora o design seja limitado a cores de design de material, o recurso de estatística ao vivo é uma ótima maneira de treinar seus olhos e aprender quais cores geralmente funcionam melhor juntas. Há um número de softwares que você pode usar para projetar bons sites ou aplicativos de interface: Sketch App, [inaudível] ou Figma. quatro anos, mudei para o Sketch para o Photoshop e adorei tanto desde então. Figma é muito semelhante ao Sketch. Ambos são baseados em vetores. Eles têm uma tela infinitiva onde você pode criar quadros de arte para projetar. Mas com Figma, você pode compartilhar um link para o seu projeto com o resto da equipe, especialmente outros designers para deixar comentários e comentários sobre seu design. Eles podem exportar elementos e até mesmo eles podem editar o projeto com você. Geralmente, é uma ferramenta muito colaborativa. Além disso, você pode usar Figma se você tem um Mac ou PC. Hoje, nesta aula, vamos projetar nosso aplicativo em Figma como foi acordado tanto para os alunos do Windows quanto para Macintosh, e você pode facilmente compartilhar seu projeto conosco. É meu primeiro projeto projetando com Figma. Será interessante. Figma tem uma versão desktop, bem como uma versão de navegador. Podemos entrar na sua conta e ver os projetos anteriores em que você trabalhou. Vamos em frente e criar um novo projeto. Como vê, temos que fazer uma lona aqui. Estas são as camadas, os componentes e, para começar, usamos este quadro de ferramentas para criar um quadro de arte. Você escolhe o tamanho do seu quadro de design aqui: telefone, tablet, desktop, relógio, papel ou até mesmo postagens ou banners de mídia social. Eu escolho um iPhone 8. Eu renomeei a obra de arte para “Casa”. Antes de começar, eu baixei kits de interface do iOS do design, [inaudível] para Figma. Essas bibliotecas ajudam muito. Você não precisa criar empresas a partir do zero. Além disso, Figma tem biblioteca para design de materiais se você quiser projetar um aplicativo para Android. Copio uma barra de ferramentas do Kit de interface do usuário. Eu quero criar minha barra de ferramentas sobre ele porque eu não tenho o telefone usado no kit iOS. Substituo por Avenir Next. Já preparei meu conjunto de ícones no Illustrator. De acordo com o wireframe e os esboços, eu trago os ícones para a barra de ferramentas. Para Adicionar botão, eu desenhar um círculo com um plus no meio. Para a paleta de cores, decidi usar um verde fresco com a laranja avermelhada. Não se esqueça de pequenos detalhes. Você pode trazer sua página wireframe para projetar a interface do usuário sobre ela. Para ícones, eu quase sempre uso feathericons set. Eles são muito simples e mínimos. Também para texto e títulos, eu nunca uso preto puro ou cinza puro. Eu prefiro usar uma cor escura como
azul escuro especialmente quando você tem verde ou azul em seu trabalho, parece muito atraente. Adoro emojis. Eu sempre adoro ter a chance de adicionar emojis ao design da interface. Eu sinto que as pessoas se dão muito bem com eles, especialmente os jovens como eles estão usando-os o
dia todo para conversar com amigos em aplicativos mensageiro. Quando o layout geral é feito, você pode adicionar mais detalhes. Detalhes que tornam o design mais bonito. Eu uso outras cores para peças pequenas. Eu acredito que se este é um aplicativo para estudantes universitários, ele deve olhar fresco de uma forma que os jovens iriam adorar. Um dos aplicativos mais coloridos que já vi na minha vida é Zenly. Se eu não estiver errado, Snapchat adquiriu-o. Parece tão fresco. Adoro o uso de cores. O aplicativo parece tão animado. página inicial está feita. Não se esqueça de baixar o arquivo Figma. Lá você pode ver a página inicial e o processo completo de adicionar uma nova conta, páginas, wireframes recriados e protótipos para anteriores. Em Figma, você também pode criar protótipos. É tão fácil quanto o aplicativo InVision. Aqui você pode escolher o quadro do design. É vertical ou horizontal? Até mesmo o modelo do seu iPhone. É ótimo, você vê. Além disso, você pode escolher a cor de fundo. Para começar, selecione o quadro ou os objetos em um quadro e conecte-o a outro quadro, como criar pontos de acesso no aplicativo InVision. Na página inicial, quando o usuário clica no botão Adicionar, ele
vai para a próxima página onde escolhe seu amigo ou amigos para criar uma conta. Se ela escolher mais de um amigo, o botão Avançar será convertido em um botão Criar Grupo. Portanto, é mais fácil para um usuário distinguir o que está acontecendo. Em seguida, ela captura uma foto da conta
e, em seguida, ela escolhe Dividir uniformemente
e, em seguida, atribui seus amigos para despesas, escolhe o imposto e toque no botão Cobrar. A última página também está vinculada à página inicial. Vamos antever o que fizemos. Veja, este é o protótipo com Figma. Você pode ter visto belas interações para aplicativos
móveis e sites de designers em Three Bill ou Behance. Você pode criar essas animações de princípio. É um aplicativo muito útil e super fácil de trabalhar. Para sua atribuição, crie a interface do usuário para a página da tela inicial. Você já tem o Sketch e criado por um quadro para. Você pode fazer isso. Você pode projetar interface em Figma ou qualquer outro software que você já tem e você se sente fácil usá-lo. Basta carregar um JPG do seu trabalho final. Compartilhe como o exemplo. Esta é a tarefa final e mostra o que você aprendeu durante esta aula. Estou esperando para ver seus aplicativos de compartilhamento dividido. Além disso, não se esqueça de fazer suas perguntas.
10. Encerramento: Tudo bem. Chegamos ao fim. Fizemos um monte de trabalho incrível. Espero que vocês, caras criativos, tenham se divertido criando ideias para um aplicativo de compartilhamento dividido [inaudível] em um curto espaço de tempo. É importante saber que todos os esforços vão levá-lo a lançar. Com as ações que você toma após o lançamento, ele
vai te aproximar do UX perfeito do seu aplicativo? É sua responsabilidade como designer de UX antecipar o comportamento do usuário. Criar uma experiência visual sem fricção não é fácil. Leva tempo, esforço, dedicação, mas com as ferramentas certas, você pode otimizar seu aplicativo de forma rápida e eficaz. Usando ferramentas analíticas para aprender com a vida útil do aplicativo de seus usuários, você pode criar a experiência do usuário de uma vida inteira. Lembre-se também de que você será um bom designer se você trabalhar e compartilhar seu trabalho com outras pessoas para obter feedback. Eu sei como se sente no início quando você acaba de começar e você não
está satisfeito com o que você está projetando ainda, mas acredite em mim, trabalhar e compartilhar com outras pessoas para obter feedback ajuda você a melhorar e trabalhar mais. Trabalhe, pratique, compartilhe com outras pessoas, obtenha feedback e boa sorte.
Sepi, Product Designer at Microsoft
