Primeiras aulas do curso Introdução ao ProtoPie: prototipação e microinterações

Introdução ao ProtoPie: prototipação e microinterações

Introdução e principios da interação - Introdução

Olá! Bem-vinda ou bem-vindo a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou designer focado em interfaces. Isso significa que no meu dia a dia eu trabalho criando telas e fluxos navegáveis para sites, para aplicativos, para sites responsivos, para tudo que envolve esse mundo do design digital. Esse aqui é o vídeo que inaugurou o nosso curso de ProtoPie.

Bom esse curso é feito para você já tem uma familiaridade com os programas de design de interfaces, tanto do Sigma, Adobe XD, ou do Sketch e agora quer ampliar seus horizontes e criar protótipos mais realistas, protótipo que sejam de alta fidelidade. Onde o usuário realmente não consiga identificar se é um protótipo mesmo ou se é um aplicativo funcional.

Nesse curso, nós vamos pegar telas que estão criadas no Sigma, onde eu vou disponibilizar um link para vocês baixarem e utilizarem elas, e vamos pegar essas telas que estão criadas e vamos usar no programa do ProtoPie para nós criarmos interações. Então nós vamos pegar todas essas telas aqui e elas vão servir de base para nós criarmos as interações dentro do programa.

Imagem da interface do ProtoPie exibindo seis telas criadas para o projeto "MeuBolso". No caso esquerdo, há uma lista de itens na aba a"Layers".

Bom, o curso está destrinchado da seguinte maneira: Na primeira aula nós vamos aprender um pouco sobre conteúdo mais teórico, vamos aprender sobre os princípios de interação, vai ter uma lista lá e nós vamos destrinchar todos os princípios. E ainda da primeira aula nós vamos abrir já o programa do ProtoPie e começar já entender como funciona a interface desse programa.

Na segunda aula nós já vamos meter a mão na massa, e vamos começar a já criar as primeiras interações dentro do ProtoPie. No primeiro vídeo da aula 2 nós vamos aprender o gatilho de início, quando uma interface é iniciada existe uma interação nesse início, neste carregamento dessa primeira tela. Então nós vamos aprender sobre esse gatilho na segunda aula.

Ainda na segunda aula, nós vamos entender o gatilho do clique e de condições. Então aqui, quando eu clico na barra lateral vai tudo para o lado, e quando eu clico de volta, tudo volta. Então são duas condições: A condição da ida e a condição da volta, tudo no gatilho do clique. Isso tudo na nossa segunda aula.

E ainda na segunda aula, nós vamos aprender também o page container onde lá nós vamos, dentro desse page container, vamos por telas diferente e vamos usar o gatilho do detect para detectar mudanças nesse page container. Então na tela em destaque nós podemos ver que se eu arrastar para o lado, há mudanças nos meus elementos, a bolinha vai mudando, o fundo vai mudando. Isso tudo nós vamos ver na aula 2.

Na aula 3 nós vamos começar a ver interações um pouco mais complexas. Então nós vamos aprender sobre o jump, que é o gatilho de mudança de uma tela para outra. Então quando eu clico no retângulo azul nós vamos para uma tela, e quando eu clico de volta nós voltamos para a tela inicial. Então nós vamos ver isso na aula 3, esse gatilho do jump.

Na próxima aula, na aula 4 nós vamos ver umas interações um pouco mais complicadas, essa daqui na aula 4 nós vamos aprender sobre drag and drop, ou arrastar e soltar um elemento. E também vamos usar condições para controlar esse drag and drop e também vamos aprender a usar o gatilho do range onde, quando eu arrasto, vocês podem ver se eu passar aqui por cima de um elemento ele tem uma mudança de estado. E nós vamos aprender a fazer isso a partir do gatilho do range.

Se eu soltar aqui nós voltamos para posição original e se eu soltar aqui ele um outro comportamento, isso nós vamos fazer utilizando condições. E ainda na aula 4, nossa última aula, nós vamos aprender também sobre o gatilho do input. Então nós temos input de texto, se eu clicar dentro ele tem um comportamento, se eu clicar fora ele tem outro comportamento. Então nós vamos aprender a fazer isso também nessa aula 4.

