Portfólio em UX/UI: montando um projeto

Introdução e contexto - Apresentação

Boas-vindas a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou professor de design digital aqui da plataforma. Eu tenho mais de cinco anos de experiência nessa área e ao longo da minha trajetória já desenvolvi diversos sites e aplicativos.

Esse daqui é o vídeo que inaugura o nosso curso de meu primeiro portfólio em UI/UX. Como o nome já diz, ao longo dele nós vamos produzir um projeto para incluir no nosso portfólio, utilizando a ferramenta do Figma e do Behance. Vamos entender o que vamos fazer ao longo dele.

Antes de produzirmos um projeto para incluir no nosso portfólio temos que ter um projeto. E o que vamos fazer? Vamos utilizar essas telas do meu curso de refinando o visual da interface do Figma. Não tem problema se você não tiver feito esse curso porque vou disponibilizar essas telas para download.

Explicando um pouco sobre isso, aqui neste curso desenvolvemos um redesign de um site que vende plantas. Então tinha o site inicial e fomos contratados para desenhar essa nova plataforma. Tem o fluxo de compra, uma página inicial explicando o que é a empresa, e também temos as telas para celular.

Baseado nesse projeto que fizemos nossa página no nosso portfólio, da Casa Verde. Vamos entender um pouco no Behance o que vamos fazer. Nós vamos aprender a configurar nosso perfil, com nossa foto, nosso nome, nossas informações pessoais, e vamos incluir esse projeto da Casa Verde, que tem no topo a parte inicial falando um pouco sobre o que é o projeto, resumidamente, e depois explicando cada decisão.

Não vamos apenas criar um portfólio onde vamos jogar o resultado final. Vamos pegar todo o nosso processo de pensamento, o que fomos contratados para fazer, qual é o contexto que estamos adentrando, todas as informações, e vamos incluir no nosso portfólio, para depois só no final nós mostrarmos e a partir de tudo isso chegamos a esse resultado final.

Vamos aprender a ter uma página muito bem estruturada mostrando todo o nosso pensamento, e não apenas jogando informações sem explicar o porquê. Tudo isso vai ser trabalhado ao longo desse curso. Vamos dizer quem foi o cliente que nos contratou, qual tarefa vamos realizar, qual contexto que se encontra essa loja de plantas, quais são os principais problemas que os compradores de plantas ou os usuários do site encontram, e vamos traçar um perfil baseado em toda essa pesquisa, todo esse levantamento de um persona que tem motivações para comprar e frustrações também.

Depois de toda essa pesquisa, depois que fizemos tudo isso, chegamos a uma tipografia que foi incluída no redesign, uma paleta de cores e os resultados finais com essas telas. Vamos produzir tudo isso no Figma para depois jogar dentro do Behance.

Por fim vamos dizer quais foram os resultados obtidos. E como vamos estruturar isso no Figma para essa produção? Nós temos um artboard com os textos para inclusão. Temos aqui, por exemplo, sites para consultas de plantas, a Casa Verde é um projeto de redesign, enfim, temos todo o conteúdo textual que entrará no nosso projeto já preparado e vamos pegar esse conteúdo e transformar criando um layout para ficar visualmente agradável para incluir no Behance.

Nós temos vários artboards que estão separados cada um por uma aula, primeiro vamos configurar o documento, escolhendo tipografia e as cores, nós temos uma parte do hero, do cliente tarefa, do contexto, vamos produzir tudo isso, todo esse layout dentro do Figma ao longo do curso. A parte de problemas, persona, e assim por diante. Decisões gráficas, telas finais, e por fim uma área com os resultados finais e um "obrigado" por ter scrollado até o final do projeto.

Depois nós vamos entender como exportar isso para o Behance, vamos separar em vários pedaços, cada artboard com um pedaço para incluirmos aos poucos na ferramenta final.

Esse curso é voltado para você que já conhece a ferramenta do Figma, trabalha com ela, sabe mais ou menos como mexer com criação de layout e que deseja agora ter um portfólio para apresentar seus projetos mais robusto, que apresente suas decisões.

Neste curso vamos trabalhar com Figma e Behance, mas não necessariamente você precisa fazer nessas ferramentas, uma vez construída essa estrutura, ela é replicável para qualquer outra ferramenta de apresentação de portfólio que vamos ver também ao longo desse curso. Espero que você tenha gostado de todo o conteúdo que está preparado e te vejo na próxima aula, onde já vamos entender um pouco sobre esse universo dos portfólios que estamos adentrando. Vai ser uma aula bem legal e eu espero você lá.

Introdução e contexto - Objetivos do portfólio

