Portfolio creativo: mi cuento de hadas hecho web

¿Cómo se construye un portfolio creativo que muestre quién eres y siga pareciendo profesional? Me gradué hace poco en Marketing Digital y quería que mi primer portfolio fuera más que una lista de proyectos. Así que lo construí como un cuento interactivo, donde una pequeña hada guía a los visitantes por mi trabajo.

Para quién es: quienes acaban de graduarse, profesionales del marketing y creativos que construyen su primer portfolio y quieren que se parezca a ellos sin perder claridad.

Este análisis de mi portfolio está en siete partes. Cada una empieza con lo que hice y por qué, y luego te da lo que puedes copiar:

• Siete decisiones, desde la idea y la identidad visual hasta la animación, la usabilidad, las pruebas y las contrapartidas.
• Un test de 30 segundos para revisores que puedes aplicar a tu propio sitio, y los errores de portfolio que estas decisiones evitan.
• Lo que costó cada decisión, en peso y mantenimiento, para que la valores antes de copiarla.

Por qué construí algo distinto: un portfolio debe reflejar personalidad

Como recién graduada, sabía que quería un portfolio que fuera más que una lista de proyectos y logros. Quería un pequeño mundo que reflejara quién soy. Me encantan la creatividad, contar historias y dar vida a ideas poco habituales, así que una plantilla tradicional nunca me encajó. Quería algo que fuera únicamente mío.

Cómo copiarlo. Parte de lo que te gusta crear, no de una plantilla. Quien revisa no lee cada palabra. Nielsen Norman Group señala que muy rara vez los responsables de contratación se toman el tiempo de leer tu portfolio entero palabra por palabra, y Designlab advierte de que tienes solo unos segundos para conectar con el visitante antes de que cierre el sitio.

La personalidad es lo que hace que alguien se detenga en esos segundos. Un portfolio de marketing afirma algo antes de mostrar una sola muestra: esta persona sabe hacer que una marca se sienta como alguien. Si la página que rodea las muestras es una plantilla neutra, esa afirmación no tiene pruebas. Mi página de inicio lleva una línea sobre esto: “El marketing no es solo contar una historia. Es hacer que la gente la sienta.” La guía de Shopify para portfolios pone la identidad de marca en primer lugar: los colores, las tipografías y las imágenes ayudan a marcar el tono del sitio, y la voz importa igual.

Mi primera pantalla lo hace antes de cualquier explicación. Muestra mi nombre en letra manuscrita con la N en un rosa más intenso, la línea “Marketing · Creative · Da Nang → United States” y dos botones, View Work y Get in Touch.

Encontrar mi identidad visual: el hada, la paleta de colores y la tipografía

Siempre me han atraído los cuentos de hadas, la naturaleza y la ilustración fantasiosa, así que el concepto del hada fue una extensión natural de mi personalidad. Elegí verdes suaves, rosas, detalles florales y elementos dibujados a mano para que el sitio fuera divertido pero profesional. Quería que los visitantes reconocieran mi personalidad a través del diseño antes de leer una palabra sobre mí.

Cómo copiarlo. Elige las pocas cosas que cargan con tu identidad. La mía se apoya en un hada, un marco verde de orquídeas y un nombre en letra manuscrita. La paleta y la tipografía de abajo las preparan, y la siguiente sección les da vida.

Dos paletas, una misma sensación

Lo que hice. Mi página de inicio y mi blog comparten una sensación pero no una paleta. La página de inicio es un papel crema (#F2EDE3) con rosa, salvia, verde bosque, oliva, marrón y dorado. El blog es blanco puro con un puñado de colores de marca. La suavidad viene de un rosa empolvado (#D4A8B4) y un verde salvia (#8B9E7A) frente a un verde bosque (#4A6741), y el marco floral del héroe está construido en dos capas: un fondo de papel fijo y una capa aparte de flores que se mueven.

El blog pasó a blanco por una corrección registrada en su propia hoja de tokens. La primera versión usaba un papel crema, pero ese crema resultó ser el color de una carcasa de aplicación, no el de un artículo. Medido en las páginas de artículo, cinco de cinco superficies de lectura por defecto eran blanco puro. Así que la calidez se movió a donde no toca el texto corrido: el color de acento, las insignias y un velo cálido detrás de los recuadros.

Tipografía combinada por función y texto literal

Lo que hice. El nombre de la página de inicio está en Dancing Script, con la N en un rosa más suave, y la línea superior usa la misma letra manuscrita en menor tamaño. Los títulos de sección usan Cormorant Garamond, las etiquetas pequeñas Caveat y el texto de la interfaz Inter. El blog separa las funciones con más rigor: Geist para la interfaz y los titulares, Source Serif 4 para leer, a 20 píxeles sobre 32 con una columna de 680 píxeles.

Por qué le importa a quien revisa. Una letra manuscrita es mala elección para párrafos, así que aparece solo donde la página es una persona: el nombre y la línea que lo precede. La página de inicio puede permitirse cuatro tipografías porque es un cartel. El blog no, porque se lee.

El texto sigue la misma división. La cabecera del blog es “The Fairy’s Field Notes” sobre el titular “Where Curious Ideas Grow”, que es el personaje hablando en dosis pequeña. Las partes prácticas se mantienen literales: la navegación de inicio dice Social, Mobile, Design, SEO, Web App, Writing, About, Sign in y Contact, cada uno un tipo de trabajo que un responsable de contratación podría buscar, no un acertijo.

Cómo copiarlo. Dale a cada tipografía una sola función y dila en voz alta: esta es el nombre, esta es la lectura. Deja que tu voz se note en la cabecera y los lemas, y mantén las etiquetas de navegación lo bastante claras para recorrerlas de un vistazo.

Dar vida a mi portfolio: ilustración, mascota y animación

No quería una presentación estática. Quería un cuento interactivo en el que una pequeña hada guía a los visitantes por mis proyectos, las ilustraciones cobran vida y cada sección tiene su propio personaje. Las animaciones y las pequeñas interacciones están ahí para que explorar se sienta como una experiencia y no como desplazarse por un currículum.

Cómo copiarlo. Dale una función al movimiento y construye el interruptor para apagarlo a la vez. Las dos partes de abajo muestran cómo.

Una mascota con un trabajo, y un interruptor

Lo que hice. El hada es lo primero que anima la página de inicio. Existe como siete hojas de sprites, una por pose (volar, aletear, sentarse, pensar, alegría, tocar y girar), con ocho fotogramas cada una. Las siete hojas PNG juntas pesan algo más de 1 MB, que es todo el coste de una mascota que puede moverse.

También reacciona a quien visita. Toca cuando pulsas, se la ve contenta cuando llegas a un enlace o un botón y se gira hacia donde se mueve. Son tres de sus siete poses en acción.

Se gana su sitio porque hace algo. En dispositivos con puntero sigue el cursor con un resorte amortiguado, así que va detrás del puntero en lugar de saltar hasta él. En un teléfono no hay cursor que seguir, así que viaja con el desplazamiento y visita los títulos. Las poses tienen significado donde se colocan: piensa junto al título de SEO, se sienta junto al de About y está contenta junto al de contacto.

Por qué le importa a quien revisa. Una mascota con un trabajo es una firma y una guía. Una mascota pegada en una esquina es una pegatina. Aparece en los títulos de sección y en los bordes y nunca sobre una muestra, así que el trabajo sigue siendo el protagonista.

El interruptor. El movimiento es donde la personalidad se convierte en riesgo. El navegador puede informar de si el usuario ha pedido a su dispositivo que reduzca el movimiento no esencial, y MDN señala que esa animación puede provocar malestar en personas con trastornos vestibulares. En dispositivos con puntero, la página de inicio oculta el cursor del sistema, dibuja el hada y mantiene un pequeño punto de 15 píxeles en la posición exacta del puntero, con un rastro de destellos de cuatro puntas detrás. Ese rastro no se ejecuta para los visitantes que pidieron menos movimiento, ni en pantallas táctiles. En el blog, el hada descansa sobre su trayectoria con el primer fotograma de las alas, y en la página de inicio queda fija al puntero en lugar de seguirlo con un resorte.

Las pequeñas interacciones siguen la misma regla. Un botón sube 2 píxeles al pasar el cursor, luego baja y se oscurece un poco al pulsarlo, y una pieza de trabajo se eleva al pasar el cursor. El libro de abajo se abre al arrastrar la cubierta o pulsar Enter, y las flechas pasan sus páginas.

Cómo copiarlo. Elige un motivo. Decide dónde aparece (títulos y bordes) y dónde nunca (sobre tus muestras), y escribe la versión de movimiento reducido al mismo tiempo que el efecto.

Un vocabulario de ilustración, reutilizado

Lo que hice. El marco de orquídeas de la página de inicio, las mariposas, los destellos y las enredaderas son un solo vocabulario. Se repiten entre secciones, así que el visitante aprende qué pertenece al sitio tras la primera pantalla. Los dibujos vectoriales con nervaduras, manchas y sombreado sustituyeron a los primeros recortes ráster, que se veían borrosos. Las mariposas conservan el aleteo y el brote conserva su única flor, y todo se queda quieto cuando el visitante pide movimiento reducido.

El vocabulario llega hasta el trabajo mismo. El capítulo de Mobile Marketing está dibujado como un libro: una cubierta verde con borde dorado y mi marca que se levanta hasta una página de capítulo junto a maquetas de teléfono, y sus páginas pasan por cuatro canales.

Mobile
Marketing

CeraVe × Creva

Chapter II

Mobile Marketing

• I. SMS Messages
• II. MMS Rich Media
• III. Email Campaign
• IV. Push Notifications

Por qué le importa a quien revisa. Designlab recomienda un conjunto coherente de maquetas que ayuden a unificar visualmente tu portfolio. Un vocabulario repetido hace ese trabajo para toda la página, y los vectores se mantienen nítidos a cualquier tamaño, algo que un ráster estirado no consigue.

Cómo copiarlo. Fija un conjunto pequeño de formas y colores, reutilízalos en cada sección y aplícalos también a la presentación de tus muestras. Cuenta con dedicar más cuidado que el que exige una foto de stock.

Diseñar para las personas, no solo para la estética: UX, legibilidad y accesibilidad

El mayor reto fue equilibrar la ilustración detallada con una experiencia de usuario limpia y profesional. Como profesional del marketing, sé que un diseño precioso significa poco si los visitantes no encuentran lo que buscan. Por eso mantuve los proyectos a la vista, la navegación clara y el blog cómodo de leer.

Cómo copiarlo. Estas son las comprobaciones que hago de legibilidad, accesibilidad y móviles. En el blog, la comodidad de lectura es una columna de 680 píxeles con texto de 20 píxeles sobre una línea de 32, tinta oscura sobre blanco, la medida que Medium usa para el cuerpo de sus artículos.

Un contraste que se puede medir

Por qué le importa a quien revisa. El contraste bajo parece descuido y cansa la vista. Las pautas de accesibilidad web piden una relación de contraste de al menos 4,5:1 para el texto normal. La tinta del texto de mi blog es 15,52:1 sobre blanco y el verde de los botones es 6,35:1. El dorado y el rosa fallan como texto, con 2,29:1 y 2,24:1, así que el blog los usa solo como relleno y reserva gemelos más oscuros para el texto: una tinta rosa de 5,56:1 y una tinta dorada de 6,10:1. Los oscurecí hasta que pasaron en lugar de descartar los colores.

Cómo copiarlo. Elige primero los colores de tu identidad y prueba cada uno como texto sobre el fondo de tu página. Donde un color falle, consérvalo como relleno y oscurece un gemelo para las palabras. Pon la calidez en el marco y mantén el texto corrido sobre un fondo liso y de alto contraste.

Movimiento, pantallas táctiles y un siguiente paso claro

Cada efecto de arriba tiene una versión de movimiento reducido, y las pantallas táctiles tienen su propio recorrido, porque un teléfono no tiene cursor que seguir. La navegación de inicio termina con un botón Contact y la cabecera ofrece Get in Touch, así que quien ve el trabajo y le gusta sabe qué hacer después. Designlab aconseja que la experiencia móvil sea simple y usable y ofrecer una llamada a la acción clara. Los controles también tienen un estado pulsado, no solo uno de cursor encima, porque un dedo nunca pasa el cursor, y un control enfocado muestra un contorno visible de 2 píxeles.

El test de 30 segundos para revisores de tu portfolio

Abre tu portfolio en un teléfono, pon un temporizador y responde a esto en orden. Es una prueba que uso para leer una página como lo haría un revisor que ojea, no un estándar.

1. Primeros 5 segundos. ¿Puedes decir quién es y qué tipo de trabajo hace? Si necesitas desplazarte, la primera pantalla no cumple su función.
2. Siguientes 10 segundos. Cuenta las piezas de trabajo. Designlab sitúa el punto óptimo en 3-5 proyectos, y Nielsen Norman Group titula el paso elige 3-5 proyectos como casos de estudio detallados.
3. Siguientes 5 segundos. Busca cómo ponerte en contacto. Designlab aconseja un botón “Get in touch” destacado como llamada a la acción.
4. Siguientes 5 segundos. Lee un párrafo del cuerpo. ¿El texto tiene al menos 4,5:1 frente a su fondo y la longitud de línea es cómoda?
5. Últimos 5 segundos. Comprueba una cifra o una afirmación. ¿Hay una etiqueta al lado que diga qué es y qué no es?
6. Después activa el movimiento reducido en los ajustes del dispositivo y recarga. La página debe seguir teniendo sentido, con los efectos en reposo.

Que el trabajo hable por sí solo: cómo presento los proyectos

Mi portfolio reúne redes sociales, SEO, diseño gráfico y campañas creativas. Muestra el trabajo que he hecho haciendo crecer comunidades en redes sociales, creando contenido y trabajando en proyectos de marketing. Creo que la creatividad siempre debe tener un propósito: el diseño atrae la atención, pero el trabajo cuenta la historia real.

Lo que hice. La página de inicio nombra cinco capítulos (redes sociales, marketing móvil, diseño gráfico, SEO y una aplicación web), y el trabajo está a un desplazamiento de la primera pantalla. Una página muy decorada invita a sospechar que la sustancia es escasa, así que las secciones de pruebas son deliberadamente literales. Donde una cifra podría malinterpretarse, la página lo aclara a su lado: “Estos totales de cuenta son instantáneas, no mi producción personal ni un crecimiento atribuible.” Cada tarjeta de capítulo lleva además una etiqueta clara junto a la marca, como Account snapshot, Coursework o Live product.

Por qué le importa a quien revisa. La personalidad atrae la atención, y las etiquetas sencillas impiden que esa atención se convierta en duda. Quien revisa a toda prisa puede fiarse de una cifra que lleva su propio límite.

Cómo copiarlo. Nombra cada trabajo por lo que fue y por lo que hiciste. Pon la salvedad junto a la cifra, no en una nota al pie. Cuanto más decorada la página, más sencillas deben ser las afirmaciones.

¿Qué evitan estas decisiones? Errores comunes de portfolio

Cada decisión de arriba cierra la puerta a un error que nombran las guías de portfolio.

Las contrapartidas detrás de la magia: rendimiento y costes de diseño

Hubo contrapartidas. A veces simplifiqué una ilustración, reduje una animación o elegí una maquetación más legible en lugar de algo visualmente más emocionante. Una marca personal sólida no consiste en añadir todas las ideas creativas. Consiste en elegir los detalles que mejoran la experiencia.

Cómo copiarlo. Pon precio a cada idea antes de quedártela. Este es el precio de las mías, en peso y en mantenimiento. Dos de las decisiones de abajo son sencillas a propósito: el blog se queda en blanco y el hada descansa cuando alguien pide menos movimiento.

Lo que construir mi portfolio me enseñó sobre marca personal

Construir este portfolio me enseñó que la marca personal consiste en entenderse a una misma y encontrar una forma creativa de comunicarlo. No escondí mi personalidad divertida para parecer profesional, porque la creatividad y el profesionalismo pueden convivir.

Lo que yo te dejaría:

• Elige un personaje o motivo y dale un trabajo. Una mascota que se sienta junto a los títulos y reacciona al cursor es un sistema. Una mascota pegada en una esquina es una pegatina.
• Deja que la personalidad viva en el marco. Mantén el texto corrido sobre un fondo liso y de alto contraste.
• Comprueba el contraste antes de enamorarte de un color. Si un color de marca falla como texto, úsalo como relleno y oscurece un gemelo para el texto.
• Construye el interruptor junto con el efecto. El movimiento reducido y las pantallas táctiles también son visitantes.
• Rotula tus pruebas con palabras sencillas. Cuanto más decorada la página, más sencillas las afirmaciones.

No construí un portfolio solo para mostrar lo que he hecho. Construí un pequeño mundo que muestra quién soy.

FAQ: cómo hacer que un portfolio destaque

¿Cuántos proyectos debería mostrar un portfolio creativo?

Menos de los que crees. Designlab dice que el punto óptimo suele estar en el rango de 3-5, y Nielsen Norman Group sugiere 3-5 proyectos como casos de estudio detallados. Mi página de inicio muestra cinco capítulos, y cada uno dice qué fue el trabajo.

¿Una mascota o una ilustración harán que mi portfolio parezca poco profesional?

No, cuando tiene una función y no estorba al trabajo. La mía aparece en títulos y bordes, nunca sobre una muestra, y cada efecto tiene una versión de movimiento reducido. El riesgo que nombran las guías es la decoración que distrae del contenido, por eso las secciones de pruebas son literales.

¿Cómo elijo los colores de un portfolio de marca personal?

Empieza por la identidad, porque Shopify pone la identidad de marca primero, y luego prueba cada color como texto. La pauta de accesibilidad pide al menos 4,5:1 para el texto normal. Los colores que fallan aún pueden servir como relleno, con un gemelo más oscuro para las palabras.

¿Leerán mis descripciones los revisores?

Probablemente no enteras, así que hazlas breves y empieza por lo que hiciste. El consejo de Shopify para las descripciones de trabajo es mantenerlas cortas, y un responsable de contratación citado por Nielsen Norman Group dice “No me muestres solo el producto terminado.”

¿Debería escribir sobre cómo construí mi propio portfolio?

Sí, si lo escribes desde la experiencia. La guía de Google sobre contenido útil pregunta si tu contenido demuestra claramente experiencia de primera mano y profundidad de conocimiento. Un análisis de tu propio sitio, con las decisiones reales y lo que costaron, es de primera mano por construcción.

Si estás planeando un portfolio creativo propio, espero que las contrapartidas de arriba te ahorren algunos rodeos. Si quieres verlo todo junto, el portfolio es el mejor punto de partida, y el blog muestra la versión más tranquila de la misma identidad. Puedes escribirme a través de la página de contacto.

Este es un relato en primera persona de mi propio sitio, no un estándar de diseño. Las fuentes enlazadas fijan las pautas de contraste, movimiento reducido y portfolio; cualquier otra afirmación describe este sitio tal como está construido.