Construye tu portafolio de diseño de UX en línea

1. Introducción: Hola a todos. El video de hoy trata sobre cómo construir su sitio web de portafolio de diseño UX. Soy Kristine y soy diseñadora de productos UX slash trabajando en San Francisco. Este video es un tutorial paso a paso sobre cómo puedes crear tu portafolio en menos de una hora. Este es el portafolio que creé justo fuera de mi campo de entrenamiento de diseño UX. Y es la misma cartera que me ayudó a conseguir mi primer trabajo de diseño de UX de tiempo completo después de un mes de terminar mi campo de entrenamiento para este tutorial, estaré usando Wix para construir mi sitio web. Tampoco recomiendo a nadie que esté empezando en el diseño de UX que codifique su propio sitio web? No, no, no, no pierdas el tiempo haciendo eso. Sé que algunas personas ofrecen ese consejo y tal vez eso es lo que realmente les interesa a menos que te estés convirtiendo en desarrollador y eso es lo que quieres hacer. No pierdas el tiempo aprendiendo a codificar porque es un todo, otra bestia. No creo que realmente valga la pena tu tiempo te va a quitar energía y enfoque de lo que es realmente importante, que es que mejoraste tus diseños e iteraste sobre la estrategia de contenido de tu caso estudios. Tampoco soy fanático de tener solo versiones PDF de tu portafolio. Si estás postulando para trabajar en tecnología, ¿ deberías hacer cuál es el estándar de la industria? Y lo que es estándar de la industria es que tienes un sitio web de cartera. Los campamentos de entrenamiento Ux no te enseñarán cómo crear tu sitio web de portafolio. Te darán indicaciones de proyectos para que puedas crear tus maquetas y crear entregables. Pero en realidad no te enseñarán a escribir estudios de casos o a usar un creador de sitios web para publicar tu sitio web. Detuve a muchos diseñadores en LinkedIn que miraban sus carteras, leí muchos estudios de casos para entender cómo estructurar mis propios estudios de caso. Todo lo que voy a compartir contigo hoy fue algo que realmente desearía que alguien me hubiera dicho o hecho contenido en esos días. Entonces, de nada. También quiero dejar claro que este video no va a cubrir cómo llegar realmente al contenido de tu portafolio. Eso va a ser un video separado porque no quiero que este video dure una hora. Así que te tengo. Pero no hoy sin más preámbulos. Vamos a construir. 2. Crear un sitio web de tu portafolio: Al final de este video, vamos a crear algo que se parezca a este portafolio. Esta es mi primera cartera de diseño UX. Entonces hay muchas cosas que habría hecho de otra manera si volviera. Pero sólo voy a mostrarte cómo se veía en su día. Este es un diseño muy básico de cómo suele verse una cartera de diseño UX. No hay nada realmente elegante en esto. Es una cuadrícula de dos por dos con estudios de casos. Y yo recomendaría que tenga al menos de tres a cinco estudios de caso, al menos de dos a tres de ellos relacionados con el diseño UX. Los otros pueden ser más relacionados con el diseño visual o el diseño gráfico. El primer estudio de caso que deberías tener es el proyecto del que estás orgulloso de las cosas y el que estarías entrevistando y hablando más en tu sitio. Así que vamos a estar construyendo uno de los estudios de caso es mi estudio de caso Levi's. Lo que realmente es es un montón de texto e imágenes que acaba de poner en una página. hay realmente nada súper Tampocohay realmente nada súper elegante en este estudio de caso. Realmente se trata más del contenido. Y este video otra vez, no va a ser sobre cómo llegar al contenido de un estudio de caso. Ya redacté el contenido de los estudios de caso y lo que haría es ponerlos en un documento de Word en mis notas, tengo todo el contenido escrito aquí solo porque es más fácil mover las cosas, es más fácil escribir y editar mi estudio de caso sobre esto, lugar de tener que cambiar todo en mi sitio web y hay menos ida y vuelta cuando escribes tus estudios de caso antes de que realmente trabajes construyendo tu cartera. Entonces comencemos desde el principio. Creas una nueva cuenta y vas a crear un nuevo sitio en la parte superior, derecha. Y lo que eso va a hacer es que va a guiarte a través de cómo configurar tu cartera. Entonces quiero un sitio web de diseñador. Solo quiero elegir una plantilla porque eso me va a ahorrar mucho tiempo. La plantilla que elegí. Hay un montón de plantillas como, Oh, esta es buena. Yo iría con éste. Creo que he visto este siendo utilizado por otro diseñador. Ese es bastante genial, pero el que usé, por qué parece que no lo encuentro. Bien. Creo que es porque actualmente estoy usando esa plantilla así que no puedo, ya no puedo usarla. Hagamos esta. Estoy un poco desanimado porque ahora mi cartera va a verse un poco diferente, pero está bien, bien, sí, esta es una linda plantilla. Lo que voy a hacer es que voy a quitar algunas de estas cosas. Lo primero que me gusta hacer es ir a theme manager y cambiar textiles. De hecho me gustan los textiles de éste, así que sólo voy a conservarlo como tal vez el párrafo. Quiero cambiarlo por otra cosa. A mí me gusta la luz Avenir, pero Georgia funciona. Bien, vamos a ir con lo que está disponible aquí. Entonces voy a agregar texto, títulos, textos temáticos. Poner encabezamiento uno. Y esto va a ser Hola, soy Christine, voy a poner un emoji ahí. Entonces eso claramente no soy yo. Entonces voy a cambiar imagen, subir medios. Lo que voy a hacer es recortar esto para que sea más alineado al centro. Así. Perfecto. Pop up. Voy a hacer Chun, Chun, John Buns, Chun, botones, botones. Es irrelevante. Ese pequeño texto es irrelevante. También voy a añadir un párrafo. Y lo bueno de ello es que puedes personalizar cada texto, personalizar, personalizar el interlineado para que no se vea tan apretado. Sí, eso me gusta. Bien. Voy a mover eso un poco que la grilla esté ahí para ayudarte a quedarte dentro de ese espacio para que cuando alguien esté mirando tu portafolio en un iPad, todo tu contenido, todos los los contenidos importantes no están fuera de esa grilla, por lo que podrá ver todo en una vista agradable. Yo sólo voy a sacarlo. Se puede agregar barra social. Lo que me gusta del editor de Wix es que puedes Shift, mantén presionada la tecla Shift, y hacer clic en todo el contenido y simplemente moverlo hacia abajo. Es como trabajar en Figma. Es increíble. Y a medida que bajemos, vamos a utilizar este espacio para poner nuestro estudio de caso. De hecho voy a borrar toda esta fila porque voy a poner. Mi trabajo. Mi trabajo. Bien. Voy a tener una simple cuadrícula de dos por dos. Entonces antes de hacer eso, voy a cambiar el logo aquí, agregar mi propio logo. Entonces voy a poner imagen, mis subidas. Vamos a agregar eso a la página y me conseguí un logo. Vaya, dibujé esto en Procreate. Nací y estaba como, soy, voy a hacerme un logo. En realidad. Voy a esconderme de nosotros va a ser trabajo Acerca de la página. Voy a borrar esto. ¿ Bien? Lo que esto es es que puedes ponerle un ancla a esto. Se puede agregar ancla al sitio. Entonces una vez que añadas eso, esta línea, básicamente haciendo clic en esta te llevará a donde comienza la línea. Voy a agregar un blog porque quiero mostrar que blogueo, crear una nueva página y poner blog y que esa sea mi segunda línea de pedido. Así que ya ves aquí mismo trabajo blog acerca de para este logo, también vamos a enlazar a la página de inicio. Entonces vas a la página de inicio. Sí. Hecho. Si estoy en una página diferente y hago clic en este logo, me va a llevar de vuelta en esta sección de biografía fue muy importante es que dejes súper claro lo que haces, quién eres, y por qué alguien debería contratarte? Mi cartera actual dice diseñador de productos, pero cuando estaba haciendo la transición a UX en ese momento, me etiqueté como diseñador de UX porque realmente no era parte de un equipo de producto y no era dueño unproducto desde la ideación inicial hasta el despliegue final. Yo no era el dueño del producto. Puedes escribir una pequeña nota publicitaria sobre lo que te hace especial. Pero honestamente, la biografía de todos es la misma para el diseño de UX. Así que no sudaría demasiado ni pasaría demasiado tiempo en esta sección. Vayamos a la sección de trabajo para construir esa cuadrícula de dos por dos, vas a ir a Agregar y dar clic en la casilla. Aquí vamos. Aquí está mi caja contenedora, y voy a hacer que este tamaño sea el mismo para 67. Una vez que tengas esta caja, vas a agregar una interacción de hover. Vamos a usar una interacción hover más tarde. Y luego vas a agregar una imagen. Voy a hacer click en el Levi's. Yo lo agregué. Voy a poner esto al 467, adjuntarlo a la caja. Y voy a ir a flotar, y voy a elegir efectos, bien, así que voy a hacer que crezca. Vaya, voy a personalizar eso. Voy a hacer que crezca como un 110% siempre tan ligeramente. Entonces si nos fijamos en eso, vamos a previsualizar va a crecer. También quiero un poco de sombra. Ahí se ve una pequeña sombra. En realidad las sombras demasiado fuertes. Entonces, cuando se ciernen, yo también quería tener como una superposición oscura. Entonces voy a ir a la caja contenedora, poner esto como la misma dimensión. Usamos esto así lo tengo alineado. Y entonces voy a hacer este opaco 50%. Y luego también quiero agregar texto. Entonces voy a agregar texto que sea blanco. Y lo voy a llamar diseño UX. Y luego voy a agregar otro encabezamiento encima de él. ¿ Por qué? Centro alinearlo. Bien, así que vamos a previsualizar esto en realidad. Así que cada vez que flote, va a decir Levi's UX design. Ahora lo que voy a hacer es ir a Control o Comando C, pegar y simplemente pegar esto en la página. Entonces sólo voy a cambiar la copia y las imágenes. Entonces hago clic en esta imagen, cambio la imagen, cambio imagen, pongo esto por linaje, que fue un trabajo de diseño gráfico que hice. Cambiar imagen, poner, tocar. Y ahí ya tenemos la grilla. Y voy a entrar y cambiarme. El título diseño gráfico, Touch, diseño de marketing, diseño UX. Y voy a bajar un poco a estos tipos. Así que vamos a previsualizar eso. Tener el linaje del rumor de Levi's y retocar. Ahora vamos a construir un primer estudio de caso. Entonces voy a ir a páginas y voy a crear una página llamada Levi's hide. Sí, ahí vamos. Bien, entonces la página aún existe, pero ahora está oculta en el menú. Voy a empezar a agregar textos. Voy a agregar mi encabezado. Siempre empiezo escribiendo primero mi caso de estudio, y luego empiezo a agregar imágenes para complementar lo que estoy escribiendo en mi estudio de caso. Entonces ya tengo el título de esa manera no voy a ir y venir y tengo un montón de textos aquí. Sólo voy a copiar y pegar. Así que agrega textos con temas de texto. También voy a poner más interlineado, más fácil de leer. Y luego voy a agregar una imagen. Voy a subir a granel todas mis imágenes de estudio de caso. Esta es la imagen principal. Lo que también me encanta de este editor de Wix es que puedes agregar múltiples imágenes a la vez. Si quisiera, solo puedo seleccionarlos a granel y agregarlos a la página. No voy a hacer eso porque eso va a ser un poco caótico. Entonces solo voy a agregar dos imágenes. Ocho, veintiocho, veinte centro, alinéelo. Boom. Después copia este título. Y copiar y pegar el problema y el proceso. Oh, algo cambió. ¡ Vaya! Oh, también puedes Comando Z y volverá a lo que sea que fuera. Devuelta en el día. Sentí que tenía que poner post-its. Creo que si tuviera que rehacer mi portafolio ahora, si hubiera terminado el boot camp ahora probablemente no pondría ningún post-its porque eso es algo que muchos diseñadores junior ponen. A menos que dejes como una empresa o como una iniciativa de equipo muy grande para una sesión de lluvia de ideas en una empresa real. Yo sólo pienso que no es tan valioso de artefacto tenerlo en tu caso de estudio. Si quieres ponerlo, puedes no tienes que hacerlo. Probablemente no lo haría si volviera. Entonces, ahora que hemos creado el estudio de caso de Levi's, vamos a vincularlo a esta miniatura aquí. Entonces, ¿cómo vamos a hacer eso? ¿ Vamos a hacer clic en el contenedor? Ir a hover. Porque vas a estar haciendo clic en el estado hover. Vas a agregar para pasar el cursor sobre un botón. Entonces este es un hack que encontré en Google porque no pude entender cómo vincular una página a esta caja. Entonces voy a cambiar el diseño. Haz transparente el fondo, ve a Texto y minimiza completamente el texto del botón para que no lo veas. Vas a vincularlo a una página. Voy a hacer clic en Levi's. Estamos bien para irnos, así que vamos a previsualizarlo. Oh, hay un hover en los botones o vamos a mantener eso a 0 opacidad. Entonces la caja gris y luego mostrarla sí. Voy a hacer click en él. Va a aparecer el estudio de caso, pero no quiero esa extraña transición. Entonces para deshacernos de la animación, vamos a ir a transiciones de página, haga clic en ninguna. Lo que eso va a hacer es volver a la página principal. Vas a hacer clic en el caso de estudio de Levi's y se deshace de esa extraña animación cuando terminemos y la logramos. 3. Preguntas y respuestas: Cuando te pedí en Instagram que enviaras tus preguntas, muchos de ustedes me han preguntado ¿cuántos detalles son demasiados detalles? Puedes explicar qué se debe documentar y qué no? Intenté investigar en línea. Las respuestas que obtengo son tan vagas, no estoy seguro de qué partes del proceso debo destacar o enfatizar antes construir tu sitio web para pasar una buena parte de tiempo pensando en la UX de tu y tener claro los mensajes. Y la mejor manera de hacerlo es escribir tus estudios de caso antes de agregar cualquier imagen a cada uno de tus proyectos y responder estas tres preguntas. Número uno, cuáles eran los productos y cuál era el problema que intentabas resolver para el número dos, ¿cómo resolviste ese problema? ¿ Qué hiciste, número tres? Bueno, como resultado o resultados porque resuelves ese problema con tus diseños. Otra persona mencionó, sigo escuchando cosas diferentes entre enfocarme en lo visual versus enfocarme en contar la historia. ¿ Cuál es? ¿Necesitas contar una historia con imágenes convincentes? Esa es mi respuesta. Entonces la respuesta es que realmente deberías tener ambos. Conozco esa frase, contar una historia se lanza todo el tiempo en el diseño de UX sin realmente medios, ¿la gente entiende lo que intentas decirle a la gente? Entender lo que realmente hiciste para resolver el problema era un problema y un problema real de negocio o usuario. Y no solo una re-habilitacion de una app que te guste. Y entonces me preguntaría qué detalles cuando le importan a cualquiera que esté leyendo mi estudio de caso para ayudarles a entender lo que hice con este proyecto. Y mi regla general es si un alumno de secundaria puede leer tu estudio de caso y puede entender lo que realmente hiciste. Ese es un buen caso de estudio porque cualquiera que no tenga experiencia en el diseño de UX o su proyecto debería poder entender lo que estaba tratando de arreglar con sus diseños. Y en lugar de mostrar que todo es tu defecto, debes considerar cuidadosamente cuáles son las partes interesantes de tus proyectos que realmente quieres destacar y cómo lo sacas a la altura la parte superior de tus estudios de caso para que captes la atención de la gente. Y, ¿cómo progresas naturalmente para compartir cómo defines el espacio problemático? ¿ Qué tipo de soluciones se te ocurrieron con esfuerzos, cómo validaste tus diseños y cuál fue el resultado de los rediseños que hiciste? Otra pregunta fue que los gerentes de contratación ven hojear tantas carteras. ¿ Cómo se destaca? ¿ Lo mantienes súper simple? O mucha información, claridad del mensaje es realmente importante. Entonces eso es algo que siempre quieres considerar mientras trabajas en tu caso de estudio es ¿la gente entiende lo que estoy tratando de decir? Si eres alguien que está empezando en el diseño UX, lo único que realmente puede hacerte destacar es tener un buen diseño visual en tus casos de estudio, veo tantos boot camp agarra carteras que solo tienen wireframes de muy baja fidelidad. Y son muy rápido, voy a ser honesto, algunos de ellos son realmente feos y yo soy como, tú eres diseñadora. Debes conocer los fundamentos del diseño visual. Voy a tener tanto odio diciendo que sólo voy a ser real. Hay una manera de hacer grandes cuadros de texto y cuadros grises más bonitos que el promedio. Traté de mostrar 90% de las imágenes que muestro en mi caso de estudio. El 90% de ellos son maquetas de alta fidelidad. Rara vez muestro wireframes. Y podrías estar preguntando, Bueno, Christina, no tengo experiencia en diseño visual. Simplemente no tengo ojo para ello. ¿ Qué hago? Puedes desarrollar un yo y realmente creo que diseño visual es algo en lo que puedes mejorar. Solía no ser muy buena en el diseño visual y ahora, como la gente me dice, me gustó mucho tu estética. Una gran manera es estudiar un buen diseño visual. Y todas estas fuentes están afuera en público para ti. Puedes consultar muchas bibliotecas de sistemas de diseño diferentes de diferentes empresas como Google Material Design y Airbnb también tiene su sistema de diseño en público que puedes ver y puedes ver el estilo de sus botones y sus componentes. Es muy importante que te familiarices con los diferentes componentes de la interfaz que se están utilizando en diferentes aplicaciones. Descarga un montón de aplicaciones diferentes para ver qué tipo de diseños están usando y qué tipo de interacciones están usando para diferentes flujos. De esa manera mientras estudias diseño y miras mucho buen diseño, es como puedes desarrollar lo que es el buen diseño visual. Y te veo más tarde. Adiós.