Crea un interesante caso práctico de diseño UX/UI en Figma

1. ¡Hola!: La cartera de un diseñador puede ser su herramienta número uno para conseguir trabajos y mostrar el trabajo que ha realizado lo largo de toda su carrera Sabemos lo importante que es este portafolio de diseño. Nuestro sin embargo, puede llegar a ser muy fácil descuidarlos. Soy Carolyn, diseñadora senior de UX UI, que definitivamente ha tenido mi parte justa de luchas para mantenerme al día con mi cartera Después de tomar muchas clases de diseño, asistir a talleres de portafolio y hablar con directores de diseño a lo largo de los últimos años, he recogido algunos consejos realmente útiles que estoy emocionado de compartir contigo en esta clase. En esta clase, te ayudaré a convertir uno de tus proyectos de diseño y a un estudio de caso atractivo para tu portafolio. Una vez que aprendas a traducir tus proyectos en estudios de caso, podrás llenar tu portafolio con varios ejemplos de cómo eres un diseñador increíble. Mientras trabajas en tu proyecto de estudio de caso, aprenderás a promocionarte a ti mismo y a tu trabajo, a ilustrar tu proceso de diseño y a hablar sobre tu trabajo de diseño a través de la narración Esta clase es principalmente para diseñadores de UX UI que tienen una amplitud de trabajo que quieren mostrar en una cartera. Al final de esta clase, tendrás un estudio de caso atractivo para agregar a tu portafolio que realmente muestre tus habilidades y tu identidad como diseñador Empecemos. 2. Proyecto de clase: Tu proyecto de clase, quiero que escojas un proyecto de diseño en el que hayas contribuido a su vez eso en un estudio de caso para tu portafolio. Trabajaremos a través de los siguientes pasos para terminar su proyecto de estudio de caso. Elige un proyecto de diseño de UX UI en el que hayas contribuido. Esto podría ser un proyecto profesional, proyecto escolar o un proyecto personal. A continuación, crearemos un esquema de la historia de tu proyecto. Luego reuniremos y crearemos imágenes de proceso que ayudarán a contar la historia de tu proyecto Last diseñará tu caso de estudio. Solo necesitarás algunas herramientas y materiales para comenzar con este proyecto. Necesitarás materiales para bosquejar como lápices, rotuladores y papel Y luego Figma, la herramienta en línea que usaremos para diseñar el diseño de su caso de estudio Al finalizar la clase, cargarás lo siguiente a la Galería de Proyectos, el diseño de tu caso de estudio como imagen o el enlace a tu prototipo Figma O puedes enlazar a tu estudio de caso publicado. Si ya estás trabajando directamente en un creador de sitios web como Squarespace Estoy muy emocionada de ver tu caso de estudio. Así que comencemos. 3. Principios de un caso de estudio: Antes de profundizar en tu proyecto, hablemos de lo que es un estudio de caso en lo que se debe y no se debe hacer al Un estudio de caso es una herramienta de narración utilizada para comunicar procesos y decisiones a comunicar procesos y decisiones lo largo de un proyecto de diseño El objetivo de hacer un estudio de caso es demostrar que realmente conoces el proceso de diseño y puedes resolver problemas a lo largo de todo el curso de un buenos estudios de caso son atractivos y cuentan una historia que cualquiera puede leer, pero generalmente están escritos para posibles empleadores. Algunas cosas a evitar a la hora de hacer un estudio de caso. No solo muestres tu trabajo final, muestra tu proceso. Como estaba diciendo, no uses jerga y lenguaje robótico ¿Correcto? Como si estuvieras hablando con alguien, contándole una historia desde el principio hasta el final. Lo más importante para mostrar en tu caso de estudio es tu proceso. Y eso es lo que realmente les importa a los potenciales empleadores y colaboradores. No necesariamente les importan los diseños perfectos. Ellos quieren saber que ya sabes, cómo resolver un problema, para llegar a una solución de diseño realmente exitosa. Y ellos quieren ver como llegaste ahí. Si quieres ver algunos ejemplos geniales de estudios de casos, he agregado enlaces a algunos en la sección Recursos de esta clase. Ahora que conocemos lo que se debe y no se debe hacer en los estudios de caso, comencemos 4. Muestra tus habilidades y valores: Eres un diseñador excepcional. Es tu trabajo demostrar eso y destacar tu mejor trabajo. Puede ser muy difícil hablar ti y de tu trabajo. Entonces, para obtener algunas perspectivas externas, quiero que hagas una actividad rápida como calentamiento. Creé una hoja de trabajo para ti en los recursos del Proyecto que podrás encontrar y descargar y utilizar a lo largo de esta clase. El primer ejercicio enumerado en esa hoja de trabajo es hacerte preguntas a ti mismo y a algunas personas sobre ti. Para la primera sección, hágase esas preguntas en la hoja de trabajo. Entonces agarra a otras dos o tres personas, tal vez compañeros de trabajo, clientes, amigos, mentores, y obtén su perspectiva sobre tus fortalezas, tus valores, tus pasiones Una vez que usted y esas personas externas hayan respondido esas preguntas, compare las respuestas, vea si encuentra alguna información que pueda ser útil para mostrar o hablar y su cartera. Por ejemplo, cuando respondí preguntas sobre mí y cuando le pedí a otros que las respondieran sobre mí, ambas respuestas realmente hablaban de cómo me apasiona, empatizar con Y otras personas decían lo mismo que yo realmente no era defensor de los usuarios. Y esa fue una fortaleza que tenía. Porque dije que me apasionaba y valoraba que yo y la gente viéramos que esa era una fortaleza que tenía. Pensé que esa era una gran idea para ayudarme a construir mi cartera en mis estudios de caso. Entonces, lo que hice con eso es que realmente resalté esas etapas de empatía y platicar a lo largo de mi portafolio sobre cómo realmente valoro y me apasiona empatizar con los usuarios, con la gente para llegar a soluciones de diseño realmente exitosas Ahora que hemos completado ese ejercicio de calentamiento, comencemos a trabajar en un esquema para su proyecto de estudio de caso 5. Crea un contorno: Ahora vamos a sumergirnos en nuestro proyecto de estudio de caso y realmente ampliar su proceso. Elige un proyecto al que hayas contribuido. Podría ser un proyecto personal, un proyecto profesional o un proyecto en el que hayas trabajado como estudiante. Ahora que tienes un proyecto en mente, vamos a crear un esquema para el proceso que tomaste para completar ese proyecto. En la hoja de trabajo, he proporcionado un ejemplo de un esquema que puedes usar para tu proyecto de estudio de caso. Consulte el esquema de ejemplo y cree su propia versión rellenando los detalles de su proyecto. Comience con una sección de visión general. Habla sobre tu papel específico que desempeñaste en el Proyecto y con qué cronograma estabas trabajando. Enumera los desafíos que los usuarios estaban experimentando antes de comenzar a trabajar en este proyecto. La siguiente sección podría incluir su declaración de problemas y cualquier otro contexto que pueda necesitar proporcionar para configurar su historia. Entonces podrías entrar en tu sección de investigación, que incluiría cosas como diagramas de afinidad, insights, personas, historias de usuarios y mapas de viaje. En la siguiente sección se podría hablar sobre tu proceso de diseño. Cualquier arquitectura de información en la que haya trabajado, análisis competitivo, wireframes en papel, prototipos de papel, wireframes digitales, prototipos lo-fi, insights de pruebas de usuario y decisiones que tomaste decisiones que tomaste La sección más importante a incluir es la sección de soluciones. Y eso debería proporcionar un resumen de sus soluciones. Su lista de desafíos de la sección de resumen con explicaciones de cómo ha resuelto estos desafíos y cualquier prototipo o maqueta que ilustren sus soluciones También puede incluir resultados de diseño adicionales como iconografía personalizada, bibliotecas de componentes, ilustraciones personalizadas, videos, animaciones o pautas de estilo Tu última sección debe ser tu sección de comida para llevar que incluya citas de usuarios o grupos de interés que ilustren resultados y análisis o datos cuantitativos que también ilustren resultados y hablen de lo que aprendiste durante este proyecto. Un gran consejo que he aprendido de un director es que deberías sentarte con alguien y contar la historia de este proyecto en voz alta. Comienza con los problemas y retos que enfrentaste al inicio del Proyecto. Y luego explica cómo llegaste a soluciones al final del proyecto y habla sobre lo que aprendiste del Proyecto. De esta manera puedes empezar a hacer fluir las ideas. Realmente puedes platicar, pensar a través de todo tu proceso a una persona y de una manera impugnable Una vez que tengas los inicios de tu propio esquema, seguiremos desarrollándolo en las próximas lecciones 6. Añada imágenes: Tienes el esquema de tu caso de estudio. Ahora, es el momento de agregar Imagery a eso. Vuelva a los archivos y saque cualquier imagen de proceso que pueda ser útil para mostrar su historia de estudio de caso Crea una nueva carpeta en tu computadora. Coloque sus imágenes en esta carpeta dedicada. Las imágenes podrían incluir cosas como bocetos, como estructuras de papel o ejercicios de ideación, investigación y Entonces, los wireframes digitales de persona, maquetas estáticas que se muestran en varios dispositivos son prototipos y cualquier activo visual adicional como hojas de pegatinas inmediato agarraste todas las imágenes que puedes encontrar, vuelve a referirte a tu ¿Todas estas imágenes apoyan tu historia? A lo mejor te falta algo y cierta parte de tu proceso no tiene una imagen que vaya con ello. Ahora es tu oportunidad de crear cualquier cosa que pueda faltar. O también puedes refinar cualquier boceto que se vea un poco demasiado áspero y no muy presentable para tu portafolio Recuerda que este caso de estudio en tu portafolio como reflejo de quien eres como diseñador. No se limite a tirar todo a un sitio web y llamarlo un día. asegura de que todo se vea cohesivo y consistente, igual que lo haría con cualquier otro proyecto de diseño Una vez que haya recopilado sus imágenes en una carpeta de fácil acceso, comenzaremos a pensar en el diseño de su estudio de caso en la siguiente lección 7. Bocetos con tu diseño: Tenemos tu contorno, tenemos tus imágenes. Ahora es el momento de esbozar rápidamente algunas ideas sobre cómo podría verse su proyecto de estudio de caso. Empecé dibujando tres rectángulos rugosos para dibujar mi Layout Within Puedes hacer más o menos de tres bocetos, mucho tiempo que te lleve sentirte bien con tu Layout A continuación, realmente me voy a centrar en esta área de cabecera superior por encima del pliegue. Así que pretendamos que esta línea discontinua aquí es la Fuld. Lo que esté por encima de esta línea va a ser lo más importante. Porque esto es lo que la gente va a ver de inmediato y esto es lo que les va a enganchar. Entonces, ¿qué contenido quieres en esta parte superior? Por ejemplo, podemos incluir una bonita imagen de gran héroe del diseño final. Esa va a ser mi pequeña nota aquí. Estos pueden ser apenas wireframes ásperos casi. Y entonces puedo tener el título de mi proyecto aquí y luego mis datos al lado del mismo. Entonces esto proporciona un pequeño resumen agradable de mi proyecto antes de que alguien incluso se desplacen hacia abajo. Otra forma en que podría hacerlo es haciendo un collage de múltiples imágenes. Entonces digamos para las imágenes, eso realmente muestra mi proceso Entonces tal vez a la izquierda aquí hay algunas de mis primeras imágenes de investigación. Y luego nos adentramos más en mi proceso de diseño de fase de ideación Y entonces esta última imagen podría ser mi imagen de solución. Y entonces tal vez en esta maquetación, centro el título y luego mi texto de resumen inicial. Entonces tal vez en una tercera versión de esto, no trabajo de una manera súper centrada. Y tengo una imagen apagada a la izquierda aquí, y tal vez no sea mi imagen final como hicimos en el primer boceto. A lo mejor es solo mi imagen favorita de mi proceso en general. Entonces el título en detalles podría estar muy bien espaciado a la derecha allí. Entonces esta zona superior va a ser mi área más importante en la que enfocarme. Entonces creo que tenemos algunos conceptos realmente buenos para esta área de héroes. Entonces, cualquier cosa por debajo de esto ahora solo va a ser todo acerca de mantener el Layout y el diseño consistentes. Entonces, si estamos centrando cosas como en este diseño, asegúrese de que todo lo demás a continuación recoja ese tema centrado A lo mejor todo por debajo de este tercer tema va y viene para proporcionar un buen equilibrio de imagen y textos, textos e imagen, imagen y texto. Entonces en esta primera imagen o este primer boceto, tal vez podamos jugar con estas imágenes completas realmente bonitas y limpias mezcladas con algo de texto a continuación y columnas. Entonces voy a tratar de explorar esos conceptos a continuación aquí. A continuación, nos pondremos en la computadora y comenzaremos a diseñar tu caso de estudio 8. Crea tu estudio de caso: Ahora es el momento de poner todo que hemos estado trabajando juntos. Pongámonos a la computadora y empecemos a diseñar tu proyecto de estudio de caso en Figma. Traduce tus bocetos de la última lección a un diseño en Figma creando primero un marco, estaré trabajando en un tamaño de escritorio Luego agregue los textos de su documento de Outline y luego agregue las imágenes de su carpeta. Ahora que en realidad estamos diseñando, mi consejo principal aquí es verificar que todo sea consistente. En la última lección, te aconsejé que mantuvieras Tu Maquetación consistente usando la misma alineación de textos, formas de imagen, tamaños de márgenes, etcétera Pero ahora que estás en la computadora, debes asegurarte de que estás usando jerarquía tipográfica consistente, jerarquía de colores, espaciado preciso y que todos los demás elementos de diseño se usen apropiadamente Y por una razón. Ahora que es el momento de enfocarte también en tu escritura, tu esquema podría haber incluido una lista con balas o frases incompletas Ahora como el momento de eliminar tu historia escribiendo oraciones completas que muestran tus habilidades de comunicación. Una vez que tengas tu diseño en un buen lugar, te reto a que hagas tu estudio de caso aún más conciso. ¿Qué frases o incluso frases puedes eliminar para llegar realmente al corazón de tu historia y a tu proceso? A continuación, concluiremos tu proyecto 9. Acabado y comparta: Enhorabuena, has terminado tu proyecto de estudio de caso y está listo para ser publicado. Si aún no lo has hecho, asegúrate de recibir comentarios sobre tu proyecto. En la hoja de trabajo que creé, hice una lista de verificación de cosas por las que puedes pasar y asegurarme de que has incluido en el diseño de tu estudio de caso. Incluso incluí algunas preguntas que puedes hacerte a ti mismo u otras sobre cómo se está uniendo tu diseño. Asegúrese de pasar por esa lista de verificación y responder esas preguntas para asegurarse de que la historia de su proyecto está llegando a través de. Y realmente estamos teniendo una idea de todo tu proceso. Sube lo siguiente a la Galería de Proyectos, tu diseño de estudio de caso como imagen o enlace a tu prototipo Figma. O si estabas trabajando en un creador de sitios web, comparte el enlace a tu estudio de caso publicado. Una vez que lo subas a la Galería de Proyectos, definitivamente me aseguraré de darte algunos comentarios y te animo a que hagas lo mismo con tus compañeros de estudios. A continuación, repasaremos algunos consejos finales de cartera y concluiremos la clase 10. Consejos extra: Ya he proporcionado un montón de consejos a lo largo de esta clase, pero quería agregar algunos más aquí para realmente ayudarlo a mantener su cartera y ser un diseñador exitoso y mostrarlo. Mi primer consejo es documentar tu trabajo a medida que avanzas. Cuando estás trabajando en un proyecto. Ahí es cuando todo está fresco en tu mente y conoces todos los detalles y tienes toda la documentación de soporte de imágenes a tu alcance Ahí es cuando deberías estar recolectando cosas en una carpeta y escribiendo la historia de tu proceso, justo cuando está fresco en tu mente. Mi segundo consejo es mantener una lista de todos los proyectos de los que has formado parte. Aunque fuera una actividad social, una actividad docente, como un almuerzo y aprender, tal vez fue organizar un taller. Esas son todas las cosas de las que deberías estar orgulloso y realmente mostrar lo bien redondeado que eres como diseñador Mi tercer consejo es tratar de aprovechar cada oportunidad que tengas para hablar sobre tu proceso y tu trabajo de diseño. Por ejemplo, podría ser asistir a más reuniones con clientes o incluso simplemente platicar con tu mentor o tu jefe más sobre tus decisiones de diseño. De esa manera, una vez que llegues a hacer tu portafolio o a hablar en una entrevista, serás un profesional en hablar de tu propio proceso. Andrew, suena más profesional porque has estado practicando tanto. Así que aprovecha esas oportunidades siempre que puedas. Piense en qué habilidades únicas aportó a un proyecto o qué hizo para ir más allá de un proyecto. Presumir de las ilustraciones que hiciste para un proyecto o de las animaciones que saliste del camino para crear, para mejorar la experiencia del usuario, dueño de esos logros Al dejar claro en tus leyendas y descripciones que tomaste estos pasos adicionales y te apasiona Esto será una gran ventaja para ti si incluyes detalles como este en tu cartera. Espero que tengas en mente estos consejos y que te hagan un mejor diseñador profesional. Vamos a concluir en nuestra última lección 11. Conclusión: Enhorabuena por terminar tu proyecto de estudio de caso. Ahora tu fila y hablando tu proceso de diseño e ilustrando tu trabajo a través de la narración En esta clase, has aprendido a mostrar tu identidad única y trabajo de diseño. Ilustra tu proceso. Habla sobre tus diseños a través de la narración. Construye casos prácticos que muestran tus habilidades y técnicas de resolución de problemas para convertirte en un mejor diseñador profesional No olvides subir tu proyecto a Skillshare y dejar una reseña por mí. Muchas gracias por tomar esta clase conmigo y nos vemos la próxima vez.