Primeiras aulas do curso Prototipagem e UX parte 1: Alta fidelidade com o Adobe XD

Prototipagem e UX parte 1: Alta fidelidade com o Adobe XD

Prototipação e o XD - Introdução

Sou Natan de Souza, instrutor de UX, e você irá acompanhar comigo o curso de prototipação em alta fidelidade. Por que prototipamos?

Se você quer montar sua startup ou tem uma ideia para um aplicativo, antes de procurar um investidor-anjo e começar a terceirizar e contratar desenvolvedores, é interessante entender se as pessoas realmente utilizariam o que você está planejando.

Tenho certeza que você já rabiscou telas em um papel, e isso é muito bacana e recomendado. Porém, antes de passar tudo isso à equipe de desenvolvimento, por que não validarmos a ideia?

Uma das melhores formas de fazermos isto é por um protótipo de alta fidelidade.

Neste curso usaremos o Adobe XD CC, ferramenta focada em texto, favorável para quem trabalha com UX, em aplicativos e na Web. Veremos um pouco sobre integrações do ecossistema da Adobe em conjunto com a Adobe XD, e algumas de suas funcionalidades, que são muito interessantes.

O mais importante é que tentaremos questionar o motivo de colocarmos determinados componentes, como uma imagem de fundo, um botão, e as cores que escolhemos.

Toda a identidade visual do Bytebank, nosso cliente nesse curso, sua tipografia, cores e logo, já estavam prontos, e não precisaremos nos preocupar com isso. Usaremos o Estudo de Manual de Marca de um outro curso daqui da Alura, Identidade Visual parte 4: criando um manual de marca no InDesign.

O Bytebank é um banco fictício, totalmente digital, e o manual será muito útil para coletarmos estas informações e as destrincharmos para usarmos no nosso protótipo de alta fidelidade.

A ideia geral desta primeira parte do curso, então, é conseguir validar o pagamento de uma conta por parte de quem for utilizar o aplicativo. Vamos discutir sobre experiência do usuário, UI, e espero que você curta bastante!

Prototipação e o XD - Motivo de prototipar

Já que focaremos em prototipação e alta fidelidade, assim como em cursos anteriores de UX - que integram a formação UX Designer -, em que muitas pessoas vinham me dizer que não faziam testes de usabilidade ou pesquisas por falta de tempo, nós acabaremos fazendo mais adiante.

Há estudos que indicam que, quanto mais para a frente deixarmos a validação da ideia, ou algum tipo de teste, será muito mais custoso financeiramente. Sendo assim, faremos algum tipo de pesquisa ou teste antes, agora.

No curso UX Strategy, mostrei um pouco do Crazy eights, que envolve basicamente rabiscarmos as ideias em um papel, uma forma de validação.

E por que seria interessante, neste estágio, partirmos para um protótipo de alta fidelidade, e não de baixa? Os desenhos já estão prontos, já passamos por esta etapa de validação, também vistos em cursos anteriores. Já rabisquei algumas ideias, coloquei em um fluxo, fiz um protótipo de baixa fidelidade no Marvel, e agora queremos trabalhar com o sentimento que o aplicativo em produção irá passar para o usuário com quem faremos os testes.

Quais ferramentas utilizaremos para todo este processo? Photoshop? Sketch?

Todos estes são válidos. E talvez você já conheça, mas o Uxtools é bastante útil, e se clicarmos em "Tools" na barra de menu superior e em "Prototyping", serão exibidas inúmeras ferramentas disponíveis para prototipação.

O Principle (somente para Mac) e o InVision são ótimas ferramentas, porém a parte de Design atualmente não existe. Para isso, uma opção é o InVision Studio.

Segundo o site, o uso do Adobe XD está crescendo bastante, e ele tem versões para Mac e Windows. Há inclusive uma versão gratuita, o que será muito bom para nós. Caso você não queira utilizá-lo, e sim qualquer outro programa, não tem problema. Neste curso focaremos no Adobe XD, por causa de sua integração no ecossistema da Adobe.

