Crie seu portfólio de design de UX on-line

1. Apresentação: Oi pessoal. O vídeo de hoje é sobre como criar seu site de portfólio de design UX. Sou Kristine e sou designer de produtos UX slash trabalhando em São Francisco. Este vídeo é um tutorial passo a passo sobre como você pode criar seu portfólio em menos de uma hora. Este é o portfólio que eu criei direto do meu treinamento de design UX. E é o mesmo portfólio que me ajudou a conseguir meu primeiro trabalho de design de UX em tempo integral depois de um mês terminando meu treinamento para este tutorial, usarei o Wix para criar meu site. Eu também não recomendo que ninguém que esteja começando no design UX codifique seu próprio site? Não, não, não, não perca seu tempo fazendo isso. Eu sei que algumas pessoas oferecem esse conselho e talvez seja nisso que elas estão realmente interessadas, a menos que você esteja se tornando um desenvolvedor e é isso que você quer fazer. Não perca seu tempo aprendendo a codificar porque é um todo, outra fera. Eu não acho que realmente vale a pena seu tempo tirar energia e foco do que é realmente importante, que é que você melhorou seus designs e itera na estratégia de conteúdo do seu caso. estudos. Também não sou fã de ter apenas versões em PDF do seu portfólio. Se você está se candidatando para trabalhar em tecnologia, você deve fazer o que é padrão do setor? E o padrão do setor é que você tem um site de portfólio. Os campos de treinamento Ux não ensinam como criar seu site de portfólio. Eles lhe darão avisos do projeto para que você possa criar seus modelos e criar entregas. Mas eles não vão te ensinar como escrever estudos de caso ou como usar um construtor de sites para publicar seu site. Eu parei muitos designers no LinkedIn, analisaram seus portfólios, leram muitos estudos de caso para entender como estruturar meus próprios estudos de caso. Tudo o que vou compartilhar com vocês hoje foi algo que eu realmente gostaria alguém tivesse me contado ou feito conteúdo sobre antigamente. Então, você é bem-vindo. Também quero deixar claro que este vídeo não abordará como realmente criar o conteúdo do seu portfólio. Isso vai ser um vídeo separado porque eu não quero que esse vídeo tenha uma hora de duração. Então eu te pego. Mas não hoje sem mais delongas. Vamos começar a construir. 2. Como criar seu site de portfólio: Ao final deste vídeo, vamos criar algo parecido com esse portfólio. Este é o meu primeiro portfólio de design de experiência do usuário. Portanto, há muitas coisas que eu teria feito forma diferente se voltasse. Mas vou mostrar a vocês como era antigamente. Esse é um layout muito básico da aparência de um portfólio de design UX. Não há nada realmente extravagante nisso. É uma grade de dois por dois com estudos de caso. E eu recomendaria que você tivesse pelo menos três a cinco estudos de caso, pelo menos dois a três deles relacionados ao design de UX. Os outros podem ser mais relacionados ao design visual ou ao design gráfico. O primeiro estudo de caso que você deve ter é o projeto do qual você se orgulha das coisas e aquele com o qual você estaria entrevistando e falando mais sobre em seu site. Então, vamos construir um dos estudos de caso é o meu estudo de caso da Levi's. O que realmente é é um monte de texto e imagens simplesmente colocados em uma página. há nada de super sofisticado neste estudo de caso. É realmente mais sobre o conteúdo. E este vídeo, novamente, não será sobre como criar o conteúdo de um estudo de caso. Eu já redigi o conteúdo dos estudos de caso e o que eu faria é colocá-los em um documento do Word em minhas anotações, eu tenho todo o conteúdo escrito aqui só porque é mais fácil mover as coisas, é mais fácil de escrever e editar meu estudo de caso sobre isso, vez de ter que mudar tudo no meu site e há menos vindas quando você escreve seus estudos de caso antes de realmente trabalhar construindo seu portfólio. Então, vamos começar do início. Você cria uma nova conta e cria um novo site na parte superior, à direita. E o que isso fará é orientá-lo sobre como configurar seu portfólio. Então, eu quero um site de designer. Eu quero apenas escolher um modelo porque isso vai me poupar muito tempo. O modelo que eu escolhi. Há muitos modelos como, Oh, esse é legal. Eu escolheria esse. Acho que já vi esse sendo usado por outro designer. Esse é bem legal, mas o que eu usei, por que não consigo encontrá-lo. Ok. Acho que é porque atualmente estou usando esse modelo, então não posso mais usá-lo. Vamos fazer isso. Estou um pouco chateado porque agora meu portfólio vai parecer um pouco diferente, mas está tudo bem, ok, sim, este é um bom modelo. O que vou fazer é remover algumas dessas coisas. A primeira coisa que gosto de fazer é ir ao gerenciador de temas e mudar os têxteis. Na verdade, eu gosto dos tecidos deste, então vou mantê-lo como talvez seja o parágrafo. Eu quero mudar isso para outra coisa. Gosto da luz Avenir, mas Georgia funciona. Ok, vamos apenas com o que está disponível aqui. Então, vou adicionar texto, títulos, textos temáticos. Coloque o título um. E isso vai ser Olá, eu sou Christine, vou colocar um emoji lá. Então isso claramente não sou eu. Então, vou mudar de imagem, fazer upload de mídia. O que vou fazer é cortar isso para torná-lo mais alinhado ao centro. Assim. Perfeito. Apareça. Eu vou fazer Chun, Chun, john buns, Chun, botões, botões. É irrelevante. Esses pequenos textos são irrelevantes. Também vou adicionar um parágrafo. E o que é bom nisso é que você pode personalizar cada texto, personalizar, personalizar o espaçamento entre linhas para que não pareça tão apertado. Sim, eu gosto disso. Ok. Vou mover isso um pouco para que a grade esteja lá para ajudá-lo a ficar dentro desse espaço, de modo que, quando alguém estiver olhando para o seu portfólio em um iPad, todo o seu conteúdo, todo o conteúdos importantes não estão fora dessa grade, então será possível ver tudo em uma bela visualização. Eu só vou tirá-lo. Você pode adicionar uma barra social. O que eu gosto no editor Wix é que você pode Shift, segurar Shift e clicar em todo o conteúdo e simplesmente movê-lo para baixo. É como trabalhar no Figma. É incrível. E à medida que descemos, vamos usar esse espaço para colocar nosso estudo de caso. Na verdade, vou excluir toda essa linha porque vou colocar. Meu trabalho. Meu trabalho. Ok. Vou ter apenas uma grade simples de dois por dois. Então, antes de fazermos isso, vou mudar o logotipo aqui, adicionar meu próprio logotipo. Então, vou colocar imagem, meus envios. Vamos adicionar isso à página e conseguir um logotipo para mim. Opa, eu desenhei isso no Procreate. Eu nasci e fiquei tipo, eu vou fazer um logotipo para mim mesmo. Na verdade. Eu vou esconder sobre nós vai ser trabalho sobre a página. Vou deletar isso. Ok? O que é isso é que você pode colocar uma âncora nisso. Você pode adicionar âncora ao site. Então, uma vez que você adiciona isso, essa linha, basicamente clicando nela levará você até onde a linha começa. Vou adicionar um blog porque quero mostrar que eu blog, criar uma nova página e colocar blog e ter esses itens de segunda linha. Então você vê aqui o blog de trabalho sobre esse logotipo, também vamos criar um link para a página inicial. Então você vai para a página inicial. Sim. Feito. Se eu estiver em uma página diferente e clicar nesse logotipo, isso vai me levar de volta nesta seção de biografia foi muito importante é que você deixe claro o que você faz, quem você é e por que alguém deveria contratá-lo? Meu portfólio atual diz designer de produto, mas quando eu estava fazendo a transição para UX naquela época, eu me rotulei como designer de UX porque eu não fazia parte de uma equipe de produto e não era dono um produto desde a concepção inicial até o lançamento final. Eu não era o proprietário do produto. Você pode escrever uma pequena sinopse sobre o que o torna especial. Mas, honestamente, a biografia de todos é a mesma para o design UX. Então, eu não suaria muito nem passaria muito tempo nesta seção. Vamos para a seção de trabalho para criar essa grade dois por dois, você vai para Adicionar e clicar na caixa. Aqui vamos nós. Aqui está minha caixa de contêiner, e eu vou fazer esse tamanho igual para 67. Depois de ter essa caixa, você adicionará uma interação ao passar o mouse. Nós vamos usar uma interação ao passar o mouse mais tarde. E então você vai adicionar uma imagem. Vou clicar no Levi's. Eu adicionei. Vou colocar isso no 467, anexá-lo à caixa. E eu vou passar o mouse, e eu vou escolher efeitos, ok, então eu vou fazer crescer. Opa, vou personalizar isso. Eu vou fazer com que ela cresça como 110% levemente. Então, se olharmos para isso, vamos pré-visualizar vai crescer. Eu também quero uma pequena sombra. Você vê uma pequena sombra lá. Na verdade, as sombras são muito fortes. Então, quando você passa o mouse, eu também queria ter uma sobreposição escura. Então eu vou para a caixa do contêiner, colocar isso na mesma dimensão. Usamos isso para que eu o alinhe. E então eu vou fazer isso opaco 50%. E então eu também quero adicionar texto. Então, vou adicionar um texto que é branco. E vou chamá-lo de design UX. E então eu vou adicionar outro título em cima dele. Por quê? Alinhe-o ao centro. Ok, então vamos ver isso, na verdade. Então, toda vez que eu passar o mouse, vai dizer o design UX da Levi's. Agora o que vou fazer é ir para Control Command ou Command C, colar e colar isso na página. Então eu vou apenas trocar a cópia e as imagens. Então eu clico nesta imagem, mudo a imagem, mudo a imagem, coloco isso para linhagem, que foi um trabalho de design gráfico que eu fiz. Mude a imagem, coloque, toque. E aí já temos a grade. E eu vou entrar e me trocar. O título design gráfico, toque, design de marketing, design UX. E eu vou puxar esses caras para baixo um pouco. Então, vamos ver isso. Tenha a linhagem de boatos de Levi's e retocar. Agora vamos construir um primeiro estudo de caso. Então, vou para as páginas e vou criar uma página chamada Levi's hide. Sim, lá vamos nós. Ok, então a página ainda existe, mas agora está oculta do menu. Vou começar a adicionar textos. Vou adicionar meu cabeçalho. Eu sempre começo escrevendo meu estudo de caso primeiro e depois começo a adicionar imagens para complementar o que estou escrevendo no meu estudo de caso. Então, eu já tenho o título dessa forma, não vou e volto e tenho um monte de textos aqui. Só vou copiar e colar. Então, adicione textos com tema de texto. Também vou colocar mais espaçamento entre linhas, mais fácil de ler. E então eu vou adicionar uma imagem. Vou fazer o upload em massa de todas as minhas imagens de estudo de caso. Essa é a imagem principal. O que eu também adoro neste editor Wix é que você pode adicionar várias imagens de uma só vez. Se eu quiser, posso simplesmente selecionar em massa e adicioná-los à página. Eu não vou fazer isso porque isso vai ser um pouco caótico. Então, vou apenas adicionar duas imagens. Oito, vinte e oito, vinte ao centro, alinhe-o. Boom. Em seguida, copie este título. E copie e cole o problema e o processo. Oh, algo mudou. Opa. Ah, você também pode Comandar Z e ele voltará ao que quer que fosse. Antigamente. Eu senti que tinha que colocar post-its. Acho que se eu fosse refazer meu portfólio agora, se eu tivesse terminado o treinamento agora provavelmente não colocaria nenhum post-its porque isso é algo que muitos designers juniores colocam. A menos que você permita uma iniciativa de toda a empresa ou de uma equipe muito grande para uma sessão de brainstorming em uma empresa real. Eu só acho que não é um artefato tão valioso para se ter em seu estudo de caso. Se você quiser colocá-lo, você pode, não precisa. Eu provavelmente não faria se eu fosse voltar. Então, agora que criamos o estudo de caso da Levi's, vamos vincular isso a essa miniatura aqui. Então, como vamos fazer isso? É que vamos clicar no contêiner. Vá para passar o mouse. Porque você vai clicar no estado flutuante. Você vai adicionar para passar o mouse sobre um botão. Então, esse é um hack que encontrei no Google porque não consegui descobrir como vincular uma página a essa caixa. Então, vou mudar o design. Torne o plano de fundo transparente, vá para Texto e minimize completamente o texto do botão para que você não o veja. Você vai vinculá-lo a uma página. Vou clicar em Levi's. Estamos prontos para ir, então vamos fazer uma prévia. Oh, há uma passagem sobre os botões ou vamos manter isso com 0 de opacidade. Então, a caixa cinza e depois mostrar que sim. Vou clicar nele. Vai aparecer o estudo de caso, mas eu não quero essa transição estranha. Então, para nos livrarmos da animação, vamos para as transições de página, clique em nenhuma. O que isso vai fazer é voltar para a página inicial. Você vai clicar no estudo de caso da Levi's e ele se livra dessa animação estranha quando terminarmos e fizermos isso. 3. Perguntas e respostas: Quando eu pedi a vocês no Instagram para enviar suas perguntas, muitos de vocês me perguntaram quantos detalhes são muitos detalhes? Você pode explicar o que deve ser documentado e o que não deve? Eu tentei pesquisar online. As respostas que recebo são tão vagas, não tenho certeza de quais partes do processo devo destacar ou enfatizar antes criar seu site para passar uma boa parte do tempo pensando na experiência do usuário do seu e ficando claro sobre as mensagens. E a melhor maneira de fazer isso é escrever seus estudos de caso antes de adicionar imagens a cada um de seus projetos e responder a essas três perguntas. Número um, quais eram os produtos e qual era o problema que você estava tentando resolver para o número dois, como você resolveu esse problema? O que você fez, número três? Bem, como resultado ou resultados porque você resolve esse problema com seus projetos. Outra pessoa mencionou que continuo ouvindo coisas diferentes entre focar no visual e focar em contar a história. Qual deles é? Você precisa contar uma história com visuais atraentes? Essa é a minha resposta. Portanto, a resposta é que você realmente deveria ter os dois. Eu sei que essa frase, contar uma história é jogada o tempo todo no design UX sem realmente meios, é que as pessoas entendem o que você está tentando dizer às pessoas? Entenda o que você realmente fez para resolver o problema foi um problema e um problema real de negócios ou usuário. E não apenas uma requalificação de um aplicativo que você gosta. E então eu me perguntaria quais detalhes são importantes para quem está lendo meu estudo de caso para ajudá-los a entender o que eu fiz com este projeto. E minha regra geral é se um estudante do ensino médio pode ler seu estudo de caso e entender o que você realmente fez. Esse é um bom estudo de caso, porque qualquer pessoa que não tenha experiência design UX ou seu projeto deve ser capaz entender o que você estava tentando consertar com seus projetos. E em vez de mostrar que tudo é o seu padrão, você deve considerar cuidadosamente quais são as partes interessantes de seus projetos que você realmente deseja destacar e como você traz isso à tona o topo de seus estudos de caso para que você chame a atenção das pessoas. E como você progride naturalmente para compartilhar como define o espaço do problema? Que tipo de soluções você criou esforços, como você validou seus projetos e qual foi o resultado das reformulações que você fez? Outra questão era que os gerentes de contratação veem folhear tantos portfólios. Como você se destaca? Você mantém isso super simples? Ou muita informação, clareza da mensagem é muito importante. Então isso é algo que você sempre quer considerar enquanto está trabalhando em seu estudo de caso é se as pessoas entendem o que estou tentando dizer? Se você é alguém que está começando no design UX, a única coisa que pode realmente fazer você se destacar é ter um bom design visual em seus estudos de caso, vejo tantos portfólios de captura de treinamento que apenas têm wireframes de baixa fidelidade. E eles são muito rápidos, vou ser honesto, alguns deles são muito feios e eu sou como, você é um designer. Você deve conhecer o básico do design visual. Vou ficar com tanto ódio dizendo que vou ser real. Há uma maneira de deixar ótimas caixas de texto e caixas cinza mais bonitas do que a média. Tentei mostrar 90% das imagens que mostrei no meu estudo de caso. 90% deles são maquetes de alta fidelidade. Eu raramente mostro wireframes. E você pode estar se perguntando: Bem, Christina, eu não tenho formação em design visual. Eu simplesmente não tenho olho para isso. O que eu faço? Você pode desenvolver um I e eu realmente acredito que design visual é algo que você pode melhorar. Eu costumava não ser muito bom em design visual e agora, como as pessoas me dizem, eu realmente gostei da sua estética. Uma ótima maneira é estudar um bom design visual. E todas essas fontes são divulgadas ao público para você. Você pode conferir várias bibliotecas de sistemas de design diferentes de empresas diferentes, como o Google Material Design e Airbnb, também tem seu sistema de design em público que você pode ver e pode veja o estilo de seus botões e seus componentes. É muito importante que você se familiarize com os diferentes componentes da interface que estão sendo usados em diferentes aplicativos. Baixe vários aplicativos diferentes para ver que tipo de design eles estão usando e que tipo de interação estão usando para diferentes fluxos. Dessa forma, à medida que você estuda design e olha para um bom design, é assim que você pode desenvolver o que é um bom design visual. E eu te vejo mais tarde. Tchau.