Transcrições
1. Trailer: Você está percorrendo Behance
e vê um estudo de caso que foi lindamente projetado
e conta uma história envolvente, e você pensa, uau, eu nunca
poderia fazer isso. Bem, é hora de repensar isso. Sou Maddy Beard. Sou designer
de produtos e criador de conteúdo de design. Trabalhei para agências,
pequenas empresas, grandes empresas como a Adobe e startups de
tecnologia que fazem trabalhos de design
estratégico. [MÚSICA] Ao longo da minha carreira, como a maioria dos designers,
compreendi a importância da
elaboração de estudos de caso. Se você
quer conseguir um novo emprego, aumentar sua credibilidade
como designer ou apenas compartilhar seu trabalho
com a comunidade mantendo seu portfólio de hoje,
é extremamente importante. Confie em mim,
entendo, pode ser tentador terminar todo o trabalho duro em um projeto, postar algumas fotos no Instagram ou no seu site
e seguir em frente. Mas vale a pena
levar algum tempo para criar um estudo de caso convincente para
cada projeto que você faz, seja um projeto
pessoal,
um projeto para um cliente freelancer ou para a empresa
que você é trabalhando em. Nesta aula, quero
ajudá-lo a tirar todo esse trabalho incrível, às vezes confuso de um projeto recente
e moldá-lo em algo que conta uma história e destaca seus
pontos fortes como designer. Você poderá
usar esse processo para projetos e
projetos
anteriores que estão por vir. Esta aula é destinada a designers de UX e produtos em qualquer nível, quer você queira mostrar
um projeto da escola, exibir um de seus projetos de clientes mais
recentes ou talvez você tenha estado
no setor para um enquanto, e você só quer uma
nova maneira de elaborar seus estudos de caso com um
pouco mais de intenção. Os vídeos que se seguem
ajudarão você a
sair com algo do qual
você realmente se orgulha. Aqui está o que você precisa, um projeto que você
terminou recentemente, espero que você tenha algumas notas ou
esboços ou qualquer tipo
de trabalho de processo, Google Docs, notas da Apple ou algum lugar para
descrever o conteúdo, acesso ao Adobe XD, Figma ou uma ferramenta de design semelhante. Alguns bons modelos de dispositivos que
posso apontar para alguns dos meus favoritos e um portfólio
online , como Behance ou
seu site pessoal. Vou te levar
por essas lições usando um exemplo principal, um estudo de caso que vou
elaborar para um dos meus
projetos mais recentes e porque obviamente, meu estilo
não é o único estilo Vou compartilhar toneladas de outros exemplos ao longo do caminho. Estudos de caso são, de longe,
a coisa número um sobre a qual
me perguntam no meu
Instagram e no YouTube, então estou muito animado para
finalmente mostrar a vocês esse processo completo que
vocês mesmos podem fazer. Vamos mergulhar diretamente. [MÚSICA]
2. Visão geral do projeto: O projeto para esta classe
é para você criar um estudo de caso forte a partir de um projeto que
você já fez. Não importa se este é o 1º ou 31º projeto que
você já fez, você provavelmente nunca abordou estudos de
caso exatamente
como esse antes. Como você vai, sinta-se à vontade para
dar seus próprios toques nele e seguir seu próprio caminho com ele se você tiver ideias diferentes
do que eu mostro. Meu trabalho é apenas
orientá-lo nesse processo e mostrar o
que funciona para mim criar um estudo de caso que seja realmente interessante
de ler e olhar. Primeiro, começaremos
reunindo todas as coisas do seu projeto. Em seguida, descreveremos
e escreveremos o conteúdo. Então, na verdade, vamos projetar o estudo de caso no
Adobe XD, você pode usar o
programa que quiser. Ao longo do caminho,
compartilharei dicas e tutoriais para coisas que você pode querer incluir
nesta parte. Por último, passaremos
pelas melhores maneiras de fazer upload e publicar seus
estudos de caso para Behance, se é aí que você
decidir mostrá-lo. Claro, você também pode
mostrá-lo em seu site de
portfólio pessoal. Estarei compartilhando uma etapa de ação no final de
cada lição. Eu recomendo me seguir durante esse
processo e publicar seu trabalho abaixo
na seção de discussão para obter feedback e
fazer perguntas. Mas, claro, você sabe
como aprende melhor, então sinta-se à vontade para passar
pela aula em qualquer
ritmo que você quiser. Qualquer novo projeto
pode parecer assustador, mas vou
levá-lo por etapas simples e
diretas para que, se você seguir esta aula, você terá um estudo de
caso completo até o final. [MÚSICA]
3. Tipos de estudos de caso: Durante minha pesquisa
para esta aula, olhei para dezenas de
estudos de caso e criei cinco categorias diferentes nas quais
a sua poderia se encaixar. Vamos dar uma olhada em cada um e dividi-los para
que você possa determinar que tipo
de estudo de caso você
vai elaborar
durante esta aula. Melhoria número 1,
um produto já existia e o objetivo do seu projeto era melhorá-lo de alguma forma, talvez por meio de melhores fluxos de usuários, novos recursos ou organização
melhor. Este estudo de caso de
Amy Lima por justa causa é um ótimo exemplo
disso porque eles
já estão no negócio
há mais de 30 anos, mas eles queriam girar para vender suas apólices de seguro
diretamente ao consumidor. Para fazer isso, eles precisavam melhorar
a experiência do usuário para simplificar o suficiente para que
seus millennials demográficos e experientes em
tecnologia
usassem e confiassem. Número 2, reimagine. Você percebe uma oportunidade melhorar um espaço problemático usando novas soluções que
talvez não tenham sido implementadas imediatamente. Este projeto de guia de TV Abdallah Salem faz
isso muito bem. Eles percebem que
há
mais opções do que nunca no momento em que se
trata do que
assistir e essas escolhas
são muito fragmentadas e espalhadas por dezenas de
provedores e plataformas. A solução incluiu pesquisa
universal, personalização e recomendações
inteligentes. Número 3, terra para cima. Seu projeto abrange desde a concepção até o lançamento
de um novo produto. É nisso que meu projeto
na bolha cai. Eu considero este estudo de caso como explorador de Tony Jean
como fundado. É um aplicativo de tradução para menus de
restaurantes para ajudar a quebrar as barreiras culturais dos alimentos especificamente projetados para estudantes
internacionais. Número 4, visionário. Seu projeto é de
natureza conceitual e não
necessariamente vinculado a um negócio, embora eles tenham ideias
futuristas e
oportunidades para as empresas. Eu diria que os
três estudos de caso em que
trabalhei na Adobe se enquadram
nessa categoria. Este projeto, boa vizinha de Julie Sandusky, é conceitual, mas tem toneladas
de oportunidades
no mundo real
porque foi baseado em no mundo real
porque foi baseado pesquisas
reais e problemas de
redução do desperdício de alimentos por facilitando o
compartilhamento de alimentos dentro das comunidades. Número 5, culminação. Isso é definitivamente menos comum no
que diz respeito às carteiras, mas definitivamente ainda é um trabalho
valioso. Com esse tipo, seu
projeto é mais uma análise
de conjunto de dados, mostrando resultados de pesquisas
que podem ajudar a moldar um projeto ou ajudar outros designers a aprender
sobre uma área específica. Este artigo da BMR detalha o estado atual das
experiências de
checkout e e-commerce por meio oito armadilhas comuns
e práticas recomendadas. Determinar a categoria em que
um projeto cai ajudará você a descobrir a
história que você contará, que entraremos em muito mais
detalhes em lições futuras. Mas o único item de ação para esta lição é
pensar nisso e ver se algum deles descreve o projeto com o qual
você está trabalhando. Depois de ter isso,
sinta-se livre para mergulhar
mais fundo em qualquer um dos
exemplos que mostrei. Vou
deixar um link na seção de recursos para um
pequeno banco de dados onde
coletei todos os exemplos
realmente bons de estudos
de caso que
encontrei durante minha pesquisa. Sinta-se à vontade para verificar isso e verei você na próxima
lição, onde vamos
começar a compilar todos os materiais do
seu projeto prepararmos
para decifrar
este estudo de caso.
4. Compilar as peças: Antes de prosseguirmos, quero lhe dar
uma visão geral do que compõe um estudo de
caso convincente. Quais são os must-haves, quais são os bons de ter? Em que você deve se concentrar, em que você não deveria se concentrar? Agora lembre-se,
vamos entrar em muito mais detalhes sobre todas essas coisas em lições futuras, então eu não vou gastar
muito tempo nelas, mas quero dar uma visão geral
rápida para que você possa mantenha-os em mente enquanto você está
coletando seus materiais. Meus itens obrigatórios são uma declaração de problema
ou oportunidade. Quais são os objetivos? Como
seria o sucesso? Seu papel e com quem
você trabalhou, não as
pessoas específicas, é claro, mas seus papéis e como
a equipe se uniu. Por que você tomou certas decisões? O que impulsionou a
direção e a priorização do seu projeto? Geralmente isso é na forma de alguma pesquisa,
formal ou informal. Alguns trabalhos de processo, imagens de seus resultados
e resultados
finais ou métricas de sucesso. Alguns bons podem ser uma explicação aprofundada de
suas pesquisas e descobertas, que podem ser citações ou dados, um sistema visual ou diretrizes de
marca. Mais artefatos de processo,
como empatia, mapas, personas, sitemaps, fluxos de usuários. Mockups interativos para destacar recursos específicos. Talvez um roteiro futuro se alguma coisa não fosse
capaz de ser priorizada ou talvez algumas
iniciativas fossem
trazidas à tona que seriam benéficas no futuro. Por fim, desafios que você enfrentou e como os superou. Quero enfatizar que você
não precisa e, de fato, você não deve incluir
todas essas coisas. Se você estivesse apenas sobrecarregado ao
ouvir toda a minha lista, então imagine o quão sobrecarregado
alguém estaria olhando para o seu estudo de caso que tem todas as
coisas possíveis incluídas. O objetivo
desta aula é
ensiná-lo a contar uma história
convincente. Uma história convincente não inclui toneladas e toneladas
de detalhes monótonos. Tenha sempre em mente seu leitor. Quanto tempo
eles realmente têm para ler isso
e entendê-lo? É tudo sobre
mantê-lo conciso. Mas é importante reunir
tudo primeiro e depois determinar o que é importante e o que não está em
contar sua história. Nesta lição, vamos
compilar tudo, e mais tarde vamos
peneirar o que não precisamos. Com isso dito, vamos
criar uma nova pasta em nossa área de trabalho e
rotulá-la com o nome do projeto. Por exemplo, vou
nomear meu estudo de caso de bolhas
e, em seguida, criar algumas subpastas. Aqui estão aqueles que
eu recomendo pesquisas, é aqui que você pode colocar coisas sobre análise
competitiva, dados,
gravações ou notas de entrevistas, recrutamento de materiais,
pesquisas, resultados, etc. A próxima pasta é esboços. Isso pode incluir digitalizações
de seus esboços analógicos ou capturas de tela de esboços no iPad ou onde quer
que você desenhe. Em seguida, arquivos XD, talvez você tenha
arquivos diferentes para seus wireframes, iteração
diferente,
seus designs finais. Mockups. Se você
já marcou
alguma coisa ou registrou
qualquer passo a passo, você pode colocá-los lá. Além disso, você pode colar
o modelo de maquete que
deseja usar lá, meus favoritos estão vinculados abaixo
na seção de recursos. Em seguida, são os resultados, qualquer análise de dados ou
cotações que tenham a ver com sua solução real e o que você testou
e validou. Estes são os resultados das
métricas de sucesso. Por fim, tenho uma
pasta chamada Behance, isso é eventualmente a guerra
exportará nossos arquivos finais de estudo de
caso para. Pegue tudo o que você obteve deste projeto e
distribua-o em todas as
diferentes pastas. Não se preocupe se você não
tem todas essas coisas, tudo bem,
mas também não se sinta limitado a todos
os exemplos que dei. Você pode seguir seu
próprio caminho com isso dependendo do seu
projeto, se quiser. Novamente, basta incluir
tudo mais tarde, descobriremos o que é
realmente relevante. Eu também recomendo revisar
essas coisas à medida que você
passa e
organizá-lo nas pastas. Isso atualizará
sua memória, pois potencialmente você não vê
esse projeto há algum tempo. Depois de preencher
essas pastas com todas as coisas do seu projeto, passaremos para
a próxima lição, que está descrevendo seu estudo de caso usando estruturas de
história. [MÚSICA]
5. Desenhe sua estrutura de história: [MÚSICA] Muito rápido antes de
escrevermos nossos contornos, quero compartilhar com vocês
o erro número um que vejo tantas pessoas cometendo quando estou revisando portfólios e
trata-se de trabalho de processo . Sim, você deve se concentrar em alguns
dos trabalhos do processo que
você fez, mas isso não
significa definir cada
etapa do processo UX. Acho que muitos
dos estudos de caso que
li de designers juniores, eles descrevem um processo
idílico de UX muito genérico, apenas estimulando definições
de diferentes exercícios. Por exemplo, algo como o próximo eu criei uma persona de usuário. Uma persona de usuário é
um arquetípico que
utilizaremos cujos objetivos
e características representam as necessidades
de um grupo maior de usuários e, em seguida, eles incluem um instantâneo de sua persona de
usuário. Isso não dá
nenhum vislumbre de como você realmente chegou
onde você fez. Gerentes de contratação e colegas
designers já sabem o que é
uma persona e potenciais clientes que podem estar
analisando seu estudo de caso. Não se preocupe com sua definição
exata. Essas pessoas querem saber
por que você determinou que as personas de
usuário eram importantes para fazer como parte deste projeto, como você criou
as informações internas e, o mais importante, o que isso ajudou você
descobre ou decide. Pense qual era o
valor nessa etapa e se não for uma parte importante
da história, pule. Continuo sendo trazido de volta a esse ponto muito importante de contar uma história com
seu estudo de caso. Assim como qualquer história, nenhuma
estrutura será exatamente a mesma, mas pode ajudá-lo a
pensar nisso assim. A declaração do problema é
seu incidente incitante, o resultado final é
sua resolução
e, no meio, você
terá um clímax de algum tipo que é a
descoberta ou ação mais importante que levou ao resultado final e espalhado por aí
que você terá alguma outra informação que enriquece a história e
pinta a imagem. Agora vamos passar por um exemplo com o projeto em que estou trabalhando. Para cada história você primeiro
tem que definir a cena. Para mim, acho
importante definir o cenário de quem era a equipe e
quais eram nossos papéis. Agora, o incidente incitante ou o problema ou oportunidade
para a ação crescente, quero incluir meus objetivos, então, como seria
o sucesso
e, em seguida, alguns
wireframes, estilos dos EUA, recursos priorização,
fluxos de usuário e iterações de design. Tudo isso leva
ao clímax que para esta história, é o lançamento do nosso MVP ou
produto mínimo viável para nossos usuários beta. Em seguida, para a ação a seguir, incluirei dados
coletados e insights coletados a
partir do lançamento. Para a resolução, vou
incluir as métricas de
sucesso finais. Esta é a estrutura da minha história, mas lembre-se de que existem diferentes
tipos de estudos de caso. E se o seu não for um projeto básico, mas uma
das outras quatro categorias? Vamos tirar um minuto
para ilustrar estruturas de histórias em
potencial para as outras quatro
categorias que
descrevemos em menos de três,
começando com melhorias. Um estudo de caso de melhoria pode ser algo
parecido com isso. Temos a declaração de
oportunidade do problema como
incidente incitante, então temos algumas pesquisas que nos levam a priorização de características, que
é o incidente incitante. Descobrindo no que
vamos trabalhar. Podemos nos deparar com
alguns desafios, então isso seria algo
a descrever a seguir. À medida que você está trabalhando com
esses desafios, você provavelmente está trabalhando
em projetos e iterações levam ao clímax,
que é um lançamento de recursos. Lançando o que
achamos que vai
melhorar o produto
e depois disso, como conclusão, é claro, falaremos sobre se ele realmente melhorou
o produto. Quais foram os resultados ou métricas
de
sucesso deste projeto? Em seguida, é reimaginar. Novamente, começaremos com o problema
ou a declaração de oportunidade. Em seguida, podemos incluir
conteúdo sobre
a análise das soluções atuais que já
estão
por aí , porque se estivermos
reimaginando algo, é
provável que haja alguma análise competitiva que fizemos ao longo
deste projeto. Em seguida, você pode descrever os principais drivers ou com base
na pesquisa que você fez, o que você quer que a
nova solução tenha? Antes dessa nova solução, você pode descrever pesquisas, sua estratégia inclui alguns
wireframes e designs. O clímax aqui, é claro, é a nova solução proposta. Então você pode mostrar
as reações
que as pessoas tiveram com essa nova solução ou
resultados de teste que você obteve dela. Por fim, uma vez que isso é apenas reimaginando e é
apenas uma solução proposta, você pode terminar
com os próximos passos, takeaways ou um resumo, já que este provavelmente não é o fim do
caminho para este projeto. Em seguida, é visionário e, novamente, você provavelmente está cansado de
ouvir isso, mas sempre
começamos com o problema
ou a oportunidade. Em seguida, como este é mais
um projeto conceitual, você pode
afirmar sua hipótese para falar sobre quais benefícios você imagina que poderiam vir
de uma solução como essa. Em seguida, comece a
entrar em sua pesquisa, iterações
diferentes, talvez alguns desafios
que você enfrenta, tudo isso levando a essa solução
potencial. Em seguida, assim como a
última, você pode falar sobre algumas das
reações que as pessoas tiveram a essa solução potencial se
você fosse capaz de mostrá-la a qualquer usuário
ou empresa em potencial e encerrá-lo com quaisquer que sejam os próximos passos que
possam vir disso. Por fim, combinação. Aqui, você começará com
um problema ou uma pergunta. Você pode indicar sua
tese ou proposição e maior parte deste
estudo de caso será evidência e exemplos. O clímax aqui é
a ação que o leitor deve tomar
e, depois disso, para concluir você pode realmente resumir essas descobertas que você
compartilhou. Agora é a sua vez. Vá em frente e desenhe uma estrutura de história
baseada em tudo o que
você aprendeu aqui. Pode ser um que eu já compartilhei ou você pode
usar algo que é um pouco diferente
dependendo do seu projeto e preenchê-lo com
esses pontos da história,
pensando em como a história
do seu projeto desdobrado. Como você passou do
problema para a solução? Sinta-se à vontade para tirar uma
foto ou uma captura de disso e compartilhá-la abaixo
na seção de discussão. Eu adoraria vê-lo e
sei que outros alunos
se beneficiariam de ver vários exemplos diferentes. Na próxima lição,
vamos usar esse pequeno esboço
da estrutura da história para criar nosso esboço e,
na verdade, começar
a escrever a cópia que
compõe seu estudo de caso. [MÚSICA]
6. Escreva o conteúdo: Agora, é hora de realmente
ficar rachado neste estudo de caso. Se você é algo parecido comigo, escrever o conteúdo é de
longe a parte mais assustadora. Mas não se preocupe,
vamos
dividir isso em pedaços digeríveis. Depois de terminar essa parte, o resto do processo se desenrolará
naturalmente. Gosto de começar
abrindo um novo Google Doc. Como odeio começar
com uma página em branco, criarei um esboço de
ponto de bala com base na estrutura da história
que já criamos. Vamos começar a digitar isso. Estamos começando com
algumas informações de fundo. Aqui incluirá o quando, o quem e um pouco
mais de informações sobre minha função. Em seguida, está a declaração do problema. Aqui terei a declaração
ou oportunidade do problema
real . Então eu acho que aqui eu quero ter alguns visuais dessa oportunidade,
e isso fará mais sentido à
medida
que e isso fará mais sentido você conhece um pouco
meu projeto, enquanto trabalhamos nisso. Em seguida, estou chamando esta
seção de caminho para o MVP. Objetivos ou como seria o
sucesso, priorização de
recursos,
incluiremos wireframes, estilos de
interface do usuário, fluxos , iterações de
design e
aqui acho que quero mostrar cada recurso ou fluxo. Coloque visuais. Em seguida, é o lançamento, de
modo que o clímax. Fale sobre o lançamento do
MVP para nossos usuários Beta. Talvez eu comece a falar
sobre marketing, então como conseguimos os usuários Beta. Após esse lançamento inicial, falarei sobre desafios
e melhorias, então alguns dados coletados
e insights que coletamos, mais priorização de recursos
e mais iterações. Por fim, a resolução será algumas métricas de
sucesso, quaisquer takeaways e aprendizados. Agora que temos esse
esqueleto para trabalhar, podemos levar as próximas
duas horas, talvez muito mais rápido se
você for um escritor rápido, e começar a adicionar
alguma explicação a cada um desses marcadores. Vou fazer
isso agora e
voltar e falar sobre
como me aproximei disso. Vou passar por isso em um nível
alto, mas é claro, você pode dar uma olhada no estudo de caso
real se quiser ler
cada palavra. Primeiro, vamos examinar
as informações de fundo. Decidi que queria incluir
a linha do tempo, os membros da equipe
e, em seguida, um
pouco mais no meu papel já que meu papel não era
apenas no design do produto, mas também fiz muitas
outras coisas. Eu queria ter certeza de
que isso estava claro. Então eu levei algum tempo para
escrever minha declaração de problema. Isso realmente me levou um tempo. Vou ler isso para você,
pois esta é uma
das partes mais importantes
do estudo de caso. Muito das coisas suculentas nas redes sociais acontece
na seção de comentários. Como as redes sociais
estão se movendo cada vez mais para conteúdo de
vídeo curto, por que
comentar não seguir o exemplo? Percebemos que isso
já está acontecendo, mas não há ótimas ferramentas ou plataformas por aí
que o incentivem. Esse conteúdo de comentário
que poderia ser tão rico, engraçado, informativo ou
perspicaz, parece amador. Para que o problema. Fiz uma nota aqui que
quero incluir um visual
do efeito de tela verde
no TikTok porque esse é um exemplo de como isso já
está acontecendo, mas parece e
se sente realmente amador porque há não é muito que ajuda as pessoas a fazer isso. Esse
efeito de tela verde é bom, mas é super glitchy e simplesmente não parece
muito profissional. Então entramos
na oportunidade. Aproveitamos esta oportunidade
para criar o Bubble; o aplicativo
de comentários de vídeo social que permite que os usuários peguem qualquer
conteúdo da Web, gravem um pequeno
comentário em vídeo sobre ele e obtenham reações
de seus amigos. Essa coisa toda é minha declaração de problema
e oportunidade. Então eu tenho isso que define a cena um
pouco, mas para ser honesto, não
tenho certeza se
vou usar isso ou não. Pode ser exagero. Então, se você notar aqui, não
vou nomear essas
seções manchetes do processo UX. Estou nomeando algo
mais específico para o projeto. Este cabeçalho principal será
chamado de Road to MVP. Eu descrevo as metas
e, por causa dessas metas, quais recursos acabamos
querendo priorizar. Sempre que eu tiver
pontos de bala aqui no esboço, esses serão pontos de
bala no estudo de caso. Nem tudo precisa ser escrito
em formato de parágrafo. Os pontos de bala são uma
boa maneira de
transmitir seu ponto sem forçar
alguém a ler tanto. Tenho mais anotações aqui sobre
o que quero incluir. Após a priorização de recursos, talvez
eu queira mostrar um fluxo animado para
cada um desses recursos. Talvez wireframes ou um esboço de
mapa de jornada para cada um também, depois iterações da interface do usuário. Quero escolher uma das
telas e mostrar como a interface do usuário evoluiu da primeira
iteração para a final. Talvez esboçar algumas coisas que entraram nesse processo como,
nós não gostamos disso
por causa do XYZ, isso não funcionou bem
com os usuários por causa do XYZ, e mostre como fomos de A a Z. Em seguida, vou
mostrar um pouco sobre o sistema de design. Isso não é 100%
necessário, mas como eu disse, também
fiz outras coisas
além de apenas design de produto. Eu trabalhei muito na
marca também, então achei que seria
bom mostrar isso aqui. Quero delinear
alguns desafios e compromissos que tivemos que fazer. Porque quando se trata de um MVP, é apenas esse o produto
mínimo viável. Só quero mostrar alguns dos compromissos que
tivemos que fazer. Então falarei sobre o
lançamento do Beta, o lançamento do MVP e como conseguimos esses usuários Beta, um pouco de
marketing, já que eu tinha algum trabalho de design de marketing
que entrou nesse projeto. Depois disso, quais insights e melhorias surgiram disso? Dados que coletamos
e, especificamente, onde
vou obter esses dados, algo como
relatórios de bugs que temos, feedback do
aplicativo dentro
do aplicativo Bubble. Mais priorização de recursos e anotações aqui que você
pode ler sobre o que queremos melhorar
depois de receber feedback. Por fim, o lançamento público. Quais foram os resultados disso? Temos todos esses
resultados que eu tenho e qualquer coisa
no aprendizado. Talvez você não tenha todos esses
dados, tudo bem. Você pode mostrar talvez
uma citação do que alguém disse quando interagiu
com isso que mostrou que poderia ser uma boa solução
potencial. Citações positivas, negativas, coisas assim. Você também pode compartilhar suas dicas e
aprendizados do projeto, especialmente se for um projeto escolar
ou
um de seus primeiros projetos, ou um projeto do bootcamp. Nem tudo vai
ter todos esses dados, e isso é totalmente bom. Por exemplo, alguns
dos aprendizados mais pessoais
que eu queria compartilhar, estou inclusive no final. Trabalhar rápido e receber
feedback no início foi algo que eu realmente
tirei desse projeto. É algo em que não era
muito bom antes começar o projeto e acabei aprender o quão
importante é e fiquei muito melhor nisso
durante esse trabalho. Agora, quero compartilhar
algumas dicas gerais para escrever esse
tipo de conteúdo. Primeiro, penhor sobre títulos
e legendas. Isso realmente ajudará a encontrar
um equilíbrio entre a profundidade e a digestibilidade de relance. Ter um
estudo de caso desnatável é realmente importante, especialmente para gerentes de contratação. Tente escrever como
se estivesse contando a um colega designer
sobre esse projeto. Você não ficaria preso
nas ervas daninhas com os detalhes, mas
destacaria as coisas mais importantes ou
interessantes. Não defina o processo UX, fale sobre o que você realmente
fez e conte essa história. Mantenha-o breve. Eu não teria mais de três
sentenças por parágrafo. Se uma seção estiver ficando longa, pense em a, cortando qualquer penugem
desnecessário ou b, dividindo-a em duas seções que cada uma tem um ponto principal. Volte para a quarta lição
se precisar de uma atualização sobre os must-haves versus
o bom para ter. Por fim, não escreva o que você
poderia mostrar com recursos visuais. Enquanto você está escrevendo,
basta anotar quais visuais você
mostrará onde. Normalmente, coloco essas
notas em itálico
entre parênteses para que elas se
destacem entre parênteses para que elas se
destacem contra o conteúdo escrito. Por fim, sinta-se à vontade para conferir os exemplos no meu mini
banco de dados se você ficar preso. Mas também não fique paralisado
pela armadilha de comparação. O projeto de todos
é tão diferente, então tente usar sua arma. A etapa de ação
para esta lição é a mais difícil, mas você pode fazê-lo. Vá escrever esse conteúdo e
prometo que se você pensar nisso, o resto desse processo
será uma navegação suave. Como sempre, sinta-se à vontade para fazer perguntas na seção de
discussão, e ficaria feliz em
ajudar se puder. Na próxima lição,
vamos abrir o Adobe XD ou sua ferramenta de
design preferida e preparar seu arquivo
. Volte e te vejo
nessa lição quando
estiver pronto para isso. [MÚSICA]
7. Configurar seu arquivo Xd: Quando se trata de
configurar seu arquivo, você tem duas opções. Agora é hora de decidir
se você deseja otimizar seu estudo de caso para Behance
ou seu site pessoal. Vou te mostrar
rapidamente como fazer as duas coisas. Mas quais são os prós
e contras de cada um? Na minha opinião, você não pode
dar errado com Behance, especialmente se você está
procurando novas oportunidades ou está interessado em fazer
seu trabalho
lá fora na frente de
outros designers, Behance é um ótimo
lugar para isso. Como fui
destaque no Behance, na verdade
recebo muitas
consultas de emprego em meus DMs Behance. Dito isso, quando
se trata de Behance, definitivamente
há muito
menos flexibilidade em termos de expor seu conteúdo,
especificamente seu texto. É por isso que eu
tomo a abordagem de design que faço colocando todo o texto no Adobe XD e
exportando-o como PNGs. Com essa abordagem,
porém, você não pode otimizar para outros pontos de interrupção, especificamente para dispositivos móveis, então geralmente tento manter
o texto bastante grande. Isso me leva aos profissionais de otimização para seu site
pessoal, como no Webflow, Squarespace ou onde quer que você hospede e crie seu site. Se você for com isso, você
pode tratar isso como
um
projeto de design de página da Web real porque você realmente tem controle sobre o layout exato e como ele escala em diferentes pontos de interrupção. O outro profissional para isso é ter seu próprio espaço
na Internet geralmente
faz você parecer um pouco mais profissional e
você tem controle total sobre o que o usuário vê enquanto está vendo
seu estudo de caso. Esses são os prós e
contras na minha opinião, mas por que você não pode ter
o melhor dos dois mundos? Na verdade, existem
algumas maneiras de fazer isso. Número 1, tenha seu
próprio site pessoal e, na seção de trabalho, crie miniaturas para
cada peça de trabalho vinculada ao projeto Behance
correspondente. Isso é o que eu faço agora. Observe que eu tenho o projeto
Behance aberto em uma nova guia para que os usuários
nunca sejam retirados do meu site. Número 2, tenha seu trabalho otimizado para
Behance no Behance, mas também tenha uma versão
em seu portfólio pessoal. Dependendo de quantos estudos de
caso você tem e de quão aprofundados eles são, isso pode ser muito
demorado. É algo que eu pessoalmente queria fazer há muito tempo, mas ainda não arranjei
o tempo. A boa notícia, porém, é que se você decidir
começar com Behance, você sempre pode usar o
design Behance que você cria e voltar a ele mais tarde para construí-lo no Webflow
ou Squarespace. Você não precisa projetar layouts
completamente diferentes. Com tudo isso dito, a única diferença em como você configuraria
seu quadro de arte para cada abordagem é o
auge de suas pranchas de arte. Se você decidir que deseja otimizar
para o Behance, você vai querer
criar uma pilha vertical placas
de arte 1920 pixels de largura por
1080 pixels de altura. Mantenha sempre a mesma largura, mas você pode variar a altura
um pouco e isso não importa. Em seguida, para o lado, crie outra placa de arte
que seja 808 por 632 pixels. Isso será para sua miniatura. Se você estiver misturando o Behance e
só quer usar o XD para
projetar o layout
da página que você
vai criar no
seu criador de sites. Você apenas projetará em uma única placa de arte de
1920 pixels que acabará sendo o
tempo que você quiser. Então eu também recomendo criar uma placa de arte longa com uma largura
compatível com dispositivos móveis. Eu uso 375 pixels pois essa é a menor largura de telefone
comum. Tenha em mente que
construir uma página da
Web no Webflow ou no Squarespace
não faz parte dessa classe. [MÚSICA] Se você ainda não tem
experiência em fazer isso ou não tem um
portfólio pessoal agora, então eu recomendo ficar com o Behance por enquanto. Isso é sobre isso para
configuração, fácil o suficiente. Em seguida, preencheremos seu painel de ativos de
design e seu arquivo XD com todos os estilos que você precisará
para seu estudo de caso.
8. Definir seus estilos: Agora que temos nosso arquivo
XD configurado, vamos facilitar as coisas para
nós mesmos e preencher nosso painel de ativos com todos os estilos que precisaremos daqui
para frente. Isso é super fácil porque
você provavelmente vai querer usar os mesmos estilos que
usou no próprio projeto. Isso pode ser tão simples
quanto vasculhar suas bibliotecas do XD e puxar a que
você usa para seu projeto. Se você não fez
isso ou não está familiarizado com a forma como as
bibliotecas funcionam no XD, é muito simples. Vamos
passar por isso agora. Há três coisas
que você mantém uma biblioteca, cores, estilos de tipos
e componentes. Para um estudo de caso como este, cores e estilos de tipos são
definitivamente os mais importantes. Dentro deste arquivo de projeto vou
direcionar sua atenção para a esquerda, onde
temos nosso painel de ativos. Você pode ver que temos cores, estilos de
caracteres
e componentes. Os componentes são como símbolos, mas novamente
vamos nos concentrar em cores e estilos de texto. A maneira como você faz com que elas sejam preenchidas aqui é super simples. Digamos que
excluímos isso por enquanto, este vermelho, e ele
dirá que eu quero adicioná-lo. Estou apenas selecionando um elemento
dessa cor, e estou chegando aqui e
clicando no botão de mais, e então chamamos
esse registro de vermelho. Você também pode fazer a mesma
coisa para têxteis. Talvez eu queira um
estilo para essa tag, eu posso apenas acertar mais aqui. Mas e se eu
quiser poder acessar esses ativos de
um arquivo diferente,
como meu arquivo de estudo de caso. Você pode
publicar isso facilmente como uma biblioteca. Vamos chegar a esse ícone de compartilhamento. Vai me dizer
que esse arquivo atual está pronto para ser publicado, então estou apenas pressionando Publicar. Agora, se eu mudar para o meu arquivo de
estudo de caso , posso ir aqui ,
clicar em Exibir bibliotecas
e encontrar essa biblioteca aqui, onde posso extrair todos
esses mesmos estilos. Se você nem
sentir vontade de lidar com isso, basta copiar e
colar alguns elementos ou telas do seu arquivo e
pegar as cores e estilos de texto e adicioná-los a uma nova biblioteca
neste estudo de caso arquivo. Claro que você não está
limitado a nada aqui. Provavelmente vou precisar
aumentar muitos desses
estilos de textos, porque antes de eu
projetar para um aplicativo móvel, agora vou projetar
para um estudo de caso do Behance. Você também pode ter que
adicionar mais estilos de texto, e você pode até mudar as coisas e usar uma fonte
completamente diferente. Você pode usar
cores diferentes, se quiser, é totalmente com você, mas é muito mais fácil, na minha opinião ter apenas
este lugar para começar. Também é importante observar que você
pode alternar
para frente
e para trás entre suas bibliotecas e os ativos do
documento que você tem, modo que esses ativos
são específicos para este documento versus puxar
de um biblioteca diferente. Neste ponto, você também
pode começar a trazer alguns ícones, logotipos
ou ilustrações diferentes , se algum deles for
relevante para o seu projeto. Você pode
mantê-los para o lado ou pressionar o comando
K e, na verdade,
transformá-los em componentes
que vão viver nesta seção para serem puxados
sempre que você precisar deles, e vamos nos aprofundar nos visuais na lição futura,
então, se você ainda não tiver nada
parecido, não se preocupe. Depois de ter alguns estilos prontos em seu arquivo de estudo de caso, sinta-se à vontade para passar
para a próxima lição onde
responderão a uma
das perguntas mais comuns que recebo sobre meu Behance
estudos de caso. [MÚSICA]
9. Obter o visual sem: [ANTECEDENTES] Quero responder a uma pergunta freqüente antes de mergulharmos na
construção deste estudo de caso, como faço com que meus estudos de
caso
pareçam uma rolagem suave, página da web
perfeita, mesmo que eles sejam
compostos por um monte de placas de arte diferentes
separadas e a resposta é elementos
sobrepostos. Deixe-me mostrar alguns exemplos. Este é um dos meus
estudos de caso antigos e
quero mostrar quantos elementos
sobrepostos eu uso para alcançar esse visual. Primeiro, falaremos sobre
os elementos de fundo. Se acabarmos de mover este iPhone para
fora do caminho por enquanto, você pode ver que a cor de
fundo de ambas as placas de arte
é essa cor cinza bege. O que eu tenho por cima é esse tipo
branco de forma de onda. O que eu fiz foi,
na verdade,
duplicá-lo em ambos os
quadros de arte, então se você ver, se eu excluir esse,
você pode ver que existem,
na verdade, duas formas separadas. Se eu apenas clicar em “Comando
C” e depois ir para este quadro de arte e
clicar em “Comando V” por
padrão, vai colar no lugar. Mas se eu apenas escocá-lo
até que esteja perfeitamente
na linha
assim e então eu faço “Comando o colchete esquerdo” até que
ele vá para trás. Então eu criei essa forma que continua em duas pranchas de arte
diferentes. Isso é apenas o plano de fundo. Eu faço isso em alguns lugares
diferentes. Aqui, eu usei essa forma de
onda que é verde, em vez de ter essa transição
realmente nítida onde definitivamente
parece duas placas de arte separadas, eu entrei com essa forma de onda
verde para que meio que flui um pouco mais
suavemente para esse conteúdo. Eu faço a mesma coisa
aqui com essa forma, e faço isso com outros
elementos também, por exemplo, esse mock-up do iPhone, você pode ver que são, na verdade, duas imagens
diferentes. Eu dupliquei
neste quadro de arte e, em seguida,
basta colocá-lo novamente para que ele se alinhe perfeitamente
e pareça uma continuação perfeita
do elemento visual. Eu fiz a mesma
coisa com essa imagem. Aqui em baixo eu fiz
isso com essa maquete. As pessoas são
tropeçadas com isso porque placas de
arte agem como máscaras. Você não pode simplesmente jogar
um elemento entre duas pranchas de arte e obter o efeito
exato que deseja. Em vez disso, você
precisa copiar manualmente, colá-lo e alinhá-lo. Que é duplicado em uma prancha de
arte e outra. É super fácil, mas basta
ampliar todo o caminho e verificar se a continuação
é uma combinação perfeita. Provavelmente escusado será
dizer que você tem que ter suas pranchas de
arte exatamente alinhadas como
bundas umas contra outras para
que isso funcione. É isso. É uma dica simples, mas é
um longo caminho para
lhe dar a capacidade de tornar seu projeto Behance rolagem
suave como um site e super flexível com a aparência que
você quer que ele pareça. Experimente isso com algumas formas ou máscaras ou
fotos
diferentes e veja se você pode brincar
com a forma como isso funciona, então você estará pronto para
aplicar a técnica quando realmente
começarmos construindo seu caso
[FUNDO] [MÚSICA] estudo
na próxima lição [MÚSICA].
10. Crie um estudo de caso!: Agora que você tem todas as partes necessárias para criar
este estudo de caso, é realmente só hora de
começar a intrigá-las juntas. Vá em frente e abra
tudo o que você tem. Você deve ter o arquivo de design
vazio que acabou de configurar
para seu estudo de caso, qualquer arquivo de design do
próprio projeto, seu esboço escrito
e sua pasta cheia de notas de projeto e trabalho em
andamento e coisas assim. A primeira coisa que
gosto de fazer é criar a imagem de cabeçalho que
iniciará meu estudo de caso. Isso pode ser em qualquer
estilo que você gosta. Junto com a coisa mais
importante, que é um visual
forte
nesta seção de cabeçalho, também
gosto de incluir
o título do meu projeto, uma descrição de uma linha e um pouco
de informações de fundo para contexto imediato. Então eu apenas começo a
passar pelas diferentes
seções do meu esboço e
copiar e colar a cópia no arquivo do meu estudo de
caso, colocando-a no quadro de arte, e o tempo todo
pensando sobre o que posso mostrar versus apenas contar. Por exemplo, na minha
declaração de problema, você se lembra que eu
referenciei o efeito de
tela verde no Tiktok. Vou mostrar uma captura de tela
real, talvez até mesmo um GIF disso. Há um visual emparelhado com o verbal que realmente mostra
isso é o que está acontecendo
agora e há essa oportunidade para
uma solução melhor. [MÚSICA] Depois de apresentar duas
ou três seções, gosto de garantir que
elas estejam fluindo bem juntas e tenham alguma variação
visual. Às vezes eu faço isso
com cores de fundo, às vezes com formas,
imagens, coisas assim. Depois de fazer isso, posso repetir esse padrão
ao longo do resto
do estudo de caso usando estilos consistentes de texto de
cabeçalho e corpo. [MÚSICA] Assim como qualquer
outra coisa no design, não
há fórmula exata para esse processo, então a melhor coisa que
posso fazer é apenas mostrar como eu abordo
e apontar você para algum outro ótimo exemplos nesse banco de dados que mencionei
na seção de recursos. Mas com tudo isso dito, eu quero
percorrer várias maneiras
diferentes de várias maneiras
diferentes apresentar
informações visualmente. Isso é o que vamos
fazer na próxima lição.
11. Apresentar informações visualmente: Ao longo de seu estudo de caso,
haverá várias
oportunidades diferentes para você apresentar
informações visualmente. Isso ajudará o estudo de
caso a ser muito mais digerível,
menos pesado em texto. Existem oito maneiras principais pelas quais vamos
percorrer: dados, iconografia, gráficos, destaques,
marcadores, citações, imagens e maquetes. À medida que avançamos, vou
mostrar muitos exemplos de
outros estudos de caso, então, se você quiser olhar para eles
na íntegra, basta conferir o mini-banco de dados vinculado ao recurso seção. Primeiro, vamos falar sobre dados. Sempre que você estiver falando
sobre métricas ou pesquisas, considere
apresentá-lo com um gráfico de barras, um gráfico de pizza ou
algo mais visual que os espectadores possam
entender rapidamente. Iconografia, quando você
tem uma seção com mais de dois ou três pontos
diferentes, veja se você pode usar uma série de ícones para introduzir ou
representar cada um. Gráficos. O visual
não precisa apenas significar imagens,
formas ou ícones. A maneira como você coloca
o texto também pode realmente ajudar a tornar uma seção
mais fácil de ler e entender. Veja se há seções do seu estudo de caso onde você pode organizar ideias e
textos visualmente. Destaques, assim como usar um estilo de texto maior
para seus títulos, destacar pontos importantes é outra ótima maneira de tornar seu estudo de caso mais
digerível e desnatável. Pontos de bala, tente evitar longos parágrafos de textos porque eles não são
facilmente digitalizáveis. Use pontos de bala
sempre que puder. Citações, se você tiver uma cotação que foi realmente
informativa durante sua pesquisa ou que mostre o impacto
da sua solução. Você poderia
amplificá-lo
projetando-o para se destacar em
seu estudo de caso. Imagens, eu pessoalmente
gosto de usar imagens para manter meu estudo de
caso envolvente. Esse tipo de visual realmente não faz ou quebra
seu estudo de caso. Na verdade, se você usar demais, ele pode realmente distrair
de seus pontos principais,
portanto, certifique-se de que qualquer imagem
que você usa seja relevante. Normalmente tento
fotografar imagens, mas quando não posso,
confio no Unsplash. Eles têm muitas opções realmente de
alta qualidade que são isentas de royalties. Por fim, maquetes. Mockups são uma parte muito
importante da maioria dos estudos de caso, então certifique-se de estar usando ou criando modelos de
alta qualidade. Inclui alguns
dos meus favoritos na
seção de recursos desta classe. Sinta-se à vontade para
mantê-los simples ou realmente torná-los seus
como este exemplo. Alguns deles podem
não ser relevantes para o seu estudo de
caso e tudo bem. A pior coisa que você pode fazer é incluir tudo e superlotar seu estudo de caso, tornando-o realmente confuso e diluindo
sua mensagem. Então, quando estiver em dúvida,
mantenha-o conciso. Antes de passar para
a próxima lição, aqui está sua etapa de ação. Crie cada seção
seguindo seu estudo de caso
escrito. Isso pode parecer intimidante, mas tudo o que você realmente está fazendo é combinar a parte escrita do seu estudo de caso com qualquer visual ou visual
que faça sentido. Você já fez
todo o trabalho duro de contar a história. Sinta-se à vontade para deixar
em branco ou criar formas de
espaço reservado para qualquer área que você queira
incluir animações. [MÚSICA] Vamos resolver
isso na próxima lição.
12. Crie um GIF animado: Amigos estamos
chegando muito
perto de terminar esses estudos de caso. Nesta lição, vou
orientá-lo sobre como criar
um GIF animado para incluir
em seus estudos de caso, não importa onde você
acabe publicando. Para o meu estudo de caso de bolhas, na verdade não
há
muita animação envolvida
no projeto. Para mostrar isso a vocês, passei para um dos meus projetos anteriores e estudos de
caso chamados fase. Isso é o que estamos
vendo aqui. Se você rolar para baixo, você pode ver que eu
desenhei isso assim como eu projetei
meu estudo de caso borbulhado. Pranchetas empilhadas verticais como esta, todas têm
a mesma largura. Quero mostrar o que
faço quando decido que
quero ter uma animação
dentro de uma dessas seções. Para esta seção,
eu queria mostrar como seria quando alguém arrastasse essa escala
e selecionou um número. Eu criei uma animação
apenas duplicando esta prancheta duas vezes aqui e
manipulando o design. Cada coisa permanece a mesma, exceto por
esses poucos elementos. [RUÍDO] Isso, acabei de me
mudar para os sete, e essa linha eu acabei arrastar para ser longa
o suficiente para alcançar isso. Então eu dupliquei
esta seção na próxima prancheta
e fiz a mesma coisa, movi este seletor para
o oito, e então eu o
liguei no modo protótipo. Se entrarmos no modo protótipo, fiz um gatilho de tempo
e coloquei isso em um loop. Após 0,5 segundos, ele será
automaticamente animado para esta tela. Eu fiz a flexibilização, facilidade e saída, e então acabei de fazer a mesma coisa aqui
depois de 0,7 segundos, e depois de 0,7 mais segundos, ele
voltará para o início. Se você não está super
familiarizado com animação e o uso do
auto animate no XD, tenho alguns tutoriais
no meu canal do YouTube que você pode usar como
recursos para acompanhar lá. Isto é o que isso
parece aqui, é
isso que você está
olhando aqui, é basicamente apenas
uma animação em loop que mostra um
pouco de movimento aqui, que apenas torna um pouco
mais visualmente interessante. Agora, para capturar
isso como um vídeo, o que nós [NOISE] queremos
fazer é voltar a reproduzir esse protótipo e vamos
apenas bater o registro. Eu quero ter certeza de
que meu mouse está completamente fora
do caminho, meu cursor, e vou deixar
isso passar
pelo loop algumas
vezes para ter certeza de que temos pelo menos um
realmente bom cheio da animação neste vídeo. Então, vou parar de gravar e vou salvar este MP4. Temos essa animação aqui, e vou
abri-la no QuickTime Player para que
possamos
cortar isso em um ciclo completo. No QuickTime, vou pressionar
o Command T para aparar, e vou encontrar
um loop perfeito [MUSIC]. Bem ali, parece bom
e depois vou
fazer o comando S para salvar. [RUÍDO] Vou
chamar isso de aparado, e podemos nos livrar
daquele mais longo lá. Agora, um aplicativo muito fácil
que aprendi a usar para transformar um MP4 em
um GIF é chamado gifski. Você pode encontrar isso
na App Store. Parece assim na loja de aplicativos
do Mac, há também uma ferramenta
chamada GifTuna que você pode usar se estiver
usando um PC com Windows, que eu acredito ser
a mesma coisa. Vamos abrir isso, [RUÍDO] e
parece assim,
essa pequena janela fofa
quando você abri-la, e eu vou arrastar esse MP4 direto para aquela janela. As únicas configurações que
queremos alterar são a largura, vamos fazer 1920, já que essa é a largura
do resto de nossas pranchetas. Queremos garantir que o
loop para sempre esteja ativado. Temos a qualidade
todo o caminho e
o tamanho estimado é de
apenas 1,9 megabytes. Desta forma, geralmente
superestima o tamanho, vou mostrar o que
realmente acaba sendo. Vou notar que se você tiver
uma animação muito mais longa, talvez tenha que rebaixar um pouco
a qualidade, mas na minha experiência, isso nunca fez uma
grande diferença. Sempre parece
realmente de alta qualidade, é por isso que eu realmente
amo essa ferramenta e é grátis se eu
ainda não mencionei isso. Vou bater em Convert. Isso levou menos de 20 segundos, então agora
vamos fazer Salvar como, e salvaremos isso em nossa área
de trabalho. Agora, vou apenas
selecioná-lo e clicar na barra de espaço para visualizar o que
isso vai parecer. Como você pode ver, é
super alta qualidade, a velocidade é boa, não é nervosa ou lenta,
todas as cores
parecem super precisas. Se você gosta de como isso parece, vá em frente e repita
o processo para quaisquer outras animações que
você deseja incluir em seu estudo de caso e coloque
todos os seus arquivos GIF
na pasta Behance que você feito no início
da aula. Normalmente, nomeio esses arquivos
com números com base
na ordem em que as pranchetas aparecerão, no
seu estudo de caso. Você pode misturar esse GIF
com todos os seus P e Gs que você
exportará na próxima lição. Você conhece sua
etapa de ação para esta lição, vá em frente e crie
seus gifs e
coloque-os na pasta organizada da maneira que
quiser. Na próxima lição, vamos
exportar o resto do
seu estudo de caso e, na verdade,
enviá-lo para Behance. [MÚSICA]
13. Exportar e fazer upload: [MÚSICA] Primeiro de tudo,
sim, você fez isso. Seu estudo de caso finalmente
terminou, parabéns. Agora tudo o que você precisa
fazer é prepará-lo para publicar. Dependendo da
abordagem que você está adotando, você avançará
em uma das duas direções. Se você está realmente
construindo este
estudo de caso no Squarespace ou Webflow, então você não vai realmente exportar
essas placas de arte. Nesse caso, você só
vai querer exportar os ativos visuais individuais, como suas imagens,
formas, maquetes. Você pode salvar todos esses
elementos em uma pasta e, em seguida, quando você for
criar sua página, então você pode simplesmente trazê-los. No entanto, acho que a maioria de
vocês otimizou para Behance. Se for esse o caso, você pode arrastar, selecionar cada quadro de arte, clicar em “Comando E” para exportar e exportar esses SPNGs para
a pasta Behance
que você criou anteriormente. Novamente, se você
quiser se manter organizado, eu geralmente gosto de nomear esses quadros de arte em ordem
crescente, começando no topo, em um, depois 2, 3, 4, etc. para que eles possam permanecer organizados
em seu Pasta Behance. Em seguida, entre na sua conta
Behance e clique em “Compartilhar seu trabalho”. Isso abrirá um novo projeto. Uma nota aqui,
você verá o protótipo como uma opção para importar do XD ou Figma e você pode se
sentir livre para fazer isso. No entanto, às vezes,
um protótipo sem nenhum contexto não
faz muito pelo seu espectador. Lembre-se de que o objetivo do
seu estudo de caso é contar
a história de como você
resolveu esse problema. Antes de
adicionar um protótipo, pergunte a si mesmo onde ou se esse protótipo
se encaixa na sua história. Em seguida, clique em “Imagem”, navegue até sua
pasta Behance e selecione todos
os PNGs e GIFs que
você deseja carregar. Depois que essas cargas forem carregadas,
você notará que há algum espaçamento padrão
entre eles. Para remover esse clique em “Estilos”
no lado direito e alterá-lo de 60 pixels
para zero, clique em “Salvar”. Certifique-se de que suas imagens estejam
na ordem correta. Se você precisar editar
o pedido, mouse sobre uma imagem, clique no ícone de edição azul
e selecione reordenar projeto. A partir daqui, você pode alterar
e salvar o novo pedido. Uma coisa a observar, se você estiver usando GIFs com cores de
fundo
que não são brancas, você pode notar algo
um pouco descolado. Como seu GIF pode ser uma
imagem de qualidade diferente de seus PNGs, a cor pode ter mudado um
pouco
no processo. Se este for o caso, não se preocupe, é uma solução super fácil. Volte para o XD
e selecione todas as placas de arte estáticas que têm a mesma cor de fundo. Vá para a ferramenta conta-gotas e experimente a cor de fundo
GIF exportada. No XD, parecerá duas cores de fundo
diferentes, mas quando estiverem todas em Behance, elas serão perfeitamente consistentes. O item de ação
desta lição é simples. Basta seguir as etapas que
fiz para carregar tudo em um projeto Behance e
na próxima lição adicionaremos
os retoques finais, como sua miniatura, título do
projeto, descrição e qualquer
etiqueta. Vejo você em breve.
14. Finalizar e publicar!: Aí vêm os retoques finais. Você enviou todas as suas imagens em seu projeto
Behance e espero que tenha
passado para garantir que
não haja erros de digitação ou coisas estranhas e
divertidas acontecendo. Agora está quase na hora
de clicar em “Publicar”, entrar nas configurações e fazer upload de
uma miniatura do projeto. No início
da aula, eu fiz você montar um
quadro de arte para isso, mas se você ainda não
projetou isso, não se preocupe, vou te
dar algumas dicas. Número 1, não use
muito texto, mas inclua uma descrição
muito curta para que alguém saiba o que esperar
quando clicar nisso, apresenta
modelos relevantes para que os espectadores saibam o que é real
a saída do projeto foi. Escolha a tela mais
interessante para mostrar em seu maquete. Pessoalmente, eu gosto de pegar
meu design de cabeçalho e apenas adaptá-lo para essa miniatura que eles acabem parecendo
super semelhantes. Em seguida, dê um título ao seu projeto. O título não
importa muito se você estiver apenas usando
isso como um portfólio, mas se você estiver tentando obter
toneladas de uso na plataforma, tente nomear algo que
as pessoas possam procurar. Os dois projetos que
recebi foram chamados de Smart Diffuser App e
Cycle Syncing App. Mas, para ser honesto, meus
títulos podem não ter nada a ver com ser
destaque. Quem sabe? Em seguida, adicione algumas tags. Esta é outra
oportunidade para pensar termos de pesquisa
relevantes
para o seu projeto. Normalmente começo com UI, UX, design de
produto e, em
seguida, fico mais específico, como automação de aplicativos
móveis de tecnologia futura, design de
aplicativos e coisas assim,
depois preencha as
ferramentas que você usou
no categorias nas quais seu
projeto se enquadra. Por fim, você adicionará
a descrição que eu costumo copiar e colar
uma das primeiras seções do meu estudo de caso para
este parágrafo que introduz o projeto
bem e pronto. Revise tudo mais uma vez e depois clique em “Publicar”. Obter destaque
no Behance
não deve ser seu objetivo
porque, para ser honesto, você tem muito pouco
controle sobre isso. No entanto, você pode
querer saber que seu projeto só é enviado para a equipe de curadoria do Behance uma vez em sua primeira publicação. Portanto, não basta fazer o upload da metade do seu estudo de caso e depois
volte e termine mais tarde, apenas
publique quando terminar completamente. Você conhece sua etapa de ação aqui, preencha todos os campos deste projeto Behance
e clique em “Publicar”. Sério, vocês deveriam estar muito orgulhosos de si mesmos
por chegarem até aqui. Isso é muito trabalho. Eu realmente espero que você
compartilhe o link comigo na seção de discussão abaixo. Eu
adoraria ver o que vocês criaram e sei que outros alunos da
turma realmente
se beneficiariam de
vê-los como inspiração. [MÚSICA]
15. Conclusão: Primeiro, quero dizer
um grande
parabéns por terminar esta aula. Você está um grande passo mais
perto de conseguir o próximo emprego, ganhar mais credibilidade
como designer e inspirar a comunidade
criativa. Sinceramente, me diverti
tanto levando vocês pelo
processo de escrever, projetar e publicar
seus estudos de caso detalhados. Não se esqueça de
carregar seus projetos abaixo na seção da
comunidade de turmas, eu realmente quero ver no
que você trabalhou. Você pode se sentir livre para postar o link para o seu
projeto ou fazer upload de
alguns dos seus quadros de arte favoritos ou todos os seus quadros de arte, é totalmente com você. Se você gostou desse estilo de
ensino, sinta-se à vontade para conferir minha outra
aula aqui no Skillshare. Chama-se Intro to UI UX para designers
gráficos, bem como meu canal do YouTube
e Instagram, onde também compartilho
conteúdo de design o tempo todo. Obrigado por ficar
comigo ao longo disso, e espero ver vocês em outra aula ou
vídeo muito em breve. Adeus. [MÚSICA] Minhas
mãos estão tão frias. [RUÍDO] Idílico muito genérico,
como você diz isso? Idílico. Idílico. Vamos, amigo,
você pode fazer isso.
Maddy Beard, Product Designer & Educator