E se eu digitar algo na caixa na parte de email, andre@alura.com.br, por exemplo, e entrar, nós vamos aprender a fazer esse modal, onde tem um vídeo e a informação que eu preenchi naquele input é trazido para essa tela, para dentro do modal. Vamos ver tudo isso também na aula 4.

E na última aula, na aula 5, nós vamos aprender a exportar tudo isso que nós fizemos, para nós vermos no nosso celular, no celular de algum usuário, ou então mandar um link para o usuário ver pelo computador, aprender a exportar todos esses elementos que nós criamos.

E ao final nós vamos aprender a criar uma apresentação para os vídeos que nós criamos, para as interações. Vamos aprender a fazer algo mais apresentável como o que nós estamos vendo, para nós mostrarmos para algum cliente, mostrarmos para um usuário, inserir no nosso portfólio, da maneira que nós desejarmos.

Espero que você tenha então gostado do conteúdo que está preparado nesse curso, eu espero você na próxima aula. Onde na próxima nós vamos destrinchar um pouco melhor o que nós vamos ver em cada uma das aulas e qual vai ser o cronograma mesmo desse curso de ProtoPie. Espero você lá.

Introdução e principios da interação - Overview

Olá! bem-vinda ou bem-vindo a mais um vídeo aqui da Alura, e nessa aula nós vamos entender o que nós vamos aprender ao longo desse curso de ProtoPie, e como estão divididas as nossas aulas.

Antes de começar a entrar na parte de divisão das aulas, vamos entender mais ou menos o que nós vamos produzir ao longo do curso. Nós temos aqui um arquivo do sigma aberto, que depois eu vou até mais para frente ensinar como instalar isso na máquina de vocês, e como mais ou menos utilizar esse programa. Então nós temos algumas telas que já foram produzidas do programa do Sigma, que nós vamos importar para o ProtoPie dessas telas.

Então nós criamos telas que estejam relacionadas ao tipo de interação que nós vamos desenvolver ao longo desse curso. Então nós vamos utilizar primeiro um gatinho de entrada, vamos aprender a interação de entrada, a interação de um clique, a interação de um arrastar e soltar. Então para isso essas telas foram adaptadas para que nós consigamos ter essa melhor experiência na hora de criar essas interações.

Então nós temos uma página inicial, onde nela o usuário pode clicar nesse cartão e esse cartão se expande, então nós vamos aprender essa interação. Nós temos também uma tela de menu, onde o usuário quando ele clicar nesse hambúrguer, esses elementos todos vão para o lado e vai entrar esse menu, nós podemos ver que os elementos foram para o lado mesmo.

Também temos uma tela de login, onde nela nós vamos utilizar para aprender input de texto nas interações. Temos uma tela de divisão de contas, onde nela o usuário vai poder pegar e arrastar esses elementos e jogar para cima de cada um dos participantes. Então com isso nós vamos aprender os gatilhos de Drag and Drop, de arrastar e soltar.

E por último nós temos aqui esse é um boarding com três telas diferentes, onde nós vamos aprender esse gatilho de ficar scrollando de um lado para o outro, como que funciona para criar esse tipo de interação. São essas telas que nós vamos utilizar ao longo do curso.

E no navegador, eu tenho aberto as aulas que nós vamos produzir mesmo, quais são as aulas, como é que está a divisão dessas aulas. Então na aula 1 nós já vimos a introdução que foi a aula passada, estamos no overview, e na próxima aula nós vamos aprender os princípios da interação.

São bastantes princípios, então eles estão divididos em duas aulas. Na primeira nós vamos ver os primeiros, e por último vamos ver os finais. E ainda nessa aula 1, nós vamos já começar abrir o ProtoPie e vamos mais ou menos entender como funciona a interface desse programa.

Na próxima aula, na aula 2, nós vamos aprender os primeiros gatinhos, as interações um pouco mais básicas do ProtoPie. Então nós vamos aprender o gatilho de início, dos cliques e condições, o gatilho de clicar e controlar esse clique a partir de condições. E vamos fazer duas aulas, 2.3 e 2.4, para nós criarmos aquele on board que eu mostrei para vocês, de scrollar de um lado para o outro.

