Los mejores portafolios de UX/UI son, en sí mismos, una prueba de UX. El visitante es un gerente de contratación o un cliente, la tarea es "comprender a este diseñador en menos de dos minutos", y el sitio web aprueba o no.
Los diseñadores que consiguen la entrevista rara vez tienen la web más llamativa. Tienen la más clara: su función se describe en una frase, dos o tres estudios de caso que muestran el problema y su solución, y un diseño que no interfiere con el trabajo.
A continuación se muestran ocho portafolios de UX y UI creados por diseñadores en activo. Pixpa, agrupados por enfoque y extraídos de una galería más amplia de Ejemplos de portafolios de UI/UX.
Cada una viene con opciones de diseño, color y tipografía que vale la pena estudiar, y una decisión que vale la pena imitar.
¿Qué características debe tener un portafolio de UX/UI sólido?
Un fuerte Portafolio de UI/UX En una sola línea, describe qué tipo de diseñador eres y muestra dos o tres estudios de caso que van desde el problema hasta el resultado.
Mantiene la interfaz silenciosa para que el contenido sea el protagonista de la página. Carga rápido y se lee bien en el móvil.
Cada uno de los sitios web que se muestran a continuación se ganó su lugar en función de cuatro aspectos: la eficacia del diseño para el trabajo realizado, la claridad de la estructura de los estudios de caso, si el sitio cumple su función principal de conseguir un puesto o un cliente, y su rendimiento en dispositivos móviles.
Portafolios de diseñadores de UI/UX
Estos cuatro son portafolios individuales de UX/UI: un diseñador, algunos estudios de caso y un diseño optimizado para que un gerente de contratación pueda ver el trabajo rápidamente.
Elizabeth Lodvikov
Diseño de interfaz de usuario/experiencia de usuario. Nueva York.
Elizabeth Lodvikov Comienza con un fondo color crema cálido, donde se indica su papel en una línea gris carbón y a la derecha aparece un retrato recortado en arco.
La paleta de colores es deliberadamente suave: crema, texto en color carbón y un único detalle en terracota tenue en el botón "Saluda".
Que calidez resulta mucho más humana que el modo oscuro predeterminado, y la tipografía geométrica limpia y sans serif mantiene la atención en lo que el visitante buscaba.
Gaelle Monin
Diseño UX/UI. Londres.
Gaelle Monin La página de inicio se convierte en el centro de la acción. Bajo un logotipo fino y ligero y una etiqueta de "Diseño UX/UI" subrayada con un trazo de resaltador color melocotón dibujado a mano, la página se sumerge directamente en una cuadrícula de proyectos, sin biografía que haya que pasar por alto.
La paleta se mantiene casi blanca, por lo que el color proviene del propio trabajo: un panel financiero con un gráfico circular de gastos, una aplicación de recetas con un flujo de importación, pantallas móviles dentro de maquetas de dispositivos. Un toque cálido de realce evita que la cuadrícula parezca fría e impersonal.
Sasank Anipeddi
Diseño UX/UI. Maryland.
Sasank Anipeddi Gestiona un sitio web oscuro y editorial, construido con una tipografía con serifa, algo poco común en un sector que suele utilizar tipografía sans-serif.
El fondo casi negro, el texto blanco y el resaltado verde en su nombre le dan un tono tranquilo y seguro, más propio de una revista que de una plantilla.
La navegación divide Estudios de caso, Blog y GitHub en destinos separados, y cada estudio de caso lleva etiquetas de metodología (Investigación de usuarios, Análisis de la competencia, Pruebas de usabilidad) para que la estructura del trabajo se muestre antes de abrirlo.
Matthew Park
Diseño UX y arte conceptual. Sunnyvale.
Matthew Park Convierte la página de inicio en una galería con bloques de color. Cada proyecto se presenta en su propio mosaico a sangre completa, en un color saturado diferente (azul, verde azulado, magenta, índigo, tostado), y cada uno muestra una maqueta del producto en una computadora portátil o un teléfono.
Es llamativo en el sentido correcto, porque el color es la guía y el trabajo que hay detrás es un auténtico SaaS: Lacework, Endgame, XonaEl logotipo es una tipografía sans-serif en mayúsculas, discreta, que deja que los elementos gráficos sean los protagonistas.
Diseñadores de producto y líderes de diseño
Los puestos de producto y estrategia requieren tanto criterio como habilidad, por lo que estos dos roles se caracterizan por un trabajo específico y un punto de vista definido.
Marcin Spiewak
Diseño de producto. Berlín.
Marcin Spiewak Comienza con un titular llamativo y en negrita sobre un fondo gris oscuro que enumera todos los roles que ha desempeñado: diseño gráfico, diseño web, diseño de interfaz de usuario y diseño de experiencia de usuario. Luego, tacha cada uno hasta llegar a "Diseñador de producto", con "Berlín" resaltado en verde. Es una breve reseña de su trayectoria profesional contada con tipografía.
Una foto espontánea de ancho completo de él en el campo calienta la paleta oscura y los mosaicos del proyecto enlazan a Figma Para cualquiera que desee profundizar al máximo.
Michael Collins
Diseño y estrategia de producto.
Michael Collins Presenta un diseño minimalista y centrado, con una tipografía sans-serif limpia sobre un fondo blanco roto, y un logotipo de color rojo oscuro como único toque de color. La sobriedad es estratégica.
La cuadrícula del proyecto es una fotografía a sangre completa con los nombres reconocibles de los clientes superpuestos, Silvertree, ExxonMobil, lululemonAsí pues, la credibilidad reside en los logotipos, no en el diseño. Un pequeño icono de candado marca los casos de estudio restringidos, una señal discreta de que se trata de trabajos sujetos a acuerdos de confidencialidad.
Diseñadores multidisciplinarios
Cuando una práctica abarca varias disciplinas, el riesgo es que el sitio parezca una colección de portafolios unidos sin coherencia. Este sitio, en cambio, mantiene la coherencia.
Forest
Diseño multimedia y de interfaz de usuario.
Forest Se compromete con un héroe de gran tamaño y con texto prominente, "¡Hola, soy Forest!" escrito en letras enormes en negro negrita sobre gris claro, con un teletipo horizontal que muestra sus disciplinas: Diseño de interfaz de usuario, Gráficos en movimiento, Diseño gráfico, Edición de video.
La paleta monocromática evita que una práctica tan diversa parezca dispersa, y el indicador de habilidades muestra la variedad sin una cuadrícula de competencias recargada. La interfaz de usuario se integra con el trabajo de animación y diseño gráfico, en lugar de centrarse exclusivamente en la experiencia de usuario, y el sitio web lo reconoce abiertamente.
Isabella Zelasko
Diseño UX/UI y de artes multimedia. Phoenix.
Isabella Zelasko Trabaja en áreas como UX/UI, investigación de UX, diseño de juegos y medios interactivos, y el sitio lo presenta todo sobre un fondo color ciruela intenso con una tipografía serif color crema que se asemeja más a una galería que a una plantilla.
Los proyectos se muestran de uno en uno, cada uno etiquetado con las disciplinas y herramientas que lo respaldan (Diseño de juegos + Diseño de interfaz de usuario, o Diseño web, HTML y CSS), y una cuadrícula de habilidades de seis tarjetas convierte una práctica amplia en áreas de capacidad fáciles de escanear.
Se trata de un trabajo inicial, una maqueta de interfaz de usuario para un videojuego y un proyecto web de pregrado, pero está presentado con una claridad que suele faltar en la mayoría de los portafolios de estudiantes de primer año.
¿Qué tienen en común los mejores portafolios de UX/UI?
Si analizamos las ocho decisiones, vemos que se repiten las mismas. Ninguna tiene que ver con el gusto personal. Se trata de lograr que el visitante se adentre rápidamente en la obra.
- La función se describe en una sola línea. Lodvikov y Sasank Anipeddi Ambos mencionan a qué se dedican en la primera frase, así que nadie tiene que adivinar si son el tipo de diseñador adecuado.
- La página de inicio muestra el trabajo realizado, no una biografía. Gaelle Monin Se inserta directamente en la cuadrícula del proyecto y Matthew Park Utiliza bloques de color, por lo que la obra es lo primero que se ve.
- Los estudios de caso muestran el método, no solo las pantallas. Sasank Anipeddietiquetas de método y Marcin Spiewakestá vinculado Figma Los archivos demuestran que había una idea detrás de los píxeles, que es precisamente lo que busca un responsable de contratación.
- El trabajo bien documentado es lo que convence. Michael Collins conduce con ExxonMobil y lululemon, y Matthew Park Con productos SaaS reales, porque un trabajo reconocible genera confianza más rápido que cualquier diseño.
- Una idea visual, mantenida. Todos los sitios web de calidad aquí presentados se comprometen con una única paleta de colores y un único sistema tipográfico, en lugar de mezclar tres estéticas y dar una impresión de indecisión.
- La velocidad y la movilidad no son opcionales. La mayoría de las primeras revisiones se realizan por teléfono entre reuniones, por lo que una avalancha de capturas de pantalla del ordenador resulta ilegible donde más importa.
Cómo estructurar tu portafolio por objetivo
Un portafolio construido para conseguir un puesto de tiempo completo está estructurado de manera diferente a uno persiguiendo clientes freelanceDecide para qué se utilizará el sitio web y, a partir de ahí, desarrolla el resto del proyecto.
Pixpa's Plantillas de portafolio UI/UX Están construidos en torno a estudios de caso y cuadrículas de proyectos, por lo que la fila que elija arriba es principalmente una cuestión de qué secciones active.
Errores comunes que debes evitar en tu portafolio de UX/UI
Cinco errores que son fáciles de pasar por alto y rápidos de corregir una vez que los detectas.
- Restringir el acceso mediante contraseña a todos los estudios de caso. Los acuerdos de confidencialidad son reales, pero un portafolio donde no se puede ver nada sin antes enviar un correo electrónico hace perder al visitante que solo tenía treinta segundos. Mantén al menos un proyecto completamente público.
- Redactar el estudio de caso a modo de diario. "Primero hice el análisis, luego los perfiles de usuario y después los wireframes" es una lista de tareas. Enfócate en el problema y el resultado, y deja que el proceso sirva como evidencia.
- Liderando con artefactos de proceso. Presentar una pared llena de notas adhesivas y mapas de ruta oculta el mensaje principal. Muestre primero el resultado; la investigación es la prueba, no el titular.
- Olvidarse del portafolio es en sí mismo una prueba de experiencia de usuario. Carga lenta, iconos de clic diminutos, una hamburguesa que oculta las dos únicas páginas importantes. Audita la experiencia de usuario de tu propio portafolio. de la misma manera que lo harías con un cliente.
- Una estética para la página de inicio, otra para los estudios de caso. La inconsistencia en la tipografía y el color entre la estructura y el diseño da la impresión de que el sitio web está ensamblado a partir de plantillas en lugar de haber sido diseñado.
Cómo crear tu propio portafolio de UX/UI
No necesitas saber programar ni contratar a un desarrollador. El proceso es breve.
- Comience su prueba gratuita, sin necesidad de tarjeta de crédito.
- Elija una Plantilla diseñada para diseñadores de UI/UX..
- Agregue dos o tres estudios de caso, cada problema escrito primero. Si no está seguro de qué mostrar, comience por estos Ideas para proyectos de UX/UI.
- Establece un único color de acento y un solo sistema tipográfico, y centra la navegación en lo importante.
- Conecta tu dominio, compruébalo en tu teléfono y publícalo.
Lo más importante es...
Un portafolio de UX/UI se evalúa de la misma manera que se evalúa cualquier interfaz: ¿ayuda al visitante a realizar su tarea rápidamente?
Describe tu función en una línea, muestra dos o tres estudios de caso para abordar primero el problema, mantén el trabajo a la vista y deja que el diseño sea el protagonista. Cada sitio web mencionado anteriormente resuelve bien una parte de esto. Inspírate en la decisión, no en la apariencia.
Dale a tu trabajo el portafolio que se merece, gratis durante 15 días.
Preguntas frecuentes sobre el portafolio de UX/UI
¿Cuántos proyectos debería tener un portafolio de UX/UI?
De dos a cuatro. La profundidad supera a la amplitud: un estudio de caso completo y exhaustivo que demuestre que tu forma de pensar vale más que seis galerías de proyectos superficiales.
Los evaluadores deciden si usted tiene capacidad de razonamiento para resolver problemas, no cuentan las participaciones.
¿Deberían protegerse con contraseña los estudios de caso de UX?
Solo cuando un acuerdo de confidencialidad lo exija, e incluso en ese caso, mantén al menos un proyecto completamente público. Un portafolio donde no se puede ver nada sin contactarte primero hace perder al visitante que tenía solo unos segundos.
Si la mayor parte de tu trabajo está sujeto a acuerdos de confidencialidad, crea un proyecto personal que puedas mostrar abiertamente.
¿Qué debería incluir la página de inicio de un portafolio de UX?
Una frase sobre quién eres y en qué te centras, una señal de credibilidad, enlaces a dos o tres estudios de caso y una acción de contacto clara.
Omita la declaración de misión. Hay una lista más completa de elementos que debes incluir en tu portafolio Si lo deseas, pero la función de la página de inicio es dirigir rápidamente al visitante al trabajo.
¿Necesito saber programar para tener un portafolio de UX?
No. La mayoría de los portafolios de UX/UI sólidos se crean con un creador de sitios web, y eso no supone ninguna diferencia para el responsable de contratación.
Es mejor invertir el tiempo escribiendo estudios de caso concisos que depurando código CSS.
¿Cuál es la diferencia entre un portafolio de UX y un portafolio de UI?
Un portafolio de UX se centra en el proceso y los resultados: el problema, la investigación, las decisiones y el resultado medible. Un portafolio de UI se basa en el diseño visual: maquetación, tipografía, color y acabado de la interfaz.
La mayoría de los diseñadores en activo muestran ambas facetas, aunque con mayor énfasis en aquella en la que se centra su función.
¿Cuánto cuesta un sitio web de portafolio?
PixpaLos planes de comienzan en $5.40 al mes en un plan básico anual, y cada plan viene con una prueba gratuita de 15 días sin tarjeta de crédito y una garantía de devolución de dinero de 30 días. Precios del último plan se divide por niveles.
¿Cuál es la mejor plataforma para un portafolio de UX/UI?
No existe una única plataforma que sea la mejor. Pixpa Ideal para diseñadores que buscan un portafolio, un blog integrado y un sistema de plantillas limpio, todo en un mismo lugar y con soporte humano en tiempo real.
Si quieres sopesar las opciones, este desglose de las Los mejores creadores de sitios web para diseñadores de UI/UX Los compara uno al lado del otro.
¿Debería mostrar proyectos no solicitados o proyectos conceptuales?
Sí, especialmente al principio de tu carrera o al incorporarte a un nuevo puesto. Un rediseño bien estructurado y de iniciativa propia demuestra que puedes analizar un problema incluso cuando aún no tienes trabajos publicados y acreditados que lo respalden.
Etiquétalo claramente como un concepto.