Se você é designer, provavelmente possui mais familiaridade com o Photoshop e o Illustrator, e caso tenha experiência com o Sketch, vai gostar do Adobe XD, que é bem fácil de usar.

Antes de começarmos, outro ponto importante: UX não é a mesma coisa que UI. O primeiro envolve mais sentimento, se relaciona à pesquisa, à percepção de comportamentos e emoções. UI tem mais a ver com interface, e com a parte visual da aplicação. UI seria "como fazer" algo, enquanto UX explora o "por quê fazer".

São áreas próximas, que não podem ser totalmente separadas, e neste curso iremos focar bastante na intersecção entre essas duas áreas. Comentaremos questões sobre interface de usuário, veremos dicas, informações básicas sobre cores, princípios de design de repetição, contraste e afins, tentando questionar bastante as nossas escolhas, levando em consideração as reações e sentimentos que queremos trazer ao usuário.

Prototipação e o XD - Sobre processos

Se você não se sente confortável compondo os elementos visualmente, de modo a deixar a aplicação esteticamente organizada, e não quer perder tempo pensando em cores e afins, talvez por estar em uma etapa um pouco anterior, sem uma ideia bem consolidada de um produto final, existe uma solução: wireframes.

Trata-se de mais um entregável de UX. Antigamente, tínhamos também a tal da arquitetura da informação, talvez você tenha ouvido falar sobre Balsamiq, ou Axure.

Um exemplo, esses wireframes para mobile:

São algumas telas desenvolvidas para refazermos o site da Caelum, que atualmente está bem diferente, porém, o conceito, o core é o mesmo, com a parte de cursos, categorias de formações, menu superior, campo de busca, e tudo o mais.

Mas com quem validamos o wireframe? Com o chefe ou com o usuário?

Com o usuário, é claro. Assim, após algumas telas, seja no papel ou não, com um link entre as telas, é preciso validá-las. Independentemente de como isso foi feito, você pode estar se perguntando como passar o melhor "look and feel" ("ver e sentir") para o usuário.

Veremos, para isso, os protótipos, que são os links entre as telas, o fluxo de navegação entre elas. Existem diversos tipos de protótipos, como:

Se for de baixa fidelidade, é possível tirar uma foto do papel com os rascunhos, usar o Marvel ou outro software de prototipação e aplicar o teste. Por ser feito à mão, pode não transparecer uma ideia de acabamento.

Muito interessante para quando queremos algo mais tátil, por serem feitos manualmente por meio de colagens, e não de representações do que seriam as telas e seus elementos. Facilita na percepção dos principais componentes do protótipo, deixando o trabalho mais claro para quando formos passar para o computador. É recomendado construir esse protótipo usando um papel mais grosso ou um papelão por baixo para realmente simular um smartphone usando o app.

Wireframes são telas "paradas", arquivos em .jpg ou .png, enquanto o protótipo é o link entre as telas, que dá mais dinamicidade e está mais próximo do aplicativo de fato.

Geralmente, o fluxo de produção de um aplicativo em uma empresa funciona da seguinte forma:

Demanda > Estratégia > UI > Código > Teste

O grande problema disso é justamente a ordem: a estratégia vem antes do desenvolvimento da interface, que por sua vez vem antes do código, e só depois vem o teste. Ou seja, a pessoa responsável pelo UI precisa esperar a equipe de estratégia terminar para começar o trabalho, e assim por diante.

Durante o redesign do site da Caelum, por exemplo, conseguimos seguir com os times em paralelo. O pessoal de UX atuava ao mesmo tempo em que a equipe de UI e os desenvolvedores. Isto é, enquanto o Uxer estava aplicando testes de usabilidade e melhorando o protótipo, o designer estava escolhendo cores e tipografia, ao passo em que os back-enders e front-enders já estavam desenvolvendo e arrumando a infra, definindo as linguagens de programação que seriam usadas.

Tudo isso para mostrar que é possível fazer algo deste tipo funcionar, o que melhora todo o processo de produção da aplicação.

Sobre o curso Prototipagem e UX parte 1: Alta fidelidade com o Adobe XD

O curso Prototipagem e UX parte 1: Alta fidelidade com o Adobe XD possui 237 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas