Escribe, diseña y publica un caso práctico de UX | Portafolio de UI o UX | Maddy Beard | Skillshare
Menú
Buscar

Velocidad de reproducción


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

Escribe, diseña y publica un caso práctico de UX | Portafolio de UI o UX

teacher avatar Maddy Beard, Product Designer & Educator

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Trailer

      2:13

    • 2.

      Resumen del proyecto

      1:24

    • 3.

      Tipos de estudios de caso

      2:56

    • 4.

      Cómo recopilar las piezas

      3:48

    • 5.

      Describe la estructura de tu historia

      5:48

    • 6.

      Escribe el contenido

      8:53

    • 7.

      Cómo configurar tu archivo Xd

      3:25

    • 8.

      Define tus estilos

      3:09

    • 9.

      Logra ese aspecto impecable

      3:03

    • 10.

      ¡Construye ese estudio de caso!

      3:21

    • 11.

      Presenta la información visualmente

      3:04

    • 12.

      Cómo crear un GIF animado

      5:41

    • 13.

      Exporta y sube

      3:10

    • 14.

      ¡Termina y publica!

      2:31

    • 15.

      Conclusión

      1:10

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

2394

Estudiantes

7

Proyectos

Acerca de esta clase

Ya sea que quieras conseguir un nuevo trabajo, aumentar tu credibilidad como diseñador o compartir tu trabajo con la comunidad creativa, mantener tu portafolio actualizado es increíblemente importante. Puede ser tentador terminar todo el trabajo duro en un proyecto y luego simplemente seguir adelante… pero vale la pena tomarse un tiempo para crear un estudio de caso convincente para cada proyecto que hagas, ya sea para un proyecto personal, un proyecto para un cliente o como diseñador interno de una empresa.

En esta clase, quiero ayudarte a llevar todo ese trabajo impresionante (a veces desordenado) de tu proyecto reciente y darle forma de algo que cuenta una historia y resalta tus fortalezas. Podrás usar este proceso para proyectos pasados y proyectos por venir.

Esta clase está dirigida a diseñadores de UX y de productos en CUALQUIER nivel. Ya sea que estés buscando subir de nivel un proyecto de la escuela, exhibir tu primer proyecto para un cliente o has estado en UX durante años y quieres empezar a diseñar tus estudios de caso con un poco más de intención, los videos que vas a seguir te ayudarán a crear algo que estés orgulloso de mostrar.

Esto es lo que necesitarás:

  • Un proyecto que terminaste recientemente
  • Google Docs, Apple Notes o algo donde puedas escribir un esquema
  • Acceso a Adobe Xd o a una herramienta de diseño similar
  • Algunas lindas maquetas de dispositivos (incluí enlaces a algunas en la sección de recursos)
  • Un portafolio en línea como Behance y/o tu propio sitio web

Conoce a tu profesor(a)

Teacher Profile Image

Maddy Beard

Product Designer & Educator

Profesor(a)

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

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

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Avance: Te estás desplazando por Behance y ves un estudio de caso que está bellamente diseñado y cuenta una historia atractiva, y piensas, wow, nunca podría hacer eso. Bueno, es hora de repensar eso. Soy Maddy Beard. Soy diseñador de productos y creador de contenido de diseño. He trabajado para agencias, pequeñas empresas, grandes empresas como Adobe y startups tecnológicas haciendo trabajos de diseño estratégico. [ MÚSICA] A lo largo de mi carrera, como la mayoría de los diseñadores, he llegado a entender la importancia de elaborar estudios de caso. Ya sea que quieras aterrizar un nuevo trabajo, aumentar tu credibilidad como diseñador, o simplemente compartir tu trabajo con la comunidad manteniendo tu cartera de hoy, es extremadamente importante. Confía en mí, lo entiendo , puede ser tentador terminar todo el arduo trabajo en un proyecto, publicar un par de fotos en Instagram o tu página web y luego seguir adelante. Pero vale la pena tomar algún tiempo elaborar un caso práctico convincente para cada proyecto que hagas, ya sea un proyecto personal, un proyecto para un cliente freelance o para la empresa en la que eres trabajando en. En esta clase, quiero ayudarte a tomar todo ese trabajo impresionante, a veces desordenado de un proyecto reciente y darle forma a algo que cuente una historia y resalta tus fortalezas como diseñador. Podrás usar este proceso para proyectos y proyectos pasados por venir. Esta clase está pensada para UX y diseñadores de productos en cualquier nivel, ya sea que quieras mostrar un proyecto desde la escuela, mostrar uno de tus proyectos de clientes más recientes o tal vez has estado en la industria para un mientras, y solo quieres una nueva forma de diseñar tus estudios de caso con un poco más de intención. Los videos que siguen te ayudarán a salir con algo de lo que estás realmente orgulloso. Esto es lo que necesitarás, un proyecto que has terminado recientemente, ojalá tengas algunas notas o bocetos o cualquier tipo de trabajo de proceso, Google Docs, notas de Apple, o algún lugar para delinear el contenido, acceso a Adobe XD, Figma o una herramienta de diseño similar. Algunas bonitas maquetas de dispositivos que puedo apuntarte a algunos de mis favoritos y un portafolio online como Behance o tu sitio personal. Te voy a llevar a través de estas lecciones usando un ejemplo principal, un estudio de caso voy a estar elaborando para uno de mis proyectos más recientes y porque obviamente mi estilo no es el único estilo Voy a estar compartiendo toneladas de otros ejemplos en el camino. Los estudios de casos son de lejos lo número uno de lo que me preguntan en mi Instagram y YouTube, así que estoy muy emocionado de mostrarles finalmente este proceso completo que pueden hacer ustedes mismos. Vamos a bucear justo en. [ MÚSICA] 2. Resumen del proyecto: El proyecto para esta clase es para que usted cree un estudio de caso fuerte a partir de un proyecto que ya ha hecho. No importa si este es el primer o 31 proyecto que has hecho alguna vez, probablemente nunca te hayas acercado estudios de casos exactamente como este antes. A medida que vas, siéntete libre de ponerle tus propios toques y seguir tu propio camino con él si tienes ideas diferentes de lo que muestro. Mi trabajo es solo guiarte a través este proceso y mostrarte lo que me funciona para crear un estudio de caso que en realidad sea interesante de leer y mirar. Primero, empezaremos recogiendo todas las cosas de tu proyecto. A continuación, describiremos y escribiremos el contenido. Entonces realmente diseñaremos el caso práctico en Adobe XD sin embargo, puedes usar cualquier programa que quieras. En el camino, estaré compartiendo consejos y tutoriales para cosas que quizá quieras incluir en esta parte. Por último, pasaremos por las mejores formas de subir y publicar tus estudios de caso a Behance, si es ahí donde decides mostrarlo. Por supuesto, también puedes mostrarlo en tu sitio de cartera personal. Estaré compartiendo un paso de acción al final de cada lección. Recomiendo seguirme a lo largo de este proceso y publicar tu trabajo abajo en la sección de discusión para retroalimentación y hacer preguntas. Pero por supuesto, ya sabes cómo aprendes mejor, así que siéntete libre de moverte por la clase al ritmo que quieras. Cualquier nuevo proyecto puede parecer desalentador, pero te voy a estar dando pasos sencillos y sencillos para que si sigues esta clase, tendrás un estudio de caso terminado al final. [ MÚSICA] 3. Tipos de estudios de caso: Durante mi investigación para esta clase, miré decenas de casos prácticos y se me ocurrió cinco categorías diferentes en las que la tuya podría encajar. Echemos un vistazo a cada uno y los desgloses para que puedas determinar qué tipo de estudio de caso vas a estar elaborando durante esta clase. Mejora número 1, ya existía un producto y el objetivo de tu proyecto era mejorarlo de alguna manera, tal vez a través de mejores flujos de usuario, nuevas características o mejor organización. Este caso de estudio de Amy Lima por causa es un gran ejemplo de esto porque ya llevan más de 30 años en el negocio , pero querían pivote para vender sus pólizas de seguro directamente al consumidor. Para hacer eso, necesitaban mejorar su experiencia de usuario para lo suficientemente simple como para que sus millennials demográficos, conocedores de la tecnología pudieran usar y confiar en ellos. Número 2, re-imagina. Se nota una oportunidad para mejorar un espacio problemático utilizando nuevas soluciones que podrían no haberse implementado de inmediato. Este proyecto de guía de televisión Abdallah Salem hace esto realmente bien. Notan que hay más opciones que nunca en este momento cuando se trata de qué ver y esas opciones están muy fragmentadas y dispersas en torno a docenas de proveedores y plataformas. Su solución incluyó búsqueda universal, personalización y recomendaciones inteligentes. Número 3, tierra arriba. Tu proyecto abarca desde la concepción hasta el lanzamiento de un nuevo producto. Esto es en lo que cae mi proyecto en bubble. Considero que este caso de estudio come explorer de Tony Jean se cultiva. Es una aplicación de traducción para menús de restaurantes para ayudar a romper las barreras culturales de la comida diseñada específicamente para estudiantes internacionales. Número 4, visionario. Tu proyecto es de naturaleza conceptual y no necesariamente ligado a un negocio aunque tienen ideas y oportunidades futuristas para los negocios. Diría que los tres casos prácticos en los que trabajé en Adobe entran en esta categoría. Este proyecto, buena vecina de Julie Sandusky es conceptual, pero tiene toneladas de oportunidades en el mundo real porque se basó en investigaciones reales y problemas que reducen el desperdicio de alimentos por facilitar el intercambio de alimentos dentro de las comunidades. Número 5, culminación. Esto definitivamente es menos común en lo que respecta a las carteras, pero definitivamente sigue siendo un trabajo valioso. Con este tipo, tu proyecto es más un análisis de conjuntos de datos, mostrando resultados de investigaciones que podrían ayudar a dar forma a un proyecto o ayudar a otros diseñadores a aprender sobre un área específica. Este artículo de BMR detalla el estado actual de las experiencias de checkout y e-commerce a través ocho trampas comunes y mejores prácticas. Determinar la categoría en la que cae un proyecto te ayudará a descubrir la historia que vas a estar contando, que vamos a entrar en mucho más detalle en futuras lecciones. Pero el único elemento de acción para esta lección es dar que algún pensamiento y ver si alguno de estos describe el proyecto con el que estás trabajando. Una vez que tengas eso abajo, siéntete libre de sumergirte más profundamente en cualquiera de los ejemplos que mostré. Voy a estar dejando un enlace en la sección de recursos a una pequeña base de datos donde he recopilado todos los ejemplos realmente buenos de estudios de casos que encontré durante mi investigación. Siéntete libre de comprobar eso y te veré en la siguiente lección donde vamos a empezar a compilar todos los materiales de tu proyecto prepararte para descifrar este caso de estudio. 4. Compilar las piezas: Antes de ir más allá, quiero darles una visión general de lo que conforma un convincente estudio de caso. ¿ Cuáles son los imprescindibles, cuáles son los agradables para los que tienen? ¿ En qué deberías enfocarte, en qué no deberías enfocarte? Ahora recuerda, vamos a entrar en mucho más detalle sobre todas estas cosas en futuras lecciones, así que no voy a pasar demasiado tiempo en ellas, pero sí quiero darte una visión rápida para que puedas tenerlos en cuenta mientras estás reuniendo tus materiales. Mis imprescindibles son una declaración de problema u oportunidad. ¿ Cuáles son los objetivos? ¿Cómo sería el éxito? Tu rol y con quién trabajaste, no la gente específica por supuesto, sino sus roles y cómo se unió el equipo. ¿ Por qué tomaste ciertas decisiones? ¿ Qué impulsó su dirección de diseño y priorización? Por lo general eso es en forma de alguna investigación, formal o informal. Algunos trabajos de proceso, visuales de sus entregables finales y resultados o métricas de éxito. Algunos agradables a los que tienen podrían ser una explicación en profundidad de sus investigaciones y hallazgos, que podrían ser cotizaciones o datos, un sistema visual o pautas de marca. Más artefactos de proceso como empatía, mapas, personas, sitemaps, flujos de usuarios. Maquetas que son interactivas para resaltar características específicas. Tal vez una hoja de ruta futura si algunas cosas no fueran capaces de ser priorizadas o tal vez se plantearan algunas iniciativas que serían beneficiosas de hacer en el futuro. Por último, los retos que enfrentaste y cómo los superaste. Quiero recalcar que no tienes que hacerlo y de hecho, no deberías incluir todas estas cosas. Si solo estuvieras abrumado al escuchar toda mi lista, entonces imagina lo abrumado que alguien estaría mirando tu estudio de caso que tiene todas las cosas posibles incluidas. Todo el punto de esta clase es enseñarte a contar una historia convincente. Una historia convincente no incluye toneladas y toneladas de detalles monótonos. Ten siempre en cuenta a tu lector. ¿ Cuánto tiempo tienen realmente para leer esto y entenderlo? Se trata de mantenerlo conciso. Pero es importante reunir todo primero y luego determinar qué es importante y lo que no está en contar tu historia. Esta lección, vamos a estar compilando todo, y más tarde vamos a tamizar lo que no necesitamos. Con eso dicho, vamos a crear una nueva carpeta en nuestro escritorio y etiquetarla el nombre de nuestro proyecto. Por ejemplo, voy a nombrar a mi estudio de caso de burbuja, luego crear algunas subcarpetas. Aquí están las que recomiendo la investigación, es donde se pueden poner cosas sobre análisis competitivos, datos, grabaciones o notas de entrevistas, materiales de reclutamiento, encuestas, resultados, etc. Siguiente carpeta es bocetos. Esto podría incluir escaneos de sus bocetos analógicos o capturas de pantalla de bocetos en su iPad o en cualquier otro lugar que dibuje. A continuación, archivos XD, tal vez tengas diferentes archivos para tus wireframes, iteración diferente, tus diseños finales. Maquetas. Si ya has marcado algo o has grabado algún tutorial, puedes ponerlos ahí. Además, puedes pegar la plantilla de maqueta que quieras usar ahí, mis favoritos están enlazados a continuación en la sección de recursos. A continuación se presentan resultados, cualquier análisis de datos o cotizaciones que tengan que ver con su solución real y lo que probó y validó. Estos son los resultados de las métricas de éxito. Por último, tengo una carpeta llamada Behance, esto es finalmente la guerra exportará nuestros archivos finales de estudio de caso a. Toma todo lo que obtuviste de este proyecto y dátelo a todas las carpetas diferentes. No te preocupes si no tienes todas estas cosas, eso está totalmente bien, pero además no te sientas limitado a todos los ejemplos que di. Puedes seguir tu propio camino con esto dependiendo de tu proyecto si quieres. Nuevamente, solo incluye todo más adelante, descubriremos qué es realmente relevante. También recomendaría revisar este material a medida que avanza y organizarlo en las carpetas. Esto refrescará tu memoria ya que potencialmente no has visto este proyecto en un tiempo. Una vez que hayas poblado estas carpetas con todas las cosas de tu proyecto, pasaremos a la siguiente lección, que es esbozar tu estudio de caso usando estructuras de historias. [ MÚSICA] 5. Describe tu estructura de historia: [ MÚSICA] Muy rápido antes de que saltemos a escribir nuestros contornos, quiero compartir contigo el error número uno que veo a tanta gente cometiendo cuando estoy revisando carteras y se trata de trabajo de procesos . Sí, debes enfocarte en parte del trabajo de proceso que hiciste pero eso no significa definir cada paso del proceso de UX. Creo que muchos de los estudios de caso que he leído de los diseñadores junior, esbozan un proceso de UX idílico muy genérico, solo despojando definiciones de diferentes ejercicios. Por ejemplo, algo como el siguiente creé una persona de usuario. Una persona de usuario es un arquetípico vamos a usuario cuyos objetivos y características representan las necesidades de un grupo más grande de usuarios y luego incluyen una instantánea de su persona de usuario. Esto no da ninguna visión de cómo realmente llegaste a donde lo hiciste. Directivos de contratación y compañeros diseñadores ya saben lo es una persona y clientes potenciales que podrían estar mirando su caso de estudio. No se preocupe por su definición exacta. Estas personas quieren saber por qué determinaste que personas de usuario eran importantes para hacer como parte de este proyecto, cómo se te ocurrió la información su interior y lo más importante, qué ayudó descubres o decides. Piensa cuál fue el valor en ese paso y si no es una parte importante de la historia, solo omita. Sigo siendo traído de vuelta a este punto realmente importante de contar una historia con tu estudio de caso. Al igual que cualquier historia, ninguna estructura va a ser exactamente la misma pero podría ayudarte a pensarlo así. El enunciado del problema es tu incidente incitante, el resultado final es tu resolución, y en el medio tendrás un clímax de algún tipo que es el descubrimiento o acción más importante que condujo al resultado final y espolvoreado en alrededor que tendrás alguna otra información que enriquece la historia y pinta el cuadro. Ahora vamos a pasar por un ejemplo con el proyecto en el que estoy trabajando. Por cada historia primero hay que establecer la escena. Para mí, creo que es importante establecer el escenario de quién fue el equipo y cuáles fueron nuestros roles. Ahora el incidente incitante o el problema u oportunidad para la acción creciente, quiero incluir mis metas así, cómo sería el éxito, y luego algunos wireframes, estilos estadounidenses, característica priorización, flujos de usuario e iteraciones de diseño. Todo esto lleva al clímax que para esta historia es el lanzamiento de nuestro MVP o producto mínimo viable a nuestros usuarios beta. Después, para la siguiente acción, incluiré los datos que fueron recopilados y las ideas recogidas del lanzamiento. Para la resolución, voy a incluir las métricas de éxito final. Esta es mi estructura de la historia pero recuerda que hay diferentes tipos de estudios de caso. ¿ Y si el tuyo no es un proyecto de base sino una de las otras cuatro categorías? Tomemos un minuto para ilustrar las estructuras potenciales de la historia para las otras cuatro categorías que esbozamos en menos de tres, empezando por la mejora. Un estudio de caso de mejora podría verse algo así. Tenemos la declaración de oportunidad problemática como el incidente incitante, entonces tenemos alguna investigación que nos lleva a presentar priorización que es el incidente incitante. Averiguando en qué vamos a estar trabajando. Podríamos encontrarnos con algunos retos, por lo que eso sería algo que delinear a continuación. medida que estás trabajando a través de esos desafíos, probablemente estés trabajando en diseños e iteraciones conducen al clímax que es un lanzamiento de características. Lanzando lo que pensamos va a mejorar el producto y después de eso, como conclusión, por supuesto, hablaremos de si en realidad sí mejoró el producto. ¿ Cuáles fueron los resultados o las métricas de éxito de este proyecto? A continuación se reimagina. Nuevamente, comenzaremos con la declaración de problema u oportunidad. A continuación, podríamos incluir contenido sobre analizar las soluciones actuales que ya están ahí afuera porque si estamos re-imaginando algo, más probable es que haya algún análisis competitivo que lo hemos hecho a lo largo de este proyecto. A continuación, podrías esbozar los impulsores clave o en base a la investigación que hiciste, ¿qué quieres que tenga la nueva solución? Antes de esta nueva solución, podrías delinear la investigación, tu estrategia incluye algunos wireframes y diseños. El clímax aquí por supuesto, es la nueva solución propuesta. Entonces tal vez quieras mostrar las reacciones que la gente tuvo ante esta nueva solución o resultados de prueba que obtuviste de ella. Por último, dado que esto es simplemente re-imaginarse y es sólo una solución propuesta, podrías terminar con los siguientes pasos, tomas o un resumen ya que esto probablemente no sea el final del camino para este proyecto. A continuación es visionario y de nuevo, probablemente estés harto de escuchar esto pero siempre empezamos con el problema u oportunidad. A continuación, dado que se trata más de un proyecto conceptual, posible que desee exponer su hipótesis para hablar de qué beneficios se imagina podría venir de una solución como esta. Entonces, empieza a entrar en tu investigación, diferentes iteraciones, tal vez algunos desafíos a los que te enfrentas, todos previos a esta solución potencial. A continuación, al igual que la última se puede hablar de algunas de las reacciones que la gente tuvo a esta solución potencial si pudieras mostrársela a cualquier usuario o negocio potenciales y terminarlo con cualesquiera que sean los próximos pasos pudieran venir de esto. Por último, la combinación. Aquí, vas a empezar con un problema o una pregunta. Podrías exponer tu tesis o proposición y la mayor parte de este estudio de caso va a ser evidencia y ejemplos. El clímax aquí es qué acción debe tomar el lector y después de eso para terminar se puede realmente simplemente resumir estos hallazgos que compartió. Ahora es tu turno. Adelante y esboza una estructura de historia basada en todo lo que has aprendido aquí. Puede ser uno que ya compartí o podrías usar algo que sea un poco diferente dependiendo de tu proyecto y llénalo con estos puntos de historia, pensando en cómo la historia de tu proyecto desplegado. ¿ Cómo llegaste del problema a la solución? Siéntase libre de tomar una foto o una captura de pantalla de esto y compartirla a continuación en la sección de discusión. Me encantaría verlo y sé que otros estudiantes se beneficiarían de ver un montón de ejemplos diferentes. En la siguiente lección, vamos a usar este pequeño boceto de estructura de la historia para crear nuestro esquema y luego en realidad empezar a escribir la copia que va a componer tu caso de estudio. [ MÚSICA] 6. Escribe el contenido: Ahora, es el momento de realmente romperse en este estudio de caso. Si eres algo como yo, escribir el contenido es con mucho la parte más desalentadora. Pero no te preocupes, vamos a descomponer esto en trozos digeribles. Una vez que hayas terminado con esta parte, el resto del proceso se va a desplegar de manera muy natural. Me gusta empezar abriendo un nuevo Google Doc. Ya que odio comenzar con una página en blanco, crearé un esquema de viñeta basado en la estructura de la historia que ya creamos. Empecemos a escribir eso. Estamos empezando con alguna información de fondo. Aquí incluirá el cuándo, el quién, y un poco más de información sobre mi rol. A continuación está la declaración del problema. Aquí tendré la declaración real del problema u oportunidad. Entonces creo que aquí quiero tener algunas visuales de esa oportunidad, y esto tendrá más sentido a medida que conozcas un poco mi proyecto, ya que trabajamos en esto. A continuación, llamo a esta sección el camino a MVP. Objetivos o cómo sería el éxito, priorización de funciones, incluiremos wireframes, estilos de interfaz de usuario, flujos de usuario, iteraciones de diseño, y aquí creo que quiero mostrar cada característica o flujo. Poner visuales. A continuación está el lanzamiento, para que ese clímax. Hablar de lanzar MVP a nuestros usuarios Beta. Podría empezar a hablar de marketing, así que cómo conseguimos a los usuarios Beta. Después de ese lanzamiento inicial, hablaré de desafíos y mejoras, por lo que algunos datos recopilados y insights que recopilamos, más priorización de funciones, y más iteraciones. Por último, la resolución va a ser algunas métricas de éxito, cualquier toma de decisiones, y aprendizajes. Ahora que tenemos este esqueleto con el que trabajar, podemos tomar el próximo par de horas, tal vez mucho más rápido si eres un escritor rápido, y empezar a agregar alguna explicación a cada uno de estos viñetas. Voy a hacer eso ahora y volver a hablar de cómo me acerqué. Voy a pasar por esto a un alto nivel, pero por supuesto, puedes echar un vistazo al estudio de caso real en vivo si quieres leer cada palabra. Primero, pasemos por la información de fondo. Decidí que quería incluir la línea de tiempo, los miembros del equipo, y luego un poco más en mi papel ya que mi papel no era solo en el diseño de productos, sino que en realidad hice muchas otras cosas también. Quería asegurarme de que eso fuera claro. Entonces me tomé algún tiempo para escribir mi declaración de problemas. Esto en realidad me llevó un tiempo. Lo leeré para ustedes ya que esta es una de las partes más importantes del estudio de caso. Tanto de lo jugoso de lo social sucede en la sección de comentarios. Dado que social se está moviendo cada vez más hacia el contenido de video de forma corta, ¿por qué no debería comentar seguir ejemplo? Notamos que esto en realidad ya está sucediendo, pero no hay grandes herramientas o plataformas por ahí que lo incentiven. Este contenido de comentario que podría ser tan rico, divertido, informativo, o perspicaz, simplemente se siente aficionado. Para que el problema. Hice una nota aquí que quiero incluir un visual del efecto de pantalla verde en TikTok porque eso un ejemplo de cómo esto ya está sucediendo, pero se ve y se siente realmente aficionado porque hay no es mucho lo que ayude a la gente a hacer esto. Ese efecto de pantalla verde es bueno, pero es super glitchy y simplemente no se ve muy profesional. Entonces nos metemos en la oportunidad. Aprovechamos esta oportunidad para construir Bubble; la aplicación de comentarios de video social que permite los usuarios agarrar cualquier contenido de la web, grabar un breve comentario de video encima de ella, y obtener reacciones de su amigos. Todo eso es mi declaración de problema y oportunidad. Entonces tengo esto que pone un poco la escena, pero para ser honesto, no estoy totalmente seguro si voy a usar esto o no. Podría ser exagerado. Entonces si te das cuenta aquí, no voy a nombrar a estas secciones titulares del proceso UX. Les estoy nombrando algo más específico para el proyecto. Este rubro principal se va a llamar Camino a MVP. Esbozo los objetivos, y por esos objetivos, qué características terminamos queriendo priorizar. Cada vez que tengo viñetas aquí en el contorno, esos realmente van a ser viñetas en el estudio de caso. No todo tiene que ser escrito en formato de párrafo. Los puntos de bala son una muy buena manera de cruzar tu punto sin obligar a alguien a leer tanto. Tengo más notas aquí sobre lo que quiero incluir. Después de la priorización de funciones, tal vez quiera mostrar un flujo animado para cada una de estas características. Quizás wireframes o un boceto de mapa de viaje para cada uno también, luego iteraciones de la interfaz de usuario. Quiero escoger una de las pantallas y mostrar cómo evolucionó la interfaz de usuario desde la primera iteración hasta la final. Quizás esbozar algunas cosas que entraron en ese proceso como, no nos gustó esto por XYZ, esto no funcionó bien con los usuarios por XYZ, y mostrar cómo llegamos de la A a la Z. A continuación, voy a mostrar un poco sobre el sistema de diseño. Esto no es 100 por ciento necesario, pero como dije, también hice otras cosas que solo diseño de producto. trabajé mucho en el branding, así que pensé que sería bueno demostrarlo aquí. Quiero esbozar algunos retos y compromisos que tuvimos que hacer. Porque cuando se trata de un MVP, es solo que el producto mínimo viable. Solo quiero mostrar algunos de los compromisos que tuvimos que hacer. Entonces hablaré del lanzamiento Beta, lanzando el MVP, y cómo conseguimos a esos usuarios Beta, un poco de marketing ya que tuve algún trabajo de diseño de marketing que entró en este proyecto. Después de eso, ¿qué ideas y mejoras salieron de eso? Datos que recopilamos, y específicamente donde voy a obtener esos datos, algo así como informes de errores que tenemos, retroalimentación de aplicaciones dentro de la app Bubble. Más priorización de funciones, y notas aquí que puedes leer sobre lo queremos mejorar después de recibir retroalimentación. Por último, el lanzamiento público. ¿ Cuáles fueron los resultados de eso? Tenemos todos estos resultados que tengo y cualquier toma en el aprendizaje. A lo mejor no tienes todos estos datos, eso está totalmente bien. Simplemente puedes mostrar tal vez una cotización de lo que alguien dijo cuando interactuaron con esto que demostró que podría ser una buena solución potencial. Cotizaciones positivas, negativas, cosas así. También podrías simplemente compartir tus tomas y aprendizajes del proyecto, sobre todo si se trata de un proyecto escolar o uno de tus primeros proyectos, o un proyecto desde bootcamp. No todo va a tener todos estos datos, y eso está totalmente bien. Por ejemplo, algunos de los aprendizajes más personales que quería compartir, estoy incluyendo al final. Trabajar rápido y obtener retroalimentación temprano fue algo que realmente saqué de este proyecto. Es algo en lo que no era muy bueno antes empezar el proyecto y acabo aprender lo importante que es y me puse mucho mejor en ello a lo largo de este trabajo. Ahora, quiero compartir algunos consejos generales para escribir este tipo de contenidos. Primero, gravamen en encabezados y subtítulos. Esto realmente ayudará a lograr un equilibrio entre la profundidad, y de un vistazo la digestibilidad. Tener un estudio de caso desnatable es realmente importante, especialmente para contratar gerentes. Intenta escribir como si estuvieras contándole a un compañero amigo diseñador sobre este proyecto. No te quedarías atascado en las malas hierbas con los detalles, pero destacarías las cosas más importantes o interesantes. No definas el proceso UX, hables de lo que realmente hiciste y cuentes esa historia. Manténgalo breve. No tendría más de tres frases por párrafo. Si una sección se está alargando, piense en a, cortando cualquier pelusa innecesaria o b, dividiéndola en dos secciones que cada una tiene un punto principal. Vuelve a la cuarta lección si necesitas un repaso sobre los imprescindibles frente a los bonitos que tienen. Por último, no escribas lo que podrías mostrar con visuales. Mientras estás escribiendo, solo haz una nota de qué visuales vas a mostrar dónde. Por lo general, pongo estas notas en cursiva entre paréntesis para que se destaquen entre paréntesis para que se destaquen contra del contenido escrito. Por último, siéntete libre de echar un vistazo a los ejemplos en mi mini base de datos si te quedas atascado. Pero tampoco te paralicen la trampa de comparación. El proyecto de todos es tan diferente, así que intenta ir con tu arma. El paso de acción para esta lección es el más duro, pero puedes hacerlo. Ve a escribir ese contenido y te prometo si le pones algo de pensamiento, el resto de este proceso será una navegación suave. Como siempre, siéntete libre de hacer preguntas abajo en la sección de discusión, y estaría encantado de ayudar si puedo. En la siguiente lección, vamos a abrir Adobe XD o su herramienta de diseño de elección, y que su archivo esté listo para funcionar. Vuelve y te veré en esa lección cuando estés listo para ello. [ MÚSICA] 7. Configurar tu archivo XD: A la hora de configurar tu archivo, tienes dos opciones. Ahora es el momento de decidir si quieres optimizar tu caso de estudio para Behance o tu sitio personal. Te voy a mostrar rápidamente cómo hacer ambas cosas. Pero, ¿cuáles son los pros y los contras de cada uno? En mi opinión, no puedes equivocarte con Behance, sobre todo si buscas nuevas oportunidades o estás interesado en conseguir tu trabajo por ahí frente a otros diseñadores, Behance es un gran lugar para eso. Debido a que he sido destacado en Behance, en realidad consigo muchas consultas de trabajo en mis DMs de Behance. Dicho esto cuando se trata de Behance, definitivamente hay mucha menos flexibilidad en cuanto a diseñar tu contenido, específicamente tu texto. Por eso tomo el enfoque de diseño que hago al diseñar todo el texto en Adobe XD y exportarlos como PNGs. Sin embargo, con este enfoque, no se puede optimizar para otros puntos de interrupción, específicamente móviles, por lo que normalmente trato de mantener el texto bastante grande. Eso me lleva a los pros de optimizar para su sitio personal, como en Webflow, Squarespace, o donde sea que aloja y construya su sitio web. Si vas con eso, puedes tratar esto como más de un proyecto de diseño de página web real porque en realidad tienes control sobre el diseño exacto y cómo se escala en diferentes puntos de interrupción. El otro pro a esto es tener tu propio pequeño espacio en Internet por lo general te hace parecer un poco más profesional y tienes un control completo sobre lo que el usuario ve como está viendo su estudio de caso. Esos son los pros y los contras en mi opinión, pero ¿por qué no puedes tener lo mejor de ambos mundos? En realidad hay un par de formas de hacerlo. Número 1, tener tu propia página web personal y en la sección de trabajo, crea miniaturas para cada pieza de trabajo que enlazen con el proyecto correspondiente de Behance. Esto es lo que hago ahora. Tenga en cuenta que tengo el proyecto Behance abierto en una nueva pestaña para que nunca se les quite a los usuarios de mi sitio. Número 2, tenga su trabajo optimizado para Behance en Behance, pero luego también tenga una versión en su portafolio personal. Dependiendo de cuántos estudios de caso tengas y cuán profundos sean, esto podría ser realmente lento. Es algo que personalmente he querido hacer desde hace mucho tiempo, pero simplemente no he hecho tiempo para todavía. La buena noticia sin embargo, es que si decides comenzar con Behance, siempre puedes usar el diseño Behance que creas y volver a él más tarde para construirlo en Webflow o Squarespace. No tienes que diseñar diseños completamente diferentes. Con todo eso dicho, la única diferencia en cómo configurarías tu tablero de arte para cada acercamiento es la altura de tus tableros de arte. Si decides que quieres optimizar para Behance, vas a querer crear una pila vertical tableros de arte que tengan 1920 píxeles de ancho por 1080 píxeles de alto. Mantén siempre el ancho igual, pero puedes variar un poco la altura y no importará. Después a un lado, crea otro tablero de arte que sea 808 por 632 pixeles. Esto será para tu miniatura. Si estás mezclando Behance completo y solo quieres usar XD para diseñar el diseño de la página que vas a construir en tu creador de sitios web. Simplemente diseñarás en un solo tablero de arte de 1920 píxeles de ancho que terminará siendo todo el tiempo que quieras. Entonces también recomendaría crear un tablero de arte largo con un ancho compatible con dispositivos móviles. Yo uso 375 pixeles ya que ese es el ancho más pequeño del teléfono común. Ten en cuenta que construir una página web en Webflow o Squarespace no forma parte de esta clase. [ MÚSICA] Si aún no tienes experiencia haciendo eso o no tienes un portafolio personal en este momento, entonces te recomendaría simplemente quedarte con Behance por el momento. Eso es todo para la configuración, bastante fácil. A continuación completaremos tu panel de activos de diseño y tu archivo XD con todos los estilos que vas a necesitar para tu caso práctico. 8. Define tus estilos: Ahora que tenemos nuestro archivo XD todo configurado, hagamos las cosas fáciles en nosotros mismos y llenemos nuestro panel de activos con todos los estilos que vamos a necesitar en el futuro. Esto es súper fácil porque es probable que quieras usar los mismos estilos que utilizaste en el propio proyecto. Esto podría ser tan sencillo como desnatar a través tus bibliotecas XD y tirar de la que usas para tu proyecto. Si no lo has hecho o no estás familiarizado con cómo funcionan las bibliotecas en XD, es realmente simple. Vamos a pasar por eso ahora. Hay tres cosas que guarda una biblioteca, colores, estilos de tipo, y componentes. Para un estudio de caso como este, los colores y estilos de tipo son definitivamente los más importantes. Dentro de este archivo de proyecto sólo voy a dirigir su atención a la izquierda donde tenemos nuestro panel de activos. Se puede ver que tenemos colores, estilos de carácter, y componentes. Los componentes son como símbolos, pero de nuevo sólo vamos a enfocarnos en colores y estilos de texto. La forma en que consigues que estos poblen aquí es súper simple. Digamos que eliminamos esto por ahora, este rojo, y va a decir que quiero agregarlo. Sólo estoy seleccionando un elemento que sea de ese color, y estoy subiendo aquí y haciendo clic en el botón más, y luego llamamos a este registro rojo. También puedes hacer lo mismo por los textiles. A lo mejor quiero un estilo para esta etiqueta, solo puedo golpear plus aquí. Pero y si quiero poder acceder a estos activos desde un archivo diferente como mi expediente de estudio de caso. Realmente se puede publicar fácilmente esto como una biblioteca. Vamos a llegar a este ícono de compartir. Me va a decir que este archivo actual está listo para ser publicado, así que sólo estoy golpeando Publish. Ahora si cambio a mi archivo de estudio de caso , puedo ir aquí, golpear Ver bibliotecas, y puedo encontrar esta biblioteca aquí mismo donde puedo tirar todos estos mismos estilos en. Si ni siquiera te apetece lidiar con eso, solo puedes copiar y pegar algunos elementos o pantallas de tu archivo y agarrar los colores y estilos de texto y agregarlos a una nueva biblioteca en este caso práctico archivo. Por supuesto que no te limitas a nada aquí. Probablemente voy a necesitar hacer muchos estilos de estos textos más grandes, porque antes estaba diseñando para una aplicación móvil, ahora voy a estar diseñando para un estudio de caso de Behance. También es posible que tengas que agregar más estilos de texto, e incluso puedes cambiar las cosas y usar una fuente completamente diferente. Puedes usar diferentes colores si quieres, depende totalmente de ti, pero es mucho más fácil, en mi opinión solo tener este lugar para empezar. También es importante tener en cuenta que puedes alternar de ida y vuelta entre tus bibliotecas y los activos documentales que tienes, por lo que estos activos que son específicos de este documento frente a tirar de un biblioteca diferente. En este punto, también puedes empezar a traer algunos iconos diferentes, o logotipos, o ilustraciones, si alguno de eso es relevante para tu proyecto. O bien puedes mantenerlos alejados a un costado o puedes golpear el comando K y en realidad convertirlos en componentes que van a vivir abajo en esta sección para ser tirado siempre que los necesites, y vamos a estar profundizando mucho en los visuales en la lección futura, así que si aún no tienes nada así, no te preocupes. Una vez que tengas algunos estilos listos en tu expediente de estudio de caso, siéntete libre de pasar a la siguiente lección donde voy a estar respondiendo una de las preguntas más comunes que obtengo sobre mi Behance estudios de casos. [ MÚSICA] 9. Consigue esa mirada perfecta: [ ANTECEDENTES] Quiero responder a una pregunta frecuente antes de sumergirnos en construir este estudio de caso, ¿cómo hago que mis estudios de caso parezcan un desplazamiento suave, página web sin fisuras, pesar de que están formados por un montón de tableros de arte diferentes separados y la respuesta es elementos superpuestos. Permítanme mostrarles algunos ejemplos. Este es uno de mis antiguos estudios de caso y quiero mostrarte justo cuántos elementos superpuestos utilizo para lograr este look. En primer lugar, hablaremos de los elementos de fondo. Si acabamos de mover este iPhone fuera del camino por ahora, se puede ver que el color de fondo de ambos de estos tableros de arte es este color gris beige. Lo que tengo encima es este tipo blanco de forma de onda. Lo que he hecho es que en realidad lo he duplicado en ambos tableros de arte así que si ves, si elimino esa, puedes ver que en realidad hay dos formas separadas. Si acabo de golpear “Comando C” y luego voy a este tablero de arte y golpear “Comando V” Se va a pegar por defecto en su lugar. Pero si solo lo escojo hasta que esté perfectamente en línea como esta y luego hago “Comando soporte izquierdo” hasta que vaya a la parte de atrás. Entonces he creado esta forma que continúa en dos tableros de arte diferentes. Eso es sólo el fondo. Hago esto en algunos lugares diferentes. Aquí, he usado esta forma de onda que es verde, en lugar de tener esta transición realmente aguda donde definitivamente se ve como dos tableros de arte separados, he venido con esta forma de onda verde para que sea especie de fluye un poco más suavemente en este contenido. Hago lo mismo aquí con esta forma, y lo hago con otros elementos también, por ejemplo, esta maqueta de iPhone, se puede ver que en realidad son dos imágenes diferentes. Lo he duplicado en este tablero de arte y luego simplemente lo vuelvo a levantar para que se alinee perfectamente y parezca una perfecta continuación del elemento visual. He hecho lo mismo con esta imagen. Aquí abajo lo he hecho con esta maqueta. La gente se tropeza con esto porque tableros de arte actúan como máscaras. No puedes simplemente lanzar un elemento entre dos tableros de arte y obtener el efecto exacto que deseas. En cambio hay que copiarlo manualmente, pegarlo y alinearlo. Que se duplique en un tablero de arte y el otro. Es súper fácil aunque solo acerque todo el camino y comprueba que la continuación sea una combinación perfecta. Probablemente hace falta decir que tienes que tener tus tableros de arte exactamente alineados como a tope entre sí para que esto funcione. Eso es todo. Es un consejo simple, pero va un largo camino en darte la capacidad de hacer que tu proyecto Behance desplace sin problemas como un sitio web y súper flexible con cómo quieres que se vea. Prueba esto con un par de diferentes formas o máscaras o fotos y mira si puedes jugar con cómo funciona esto, entonces estarás listo para aplicar la técnica cuando realmente iniciemos construyendo su caso [ANTECEDENTES] [MÚSICA] estudiar en la siguiente lección [MÚSICA]. 10. ¡Construye ese estudio de caso!: Ahora que tienes todas las partes necesarias para crear este caso de estudio, realmente es el momento de empezar a desconcertarlas. Adelante y abre todo lo que tienes. Deberías tener el archivo de diseño vacío que acabas de configurar para tu caso práctico, cualquier archivo de diseño de tu propio proyecto, tu esquema escrito, y tu carpeta llena de notas de proyecto y trabajo en curso y cosas así. Lo primero que me gusta hacer es crear la imagen de cabecera que dará inicio a mi caso de estudio. Esto puede ser en cualquier estilo que te guste. Junto a lo más importante que es un visual fuerte en esta sección de encabezado, también me gusta incluir el título de mi proyecto, una descripción unifilar, y un poco de información de fondo para el contexto inmediato. Entonces apenas empiezo a moverme por las diferentes secciones de mi contorno y copiando y pegando la copia en mi expediente de estudio de caso, colocándola en el tablero de arte, y todo el tiempo pensando en lo que puedo mostrar versus solo decir. Por ejemplo, en mi declaración de problemas recuerdas que hice referencia al efecto de pantalla verde en Tiktok. Voy a mostrar una captura de pantalla real, tal vez incluso un GIF de eso. Hay un visual emparejado con verbal que realmente saca el punto a través de esto es lo que está sucediendo ahora y hay esta oportunidad para una mejor solución. [ MÚSICA] Una vez que he presentado dos o tres secciones, me gusta asegurarme de que estén fluyendo muy bien juntos y tengan alguna variación visual. A veces hago esto con colores de fondo, a veces con formas, imágenes, cosas así. Una vez que haga esto puedo repetir ese patrón a lo largo del resto del estudio de caso usando estilos consistentes de encabezado y texto corporal. [ MÚSICA] Al igual que cualquier otra cosa en diseño, no hay una fórmula exacta a este proceso por lo que lo mejor que puedo hacer es simplemente mostrarte cómo me acerco a ella y apuntarte a algún otro gran ejemplos en esa base de datos que mencioné en la sección de recursos. Pero con todo eso dicho, sí quiero caminar por un montón de formas diferentes en que se pudiera presentar información visualmente. Eso es lo que vamos a hacer en la próxima lección. 11. Información presente visualmente: A lo largo de su caso de estudio, van a haber varias oportunidades diferentes para que usted presente información visualmente. Esto va a ayudar a que el estudio de caso sea mucho más digerible, menos pesado con texto. Hay ocho formas principales por las que vamos a recorrer; datos, iconografía, gráficos, destacados, viñetas, cotizaciones, imágenes y maquetas. A medida que vamos, te voy a estar mostrando muchos ejemplos de otros casos prácticos así que si quieres mirar estos en su totalidad, solo echa un vistazo a la mini-base de datos enlazada en el recurso sección. En primer lugar, hablemos de datos. En cualquier momento que estés hablando de métricas o investigaciones, considera presentarlo con un gráfico de barras, un gráfico circular, o algo más en visual que los espectadores puedan entender de un vistazo. Iconografía, cuando tienes una sección con más de dos o tres puntos diferentes, mira si puedes usar una serie de iconos para introducir o representar cada uno. Gráficas. Visuales no solo tiene que significar imágenes, formas o iconos. La forma en que diseñas texto también puede realmente ayudar a que una sección sea más fácil de leer y entender. Ve si hay alguna sección de tu estudio de caso donde puedas organizar ideas y texto visualmente. Destacados, al igual que usar un estilo de texto más grande para tus encabezados, resaltar puntos importantes es otra gran manera de hacer que tu estudio de caso sea más digerible y desnatable. Bullet points, intente evitar largos párrafos de textos porque no son fácilmente escaneables. Usa viñetas siempre que puedas en su lugar. Cotizaciones, si tienes una cotización que fue realmente informativa durante tu investigación o una que muestre el impacto de tu solución. Podrías amplificarlo diseñándolo para que destaque en tu caso de estudio. Imagery, personalmente me gusta usar imágenes para mantener mi estudio de caso atractivo. Este tipo de visual realmente no hace ni rompe tu estudio de caso. De hecho, si usas demasiado, realidad puede distraer de tus puntos principales, así que asegúrate de que cualquier imagen que uses sea relevante. Normalmente trato de fotografiar imágenes yo mismo, pero cuando no puedo, confío en Unsplash. Tienen muchas opciones realmente de alta calidad que son libres de regalías. Por último, maquetas. maquetas son una pieza realmente importante de la mayoría de los casos prácticos, así que asegúrate de que estás usando o creando maquetas de alta calidad. He incluido algunos de mis favoritos en la sección de recursos de esta clase. Siéntase libre de mantenerlos simples o realmente hacerlos suyos como este ejemplo. Algunos de estos pueden no ser relevantes para tu estudio de caso y eso está totalmente bien. Lo peor que puedes hacer es incluir todo y exagerar tu caso de estudio haciéndolo realmente confuso y diluyendo tu mensaje. Entonces, en caso de duda, manténgalo conciso. Antes de pasar a la siguiente lección, aquí tienes tu paso de acción. Diseña cada sección siguiendo tu estudio de caso escrito. Esto podría sonar intimidante, pero todo lo que realmente estás haciendo es combinar la parte escrita de tu caso de estudio con cualquier visual o visual que tenga sentido. Ya has hecho todo el arduo trabajo de contar la historia. Siéntase libre de dejar en blanco o crear formas de placeholder para cualquier área donde desee incluir animaciones. [ MÚSICA] Vamos a abordar eso en la siguiente lección. 12. Crea un GIF animado: Amigos nos estamos acercando realmente a terminar estos estudios de caso. En esta lección, te voy a guiar a través de cómo crear un GIF animado para incluir en tus estudios de caso, sin importar dónde termines publicando. Para mi estudio de caso de burbuja, en realidad no hay mucha animación involucrada en el proyecto. Para mostrarles esto chicos, he saltado a uno de mis proyectos anteriores y estudios de caso llamado fase. Eso es lo que estamos viendo aquí. Si te desplazas hacia abajo, puedes ver que he diseñado esto igual que he diseñado mi estudio de caso burbujeado. Tablas de trabajo apiladas verticales como esta que todas tienen el mismo ancho. Quiero mostrarte lo que hago cuando decido que quiero tener una animación dentro de una de estas secciones. Para esta sección, quería mostrar cómo se vería cuando alguien arrastraba en esta escala y seleccionaba un número. He creado una animación con solo duplicar esta mesa de trabajo dos veces aquí y manipular el diseño. Cada cosa permanece igual a excepción de estos pocos elementos. [ RUIDO] Esto, acabo de mudarme a los siete, y esta línea que acabo arrastrar para que sea lo suficientemente larga como para llegar a eso. Entonces acabo de duplicar esta sección en esta próxima mesa de trabajo y hice lo mismo, trasladé este selector a los ocho, y luego lo he cableado en modo prototipo. Si entramos en modo prototipo, he hecho un gatillo de tiempo y lo puse en un bucle. Después de 0.5 segundos, se animará automáticamente a esta pantalla. He hecho flexibilización, facilidad y salida, y luego acabo de hacer lo mismo aquí después de 0.7 segundos, y luego después de 0.7 segundos más, va a volver al principio. Si no estás súper familiarizado con animar y usar auto animate en XD, sí tengo algunos tutoriales en mi canal de YouTube que puedes usar como recursos para ponerse al día ahí. Así es como se ve esto aquí, esto es lo que estás viendo aquí, es básicamente solo una animación en bucle que muestra un poco de movimiento aquí, eso solo lo hace un poco más visualmente interesante. Ahora, para capturar esto como un video, lo que [RUIDO] queremos hacer es volver a subir a reproducir este prototipo y sólo vamos a golpear récord. Quiero asegurarme de que mi mouse esté completamente fuera del camino, mi cursor, y voy a dejar que esto reproduzca a través del bucle un par de veces para asegurarnos que tengamos al menos uno realmente bueno lleno de la animación en este video. Entonces, dejaré de grabar y voy a guardar este MP4. Tenemos esta animación aquí, y la voy a abrir en QuickTime Player para que podamos recortar esto a un ciclo completo. En QuickTime, solo voy a golpear el Comando T para recortar, y sólo voy a encontrar un bucle perfecto [MÚSICA]. Justo ahí, se ve bien y luego voy a hacer el comando S para salvar. [ RUIDO] Sólo voy a llamar a esto recortado, y podemos deshacernos de esa más larga allí. Ahora, una aplicación realmente fácil que he aprendido a usar para convertir un MP4 en un GIF se llama gifski. Lo puedes encontrar en la App Store. Se ve así en la tienda de aplicaciones en Mac, también hay una herramienta llamada GiftUna que puedes usar si estás usando un PC con Windows, que creo que es lo mismo. Vamos a abrir eso, [RUIDO] y sólo se ve así, esta linda ventanita cuando lo abres, y sólo voy a arrastrar este MP4 a la derecha a esa ventana. El único ajuste que queremos cambiar es el ancho, vamos a hacer la década de 1920, ya que ese es el ancho del resto de nuestras mesas de trabajo. Queremos asegurarnos de que el bucle para siempre esté encendido. Tenemos la calidad todo el camino hacia arriba y el tamaño estimado es de solo 1.9 megabytes. Esto usualmente forma sobreestima el tamaño, te mostraré lo que en realidad termina siendo. Voy a notar si tienes una animación mucho más larga, es posible que tengas que rebajar un poco la calidad, pero en mi experiencia, nunca ha hecho una diferencia enorme, enorme. Siempre se ve realmente de alta calidad, por lo que realmente me encanta esta herramienta y es gratis si no lo mencioné ya. Voy a golpear a Convert. Eso tomó menos de 20 segundos, así que ahora sólo vamos a hacer Guardar como, y lo guardaremos en nuestro escritorio. Ahora, sólo voy a seleccionar en él y golpear la Barra Espaciadora para previsualizar cómo va a verse esto. Como se puede ver, es de súper alta calidad, la velocidad es agradable, no es salteado ni laggy en absoluto, todos los colores se ven súper precisos. Si te gusta cómo se ve esto, sigue adelante y repite el proceso para cualquier otra animaciones que quieras incluir en tu caso práctico y pon todos tus archivos GIF en la carpeta Behance que tú hecho al inicio de la clase. Usualmente nombro estos archivos con números basados en el orden en que aparecerán las mesas de trabajo, en tu caso de estudio. Puedes mezclar este GIF con toda tu P, y Gs que estarás exportando en la siguiente lección. Conoces tu paso de acción para esta lección, sigue adelante y crea tus gifs y colócalos en la carpeta organizada como quieras. En la siguiente lección, vamos a estar exportando el resto de tu estudio de caso y realmente subirlo a Behance. [ MÚSICA] 13. Exportar y subir: [ MÚSICA] En primer lugar, sí, lo hiciste. Su caso de estudio por fin ha terminado, felicitaciones. Ahora todo lo que necesitas hacer es prepararlo para publicar. Dependiendo del enfoque que estés tomando, vas a avanzar en una de las dos direcciones. Si realmente estás construyendo este estudio de caso en Squarespace o Webflow, entonces no vas a exportar realmente estos tableros de arte. En este caso, solo vas a querer exportar los activos visuales individuales, como tus imágenes, formas, maquetas. Simplemente puedes guardar todos esos elementos en una carpeta y luego cuando vayas a construir tu página, entonces solo puedes traerlos. No obstante, creo que la mayoría de ustedes han optimizado para Behance. Si ese es el caso, en realidad puedes arrastrar, seleccionar cada tablero de arte, pulsar “Comando E” para exportar y exportar estos SPNGs a la carpeta Behance que creaste anteriormente. Nuevamente, si quieres mantenerte organizado, por lo general me gusta nombrar estos tableros de arte en orden ascendente, empezando por la parte superior, en una, luego 2, 3, 4, etcétera para que puedan mantenerse organizados en tu Carpeta Behance. A continuación, sumérgete a tu cuenta de Behance y pulsa “Comparte tu trabajo”. Esto abrirá un nuevo proyecto. Una nota aquí, vas a ver prototipo como una opción para importar desde XD o Figma y puedes sentirte absolutamente libre de hacer esto. No obstante, a veces un prototipo sin contexto realmente no hace mucho por tu espectador. Recuerda que todo el punto de tu caso de estudio es contar la historia de cómo has resuelto este problema. Antes de ir agregando un prototipo, pregúntate dónde o si este prototipo encaja en tu historia. Siguiente pulsa “Imagen”, navega a tu carpeta Behance y selecciona todos los PNGs y GIFs que quieras subir. Una vez que estas cargas, notarás que hay algún espacio predeterminado entre ellos. Para eliminar ese golpe “Estilos” en el lado derecho y cambiarlo de 60 pixeles a cero luego pulsa “Guardar”. Asegúrate de que tus imágenes estén en el orden correcto. Si necesita editar el pedido en absoluto, cursor sobre una imagen, haga clic en ese icono de edición azul y seleccione reordenar proyecto. Desde aquí se puede cambiar y guardar el nuevo pedido. Una cosa a tener en cuenta, si estás usando GIFs con colores de fondo que no son blancos, puedes notar algo un poco funky. Debido a que tu GIF puede ser una imagen de calidad diferente a tus PNGs, el color puede haber cambiado un poco en el proceso. Si este es el caso no te preocupes, es una solución súper fácil. Vuelve a XD y selecciona todos los tableros de arte estático que tengan ese mismo color de fondo. Entra en la herramienta cuentagotas y muestra el color de fondo GIF exportado. En XD se verá como dos colores de fondo diferentes, pero una vez que estén todos en Behance, serán perfectamente consistentes. El ítem de acción para esta lección es simple. Simplemente sigue esos pasos que hice para subir todo a un proyecto de Behance y en la siguiente lección agregaremos los toques finales, como tu miniatura, título del proyecto, descripción y cualquier etiqueta. Nos vemos pronto. 14. ¡Termina y Finish: Aquí vienen los toques finales. Has subido todas tus imágenes en tu proyecto de Behance, y ojalá te hayas desnatado para asegurarte de que no haya errores tipográficos o cosas extrañas y funky sucediendo. Ahora es casi el momento de golpear “Publicar”, entrar en configuraciones y subir una miniatura del proyecto. Al inicio de la clase te hice montar un tablero de arte para esto, pero si aún no lo has diseñado, no te preocupo, te voy a dar un par de consejos. Número 1, no uses demasiado texto pero síincluyas una descripción realmente corta para que alguien sepa qué esperar al hacer incluyas una descripción realmente corta para que alguien clic en esto, cuentan con maquetas relevantes para que los espectadores sepan cuentan con maquetas relevantes para que los espectadores cuál es el real salida del proyecto fue. Elige la pantalla más interesante para exhibir en tu maqueta. Personalmente, me gusta tomar mi diseño de cabecera y simplemente adaptarlo para esta miniatura que terminen buscando súper similares. A continuación, dale un título a tu proyecto. El título no importa demasiado si solo estás usando esto como cartera, pero si estás tratando de obtener toneladas de uso en la plataforma, intenta nombrarlo algo que la gente pueda buscar. llamaron los dos proyectos que me destacaron, Smart Difusor App y Cycle Syncing App. Pero para ser honesto, mis títulos podrían no haber tenido nada que ver con ser destacado. ¿Quién sabe? A continuación, agrega algunas etiquetas. Esta es otra oportunidad para pensar términos de búsqueda relevantes para tu proyecto. Usualmente empiezo con UI, UX, diseño de productos, y luego me vuelvo más específico, como la automatización de aplicaciones móviles de tecnología futura, diseño de aplicaciones y cosas por el estilo, luego llene las herramientas que usaste en el categorías en las que cae tu proyecto. Por último, agregarás la descripción usualmente copio y pego una de las primeras secciones de mi caso de estudio para este párrafo que introduce muy bien el proyecto y eso es todo. Revisar todo una vez más y luego golpear, “Publicar”. Ser destacado en Behance no debería ser tu objetivo porque para ser honesto, tienes muy poco control sobre eso. No obstante, es posible que quieras saber que tu proyecto solo es enviado al equipo de curación de Behance una vez en tu primera publicación. Así que no solo subas la mitad de tu caso práctico y luego regreses y terminarlo más tarde, solo publica una vez que hayas terminado por completo. Ya conoces tu paso de acción aquí, llena todos los campos para este proyecto de Behance y pulsa “Publicar”. En serio, ustedes deberían estar realmente orgullosos de sí mismos por llegar tan lejos. Esto es mucho trabajo. Realmente espero que compartan el enlace conmigo en la sección de discusión a continuación. Me encantaría ver lo que ustedes crearon y sé que otros estudiantes de la clase realmente se beneficiarían de ver estos como inspiración. [ MÚSICA] 15. Conclusión: Primero quiero decir un enorme enhorramiento por terminar esta clase. Estás un gran paso más cerca de aterrizar ese próximo trabajo, ganar más credibilidad como diseñador e inspirar a la comunidad creativa. Sinceramente me divertí tanto llevándote chicos por el proceso de escribir, diseñar y publicar tus estudios de caso en profundidad. No olvides subir tus proyectos a continuación en la sección de comunidad de clases, realmente quiero ver en qué trabajaste. Puedes siéntete libre de publicar el enlace a tu proyecto o subir algunos de tus tableros de arte favoritos o todos tus tableros de arte, depende totalmente de ti. Si te gustó este estilo de enseñanza, siéntete libre de echar un vistazo a mi otra clase aquí en Skillshare. Se llama Intro to UI UX para diseñadores gráficos así como mi canal de YouTube e Instagram, donde también comparto contenido de diseño todo el tiempo. Gracias por seguir conmigo a lo largo de esto, y espero veros chicos en otra clase o video muy pronto. Adiós. [MÚSICA] Mis manos están tan frías. [ RUIDO] Muy genérico idílico, ¿cómo se dice eso? Idílico. Idílico. Vamos amigo, puedes hacer esto.