Na terceira aula, nós vamos fazer aquela interação que vai ser a transição de uma tela para outra, quando o usuário clica no cartão, ele se expande e vai para o topo da tela, então nós vamos preparar o nosso arquivo do ProtoPie para realizar essa animação e depois vamos recriar cada uma dessas telas para nós finalizarmos.E por último, nós vamos aprender a usar o gatilho de jump, que é um gatilho bastante importante quando nós estamos mudando de uma tela para outra.

Na aula 4, nós vamos aprender sobre o drag e as condicionais, que nós vimos que vão ser aqueles elementos que vamos arrastar de um lado para cima dos usuários, então nós vamos aprender esse gatilho do drag e drop.

E depois vamos utilizar o Range, que é um outro gatilho bastante importante para nós controlarmos também essa animação do Drag, quando nós estamos arrastando e passa por cima dos meus usuários, o meu elemento tem um comportamento diferente. Então para isso nós vamos utilizar o Range

E, por fim, nós vamos fazer duas aulas, onde nelas nós vamos fazer os input de texto. Então nós vamos ver como é que se comporta esse input de texto e vamos, depois que eu enviar esse meu formulário, vamos apresentar um modal falando: “Parabéns seu formulário foi enviado com sucesso”. Então vamos usar essas duas aulas, 4.3 e 4.4, para resolver as interações dessa tela específica.

E ao final, na aula 5, nós vamos exportar o nosso projeto, vamos ver como é que nós podemos ver, tanto no browser, tanto quanto no celular, como é que fica o nosso protótipo. E ao final, nós vamos pegar uma interação que nós construímos e vamos jogar no nosso portfólio para nós criarmos algo mais apresentável, para quando nós quisermos apresentar para alguém, mostrar para alguns usuários, ou mostrar para designers, mostrar qual trabalho nós estamos construindo.

E ao final, vamos concluir o nosso curso e vamos passar um pouco sobre todas as aulas, ver o que nós aprendemos e quais foram os ganhos desse curso. Espero que vocês tenham gostado dessa aula, e na próxima nós vamos começar vendo os princípios de interação, vamos ver os primeiros princípios. Espero você na próxima aula!

Introdução e principios da interação - Princípios #1

Fala pessoal, bem-vindos a mais um vídeo aqui da Alura, e nessa aula nós vamos falar um pouco sobre os princípios da microinteração.

Antes de começar a entrar de fato nesses princípios, quero comentar que a interação, as animações no mundo do design de interfaces, não são apenas algo para trazer um valor visual ou que deixa o aplicativo ou site que esteja desenvolvendo mais interessante.

Não, ela é muito importante para nós conseguirmos ter uma comunicação mais efetiva com o nosso usuário, que por meio da animação nós conseguimos antecipar algumas informações antes mesmo do usuário bater o olho na tela, escanear, e ler cada uma das informações.

Então por exemplo, quando nós vamos adentrar um pouco mais nos princípios, eu vou mostrar um pouco mais esclarecidamente cada um deles, mas por exemplo, quando a nós estamos mostrando elementos que aparecem em momentos distintos na interface, nós conseguimos dizer que esses elementos têm diferenciação entre um e outro porque eles aparecem em momentos diferentes.

Então nós já conseguimos nos comunicar com este usuário muito antes mesmo do elemento parar e ficar estático na tela. E isso é muito poderoso e muito importante para nós da interação, é o maior valor que ela tem para nós como designer.

Antes de começar então a adentrar também nos princípios, eu quero falar um pouco sobre as interações em tempo real e em tempo não real. Uma animação, uma interação em tempo real é mais ou menos como nós estamos vendo nesse exemplo que está passando na tela, no momento em que o usuário está desempenhando uma ação dentro da nossa plataforma, essa animação está acontecendo ao mesmo tempo dessa ação. Então nós podemos dizer que é uma interação em tempo.

Tipo esse que é um scroll lateral, onde o usuário, quando ele realmente mexe com o dedo, se for um celular, quando ele executa uma ação nessa interface ela responde de imediato. E uma interação em tempo não real, seria algo que acontece depois da minha ação. Então nesse exemplo que está passando na tela, eu cliquei em um botão e depois do meu clique que começou uma animação, que veio o como gatilho principal essa minha ação de clique, por exemplo.

Então vamos conhecer alguns princípios que nós vamos ver nessa aula. Nós vamos ver sobre o princípio da suavização, do deslocamento e atraso, do parentesco, transformação, mudança de valor, máscara, sobreposição, clonagem, obscurecimento, parallax, dimensionalidade e zoom & dolly. Eu vou dividir essa aula em dois vídeos, no primeiro vídeo nós vamos ver até a máscara e no próximo vídeo nós vamos ver de sobreposição até zoom & dolly.

Então vamos começar a ver os princípios. O primeiro princípio que eu vou comentar é o princípio da suavização, as interações que nós criamos na interface ocorrem em um período de tempo, em um espaço temporal. E a suavização tende a dar uma naturalizada nesse movimento, transformando esse movimento em algo mais orgânico.

Porque pensa que quando nós estamos caminhando, por exemplo, ou então um carro se movimentando, nós não ficamos sempre em uma velocidade extremamente constante, se mantém sempre, nós temos variações dessa velocidade e isso tem que ser traduzido um pouco na interface. Então pensa, quando nós vamos arrancar com carro, por exemplo, nós temos um pique inicial de velocidade e depois nós nos mantemos de maneira mais constante.

E quando nós vamos parar, nós não simplesmente paramos do nada, nós vamos parando aos poucos e de repente para. Então a suavização tenta trazer um pouco mais de realismo mesmo, digamos assim, para as animações que ocorrem na interface, para não ficar algo muito duro e parecendo muito robotizado.

Vou mostrar alguns exemplos, vou mostrar esse exemplo linear que é isso que eu estou falando, é um movimento mais constante, parece que tem alguma coisa errada porque nós não nos movimentamos dessa maneira, nós geralmente temos uma antecipação do movimento, depois nós conseguimos ter realmente uma velocidade mais constante, mas depois nós temos um pico de velocidade. E quando vamos parar nós também temos um atraso, nós não paramos simplesmente do nada. Nós paramos e voltamos um pouco para trás.

Então a suavização tenta trazer um pouco mais dessa realidade para interface. Esse aqui é o movimento linear, e esse é o movimento elástico que já traz ao extremo mesmo essa suavização. Cabe a nós como designers entendermos qual é a melhor suavização para usar no nosso projeto e tentar usar isso ao nosso favor.

Tem diversas opções para nós escolhermos, e nós podemos controlar isso muito bem pelo ProtoPie mesmo, tem várias opções para nós escolhermos lá que eu vou comentar um pouco mais para frente.

O próximo princípio que eu vou comentar é do deslocamento e atraso. Esse princípio é muito poderoso porque ele consegue comunicar ao usuário uma informação antes mesmo dessa informação se estabelecer por completo na tela.

Então nós podemos ver nesse exemplo que está na tela que nós temos dois elementos acima que chegam em um momento, e um elemento terceiro que chega em outro momento. E apenas por essa leitura desse movimento nós conseguimos entender que os dois elementos do topo estão ligados porque eles chegaram juntos, e depois chega um terceiro elemento que provavelmente não está linkado, não tem ligação alguma com os elementos, porque ele veio de um momento diferente.

Então isso é muito poderoso porque nós podemos nos comunicar com o usuário antes mesmo dele parar na tela, desses elementos pararem na tela. Aqui eu trouxe um exemplo para nós darmos uma olhada também que é um botão que nós clicamos, e quando clicamos aparecem três elementos em momentos diferentes.

Então por essa movimentação nós já sabemos que são três elementos que tem funções diferentes. Aqui no caso é um elemento para o texto, outro para imagem e outro para vídeo.

