Transcrições
1. Introdução: Bem-vindo a criar um portfólio de UX e ser notado. Eu sou Jasmine. Eu sou um designer de UX/UI morando em Seattle e tenho experiência em empresas como Starbucks e Microsoft. A coisa que tem sido o meu ponto de entrada em conseguir entrevistas e até mesmo ser contratado, tem sido o meu portfólio. Não porque é o trabalho mais bem trabalhado, mas porque ele me mostra e meu processo de UX. Agora, mais do que nunca, as empresas precisam ver como você cria um projeto do início ao fim. Neste curso, vamos passar passo a passo, todos os componentes-chave que você precisa em seu portfólio; como distribuí-la, publicá-la e ver ótimos exemplos. Também vou compartilhar dicas de design e publicação usando o Webflow e o Squarespace. Para tornar tudo o mais simples possível, criei uma planilha onde você pode inserir seu próprio conteúdo para ajudá-lo a começar. Sinta-se à vontade para compartilhar seu portfólio a qualquer momento para obter feedback.
2. Introdução pessoal: A primeira seção do seu portfólio será sua introdução pessoal. Este é você se apresentando ao seu potencial empregador. Você quer falar um pouco sobre suas habilidades, experiência
passada, e um pouco sobre sua personalidade. É ótimo adicionar uma fotografia. Tenha em mente que as empresas estão contratando pessoas, então elas querem ter uma noção de quem você é e do que você pode fazer. Uma coisa a ter em mente é em que posição UX você está interessado. Você deve personalizar seu portfólio para as pessoas com quem deseja trabalhar nos setores em que deseja trabalhar. Se você quer ser um designer de interação, você deve personalizar seu portfólio para destacar essas habilidades especificamente, uma grande coisa a fazer é pesquisar uma vaga atual no LinkedIn. Você pode ver o que eles estão procurando especificamente em termos de experiência e habilidades, e certifique-se de mencionar essas habilidades em sua introdução pessoal. Sua introdução pessoal terá dois componentes-chave. A primeira é a sua manchete. Sua manchete vai consistir em seu nome, onde você mora e sua função de UX preferida. Aqui é onde você quer fazer muitas pesquisas sobre, em que parte do processo de UX você quer se envolver. Você quer ser mais do lado da pesquisa ou talvez do lado do design visual. Eu tenho uma lista de muitas opções
diferentes aqui na worksheet para ajudá-lo a começar. Certifique-se de pesquisar se não estiver familiarizado com alguns destes termos. O segundo componente da sua introdução pessoal é a sua descrição. Este é o principal volume de sua introdução pessoal. É aqui que você vai entrar em um pouco de detalhes sobre suas habilidades, sua experiência e sua personalidade. Uma coisa realmente importante a saber é que muitas pessoas que estão olhando para o seu portfólio são realmente recrutadores. O departamento de UX vai dar a um recrutador uma lista de requisitos, geralmente uma lista de habilidades de coisas que eles estão procurando. Então aquele recrutador vai olhar para o seu portfólio para ver se você combina com algumas dessas habilidades. Certifique-se de olhar para uma lista. O que eu tenho aqui na worksheet é um bom lugar para começar em diferentes habilidades gerais de UX que você deve pensar sobre. Leve-o de volta à sua pesquisa e veja o que diferentes empresas e funções estão procurando também. Na maioria das vezes eles combinam com o que o recrutador está procurando. Na worksheet. Eu tenho um modelo onde você pode inserir seu próprio conteúdo para ajudá-lo a começar com uma auto-descrição. Basicamente, você apenas insere suas próprias informações nos campos azuis realçados. Sinta-se livre para alterar este modelo como você precisa. Isso é apenas para ajudá-lo a começar caso você não tenha idéia do que escrever. Aqui está um ótimo exemplo de uma introdução pessoal. Este é o portfólio de UX do Tom Petty. Começa com uma ótima foto de Tom dando uma palestra, seguida pela manchete de Tom, que é essa frase de troca que explica o que Tom faz, como produtos de design, serviços, etc. um pouco de detalhes sobre o que Tom fez, coisas que ele gosta de fazer, e uma breve descrição sobre o que você pode encontrar em seu portfólio. Este é um ótimo exemplo para ajudá-lo a começar. Ele também tem um design muito limpo e simples.
3. Apresentação do projeto: Após sua introdução pessoal, você quer ter uma lista de todos os projetos que você vai fazer um estudo de caso. Esta vai ser uma lista de cerca de 3-5 projetos no total. Você só quer mencionar um pouco sobre o projeto e, em seguida, ter um link para o estudo de caso. Vamos rever brevemente uma lista de verificação de todas as coisas que você deve incluir na introdução do seu projeto. Primeiro, você quer ter um título do projeto. Este provavelmente será apenas o título do produto em si. Então você quer ter para quem você fez este projeto, seja seu empregador ou seu cliente ou talvez até mesmo você mesmo, então você quer ter a duração que você levou para concluir o projeto. Então o mais importante é uma descrição do projeto. Isso deve ser de cerca de três frases de comprimento onde você discute brevemente o que é. Além disso, você quer ter um link, bem na parte inferior, para o estudo de caso em si. Tudo isso deve ir junto com uma foto. A foto deve ser de alta qualidade. Pode até ser um vídeo ou um gif, mas nada muito profundo, apenas o suficiente para chamar a nossa atenção e nos fazer querer clicar
para saber mais no estudo de caso. Estes são alguns exemplos realmente grandes de uma introdução de um projeto. Observe como todos eles têm fotos de alta qualidade, um título claro e ousado, seguido de uma descrição, e um ótimo CTA para ver o estudo de caso em si. Todos estes são realmente grandes exemplos de uma introdução de um projeto. Eu recomendo usar estes como um exemplo para você.
4. Estudo de caso: Para começar seu estudo de caso, vamos relistar todas as coisas que você teve na introdução do seu projeto. É bom pintar um quadro e dar contexto aos bastidores de como este projeto se reuniu. List, qual foi o seu papel neste projeto? Para que empresa ou cliente você fez isso? Que projeto é esse? Era para iOS, andróide, era um site? Relacione novamente a duração do projeto. Mais importante, com quem trabalhavas? Quantos designers, engenheiros, gerentes de
projeto, talvez você tenha trabalhado com o CEO. Em seguida, você deseja listar o objetivo do projeto. Qual foi o principal desafio e como você avaliou o sucesso? Você teve uma certa idéia ou expectativa para o projeto quando começou? Depois disso, você quer entrar no processo. Aqui é onde você vai dar um breve esboço de todas as diferentes fases que você pensou. Pense em seus projetos em etapas e liste-os. Deixe-nos saber quais os passos que devemos olhar para fora. Aqui está uma lista de diferentes métodos de processo que você pode usar em seu outline. Por exemplo, como esse projeto começou? Começou com uma reunião de negócios? Começou com a pesquisa? Pense em onde o projeto começou, onde veio o problema. Como foi identificado o problema? Então você quer começar a pensar sobre onde você foi da pesquisa. Você teve uma discussão com os designers? Acabou de começar a testar agora mesmo? Novamente, use esta lista de processos como um exemplo e pense em todas as diferentes fases. Idealmente, você teria pelo menos cinco fases diferentes para conversar. Mas, novamente, isso vai ser subjetivo ao seu projeto em si. Aqui está um exemplo de um breve esboço do projeto de alguém. Ele lista pesquisa, design de
interação, design visual e desenvolvimento front-end. Esses são todos os grandes passos que ele está prestes a entrar em detalhes para todo o seu estudo de caso. O próximo é o seu colapso. É aqui que você entra em cada passo individual e explica o que aconteceu. Este é o momento de entrar em detalhes do processo que você delineou. Tente incluir qualquer visual ao longo do caminho. Você tem alguns esboços iniciais que possamos ver? Você pode visualizar o projeto final na parte superior da página, mas você quer se certificar de mostrar visuais relevantes ao longo do caminho. No final da repartição, esses tipos de perguntas devem ser respondidas. Quem é o público-alvo? De que personas você teve que trabalhar? Onde estão compromissos? Quais eram os KPIs? Lembre-se de destacar sua contribuição individual ao longo do caminho. Agora vamos olhar para um exemplo de um estudo de caso. Este é o portfólio do meu amigo Wilian e este é um dos seus projetos. Quando você pousa pela primeira vez na página, ele tem uma grande referência visual do projeto em si. Chama-se “vacaybug”. É realmente ótimo no topo do seu estudo de caso ter uma maquete final do que
é o projeto ou alguma indicação do que estamos prestes a entrar. Após sua referência visual, você deseja detalhar as informações que você tinha na introdução do projeto, como sua função, o contexto por trás dos projetos, como a duração, individual contribuição, bem como com quem você trabalhou, que tipo de projeto é este, e links ao vivo para o próprio site. Aqui podemos ver onde Wilian descreve todo o processo deste projeto. Sabemos que vamos falar sobre pesquisa, interação, design visual, marketing e pensamento de produto. Automaticamente, podemos ver quais são as diferentes fases para este estudo de caso. Então, à medida que
rolamos para baixo, podemos ver que Wilian quebrou cada seção, de todos os processos de uma maneira realmente grande e ousada. Agora sabemos que estamos prestes a ler tudo sobre a pesquisa que foi feita para este projeto. À medida que rolamos para baixo, podemos ver que há referências
visuais para acompanhar as descobertas,
as perguntas que foram respondidas. Aqui temos diferentes personas de quem é este projeto. Personas são uma ótima maneira de pintar o quadro de quem é seu público-alvo, que é uma das perguntas que você deseja responder em seu estudo de caso. Então, eventualmente, depois de vermos essa análise competitiva, devemos ver a próxima fase, que é as interações. É muito importante ter esboços e wireframes de baixa fidelidade. Normalmente, em um processo de UX, você vai começar com esboços de baixa fidelidade para que ele possa pintar a imagem que você esteve envolvido em todo o processo. Aqui, Wilian descreve todos os diferentes esboços e o que eles levaram a. Então, à medida que
rolamos, podemos ver que estamos na terceira fase agora, que é a execução. Aqui é onde vamos começar a ver os Morkups finais. Eu também vou ter um link para este estudo de caso para que você possa passar e realmente ler todos os detalhes. Eu só quero dar um breve esboço
das coisas que você deve incluir no seu estudo de caso. Observe como cada referência visual tem um monte de contexto sobre o que estamos olhando. Você não quer apenas a imagem despejar todas as suas referências visuais. Você quer ter certeza de que você está listando eles em seu processo exatamente como este. Parece que estamos quase no final do projeto. Quero anotar esta seção do estudo de caso, que está medindo o sucesso. Você quer ter certeza no início do estudo de caso para mencionar qual é o objetivo deste projeto, e então no final para ver você atingiu esse objetivo? O que você poderia ter feito diferente? Isso é algo que muitos estudos de caso perdem, mesmo aqueles que têm fases e muitas referências visuais. Eles não mostram necessariamente se o projeto foi ou não bem sucedido, o que é realmente importante. Para começar com seu estudo de caso, vejamos uma lista de verificação de algumas coisas que você deve pensar em incluir. Primeiro você deseja delinear seu projeto em etapas. Substitua essas etapas pelas fases reais do seu projeto. Por exemplo, altere a etapa um para pesquisa, se essa foi a etapa inicial em seu estudo de caso. Então você quer começar a pensar em responder algumas dessas perguntas ao longo do caminho. Como é que este projecto começou? Que problema você está tentando resolver? Então você quer começar a pensar sobre para quem você estava projetando este projeto. Você teve um brainstorm? Se sim, com quem? Aqui estão alguns visuais ao longo do caminho que você deve pensar, incluindo, como personas, capturas de tela, pesquisa, esboços de dados. Eu tenho uma idéia de diferentes visuais que você deve incluir desde o início do seu estudo de caso até o fim, você pode ver os visuais aqui. Por volta do passo três, como testaste as tuas ideias? Como sabia qual era a ideia correta? Você tem algum wireframes ou protótipos? Com quem você trabalhou para enviar este produto? Como isso mudou ao longo do caminho? Você explorou diferentes opções de interface do usuário? Se sim, mostre isso. Então, no final do seu projeto, você quer mostrar as maquetes finais. Você quer nos mostrar qual foi o resultado final. Resolveu o problema que listou no primeiro passo? Esta vai ser uma ótima maneira de você começar a pensar sobre como você pode coletar seus pensamentos ao olhar para o seu estudo de caso.
5. Crie e publicar com o Squarespace: Agora, vamos olhar para projetar e publicar seu portfólio. Vou usar o Webflow e o Squarespace, porque ambas as ferramentas facilitam o design e o gerenciamento do conteúdo. Quando estiver pronto para começar a projetar seu portfólio, você precisa pensar se deseja criar seu portfólio do zero ou usar um modelo existente. Ambas são ótimas opções para UX, só depende de quanta criatividade você quer usar em seu portfólio. Webflow vai permitir que você crie seu portfólio completamente do zero usando código. Enquanto o Squarespace vai lhe dar um modelo realmente ótimo para trabalhar fora. A grande coisa sobre UX, é que o trabalho deve falar por si mesmo. O que significa que você pode usar um modelo e ser tão bem-sucedido quanto alguém que cria seu portfólio do zero. Depende realmente da sua visão para o seu portfólio e da criatividade que você acha que é necessária para comunicar seus projetos. Por exemplo, o portfólio de Tom Petty do curso anterior, tinha um design muito limpo e simples, algo que você poderia muito bem conseguir com um modelo. Em seu portfólio, seu trabalho falava por si, e seu trabalho poderia facilmente ser exibido com maquetes e fotografias. Mas, por outro lado, o portfólio Williams do exemplo de estudo de caso, criou seu portfólio a partir do zero porque ele queria ter elementos
personalizados e animações para elevar seu trabalho. Essas animações e elementos ajudaram a elevar nossa compreensão de seu projeto. De qualquer forma, ambas as ferramentas serão ótimas opções para você e seu portfólio. Certifique-se de que você tem todos os materiais necessários quando você começar a projetar. Você precisa ser capaz de conectar todas as suas referências visuais em seu conteúdo que temos trabalhado até agora. Para começar a usar o Squarespace, você precisa decidir qual modelo deseja usar. Aqui na planilha, eu tenho as melhores opções para o portfólio UX. O primeiro modelo é Jasper Jin. Na verdade, este é o modelo do Squarespace que eles criaram com o UX em mente. A página de destino vai se concentrar em seus próprios projetos. Uma coisa que você provavelmente percebe é que ele não tem um espaço para sua introdução pessoal. Se você fosse para ir com este modelo, você precisaria editar logo abaixo onde diz Jasper Jin e adicionar uma seção para sua introdução pessoal. O melhor do Squarespace é que ele tem uma lista de opções de design que você pode arrastar e soltar em qualquer modelo. Uma delas é a opção de parágrafo. Em seguida, a partir daí,
a introdução do seu projeto vai estar sobre cada um dos seus projetos. Este modelo não mostra as descrições detalhadas sobre as quais falamos para a introdução do seu projeto, mas há espaço suficiente para ter todas essas informações aqui. A melhor coisa sobre este modelo é a página de estudo de caso real. Ele tem esta animação realmente grande como você rolar para baixo cada uma das diferentes seções animadas, que torna realmente fácil de ler e coloca um monte de ênfase em cada fase de seu estudo de caso. Então, se você está interessado em ter a animação de rolagem, eu recomendo ir com Jasper Jin. Algo a observar para o Squarespace é que você não pode personalizar animações. Você deve encontrar um modelo que tenha as animações que você está procurando, ou você pode usar o Webflow e criar suas próprias animações personalizadas. O próximo modelo é chamado York. Este é muito semelhante ao Jasper na medida em que tem aquela animação de rolagem para a página de estudo de caso. A coisa que é diferente neste é que as introduções do
seu projeto podem ter diferentes variações de tamanhos. O Jasper usa uma grade onde todos os projetos terão o mesmo tamanho exato. Considerando que este, se você tem visuais onde você sente que precisa
ocupar toda a largura do site como este,
por exemplo, talvez você deva usar este em vez disso. Algo a notar é que ambos os modelos têm navegações simples no topo do site, o que é realmente importante. Muito provavelmente sua navegação terá um botão inicial, que irá abrigar seus projetos e sua introdução pessoal, bem
como um link para cada estudo de caso. Em seguida, uma página Sobre e potencialmente uma página Contato. Você pode listar uma seção de contato em sua página inicial ou em sua seção Sobre, ou ela pode ter sua própria página. Todas são ótimas opções. Se você acha que sua seção de contato não está recebendo cliques suficientes, eu recomendo ter a seção de contato na própria navegação. Para a sua página sobre, eu iria mais em detalhes sobre o seu processo identificado, bem como ir mais em sua personalidade. O próximo modelo é chamado Stella. Este é realmente o modelo que eu usei para o meu portfólio. A coisa que eu gostei sobre este modelo foi a seção de introdução do projeto. Gostei de como eu poderia colocar um texto sobre uma fotografia muito facilmente com o botão Saiba mais. Quando eu estava olhando para este modelo, eu pude facilmente ver como meu trabalho poderia caber nessas seções. Eu também gostei da cor completa com fundos. Eu usei isso aqui para minha página de contato, e eu sinto que isso realmente ajuda essa seção a se destacar. Uma desvantagem para este portfólio é que ele não tem nenhuma animação em nenhuma dessas páginas. A única animação que eu era capaz de adicionar à minha foi a rolagem Parallax, que era a única animação que eu estava interessado. Felizmente, eu era capaz de personalizar este modelo com essa animação, mas a maioria das animações tem que vir com o próprio modelo. A animação de transição que vimos nos outros dois modelos, como você rolar para baixo a página, não
foi algo que eu poderia conseguir com este. Portanto, é realmente importante prever como seu trabalho e apresentação se encaixam nesses modelos. Você quer escolher um que represente como você imagina todo o seu trabalho sendo colocado para fora.
6. Crie e publique com Webflow: Agora vamos dar uma olhada no Webflow. Webflow é uma ferramenta realmente incrível, porque permite que você crie seu portfólio do zero, e publique-o assim que você terminar dentro da mesma ferramenta. Assim que você terminar de projetar, você pode clicar em “publicar” e ele entra instantaneamente ao vivo. O Webflow também vem com modelos. Eu, eu mesmo não usei nenhum dos modelos do Webflow porque eu
sinto que o objetivo de usar o Webflow é projetá-lo você mesmo, mas se você quiser usar um modelo, se você entrar em seu site principal, você pode ver opções Lá. Não tenho certeza se eles são tão pensados quanto os modelos criados no Squarespace, mas isso pode ajudá-lo a começar caso você não esteja muito familiarizado com CSS ou HTML. Agora, você não precisa necessariamente saber o código para usar o Webflow, mas é muito útil. A forma como o Webflow funciona, é que lhe dá uma interface de design semelhante a um esboço de ferramenta de design. Quando você arrasta e solta elementos diferentes, como uma Barra de Navegação, por exemplo, ela não vai pousar em sua tela tão fluidamente quanto seria em um software de design, e isso é porque ele está usando HTML como sua estrutura. Você precisa entender como HTML e CSS organizam o conteúdo, para ajudá-lo a descobrir por que as coisas não estão funcionando da maneira que deveriam. Este é o portfólio de Wilian, e nós somos capazes de entrar no design nós mesmos e ver como ele criou alguns desses elementos. Você pode ver no início que ele provavelmente usa uma Barra de Navegação no painel esquerdo aqui. Aqui estão todas as suas diferentes opções com as quais você tem que trabalhar. Você tem seções, contêineres, grades e colunas. Estes são todos baseados em HTML. Blocos de div, itens de lista, parágrafos, novamente, todos HTML. Mas eles também têm elementos reconhecíveis que você pode arrastar e soltar como uma barra de navegação. Uma grande coisa sobre o Webflow é que ele
tenta ajudá-lo a criar elementos que são responsivos. Com essa barra de navegação que
criamos, podemos entrar no topo da tela e clicar no modo tablet,
ou no modo de telefone para ver como eles são responsivos, e parece que um menu de hambúrguer é como ele vai ser responsivo. Agora, porque esta é uma ferramenta de design, Webflow tem algumas coisas de
navegação planejadas como essa embutidas no próprio software. Se você queria que a navegação funcionasse de uma maneira diferente, você definitivamente pode fazer isso. Vamos voltar ao modo de desktop. O painel esquerdo terá todos os seus elementos de layout, bem
como botões onde você vai colocar nas fotografias. Então à direita é como você vai estilizar tudo em termos de cor, seleção de fontes, espaçamento. Aqui está a introdução pessoal de Wilian. Ele tem três colunas, cada uma com uma fotografia e descrição, um pouco sobre o que ele faz como designer de UX. Se você quisesse ter algo semelhante a isso, você iria até aqui na seção esquerda, e clicar em “colunas”. Eu vou colocá-los aqui mesmo, e então ele vai me dar a opção de
decidir quantas colunas eu gostaria de ter. Vamos fazer três. Agora, vou arrastar uma fotografia. Você pode ver que a fotografia vai automaticamente alinhar à esquerda. Isso porque, novamente, estamos usando HTML como nossa estrutura, e em HTML, tudo se alinha automaticamente à esquerda. Não é tão simples como usar um modelo no sentido de que podemos arrastar qualquer coisa, arrastar um elemento em qualquer lugar da página. Na verdade, vamos ter que entrar e trabalhar dentro do CSS para obter sua posição da maneira que queremos que ela seja. Mas antes de fazer isso, eu vou adicionar algum texto, então há um parágrafo, e felizmente com o Webflow, você é capaz de editar coisas de outras pessoas sem realmente salvar. Então Wilian terá que me ligar perguntando o que fiz com o portfólio dele. Ele só permite que o Webflow construa uma comunidade no caso de você estar interessado em como outras pessoas projetam certas coisas. Você pode facilmente acessar seu site, abri-lo no Webflow e ver por si mesmo. Agora eu tenho uma fotografia, e um elemento de parágrafo em cada seção. Agora eu quero centralizar todas as minhas fotografias para que elas estejam centradas dentro de cada coluna. Eu vou até aqui para o painel de estilo. Há algumas maneiras diferentes de fazer isso. Aqui mesmo, é assim que você controla o preenchimento de
quanto está em cada lado do seu elemento. Agora, a coisa sobre o preenchimento é que, você precisa verificar como ele fica de forma responsável em um telefone e em um tablet, porque se você tem um monte de preenchimento, ele também vai ser traduzido para o seu telefone, e então o preenchimento pode empurrar sua imagem completamente para fora da tela. É assim que conhecer um pouco sobre CSS vai ajudá-lo quando você estiver usando o Webflow. É melhor usar porcentagens, por exemplo, na seção de preenchimento. Agora vamos reposicionar essa imagem para que ela seja centralizada. Se nós rolarmos para baixo, vamos ver como Wilian, centrado todos os seus itens. Parece que cada coluna tem seu próprio preenchimento. Esta seção verde aqui representa o preenchimento. Agora temos todas as nossas imagens centradas, e temos um estilo de coluna muito semelhante que Wilian tem. Eu só quero tomar nota de que, fazer essas coisas leva um pouco de tempo em comparação com o uso de um modelo. Usando um modelo, você poderia facilmente adicionar um espaçador, por exemplo,
no Squarespace, que é apenas um arrastar e soltar,
e você pode centralizar as coisas instantaneamente. Claro, no Webflow não foi terrivelmente difícil, mas certas coisas vão demorar um pouco mais no Webflow porque você está criando do zero. Se você tiver tempo para atualizar totalmente seu portfólio, eu recomendaria, pelo menos, tentar ver se é para você.
7. Conclusão: Muito obrigado por completar este curso. Avise-me se você tiver alguma dúvida sobre seu portfólio de UX e certifique-se de conferir a planilha. Vai ter links para todos os recursos, exemplos
extras, dicas e truques. Finalmente, certifique-se de vincular seu portfólio para que você possa obter feedback. Obrigado.
Jasmine Jones, UX Designer