Nessa aula, nós vamos falar um pouco sobre os objetivos de um portfólio. Já que ao longo desse curso vamos produzir um, temos que entender onde que queremos chegar com a produção desse nosso local. Mas antes de falar sobre os objetivos do portfólio, temos que entender o que é um portfólio?

Podemos falar em poucas palavras como sendo um local para demonstrar meus trabalhos. Esse local pode ser um site, pode ser uma plataforma online, pode ser um PDF, pode até ser uma pasta física. Não importa, o importante é que seja esse local para demonstrar os projetos em que já trabalhei para outras pessoas.

Agora que entendemos o que é isso, vamos falar sobre os objetivos desse portfólio. Vou citar três principais que vamos nos aprofundar em cada um desses temas. Primeiro, um objetivo pode ser mostrar o resultado final dos meus trabalhos. Outro objetivo pode ser mostrar meu processo de trabalho e, por fim, pode ser um objetivo que seja uma peça de arte nesse local, para mostrar meus trabalhos, seja uma peça de arte em si, que também exiba meus projetos.

Vamos falar sobre o primeiro objetivo, que é mostrar o resultado final dos meus trabalhos. Quando temos esse objetivo geralmente nosso portfólio é o mais simples possível, ele é bem simples com grande foco em conteúdo e imagens grandes.

Vou mostrar um exemplo de um portfólio que tem isso, mostrar o resultado final com o objetivo dele claramente. Antes de mostrar até vou falar de onde tirei todos esses sites que vou mostrar nessa aula aqui. Tirei do site Awwwards, como se fosse premiação em inglês, mas com três "W"s, que é um site que premia sites bons, então tem esse trocadilho com o nome.

Eu vejo bastante esse site para buscar referências, e nessa área de nominees no topo temos a área chamada tags onde tem várias tags. Nessa área estão os sites que estão participando da premiação, e tem essa tag de portfólio, que podemos filtrar por ela e ver só portfólios, bem interessante esse site.

E um deles é esse da Mireia Ruiz, podemos notar que claramente o objetivo dela é mostrar o resultado final. Não tem nem texto, a página inicial tem uma navegação diferente, mas não tem texto, são só imagens mostrando os projetos que ela trabalhou.

Se eu clicar em uma dessas imagens, ela carrega rapidamente e a página interna desse projeto é apenas a foto principal, uma foto complementar e informações bem básicas, qual o nome do projeto, quando ele foi feito, qual é a mídia. É bem simples mesmo, só mostra as imagens grandes com bastante foco no resultado final.

Vamos falar sobre o segundo objetivo: mostrar meu processo de trabalho. Quando tem um portfólio com esse objetivo geralmente tem maior presença de texto, tem grande foco em documentação e explicação do meu processo. Por que escolhi isso e não aquilo, de onde tirei essa ideia, de onde tirei isso? Enfim, mostrando todo o processo que atuei, não apenas o resultado final.

Podemos vir no exemplo do portfólio do Jing Qiao, ele já diz que ele é um UX/UI designer, e vamos clicar em um dos trabalhos dele. Podemos ver que tem o título, tem uma imagem mostrando o que ele trabalhou, e o papel dele, quando criou, qual o time, quais as atribuições, um vídeo explicativo, o que é esse Google Look Wearable? E ele vai dizendo, look and ask, comparação, pesquisa para criar, como interagir com esse negócio, entendendo o problema, que a empresa que me contratou tinha um problema que devia ser resolvido, tive que entender esse problema.

Você pode notar que é bem focado em documentação, podemos ver muito texto, imagens, com texto explicando cada uma das imagens. Uma área com post-its das escolhas ao longo do projeto, um mapa mental, de onde tirei essas ideias, onde foram as ramificações, enfim. Super completo.

E no final está a interface desse projeto, desse produto, ele mostra todo o processo, todas as decisões, todas as escolhas que foram feitas, não só simplesmente joga o resultado final. Ele mostra tudo explicado. Esse é um dos objetivos.

E por fim, vamos falar sobre o terceiro objetivo: ser uma peça de arte que exiba os meus projetos. Geralmente é algo mais disruptivo, que é mais fora dos padrões. E vou mostrar esse exemplo do Radiant estúdio, que me parece ser um estúdio cinematográfico. Você pode ver que a página inicial deles já é toda diferente, tem uma imagem que interage quando mexo com o mouse.

Tem um título todo diferente, clicando no projeto ele abre um vídeo para mim. E uma coisa interessante é que esses objetivos não são excludentes. Na verdade, eles podem se unir. Por exemplo, no Radiant estúdio é um site fora dos padrões, uma peça de arte, todo diferente, ele mostra o processo e mostra o resultado final. Tem os três objetivos embutidos nesse site, que mostra que pode ser os três objetivos ao mesmo tempo.

Podemos ver que ele mostra o resultado final, com trailer, tem um texto explicando a sinopse, por exemplo, quem foi o elenco, quais foram as filmagens dessa temporada que gravei, imagens dos bastidores, como tudo começou, a produção, quem participou, enfim.

Poderia até ter mais coisas escritas? Poderia, mas você vê que também ele explica mais ou menos tudo que foi produzido. Esse site reúne esses três objetivos. Então agora que entendemos alguns objetivos de um portfólio, vamos entender quais são os nossos objetivos como designer, para criar esse portfólio.

Podem ser documentar os trabalhos que já fiz, arrumar um novo emprego, imagino que a maioria esteja procurando um novo emprego, imagino que esse seja o objetivo mais comum, e outro objetivo é ser visto por especialistas de uma área específica. Vamos falar sobre cada um desses pontos, começando por documentar os trabalhos realizados.

Às vezes eu não quero ser contatado por alguém, às vezes eu trabalho numa agência, às vezes eu sou uma agência que já trabalhei em vários projetos e quero ter um local para documentar tudo isso em que já trabalhei. Nada impede que eu faça um portfólio que tem todos os meus projetos ao longo da linha do tempo, que aí vai ter uma documentação organizada de tudo que já participei.

Esse pode ser um dos objetivos. O segundo objetivo: arrumar um novo emprego. Quando estamos procurando um novo emprego, temos que entender que tipo de emprego nós queremos. Eu estou buscando uma vaga em UX? Então tem que incluir projetos que falem com essa área, tenho que incluir projetos de UX.

Nada impede que eu tenha um monte de projetos de design gráfico e quero incluir alguns deles. Nada impede, até porque se você fizer isso vai ser mais interessante, você vai mostrar que você sabe uma área, mas também sabe outra. Mas você tem que focar também em incluir projetos da área que você está buscando, isso é bem importante.

Esse objetivo tem bastante relação com esse terceiro, de ser visto por especialistas de uma área específica. A mesma coisa. Estou querendo migrar de área, sou designer gráfico, estou querendo migrar para UX. Posso incluir um projeto de design gráfico, mas também tenho que incluir os de UX, porque é a área que estou buscando. Tem bastante relação dois últimos objetivos.

Por fim, vamos falar sobre como queremos ser apresentados, como queremos nos apresentar, como queremos ser vistos pela pessoa que está olhando nosso portfólio? Esse exemplo é interessante: "Essa pessoa é uma designer gráfica que realmente conhece produtos digitais", ou "Essa pessoa é uma designer de interface que realmente dá valor a motion design".

Quando fazemos essa imagem com uma disciplina somada a uma especialização conseguimos ser mais claros na nossa apresentação sem ser muito genéricos. É diferente de botar "olá, meu nome é André Lisboa e eu sou UX designer". Quantos UXs já existem? O que você tem de diferente para apresentar? Está muito genérico isso.

Conseguimos dizer "eu sou um UX designer, mas trabalho muito bem com design system", por exemplo. Conseguimos dessa maneira dizer que faço isso, mas também sou muito bom nisso, dou valor àquilo. Conseguimos ser bem mais claros na nossa apresentação quando fazemos essa distinção.

Espero que você tenha gostado do conteúdo dessa aula e na próxima vamos continuar ampliando nossos conhecimentos acerca desse mundo dos portfólios. Vai ser uma aula bem legal e espero você lá.

Introdução e contexto - Escolha do projeto e roteiro de construção

Nessa aula vamos fazer um roteiro de construção para incluirmos um projeto no portfólio que vamos construir ao longo do curso. Antes de vermos essa parte do roteiro vamos entender que projeto vamos trazer para trabalhar ele e incluir no portfólio.

Para esse curso vamos utilizar as telas base do curso de Figma, refinando o visual da interface, que são essas. E se você não tiver feito esse curso não tem o menor problema, porque esse material todo vou disponibilizar para você baixar caso você não tenha. E se também você tiver um projeto seu e não quiser trabalhar com esse específico fique à vontade. Mas se você não tem um projeto, precisa de alguém, não tem nenhum para incluir, podemos utilizar esse sem problema.

Esse projeto está sendo escolhido porque justamente tem primeiro, bastante informação, ele é um projeto bem feito e ele é uma landing page de uma empresa que vende plantas, então aqui tem informações das plantas, tem como você comprar, ofertas para você ver das plantas, o que os clientes dessa empresa acham das plantas, alguns vídeos.