O próximo que eu vou comentar é o parentesco que também tem uma relação muito similar ao princípio que nós vimos agora que também já consegue comunicar ao usuário rapidamente o que tem ligação um com o outro. Então dessa maneira nós podemos dizer, se nós estamos mexendo em um elemento, aqui nesse exemplo, outro elemento está sendo afetado com essa movimentação. Ou seja, eles só podem ter ligações entre si.

Antes mesmo do usuário escanear e ler o texto, ver as imagens, ele por meio do momento ele já consegue rastrear alguma coisa, escanear alguma coisa, alguma informação de interface.

Eu tenho um exemplo aqui também para mostrar, nós podemos olhar, quando o usuário movimenta um elemento da esquerda, a direita tem uma alteração também na sua propriedade. Então nós podemos ver que um elemento está linkado ao outro, isso também é muito importante para nós nos comunicarmos melhor com o usuário.

O outro princípio que nós vamos ver, é o princípio da transformação. Esse princípio é o mais simples de explicar porque não tem muito mistério, é realmente a transformação de um objeto para outro. Aqui nós podemos que um elemento que era um retângulo, virou um círculo. E nós conseguimos criar narrativas visuais, contar histórias de uma maneira muito eficiente por meio desse princípio.

Mostrar um exemplo, nós temos esse botão de enviar, quando o usuário clica no botão de enviar que tem esse formato retangular, com as bordas arredondadas, ele se transforma em um círculo, tem uma transformação, e esse círculo vira algo de loading para mostrar que a interface está trabalhando em alguma coisa. E depois ele volta ser um botão para mostrar que a ação está concluída, está tudo certo.

Então nós conseguimos essa narrativa visual para o nosso usuário enquanto ele espera uma ação, isso é muito bacana também para não deixar o usuário ansioso, ele sabe exatamente o que está acontecendo através de histórias que nós contamos.

Esse princípio aqui da mudança de valor é bastante interessante também, porque nós trazemos um pouco de dinamismo para nossa interface, para os números. Nós mostramos que os números não são elementos estáticos, eles são elementos que são mutáveis e que podem mudar a qualquer momento. Então nós podemos trazer um pouco mais de realidade a gráficos, e números de poupança que seja, quando nós demonstramos esse tipo de mudança na nossa interface.

Eu vou mostrar, por exemplo, quando uma interface aparece dessa maneira que está na tela, digamos um aplicativo que mostra, sei lá, só poupança, ou então um gráfico que está crescendo qualquer que seja, ele só aparece na tela. Você não vinha muito dinamismo, você vê: “ah, tá bom número 8, o que isso significa e tal”.

Mas aqui nós temos essa mudança de valor que já demonstra, conforme o gráfico vai mexendo, o número vai mudando. E nós podemos mostrar que esse número é totalmente mutável, se você, por exemplo, um aplicativo de vendas vender mais, você vai receber mais dinheiro. Então nós trazemos um pouco de realidade atrás dos números.

Tem esse exemplo que está na tela, conforme o usuário vai mexendo na linha do tempo, ele vai vendo que o valor vai mudando. Então mostra que a cada momento diferente, existe um valor e o número tem reflexo disso. Ele não muda do nada, bruscamente, ele tem essa mudança de valor.

Esse princípio que eu vou comentar, o da máscara, que nós conhecemos muito bem também a máscara. Quando um elemento está contido no outro, e o que está na tela é bem similar a essa explicação, tem um elemento que está contido, e esse elemento maior que está aqui é o retângulo, e tem esse círculo que ocupa justamente esse retângulo maior.

Ele também é muito eficaz para nós contarmos histórias para nosso usuário. Tenho esse exemplo que está na tela, que quando a música está tocando ela está no círculo, e depois essa imagem continua dentro desse elemento, só que o elemento muda de forma. Então nós temos essa máscara para mostrar que agora tá tocando uma música e agora está numa lista para selecionar qual música que eu quero da minha playlist.

Vimos então os primeiros princípios da interação, e na próxima aula nós vamos continuar vendo esses princípios aqui, vamos para segunda parte. Espero vocês lá.

Sobre o curso Introdução ao ProtoPie: prototipação e microinterações

O curso Introdução ao ProtoPie: prototipação e microinterações possui 165 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

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

Aprenda UI Design acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas