Cómo crear un portafolio de UX y llamar la atención

1. Introducción: Bienvenido a crear un portafolio de UX y hacerse notar. Yo soy Jasmine. Soy diseñador de UX/UI que vive en Seattle, y tengo experiencia en empresas como Starbucks y Microsoft. El que ha sido mi punto de entrada para conseguir entrevistas e incluso ser contratado, ha sido mi cartera. No porque sea la pieza de trabajo más bellamente elaborada, sino porque me muestra a mí mismo y a mi proceso UX. Ahora, más que nunca, las empresas necesitan ver cómo se crea un proyecto de principio a fin. En este curso, vamos a pasar paso a paso, todos los componentes clave que necesitas en tu portafolio; cómo diseñarlo, publicarlo y ver grandes ejemplos. También voy a compartir consejos de diseño y publicación usando Webflow y Squarespace. Para que todo sea lo más sencillo posible, creé una hoja de trabajo donde puedes introducir tu propio contenido para ayudarte a empezar. Siéntete libre de compartir tu portafolio en cualquier etapa para recibir comentarios. 2. Introducción personal: El primer apartado de tu portafolio va a ser tu introducción personal. Este eres tú presentándote a tu potencial empleador. Quieres hablar un poco sobre tus habilidades, experiencia pasada, y un poco sobre tu personalidad. Es genial agregar una fotografía. Ten en cuenta que las empresas están contratando personas, por lo que quieren tener una idea de quién eres y qué puedes hacer. Algo a tener en cuenta es en qué posición de UX te interesa. Debes adaptar tu portafolio para las personas con las que quieres trabajar en las industrias en las que quieres trabajar. Si quieres ser un diseñador de interacciones, debes adaptar tu portafolio para resaltar esas habilidades específicamente, una gran cosa que hacer es investigar una vacante laboral actual en LinkedIn. Puedes ver lo que buscan específicamente en cuanto a experiencia y habilidades, y asegúrate de mencionar esas en tu introducción personal. Tu introducción personal va a tener dos componentes clave. El primero es tu titular. Tu titular va a consistir en tu nombre, dónde vives, y tu rol de UX preferido. Aquí es donde quieres hacer mucha investigación, en qué parte del proceso UX quieres involucrarte. ¿ Quieres estar más en el lado de la investigación o tal vez en el lado del diseño visual? Tengo una lista de muchas opciones diferentes aquí en la hoja de trabajo para ayudarte a empezar. Asegúrate de hacer investigación si no estás familiarizado con algunos de estos términos. El segundo componente de su introducción personal es su descripción. Este es el grueso principal de su introducción personal. Aquí es donde vas a entrar un poco de detalle sobre tus habilidades, tu experiencia y tu personalidad. Una cosa realmente clave a saber es que mucha gente que está mirando tu portafolio son en realidad reclutadores. El departamento de UX va a dar a un reclutador una lista de requisitos, generalmente listar en habilidades de cosas que están buscando. Entonces ese reclutador va a mirar tu portafolio para ver si igualas algunas de esas habilidades. Asegúrate de mirar una lista. El que tengo aquí en la hoja de trabajo es un buen lugar para empezar en diferentes habilidades generales de UX en las que debes pensar. Llévelo de vuelta a su investigación y vea qué diferentes empresas y roles están buscando también. La mayoría de las veces coinciden con lo que busca el reclutador. En la hoja de trabajo. Tengo una plantilla donde puedes introducir tu propio contenido para ayudarte a empezar con una autodescripción. Básicamente solo ingresas tu propia información en los campos resaltados azules. Siéntete libre de cambiar esta plantilla sin embargo lo necesites. Esto es solo para ayudarte a empezar en caso de que no tengas ni idea de qué escribir. Aquí un gran ejemplo de una introducción personal. Este es el portafolio de UX de Tom Petty. Se inicia con una gran foto de Tom dando una charla, seguida del titular de Tom, que es esta frase intercambiable que explica lo que hace Tom, como productos de diseño, servicios, etc. Entonces entra en un poco poco de detalle sobre lo que Tom ha hecho, cosas que le gusta hacer, y una breve descripción de lo que puedes encontrar en su portafolio. Este es un gran ejemplo para ayudarte a empezar. También tiene un diseño realmente limpio y sencillo. 3. introducción del proyecto: Después de tu introducción personal, quieres tener una lista de todos los proyectos sobre los que vas a hacer un caso de estudio. Esta va a ser una lista de alrededor de 3-5 proyectos en total. Brevemente solo quieres mencionar un poco sobre el proyecto y luego tener un enlace con el caso de estudio. Repasemos brevemente una lista de comprobación de todas las cosas que debes incluir en la introducción de tu proyecto. En primer lugar, se quiere tener un título del proyecto. Es muy probable que este sea sólo el título del producto en sí. Entonces quieres tener para quién hiciste este proyecto, ya sea tu empleador o tu cliente o tal vez incluso tú mismo, entonces quieres tener la duración que te llevó completar el proyecto. Entonces lo más importante es una descripción del proyecto. Esto debe tener alrededor de tres frases de largo donde se discute brevemente lo que es. También, se quiere tener un enlace, justo en la parte inferior, al propio estudio de caso. Todo esto debe ir junto con una foto. La foto debe ser de alta calidad. Podría incluso ser un video o un gif, pero nada demasiado profundo, justo para captar nuestra atención y hacernos querer dar click para aprender más en el caso de estudio. Estos son algunos ejemplos realmente grandes de una introducción de un proyecto. Observe cómo todos tienen fotos de alta calidad, un título claro y audaz, seguido de una descripción, y un gran CTA para ver el estudio de caso en sí. Todos estos son realmente grandes ejemplos de una introducción de un proyecto. Te recomendaría encarecidamente usar estos como ejemplo para ti. 4. Estudio de casos: Para comenzar tu caso práctico, vamos a volver a enumerar todas las cosas que tenías en la introducción de tu proyecto. Es agradable pintar un cuadro y dar contexto a los detrás de las escenas de cómo se juntó este proyecto. Lista, ¿cuál fue su papel en este proyecto? ¿ Para qué empresa o cliente hizo esto? ¿ Qué proyecto es éste? ¿ Fue para iOS, android, era un sitio web? Vuelva a enumerar la duración del proyecto. Lo más importante, ¿con quién trabajaste? Cuántos diseñadores, ingenieros, gestores de proyectos, tal vez incluso trabajaste con el CEO. A continuación, desea enumerar el objetivo del proyecto. ¿ Cuál fue el principal reto y cómo medió el éxito? ¿ Tenías cierta idea o expectativa para el proyecto cuando empezaste? Después de eso, quieres entrar en el proceso. Aquí es donde vas a dar un breve esbozo de todas las diferentes fases que pensabas. Piensa en tus proyectos en pasos y enlistarlos. Háganos saber qué pasos debemos buscar. Aquí te mostramos una lista de diferentes métodos de proceso que puedes usar en tu esquema. Por ejemplo, ¿cómo comenzó este proyecto? ¿ Empezó con una reunión de negocios? ¿ Empezó con la investigación? Piensa en dónde comenzó el proyecto, de dónde vino el problema. ¿ Cómo se identificó el problema? Entonces quieres empezar a pensar en dónde fuiste de la investigación. ¿ Hiciste una lluvia de ideas con los diseñadores? ¿ Acabas de empezar a probar de inmediato? Nuevamente, use esta lista de procesos como ejemplo y piense en todas las diferentes fases. Idealmente, tendrías al menos cinco fases diferentes por las que hablar. Pero de nuevo, esto va a ser subjetivo a tu propio proyecto. Aquí un ejemplo de un breve esbozo del proyecto de alguien. Enumera la investigación, diseño de interacción, el diseño visual, y el desarrollo front-end. Esos son todos los grandes pasos que está a punto de entrar en detalle para todo su caso práctico. Siguiente es tu desglose. Aquí es donde vas a cada paso individual y te explicas lo que pasó. Este es el momento de entrar en detalle en el proceso que usted esbozó. Trata de incluir cualquier visual en el camino. ¿ Tienes algunos bocetos tempranos que podamos ver? Puedes previsualizar el proyecto final en la parte superior de la página, pero quieres asegurarte de mostrar visuales relevantes en el camino. Al final del desglose, se debe responder a este tipo de preguntas. ¿ Quién es el público objetivo? ¿ De qué personas tuviste que trabajar? ¿ Dónde son compromisos? ¿ Cuáles fueron los KPI? Recuerda destacar tu aportación individual a lo largo del camino. Ahora veamos un ejemplo de estudio de caso. Este es el portafolio de mi amigo Wilian y este es uno de sus proyectos. Cuando aterrizas por primera vez en la página, tiene una gran referencia visual del proyecto en sí. Se llama vacaybug. Es realmente genial en la parte superior de tu caso práctico tener una maqueta final de lo que es el proyecto o algún indicio de lo que estamos a punto de meternos. Después de su referencia visual, desea desglosar la información que tuvo en la introducción de su proyecto, como su rol, el contexto detrás de los proyectos, como la duración, individual contribución así como con quién trabajaste, qué tipo de proyecto es este, y enlaces en vivo al propio sitio. Aquí podemos ver donde Wilian esboza todo el proceso de este proyecto. Sabemos que vamos a hablar de investigación, interacción, diseño visual, marketing, y pensamiento de producto. Automáticamente podemos ver cuáles son las diferentes fases para este estudio de caso. Entonces mientras nos desplazamos hacia abajo, podemos ver que Wilian rompió cada sección, de todos los procesos de una manera realmente grande y audaz. Ahora sabemos que estamos a punto de leer todo sobre la investigación que se hizo para este proyecto. A medida que nos desplazamos hacia abajo, podemos ver que hay referencias visuales para ir junto con los hallazgos, las preguntas que fueron respondidas. Aquí tenemos diferentes personas de quién es este proyecto. Las personas son una gran manera de pintar el cuadro de quién es tu público objetivo, que es una de esas preguntas que quieres contestar en tu estudio de caso. Entonces eventualmente, después de ver este análisis competitivo, deberíamos ver la siguiente fase, que son las interacciones. Es realmente importante tener bocetos y alámbricos de baja fidelidad. Por lo general en un proceso UX, vas a empezar con bocetos de baja fidelidad para que pueda pintar el cuadro que estuviste involucrado en todo el proceso. Aquí, Wilian delinea todos los diferentes bocetos y a qué condujeron. Entonces a medida que nos desplazamos, podemos ver que estamos en la tercera fase ahora, que es la ejecución. Aquí es donde vamos a empezar a ver morkups finales. También voy a tener un enlace a este caso de estudio para que puedas pasar y leer realmente todo el detalle. Yo sólo quiero dar un breve esbozo de las cosas que debe incluir en su estudio de caso. Observe cómo cada referencia visual tiene mucho contexto en cuanto a lo que estamos viendo. No quieres solo volcar la imagen todas tus referencias visuales. Quieres asegurarte de que los estás listando en tu proceso así como esto. Parece que estamos casi al final del proyecto. Yo quiero hacer una nota de esta sección del estudio de caso, que está midiendo el éxito. Quieres asegurarte al inicio mismo del caso de estudio mencionar cuál es el objetivo de este proyecto, y luego al final para ver ¿cumpliste ese objetivo? ¿ Qué pudiste haber hecho de otra manera? Esto es algo que faltan muchos estudios de casos, incluso aquellos que tienen fases y muchas referencias visuales. No necesariamente muestran si el proyecto fue exitoso o no, lo cual es realmente importante. Para empezar a trabajar con tu caso práctico, veamos una lista de comprobación de algunas cosas que debes pensar en incluir. En primer lugar quieres delinear tu proyecto en pasos. Reemplaza estos pasos por fases reales de tu proyecto. Por ejemplo, cambie el paso uno a la investigación, si ese fue el paso inicial en su estudio de caso. Entonces quieres empezar a pensar en responder algunas de estas preguntas en el camino. ¿ Cómo empezó este proyecto? ¿ Qué problema estás tratando de resolver? Entonces quieres empezar a pensar en para quién estabas diseñando este proyecto. ¿ Hiciste una lluvia de ideas? Si es así, ¿con quién? Aquí te dejamos algunos visuales en el camino en los que debes pensar incluir, como personas, capturas de pantalla, investigación, bocetos de datos. Tengo una idea de diferentes visuales que debes incluir desde el inicio de tu caso de estudio hasta el final, puedes ver los visuales aquí. Alrededor del paso tres, ¿cómo probaste tus ideas? ¿ Cómo supiste qué idea era correcta? ¿ Tienes alámbrico o prototipos? ¿ Con quién trabajaste para enviar este producto? ¿ Cómo cambió en el camino? ¿ Exploraste diferentes opciones de UI? En caso afirmativo, demuéstralo. Entonces para el final de tu proyecto, quieres mostrar maquetas finales. Quieres mostrarnos cuál fue el resultado final. ¿ Resolvidaste el problema que enumeraste en torno al paso uno? Esta va a ser una gran manera para que empieces a pensar en cómo puedes recolectar tus pensamientos al mirar tu caso de estudio. 5. Diseñar y publicar con Squarespace: Ahora, veamos diseñar y publicar tu portafolio. Voy a estar usando Webflow y Squarespace, porque ambas herramientas hacen que sea realmente fácil diseñar y administrar tu contenido. Cuando estés listo para empezar a diseñar tu portafolio, necesitas pensar si quieres crear tu portafolio desde cero, o usar una plantilla existente. Ambas son realmente grandes opciones para UX, solo depende de cuánta creatividad quieras usar en tu portafolio. Webflow te va a permitir crear tu portafolio completamente desde cero usando código. Si bien Squarespace te va a dar una plantilla realmente genial para trabajar fuera de. El grandioso de la UX, es que el trabajo debe hablar por sí mismo. Significa que podrías usar una plantilla y ser igual de exitoso como alguien que crea su cartera desde cero. Realmente depende de tu visión para tu portafolio, y cuánta creatividad sientes es necesaria para comunicar tus proyectos. Por ejemplo, el portafolio de Tom Petty del curso anterior, tenía un diseño muy limpio y sencillo, algo que muy bien podrías lograr con una plantilla. En su portafolio, su obra hablaba por sí misma, y su obra se podía exhibir fácilmente con maquetas y fotografías. Pero por otro lado, el portafolio de Williams a partir del ejemplo de estudio de caso, creó su portafolio desde cero porque quería tener elementos y animaciones a medida para elevar su trabajo. Estas animaciones y elementos ayudaron a elevar nuestra comprensión de su proyecto. De cualquier manera, ambas herramientas van a ser grandes opciones para ti y tu portafolio. Se asegura de tener todos los materiales necesarios cuando empiece a diseñar. Necesitas poder enchufar todas referencias visuales en tu contenido en el que hemos estado trabajando hasta ahora. Para empezar con Squarespace, debes decidir qué plantilla quieres usar. Aquí en la hoja de trabajo, tengo las mejores opciones para portafolio UX. El primer plantilla es Jasper Jin. Esta es en realidad plantilla de Squarespace que han creado con UX en mente. El landing page se va a enfocar en tus propios proyectos. Algo que probablemente notes es que no tiene espacio para tu introducción personal. Si fueras a ir con esta plantilla, necesitarías editar justo debajo de donde dice Jasper Jin y agregar una sección para tu introducción personal. El grandioso de Squarespace es que tiene una lista de opciones de diseño que puedes arrastrar y soltar en cualquier plantilla. Una de ellas es la opción de párrafo. Entonces a partir de ahí, tu introducción del proyecto va a estar en marcha para cada uno de tus proyectos. Esta plantilla no muestra las descripciones en profundidad de las que hemos hablado para la introducción de tu proyecto, pero hay suficiente espacio para tener toda esa información aquí. Lo mejor de esta plantilla es la página de estudio de caso real. Tiene esta animación realmente genial mientras se desplaza hacia abajo cada una de las diferentes secciones animadas, lo que hace que sea realmente fácil de leer y pone mucho énfasis en cada fase de su estudio de caso. Entonces si te interesa tener la animación de desplazamiento, te recomendaría ir con Jasper Jin. Algo a destacar para Squarespace es que no puedes personalizar las animaciones. Debes encontrar una plantilla que tenga las animaciones que estás buscando, o bien puedes usar Webflow y crear tus propias animaciones personalizadas. El siguiente plantilla se llama York. Este es muy similar a Jasper en que tiene esa animación de desplazamiento para la página de estudio de caso. El que es diferente en este es que tus introducciones de proyecto pueden tener diferentes variaciones en tamaños. El Jasper utiliza una rejilla donde cada proyecto va a tener el mismo tamaño exacto. En tanto que este, si tienes visuales donde sientes que necesitas ocupar todo el ancho del sitio web así, por ejemplo, tal vez deberías usar éste en su lugar. Algo a destacar es que ambas plantillas tienen simples navegaciones en la parte superior del sitio web, lo cual es realmente importante. Lo más probable es que tu navegación vaya a tener un botón de inicio, que albergará tus proyectos y tu introducción personal, así como un enlace a cada caso práctico. Entonces una página Acerca y potencialmente una página de Contacto. Puedes enumerar una sección de contactos en tu página de inicio o debajo de tu sección Acerca, o bien puede tener su propia página. Todas son grandes opciones. Si sientes que tu sección de contacto no está recibiendo suficientes clics, te recomendaría tener la sección de contactos en la propia navegación. Para tu página sobre, entraría más en detalle sobre tu proceso identificado además de entrar más en tu personalidad. El siguiente plantilla se llama Stella. Esta es en realidad la plantilla que utilicé para mi portafolio. Lo que me gustó de esta plantilla fue la sección de introducción del proyecto. Me gustó cómo podía colocar un texto sobre una fotografía muy fácilmente con el botón Aprender más. Cuando miraba esta plantilla, podía ver fácilmente cómo cabía mi trabajo en estas secciones. También me gustó el color completo con fondos. Utilicé esto aquí abajo para mi página de contacto, y siento que realmente ayuda a que esa sección destaque. Un inconveniente de este portafolio es que no tenía ninguna animación en ninguna de estas páginas. El único animación que pude agregar a la mía fue el desplazamiento de Parallax, que fue la única animación que me interesaba. Por suerte, pude personalizar esta plantilla con esa animación, pero la mayoría de las animaciones tienen que venir con la plantilla misma. La animación transitoria que vimos en las otras dos plantillas, al desplazarse hacia abajo por la página, no era algo que yo pudiera lograr con esta. Por lo que es realmente importante imaginar cómo va a encajar tu trabajo y presentación en estas plantillas. Quieres escoger uno que más represente cómo imaginas que todo tu trabajo se está disponiendo. 6. Diseñar y publicar con Webflow: Ahora echemos un vistazo a Webflow. Webflow es una herramienta realmente impresionante, porque te permite diseñar tu portafolio desde cero, y publicarlo tan pronto como termines dentro de la misma herramienta. En cuanto termines de diseñar, puedes golpear “publicar” y al instante se pone en marcha. Webflow también viene con plantillas. Yo, yo mismo no he usado ninguna de las plantillas de Webflow porque siento que todo el punto de usar Webflow es diseñarlo tú mismo, pero si querías usar una plantilla, si vas a su página web principal, puedes ver opciones ahí. No estoy seguro de que estén tan pensadas como las plantillas creadas en Squarespace, pero puede ayudarte a empezar en caso de que no estés muy familiarizado con CSS o HTML. Ahora bien, no necesariamente necesitas conocer código para usar Webflow, pero es muy útil. El modo en que funciona Webflow, es que te da una interfaz de diseño similar a un boceto similar a una herramienta de diseño. Cuando arrastras y sueltas distintos elementos, como una barra de navegación por ejemplo, no va a aterrizar en tu lienzo con tanta fluidez como lo haría en un software de diseño, y eso se debe a que está usando HTML como marco. Necesitas entender cómo HTML y CSS organizan el contenido, para ayudarte a averiguar por qué las cosas no funcionan de la manera que deberían ser. Este es el portafolio de Wilian, y somos capaces de entrar en el diseño nosotros mismos y ver cómo creó algunos de estos elementos. Se puede ver al principio que lo más probable es use una barra de navegación sobre el panel izquierdo aquí. Estas son todas tus diferentes opciones con las que tienes que trabajar. Tienes secciones, contenedores, rejillas y columnas. Todos estos se basan con HTML. Bloques div, elementos de lista, párrafos, de nuevo, todo HTML. Pero también tienen elementos reconocibles que puedes arrastrar y soltar como una Nav Bar. Una gran cosa de Webflow es que intenta ayudarte a crear elementos que sean sensibles. Con esa Nav Bar que creamos, podríamos entrar en la parte superior de la pantalla y hacer clic en el modo tablet, o modo telefónico para ver cómo esos son responsivos, y parece que un menú de hamburguesas es cómo va a ser receptivo. Ahora debido a que se trata de una herramienta de diseño, Webflow sí tiene algunas cosas de navegación planeadas como esa integradas en el propio software. Si querías que la navegación funcionara de una manera diferente, definitivamente puedes hacerlo. Volvamos al modo escritorio. Tu panel izquierdo va a tener todos tus elementos de diseño, así como botones donde vas a colocar en fotografías. Entonces a la derecha está cómo vas a darle estilo a todo en cuanto color, selección de fuentes, espaciado. Aquí está la introducción personal de Wilian. Tiene tres columnas, cada una con fotografía y descripción, un poco sobre lo que hace como diseñador de UX. Si quisieras tener algo similar a esto, irías por aquí en la sección izquierda, y hacías clic en “columnas”. Voy a colocarlos aquí mismo, y luego me va a dar la opción de decidir cuántas columnas me gustaría tener. Hagamos tres. Ahora, voy a arrastrar en una fotografía. Se puede ver que la fotografía va a alinear automáticamente a la izquierda. Eso es porque de nuevo, estamos usando HTML como nuestro marco, y en HTML, todo se alinea automáticamente a la izquierda. No es tan sencillo como usar una plantilla en el sentido de que podemos arrastrar cualquier cosa, arrastrar un elemento a cualquier parte de la página. En realidad vamos a tener que entrar y trabajar dentro del CSS para conseguir su posición de la forma en que queremos que lo haga. Pero antes de hacer eso, voy a agregar algo de texto, así que hay un párrafo, y por suerte con Webflow, puedes editar las cosas de otras personas sin realmente guardar. Por lo que Wilian tendrá que darme una llamada telefónica preguntando qué le hice a su cartera. Simplemente permite que Webflow construya una comunidad en caso de que te interese cómo otras personas diseñan ciertas cosas. Puedes ir fácilmente a su página web, abrirla en Webflow y verlo por ti mismo. Ahora tengo una fotografía, y un elemento de párrafo en cada sección. Ahora quiero centrar todas mis fotografías para que estén centradas dentro de cada columna. Voy a ir aquí al panel de estilismo. Hay algunas formas diferentes de hacer esto. Aquí mismo, así es como controlas el relleno de cuánto está a cada lado de tu elemento. Ahora, lo que pasa con el relleno es que, hay que comprobar cómo se ve responsivamente en un teléfono y en una tableta, porque si tienes mucho relleno, también se va a traducir a tu teléfono, y luego el relleno puede empujar tu imagen completamente fuera de la pantalla. Es así como conocer un poco sobre CSS te va a ayudar cuando estás usando Webflow. Es mejor usar porcentajes, por ejemplo, en la sección de relleno. Ahora reposicionemos esta imagen para que quede centrada. Si nos desplazamos hacia abajo, veamos cómo Wilian, centraba todos sus artículos. Parece que, cada columna tiene su propio relleno. Esta sección verde aquí representa el relleno. Ahora tenemos todas nuestras imágenes centradas, y tenemos un estilo de columna muy similar al que tiene Wilian. Solo quiero tomar nota de que, hacer estas cosas sí toma un poco de tiempo en comparación con usar una plantilla. Usando una plantilla, fácilmente sería capaz de agregar un espaciador, por ejemplo, en Squarespace, que es solo un arrastrar y soltar, y al instante puedes centrar las cosas. Por supuesto, en Webflow no fue terriblemente difícil, pero ciertas cosas van a tardar un poco más en Webflow porque lo estás creando desde cero. Si tienes tiempo para destellar completamente tu portafolio, te recomendaría al menos darle un intento para ver si es para ti. 7. Conclusión: Muchas gracias por completar este curso. Avísame si tienes alguna pregunta con respecto a tu portafolio de UX y asegúrate de consultar la hoja de trabajo. Va a tener enlaces a todos los recursos, ejemplos extra y consejos y trucos. Por último, asegúrate de vincular tu portafolio para que puedas obtener retroalimentación. Gracias.