Transcrições
1. Introdução: Oi Ameaça Jo Jo e Baseando São Francisco. Eu tenho feito design UX por mais de 12 anos. Esta é uma classe de nível iniciante e eu vou ensinar-lhe uma visão geral de alto nível de eficiente você XT não é processo. Eu vou ensinar-lhe como projetar e criar peso Página a partir do zero será extinto e irá apontar alguns melhores processos muito importantes. E eu vou te mostrar como alavancar o livre fez você gostar dele para economizar tempo. Este curso é para pessoas que são novas para ser extinto ou você processo amigo extra para um designers
gráficos ou para iniciantes que querem aprender você X design. Nesta classe, você vai aprender uma visão geral do bom processo de design UX. Como usar ferramentas básicas úteis no Adobe XY. Como criar uma informação, arquitetura e usuário para como criar amigos de baixa e alta fidelidade no Adobe X'd como compartilhar e mudar seu projetado para desenvolvedores, titulares
grossos e usuários ou crítica e feedback. Então, se eu já estão aderindo a um excelente processo eficiente e não se esqueça de me
seguir e roubar a parte
2. Entender o design (alto nível): design de UX em design em geral é sobre resolver problemas de pensamento crítico, criar experiências e tornar visualmente atraente e de bom gosto ou mesmo memorável quando o usuário experimenta essas linhas. Não bem, as pessoas realmente não devem notar nada ao usar o problema do produto. Apenas nos trabalhe. É suposto ser e ser muito intuitivo. Bom design. Ele está criando maneiras de tornar as informações e mensagens fáceis de entender e digerir cada elemento usado neles. Fui escolhido por uma razão, e não está lá por acidente. Passo um. Compreender o aspecto mais importante do desejo de alta qualidade é realmente entender o usuário . Isso pode ser feito com bastante facilidade com algumas técnicas e perguntas. Precisamos perguntar e responder esta estrela com o usuário. Uma vez que os problemas que o usuário está enfrentando são conhecidos, podemos começar a pensar sobre a solução. Mas antes de realmente projetar a solução, precisamos trabalhar em outro aspecto do design que irá moldar nossa solução. Passo dois. Pesquisa Primeiro, devemos começar a entender a marca. Como está o projeto? Estou trabalhando para me alinhar com a marca para entender a missão e os objetivos antes de passar para o próximo passo. Queremos identificar os problemas dos usuários e o tribunal do cérebro e ver como eles se alinham antes de começarmos a projetar a solução. Um bom processo de design nos requer para garantir que realmente entendemos nossos usuários bem observando usuário em seu ambiente natural para o produto existente e tentar entrar em sua cabeça por fazer tantas perguntas quanto possível, entender o que eles estão tentando alcançar, o que eles gostam e não gostam. O que os usuários ni querem e esperam? Quais são os pontos de dor? E podemos usar essas informações para formar a personalidade do usuário. Próxima etapa de teste do usuário no estágio inicial. Não precisamos pesquisar milhões de usuários. A maneira eficaz de testar no estágio inicial é o teste três para combater usuários direcionados com protótipo de baixa fidelidade. Ele economizará tempo, e nos dará dados suficientes para avançar com o projeto. Terceiro passo nos piolhos. Uma vez que você tem toda a pesquisa, pegue todos os dados que você tem e coloque visualmente em yusor personas. Isso será útil sempre que você precisar voltar e entender os usos também. Você disse que personas será guia muito útil durante futuras etapas de design. Se pudéssemos trabalhar no site existente ou em um aplicativo. Vamos começar a analisar os dados gravados. É qualquer coisa para nós. Eles vão até você e é qualquer coisa que vem de potenciais usuários e
descobre como podemos nos encontrar ? Isto é necessidades necessidades das partes interessadas e uso. Ele precisa passo para começar a construir estrela design real, criando a
arquitetura de informações para definir o conteúdo, hierarquia e localização caminho. Comece a encontrar um uso de fluxo, que é como o uso de para ir do ponto A para o ponto B dentro do aplicativo e como o aplicativo interage com o usuário. Lo Fidelity esposa amiga é como um projeto da estrela design. Estes eu baixo para o único amigo fio para obter a idéia através, e ele pode ser compartilhado e obter feedback. Comece a testar com os usuários no protótipo. Observe como eles o usam. Eles ficam confusos? O ano é suficiente? É fácil financiar as informações em conjunto Feedback restaurante e refinado e certificar-se de que ainda precisa de objetivo de negócios e necessidades do usuário. Depois de projetar, crítica, feedback e redesenhar e redesenhar um pouco mais, desejo que você constantemente compartilhar nosso amigo esposa de baixa fidelidade, protótipo para testes e reunir feedback com o ting. Ele só fica melhor com colaborações antes de nós. Estes são arame de alta fidelidade com seu brainstorm, o peito ou e eles olham e sentem para o design visual geral. Estes eu sou cor padrão, topografia, ícones de
botões, imagens e muito mais. Finalizou o aluguel de esposa de alta fidelidade e trabalhando com o desenvolvimento para cobrir que estes não são em um produto real. Isso requer a colaboração amor com os desenvolvedores, discussão
contínua T volta e seções de revisão. Várias revisões de verificações e orações levará ao design final, que funcionará bem para todos os usuários. Passo cinco. Almoço Após o lançamento do Prada, seu mais a ser feito, é hora de análise do usuário do Rio. Devemos nos fazer perguntas como. Como os usuários estão respondendo? Onde lutamos? Resolvemos os problemas deles em pontos Rial? O feedback dos usuários nos ajudará a entender nossos erros e a obter ideias para melhorias. Podemos ir e encontrar o design para a próxima versão do produto. Você pode seguir todas as etapas com certeza para a próxima versão do produto. Com algum reflexo do feedback do usuário, você ganhará conhecimento valioso que você pode usar para garantir que projetos futuros e design errado para mais suavemente
3. Ferramentas básicas do Adobe XD: quando você almoçar será XY. A tela de boas-vindas fornece um ponto de partida para o seu desejo, e inclui recurso útil é para você começar. Quando estiver pronto para criar um novo design, clique abaixo de cada predefinição para, a menos que os tamanhos adicionais. Uma vez que eu criei um novo arquivo, a primeira coisa que eu vou fazer é salvar o arquivo e lê-lo. Você tem opções para salvá-lo no pano ou no computador. SS O Mac significativo na parte superior. Eles são três modos no Adobe X'd design protótipo em compartilhamento. Use estes. Eu sou velho. Para projetar as telas, use interações protótipo de fio moto que simularão o fluxo do oleiro que você está projetando. Use seu voto quando seu projeto estiver pronto para ser revisado. Você é uma turnê forte para desenhar. Objeto em seu são pobres Segurando a tecla shift, você pode desenhar um quadrado perfeito através de um objetivo. No triângulo, você muda o lápis como a tecla Shift. Desenhe algumas linhas curvas com a guerra Penta. Ele é uma escola de tecnologia. Eu simplesmente destacando-os e você pode ir para o painel de propriedades aqui no seu
lado direito . Apenas assim deixe seus gostos favoritos que você deseja usar e mudar o tamanho do fundo e da diversão. Espere se quiser. Use o painel SS para gerenciar cores, células de
personagem e ver touros de modo que como um objeto pode aplicar o painel LA Kings permite que você adicione aplicar e gerente de Hawkings.
4. Arquitetura da informação: arquitetura de informação. Diga o nome do arquivo e seguro uh, essa palha ou círculo e coloque-o. Adicionando um rótulo. Cole Home e Union Cane. Mudança de estilo divertido ao seu gosto. Estoque desenhar Algumas linhas formigamentos. Duas páginas estão conectadas na página
inicial. Ter página de primeiro nível na página de segundo nível como exemplos para esta classe. Você pode fazer sobre mais páginas em detalhes para o seu projeto. É isso . Aqui está a nossa arquitetura de informação. Agora você pode ver claramente como o tamanho da Web estruturado.
5. Persona: persona ir adiante com essas coisas. Abra o arquivo pessoal que WAAS na borda fornecida primeiro importar a imagem pessoal para o R quatro. Se você é fluente em, aqui está o conteúdo no layout de design para um templo, ele pressiona deslocamento comum e eu dois importante A imagem. Mantenha a tecla shift pressionada quando dimensionarmos a imagem para evitar distorções. Agora eu gostaria de embelezar. Coloque um pouco adicionando cores em novos tamanhos de telefone reforçados para melhorar a
hierarquia visual , ajustando o tamanho do telefone para fazer o layout parecer mais equilibrado e fácil de voltar bordo. Para obter esse painel de reparos aqui, você pode ligar e desligar a grade nesta linha de painel. Inveja. Alinhando um pouco mais alguns metros. Teoh Alce Este arquivo pessoal nos sua base para o futuro projeto.
6. Fluxo do usuários: Você, senhor. Fluxo aberto, Tenha um novo arquivo, primeiro nome e salve o arquivo. Vou chamar um fluxo yusor. E isso fez o mesmo para os Knicks de popa, e usamos carrapatos para muito rápido. No meu telefone, você disse informações que eu protejo que criamos anteriormente nós o guia para estabelecer o fluxo Estamos criando página inicial na parte da página dessa página. Agora há queer que formigamento para a página inicial, um logotipo de texto para a página na página inicial. Eu quero ter uma camada três de ícones de ação goto que muitos pressione próximo turno I para importar os ícones. Eu usarei o mesmo para eles você mesmo. Fluxo. Vou criar no carro. Vá para a seleção da faculdade aqui. Não apenas qualquer capa que você preferir na mesma ferramenta de alinhamento Lisa tamanho para alinhar
objetos selecionados . Adicionando página Ação cacau. - Agora este topo do logotipo da página e estes dois ícones para a idade inferior para o pote uma página. Eu quero mostrar apenas imagens de produtos bonitos. Todo mundo quer um sólido por formigamento para me apresentar as imagens do produto. Eu usaria o azul mais claro para as imagens de espaço reservado mantendo pressionada a tecla de opção para duplicar as imagens para o pote de página de detalhes, eu vou ter uma imagem de tamanho grande e alguma descrição para os produtos que estávamos. ângulo direito indica as descrições do texto. Você também pode redimensionar o gráfico inserindo o tamanho no componente Painel A linha e realinhando o layout até ficar satisfeito com ele. Ele se baseia em erros para fornecer a direção e interação. O círculo indica um link. Use pino para proteger o drama. Por
que essa essacor de aperto
também atendeu ao tamanho do traçado . Isso criar outro link da imagem do produto para o produto, ele disse Paige. - Eu
vou duplicar o indicador infligido para que eu não precise desenhar novamente assim. Chamada à ação na página inicial para detalhes do produto. Página isso em outra ação de reverência para um produto até a página esta. Copie o botão na página inicial para fazer. Isto não é consistente para mim. Levei os detalhes para os muitos itens, se quiser, mas vou pular a lista para esta demo ontem à noite. Em decadência, o bastão está ligado ao carrinho de compras. Uh, isso é que atinge um exemplo de alto nível de uso de fluxo
7. Wireframe de baixo Fidelity: Fio Lofa Daily. Amigos Open Pré companheiro Low Fidelity Esposa amigo que WAAS forneceu na água classe. Isso mastiga fios para um momento específico do site para navegar através desses elementos reutilizáveis. Abra um novo arquivo e salve-o na área de trabalho. E lembrem-se do quadro de arte. Use arquiteturas de informação que criamos como um guia para layout do seu site. Mantenha pressionada a tecla opcional para duplicar o motor de popa. A primeira coisa que eu colocaria no site é um logotipo. Então esta estrela colocando um logotipo em nossa esposa. Amigos importam os ícones que foram fornecidos em uma fronteira cruzada. Ou você pode criar um novo do zero que se adapte à sua marca. Temos campos de compras ícone menu em busca, e vamos usar esses três ícones em todo o site. Isso deixou a coisa toda azul como o kit amigo de arame. Ligue a grade. 10. Ajude a posicionar os objetos. Também é útil para criar um site responsivo em resumo e ver cópias para descrever o produto. Vamos voltar para a esposa Frank isso e copiou elementos que para o nosso projeto, cada home page é uma grande imagem sua. Então música e ver os itens promovidos atualmente quando eles emprestam para os sites. Um apelo permanente à ação é importante para este website da Thomas. espaço de espera veio para agarrar a janela. Isso é adicionar Carrossel, reclamando para a página inicial para promover o fundo. Eu só usaria círculos para Carrossel para esses projetos. Nosso esporte homepage agora copiar tudo de casa, página nossa placa e colá-lo na página inicial com uso de limpeza gasto tinkle dedo do pé que
começa com ele. Primeiro, eu estava em um mandado de busca. Faça testes de água para lembrá-lo do que fazer no campo de texto. Vamos adicionar muitos itens imensamente. Os links de detalhes podem ser adicionados à arquitetura de informações. Para esta versão curta, não
precisamos dela agora. Quero adicionar uma linha divisória para diferenciar as diferentes seções para uma melhor
hierarquia visual . Vou colocar o local novamente no menu. Isso vai cinzas ícones de mídia social financiar a amiga da esposa pré May. Isso passa a parte de uma página novamente. Isso reduz o elemento que já criamos. Logotipo em contras e marcador de posição de imagem recita a imagem para representar o Plata em um
nome de produto e estilizou as fontes. O que fazemos aqui é voltar,
voltar, voltar, voltar, voltar. Uma vez que eu estou feliz com olhar e sentir e posição, eu vou começar implicado. Mantenha a imagem no produto, passe pela propriedade e clique em Creepy. Eu gosto de mostrar 12 produtos para esta página no odiador em direção à página. Última tela é a HelPage do nosso partido. Eu gostaria de fazer a imagem maior para mostrar os produtos. Adicionar hater sub hater na descrição. Use o rum. É um pouco para a nossa descrição de espaço reservado. - Copiar ícones e do amigo fio cremate Última adicionar uma chamada para Ação Botão um Last Loaf, esposa
Adelie, França Born.
8. Wireframe de alta fidelidade: Oi, amigo
Fagili. Basta tomar o pão uma frente fio diário e re salvá-lo uma serra alta fidelidade longe de eu
vou apenas usar um curto cada olho para alta e esta escavação com o mesmo para todos os para cima e leia Nome Clique na imagem Place trimestre incluem idiota do que importações e seu imagem da classe
fornecida. Para encomendar isto. Escolha a imagem do Brinco de Pérola no trimestre de Imagem. Próxima habilidade Edo. Envie a imagem para a parte de trás. Agora isso para outra grade geralmente usado 24 colunas para o túmulo para que possamos medir a posição fora dos objetos. É substituído o logotipo pelo logotipo rial que é fornecido na ordem Classe quatro e, em
seguida, mudar a cor dos elementos para trazer o colarinho. Para isso eu uso, hum, tem cor. 33333 como o colar de trazer e este anúncio que cobre o painel Ativos no
lado esquerdo . E agora mudou o botão neste DUI. Para todos os botões e ícones do carrossel. Também os ícones para o menu, carrinho de
compras e lupa. - Vamos para um segundo aeroporto. Primeiro, este renomeado para Our Boards, que alta para Delhi fio amigo, e então este movimento de volta para o primeiro são pobres e, em seguida, copiar o Al Amends. Até agora, o primeiro nosso conselho e D os elementos Loaf Adelie em Segundo são pobres. Em seguida, passo um novo elemento para os doentes e motores de popa. Agora isto. Substitua o logótipo e depois isto. Como os elementos que estão na seção do menu. Inglaterra tentou e tentou Teoh e mudar o Element Qala ao seu gosto nisso na Grey College. Apenas assista. E então isso fez o I horizontal no rosa. E por último
, mudou a cor de trás do menu. E agora é estilo andar para casa, aperfeiçoando a aparência e a sensação de muitos itens. Os novos elementos ajustam elementos para a posição perfeita em tamanho, e uma vez que você está satisfeito com a aparência e sensação, é que podemos passar para o terceiro popa os detalhes do produto Page Sam T. Primeiro isso substituir locais e ícones e Em segundo lugar este colar de teste de correspondência para o cérebro, abra a borda da imagem. E assim, como imagens de Bata e agora a magia. Isso vai acontecer arrastando e soltando essa imagem que nós apenas selecionamos na
grade repetida , e isso faz o mesmo para o Tex e outro. E, por último, a última página da página de detalhes do produto. Substitua o logotipo e ícones e correspondência. Isso tem acarpetado o cérebro e alterar as cores do ícone de abotoamento. Agora é chamado de Chamada à Ação e dois carrinhos e este perfeito posicionado para o ícone que é clique ,
droga
clicando droga droga droga para o 2º 1 que eu quero.
9. Protótipo interativo: tipo de portal interativo Clique Thea Poros que você deseja dizer como a tela inicial clique
no grande ícone no canto superior esquerdo. Azul indica que são pobres é enviado com sucesso a tela inicial. Clique no objeto que você deseja deixar selecione comprar agora e arraste-o para a página. Você gosta de ligar Teoh. Vamos voltar para a home page em select e não uma chamada à ação e link para a página. Isso faz com que o local voltando para a página inicial é clicar no Ano no Botão e Nu, vinculado à página Fatah. En faz fazer o menu, mas ele vai voltar para a página inicial. Agora há Fazer a loja agora link botão para a página de vídeo paródia e baixo voltar para a página
inicial. Outra baixa Golding Voltar para a página inicial. Este link. Ouvir três imagens para o produto. Página Ito. Agora ele jogou Ícone no canto superior direito e verificar o trabalho rolando para cima e para baixo. Certifique-se de que todos os links estavam corretamente. Depois que passamos a revisão dos links, podemos começar a compartilhar. Eu vou trabalhar para a equipe para P de volta, uh, derramar o destaque em aliado azul Ah, os que serão compartilhados. Existem cinco predefinições de construção, revisão de
design, apresentação de
desenvolvimento, testes
yusor e personalizado. Isto escolhe o desenvolvimento para este projeto por padrão. Os ativos globais para baixo estão selecionados. ID requer apenas senha para este projeto. Vamos clicar em Criar Link para fazer upload do projeto depois que ele carregou clique no total gerado seu L clique no ícone bolha. Verdadeiramente comentários e usar pin para fixar a área, você mente para liderar comentário. Aqui está uma maneira que você pode ver o comum que o usuário fez o ícone de mixagem. Está no ícone de desenvolvimento aqui. O desenvolvedor do visualizador pode ver as especificações de design. Eles podem copiar CSS Coal ou Donald ativos. É muito útil.
10. Terminação: muito obrigado por criar seu projeto com habilidade. XY, espero que te divirtas a aprender comigo. Eu realmente acredito que ele é um aplicativo poderoso para obter a sua idéia cruz se você tem o primeiro temporizador, Um designer gráfico, Eu espero que ele ajude você a trazer suas idéias para a vida. E eu vou adorar vê-lo. Você pode me seguir em ainda compartilhar fora de seu livre para me enviar uma mensagem nas mídias sociais através instagram ou para mim em alongar E muito obrigado por assistir.
Jill Chu, Product Designer
