Escreva, projete e publique um estudo de caso de UX | Portfólio de UI/UX | Maddy Beard | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Escreva, projete e publique um estudo de caso de UX | Portfólio de UI/UX

teacher avatar Maddy Beard, Product Designer & Educator

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Trailer

      2:13

    • 2.

      Visão geral do projeto

      1:24

    • 3.

      Tipos de estudos de caso

      2:56

    • 4.

      Compilar as peças

      3:48

    • 5.

      Esboçar a estrutura da sua história

      5:48

    • 6.

      Escrever o conteúdo

      8:53

    • 7.

      Configurar seu arquivo do XD

      3:25

    • 8.

      Definir seus estilos

      3:09

    • 9.

      Como obter uma aparência fluida

      3:03

    • 10.

      Construir o estudo de caso!

      3:21

    • 11.

      Apresentar as informações visualmente

      3:04

    • 12.

      Criar um GIF animado

      5:41

    • 13.

      Exportar e fazer upload

      3:10

    • 14.

      Finalizar e publicar!

      2:31

    • 15.

      Conclusão

      1:10

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.638

Estudantes

7

Projetos

Sobre este curso

Para quem deseja conseguir um emprego novo, aumentar sua credibilidade como designer ou apenas compartilhar seu trabalho com a comunidade criativa, manter o portfólio atualizado é incrivelmente importante. Depois de tanto trabalho para entregar um projeto, pode parecer tentador simplesmente partir para o próximo, mas vale muito a pena tirar um tempo para criar um estudo de caso atrativo para cada projeto que você fizer, seja um projeto pessoal, para um cliente ou como designer interno de uma empresa.

Neste curso, quero ajudar você a pegar todo aquele trabalho maravilhoso (e às vezes bagunçado) de um projeto recente e transformá-lo em algo que conte uma história e realce seus pontos fortes. Você vai conseguir usar esse processo para projetos passados e futuros.

Este curso é destinado a designers de UX e de produtos de QUALQUER nível. Se você quer melhorar o nível de um projeto da escola, exibir seu primeiro projeto profissional ou se já trabalha com UX há anos e quer aperfeiçoar seus estudos de caso, os vídeos a seguir vão lhe ajudar a criar algo que você tenha orgulho de mostrar.

Veja o que você vai precisar:

  • Um projeto que você terminou recentemente
  • Google docs, notas da Apple ou outro programa para escrever um esboço
  • Acesso ao Adobe XD ou uma ferramenta de design semelhante
  • Alguns mockups de dispositivos móveis (deixei alguns links na seção de recursos)
  • Um portfólio online, como no Behance, e/ou seu próprio site

Conheça seu professor

Teacher Profile Image

Maddy Beard

Product Designer & Educator

Professor

I'm Maddy Beard, a product designer & content creator based in Denver, Colorado.

You can also find me on YouTube, Instagram, and my Newsletter. 

Visualizar o perfil completo

Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

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.