Os melhores portfólios de UX/UI são, em si, um teste de UX. O visitante é um gerente de contratação ou um cliente, a tarefa é "entender este designer em menos de dois minutos", e o site é aprovado ou reprovado.
Os designers que conseguem a entrevista raramente têm o site mais chamativo. Eles têm o mais claro: a função descrita em uma frase, dois ou três estudos de caso que relacionam o problema à solução, e um layout que não atrapalha o trabalho.
Abaixo estão oito portfólios de UX e UI criados por designers atuantes em [nome da plataforma/empresa]. Pixpa, agrupadas por foco e extraídas de uma galeria mais ampla de Exemplos de portfólio de UI/UX.
Cada uma oferece opções de design, cor e tipografia que valem a pena estudar, além de uma decisão que vale a pena adotar.
O que torna um portfólio de UX/UI forte?
Um forte Portfólio UI/UX Em uma frase, você descreve que tipo de designer você é e, em outra, apresenta dois ou três estudos de caso que mostram a evolução do problema até a solução.
Mantém a interface discreta para que o conteúdo da página seja o foco. Carrega rapidamente e é fácil de ler em um celular.
Cada site abaixo conquistou seu lugar com base em quatro critérios: a eficácia do design para o trabalho, a clareza da estrutura dos estudos de caso, a capacidade do site de cumprir seu objetivo principal de conseguir um emprego ou um cliente e seu desempenho em dispositivos móveis.
Portfólios de Designers de UI/UX
Estes quatro são portfólios de UX/UI de contribuidores individuais: um designer, alguns estudos de caso e um layout otimizado para atrair rapidamente a atenção do recrutador.
Elizabeth Lodvikov
Design de UI/UX. Nova Iorque.
Elizabeth Lodvikov A imagem se abre sobre um fundo creme quente, com seu papel descrito em uma linha cinza-carvão e um retrato em formato de arco à direita.
A paleta de cores é propositalmente suave: creme, texto em tom carvão e um único detalhe em terracota discreto no botão "Diga Olá".
Essa tonalidade acolhedora transmite uma sensação muito mais humana do que o modo escuro padrão, e a fonte geométrica sans-serif limpa mantém o foco no que o visitante veio buscar.
Gaelle Monin
Design UX/UI. Londres.
Gaelle Monin A página inicial é o foco principal. Sob uma logomarca fina e arejada e a etiqueta "UX/UI Design" sublinhada com um traço de marcador pêssego desenhado à mão, a página leva diretamente a uma grade de projetos, sem nenhuma biografia para rolar a página.
A paleta de cores permanece quase branca, de modo que a cor provém da própria obra: um painel financeiro com um gráfico de rosca de gastos, um aplicativo de receitas com um fluxo de importação, telas de dispositivos móveis dentro de protótipos de aparelhos. Um toque de cor quente impede que a grade pareça impessoal.
Sasank Anipeddi
Design UX/UI. Maryland.
Sasank Anipeddi Mantém um site editorial sombrio, construído em uma fonte serifada, o que é raro em um campo que geralmente utiliza fontes sem serifa por padrão.
O fundo quase preto, o texto branco e o destaque verde no nome dele conferem um tom calmo e confiante, mais próximo de uma revista do que de um modelo.
A navegação divide os tópicos Estudos de Caso, Blog e GitHub em destinos separados, e cada estudo de caso possui etiquetas de método (Pesquisa de Usuário, Análise Competitiva, Teste de Usabilidade) para que o formato do trabalho seja visível antes mesmo de você abri-lo.
Matthew Park
Design de UX e arte conceitual. Sunnyvale.
Matthew Park A página inicial se transforma em uma galeria com blocos de cores. Cada projeto ocupa um espaço individual em uma cor saturada diferente — azul, verde-azulado, magenta, índigo, bege — cada um contendo uma maquete do produto em um laptop ou celular.
É chamativo na medida certa, porque a cor serve de guia e o trabalho por trás disso é SaaS de verdade: Lacework, Endgame, XonaA logomarca é uma fonte sans-serif maiúscula discreta que permite que os elementos gráficos se destaquem.
Designers de Produto e Líderes de Design
As funções de produto e estratégia vendem tanto o discernimento quanto a habilidade, portanto, essas duas áreas se destacam pela apresentação de trabalhos relevantes e um ponto de vista.
Marcin Spiewak
Design de produto. Berlim.
Marcin Spiewak Abre com um título impactante e em negrito sobre um fundo cinza-escuro que lista todas as funções que ele desempenhou: Design Gráfico, Web, UI, UX, riscando cada uma delas até chegar a "Designer de Produto", com "Berlim" destacado em verde. É um resumo da carreira em uma única linha, contada apenas com texto.
Uma foto espontânea dele em tela cheia, tirada no campo, aquece a paleta escura, e os blocos do projeto direcionam para... Figma Para quem quiser se aprofundar no assunto.
Michael Collins
Design e estratégia de produto.
Michael Collins O site é minimalista e centralizado, com uma fonte sans-serif limpa sobre um fundo branco-sujo, tendo como único toque de cor o logotipo em vermelho escuro. Essa contenção é estratégica.
A grade do projeto consiste em fotografias em sangria total com nomes reconhecíveis dos clientes sobrepostos. Silvertree, ExxonMobil, lululemonAssim, a credibilidade vem dos logotipos, não do layout. Um pequeno ícone de cadeado marca os estudos de caso que são restritos, um sinal discreto de trabalho corporativo sob acordo de confidencialidade.
Designers Multidisciplinares
Quando uma área de atuação abrange diversas disciplinas, o risco é que o site pareça uma colagem de vários portfólios. Este, porém, mantém a coerência.
Forest
Multimídia e design de interface do usuário.
Forest Ele opta por um título grande e com foco na tipografia, "Olá, eu sou Forest!", em negrito preto sobre fundo cinza claro, com uma faixa horizontal exibindo suas áreas de atuação: Design de UI, Motion Graphics, Design Gráfico e Edição de Vídeo.
A paleta monocromática impede que uma prática diversificada pareça dispersa, e o ticker sinaliza a variedade de habilidades sem uma grade confusa. A interface do usuário convive com o trabalho de animação e design gráfico, em vez de reivindicar um foco puramente em experiência do usuário, e o site é honesto quanto a isso.
Isabella Zelasko
Design de UX/UI e artes midiáticas. Phoenix.
Isabella Zelasko Trabalha com UX/UI, pesquisa de UX, design de jogos e mídia interativa, e o site apresenta tudo isso em um fundo roxo-escuro com tipografia serifada creme, que lembra mais uma galeria do que um modelo.
Os projetos são apresentados um de cada vez, cada um etiquetado com as disciplinas e ferramentas utilizadas (Design de Jogos + Design de Interface do Usuário ou Design Web, HTML e CSS), e uma tabela de habilidades com seis cartões transforma uma prática ampla em áreas de competência facilmente identificáveis.
O trabalho é de início de carreira, um protótipo de interface de usuário para um jogo e um projeto web de graduação, mas é apresentado com uma clareza que a maioria dos portfólios de iniciantes não possui.
O que os melhores portfólios de UX/UI têm em comum?
Ao analisar todas as oito obras, percebe-se que as mesmas decisões se repetem. Nenhuma delas tem a ver com bom gosto. Todas visam fazer com que o visitante entre na obra rapidamente.
- A função é descrita em uma única linha. Lodvikov e Sasank Anipeddi Ambos mencionam o que fazem na primeira frase, então ninguém precisa adivinhar se são o tipo certo de designer.
- A página inicial destaca o trabalho, não a biografia. Gaelle Monin cai diretamente em uma grade de projeto e Matthew Park Ele usa blocos de cor, então a obra é a primeira coisa que você vê.
- Os estudos de caso mostram o método, não apenas as telas. Sasank Anipedditags de método de e Marcin Spiewakestá ligado Figma Os arquivos comprovam que houve planejamento por trás dos pixels, e é isso que um gerente de contratação leva em consideração.
- O trabalho em si é o que convence. Michael Collins leva com ExxonMobil e lululemon e Matthew Park Com produtos SaaS reais, porque um trabalho reconhecível conquista a confiança mais rapidamente do que qualquer layout.
- Uma ideia visual, mantida em foco. Cada site de destaque aqui se compromete com uma única paleta de cores e sistema tipográfico, em vez de misturar três estéticas e parecer indeciso.
- Velocidade e mobilidade não são opcionais. A maioria das primeiras avaliações acontece em um celular entre reuniões, então uma série de capturas de tela da área de trabalho fica ilegível onde realmente importa.
Como estruturar seu portfólio por objetivo
Um portfólio criado para conseguir um emprego em tempo integral é estruturado de forma diferente de um... perseguindo clientes freelancersDecida qual é a finalidade do site e, em seguida, construa-o em torno disso.
Pixpa's Templates de portfólio de UI/UX São estruturados em torno de estudos de caso e grades de projetos, portanto, a linha que você escolher acima depende principalmente de quais seções você ativar.
Erros comuns em portfólios de UX/UI que você deve evitar.
Cinco erros fáceis de passar despercebidos e rápidos de corrigir assim que forem identificados.
- Protegir cada estudo de caso com senha. Acordos de confidencialidade são reais, mas um portfólio onde nada pode ser visualizado sem antes entrar em contato por e-mail faz com que o visitante perca apenas trinta segundos. Mantenha pelo menos um projeto totalmente público.
- Escrever o estudo de caso em formato de diário. "Primeiro fiz a descoberta, depois as personas e, por fim, os wireframes" é uma lista de tarefas. Comece apresentando o problema e o resultado desejado, e deixe o processo como evidência.
- Liderando com artefatos de processo. Abrir o texto com uma parede de post-its e mapas de viagem acaba por obscurecer a mensagem principal. Mostre primeiro o resultado; a pesquisa é a prova, não a manchete.
- Esquecer o portfólio já é um teste de UX em si. Carregamento lento, alvos de toque minúsculos, um menu hambúrguer escondendo as duas únicas páginas que importam. Analise a experiência do usuário (UX) do seu próprio portfólio. da mesma forma que você faria com um cliente.
- Uma estética para a página inicial, outra para os estudos de caso. A inconsistência na tipografia e nas cores entre a estrutura e a obra dá a impressão de que o site foi montado a partir de modelos predefinidos, em vez de ter sido projetado.
Como criar seu próprio portfólio de UX/UI
Você não precisa programar nem contratar um desenvolvedor. O processo é rápido.
- Inicie um teste gratuito, sem necessidade de cartão de crédito.
- Escolha um Modelo criado para designers de UI/UX.
- Adicione dois ou três estudos de caso, começando com o problema escrito de cada um. Se não tiver certeza do que mostrar, comece por estes. ideias de projetos UX/UI.
- Defina uma única cor de destaque e um único sistema de tipografia, e mantenha a navegação focada no que é importante.
- Conecte seu domínio, verifique-o em seu telefone e publique.
Concluindo!
Um portfólio de UX/UI é avaliado da mesma forma que qualquer interface: ele ajuda o visitante a realizar sua tarefa rapidamente?
Descreva seu papel em poucas palavras, apresente dois ou três estudos de caso, identifique o problema primeiro, mantenha o trabalho visível e deixe o design em segundo plano. Cada site acima resolve bem um desses aspectos. Adote a decisão, não a aparência.
Dê ao seu trabalho o portfólio que ele merece, grátis por 15 dias.
Perguntas frequentes sobre o portfólio de UX/UI
Quantos projetos um portfólio de UX/UI deve conter?
De dois a quatro. Profundidade supera amplitude: um estudo de caso completo e abrangente que demonstre que seu raciocínio vale mais do que seis galerias de projetos superficiais.
Os avaliadores estão decidindo se você consegue raciocinar sobre os problemas, e não apenas contando as respostas.
Os estudos de caso de UX devem ser protegidos por senha?
Somente quando um acordo de confidencialidade exigir, e mesmo assim, mantenha pelo menos um projeto totalmente público. Um portfólio onde nada pode ser visualizado sem entrar em contato primeiro faz com que o visitante perca o interesse de quem tinha apenas alguns segundos.
Se a maior parte do seu trabalho estiver sob acordo de confidencialidade, crie um projeto de iniciativa própria que você possa mostrar publicamente.
O que deve incluir a página inicial de um portfólio de UX?
Uma frase sobre quem você é e em que se concentra, um sinal de credibilidade, links para dois ou três estudos de caso e uma ação de contato clara.
Ignore a declaração de missão. Existe uma lista mais completa de Elementos a incluir no seu portfólio Se você quiser, sim, mas a função da página inicial é direcionar o visitante rapidamente para o conteúdo desejado.
Preciso saber programar para ter um portfólio de UX?
Não. A maioria dos portfólios de UX/UI de alta qualidade são criados em plataformas de construção de sites, e isso não faz diferença para um recrutador.
Seu tempo é melhor aproveitado escrevendo estudos de caso concisos do que depurando CSS.
Qual a diferença entre um portfólio de UX e um portfólio de UI?
Um portfólio de UX enfatiza o processo e os resultados: o problema, a pesquisa, as decisões e o resultado mensurável. Um portfólio de UI se concentra na habilidade visual: layout, tipografia, cores e refinamento da interface.
A maioria dos designers em atividade demonstra ambas as características, com uma tendência maior para aquela em que seu papel se concentra.
Quanto custa um site de portfólio?
PixpaOs planos da [nome da empresa] começam em US$ 5.40 por mês no plano básico anual, e todos os planos incluem um período de teste gratuito de 15 dias sem necessidade de cartão de crédito e uma garantia de reembolso de 30 dias. preços do plano mais recente é dividido por níveis.
Qual a melhor plataforma para um portfólio de UX/UI?
Não existe uma única plataforma ideal. Pixpa Ideal para designers que desejam um portfólio, um blog integrado e um sistema de templates intuitivo, tudo em um só lugar, com suporte humano ao vivo.
Se você quiser avaliar as opções, aqui está uma análise detalhada das Melhores construtores de sites para designers de UI/UX compara-os lado a lado.
Devo apresentar projetos não solicitados ou conceituais?
Sim, especialmente no início da carreira ou ao iniciar uma nova função. Uma reformulação bem estruturada e iniciada por você mesmo demonstra que você consegue pensar em soluções para problemas mesmo quando ainda não tem trabalhos concluídos e creditados para apresentar.
Identifique-o claramente como um conceito.