E clicando nesse elemento das plantas, leva para o detalhe de uma planta, falando sobre a descrição dela, o que os clientes acham dessa planta, e outro similares, também tem um fluxo de compra completo, tem meu carrinho para comprar, finalizar o pedido, entrar com as informações de pagamento e um modal.

É bem interessante também porque isso tudo tem na versão para celular, então tem bastante tela para trabalharmos, bastante conteúdo, e dessa forma fica um projeto bem rico no nosso portfólio. Além disso tem a parte de guia de estilos. Então tem bastante informação para incluirmos.

Voltando para o roteiro vamos entender por que é interessante nós termos um roteiro de construção, e é justamente para conseguirmos organizar os pontos que vão entrar no nosso portfólio, para não sairmos botando informações aleatoriamente. É bem estruturado o que vai entrar no início, o que vai entrar no meio, no final, é bem importante sabermos mais ou menos o que vamos incluir.

Para isso eu trouxe quatro exemplos principais, os quatro exemplos são projetos no Behance, que é a ferramenta também que vamos trabalhar ao longo do curso, vamos pegar referências a partir de projetos que estão nessa plataforma. Vamos dar uma olhada rapidamente. Vou passar rapidamente e depois vamos ver mais à fundo.

É justamente esse chamado Bonzei, é bem legal, tem várias informações, daqui a pouco vou scrollar um pouco mais. O segundo é o Kharkiv Museums, tem bastante informação, depois scrollo melhor. Tem o Detox, que também é bem interessante. E por fim, temos o Blue Tree.

Primeiro, vamos entender o que vamos trazer na parte inicial do nosso portfólio, que vai ser explicando o contexto. Contexto é dizer qual o ambiente em que esse projeto está inserido, quem é o cliente que consumiria esse meu produto? Quem é o cliente que está me contratando? Quem são os usuários dessa plataforma? Quais são os concorrentes, referências, qual o ambiente em que isso existe?

Vamos dar uma olhada nessas referências para vermos mais ou menos como eles lidam com esse aspecto do contexto. Esse Detox é bem legal, scrollando ele já diz que é um aplicativo para você não usar o Instagram, para você não usar o Twitter, e vai falando qual a média de pessoas que usam 3h por dia o Instagram entre os millenials, entre geração X tem um pouco menos, os baby boomers, que é uma geração um pouco mais antiga, também tem menos.

Social media ocupa 70% do tempo de tela. 92% são viciados em telefone. Então ele fez um levantamento de qual ambiente ele está inserido, e vai falando como consertamos esse problema. Olha quem é meu persona, o Jason, 23 anos. Uma frase explicando o que o Jason pensa sobre esse aspecto das redes sociais, e vai levantando, mostrando para a pessoa que está visualizando esse projeto de onde ela chegou no produto final.

Não foi do nada. Ela está mostrando toda a pesquisa que foi feita. No Museums também tem o about project, tem o processo de design, começou pela pesquisa, depois wireframes, o UI design, testou, bem interessante. Esse é um pouco menos completo nessa parte, também interessante porque não vamos fazer um projeto que vai ser muito extenso nesse curso. Vamos mostrar as informações mais relevantes.

No Bonzei também, tem por que o Bonzei, tem mais informações, a linha do tempo do projeto. No início fiquei no branding, nas ilustrações, na pesquisa. Quais foram os pontos levantados nas pesquisas, quais foram os objetivos levantados que meu cliente desejava chegar ao fim do projeto. Está tudo bem estruturado aqui. Das minhas pesquisas, cheguei à conclusão que dois bilhões são feitos no self care market em 2022.

Enfim, ele vai mostrando várias informações que ele levantou. Pessoas com mais de 65 anos ficam mais tempo meditando, então ele fez esse levantamento, bem interessante também. Por fim o Blue Tree mostra qual era o cliente, qual era a minha tarefa, tem o moodboard, vou falar um pouco mais para frente dele.

Demos uma olhada nessa parte de contexto desses quatro projetos para ter uma guia. No primeiro momento desse roteiro vamos fazer a parte de contexto. No segundo momento vamos mostrar nosso processo e o que atuamos. Para explicar mais ou menos é que caminhos eu percorri para chegar às minhas conclusões.

Vou mostrar os moodboards que levantei, ou seja, referências visuais para esse projeto. Quais foram os levantamentos de tudo isso. Qual meu sitemap? Eu fiz um sitemap? Tem aqui, vou da home para a outra tela, da outra tela para a outra tela. Tem isso? Interessante colocar também.

Wireframes, eu cheguei de cara nesse produto final ou fiz um wireframe? Eu fiz um desenho no papel? Inclui isso no projeto, é bem interessante mostrar todo esse processo, quais foram minhas escolhas visuais? Eu escolhi qual fonte? Por que escolhi essa fonte? Qual a paleta de cores? Enfim, tudo isso tem que ser levado em consideração.

O Blue Tree inclusive é bem interessante. Tem o moodboard, vai mostrando mais ou menos o que ele pensou, water color, cool hand drawn icons, ou seja, a pessoa fez os desenhos à mão, usou fonte com serifa. No Detox ele diz que escolheu a fonte Silka, a paleta de cores é essa, os ícones são esses, com bordas retas, com bordas arredondadas, enfim, depende muito do que escolhemos, mostra essas escolhas.

No mobile app para os museus, user flow, entrou nessa página inicial, depois dela caiu na página do onboarding, onboarding 2, depois não entendi nada do que está escrito, mas deve ser a home, a página de login, enfim. E mostrou não só isso, mas mostra também os wireframes. "Eu não cheguei de cara nessa solução final, eu fui pensando aos poucos".

"Primeiro fiz os wireframes, vi se fazia sentido e depois apliquei minhas escolhas visuais". Por fim, vamos dar uma olhada no portfólio do Bonzei, ele mostra qual o branding, os pilares da marca, a inovação, guias, enfim, bem interessante, tem o logo, a paleta de cores, fonte utilizada, tipografia, ilustrações, ele vai mostrando tudo isso, powerful MVP model, user flow, aqui já está o flow junto com os wireframes. É bem interessante de incluir também se for o caso.

Não vi nenhum que mostrasse os rabiscos à mão, mas é bem legal também às vezes, indicar que desenhei no papel várias opções. Põe para a pessoa que está vendo o portfólio ver que a pessoa desenhou tudo isso, levantou todas essas alternativas antes de chegar no produto final, foi um trabalho bastante pensado, não chegou do nada nessa informação final. Teve todo um processo e é interessante destrinchar ele para incluirmos no portfólio.

Por fim vamos ver a parte de seleção, que no final é onde vamos dizer que agora que percorri tudo isso, fiz essas pesquisas todas, levantei todas as alternativas, defini os estilos visuais, agora esse é meu resultado final, e aí podemos mostrar as telas finais, os fluxos, se tiver motion, todo o resultado final que chegamos.

Nos nossos exemplos, grande parte dos portfólios em si, dos projetos que são incluídos nos portfólios, eles têm grande foco no resultado final, porque no final é o que as pessoas esperam ver. Tudo bem, você pensou tudo isso na pesquisa, você fez todos esses levantamentos, mas e aí, onde você chegou com isso?

Cheguei nisso, essa é minha tela final. Esse é meu fluxo final. Cai nessa tela, vai para essa, com design final. Minha página principal é essa, com essas informações, tem esses ícones. No final temos que incluir o que acharmos relevante das telas finais, dos resultados finais que chegamos com o projeto.

Mostra outras telas, que são telas menos importantes. Olha só que legal, ele mostra até uma animação mostrando como é o onboarding, bem interessante, está mostrando não só o fluxo, mas ele fez uma animação para simular esse fluxo, não ter que botar várias telas lado a lado. Pode fazer um vídeo. Bem legal.

Se você quiser ver depois tem as telas estáticas, sem ser em animação, e aí mostra minha página inicial, como é, vai mostrar um pouco sobre a página inicial, como é a tela de challenge, desafios, a tela de win special prizes, enfim, bem interessante.

Esse também do Blue Tree, tinha até a arquitetura que acabei não passando, wireframes, é bem completo. A partir daqui, site pages, ele diz como é a home. No desktop, 1440px de largura, é essa aqui. No mobile é essa aqui. Ele mostra bem parecido com o nosso, uma landing page grande com várias informações*, interessante esse exemplo.

As páginas internas, como são? É assim, mobile é assim, bem interessante, tem que mostrar no final qual foi o resultado final a que chegamos, as pessoas desejam bastante ver essa informação. Agora que vimos essas referências, estamos prontos para começar a ver as ferramentas que vamos usar para construir esse roteiro e incluir esse projeto no nosso portfólio, que vai ser o conteúdo da próxima aula. Será uma aula bem legal e espero você lá.

Sobre o curso Portfólio em UX/UI: montando um projeto

O curso Portfólio em UX/UI: montando um projeto possui 171 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de UX 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:

• Introdução e contexto
• Iniciando a construção no Figma
• Resultados finais
• Exportação e divulgação