Web Portfolio Profesional con Canva

Para este proyecto, he diseñado una página web portfolio utilizando Canva, una herramienta que, aunque inicialmente concebida para diseño gráfico, hoy en día ofrece funcionalidades cada vez más completas para la creación de sitios web. Como diseñadora gráfica y UX/UI, suelo trabajar con plataformas más técnicas, pero al descubrir que Canva permite construir páginas web, decidí explorar esta opción.

El proyecto surgió a partir de una necesidad real: crear el portfolio profesional de una amiga directora de arte. Aunque mi intención original era utilizar otro software más especializado, el anuncio del #CanvaContest me motivó a experimentar con Canva como solución alternativa. El objetivo fue ver hasta dónde podía llevar esta herramienta gratuita que tanto he utilizado para posts de redes, presentaciones o social ads, aprovechando al máximo su potencial para diseñar una web visualmente atractiva, clara en navegación y fácil de usar.

Para llevar a cabo este proyecto utilicé únicamente Canva, en su versión gratuita. Me pareció interesante explorar y demostrar las posibilidades que ofrece esta herramienta sin recurrir a funciones de pago, lo cual permite que cualquier persona pueda replicar el proceso sin necesidad de inversión económica.

Además del software, trabajé con los siguientes materiales proporcionados por la directora de arte para quien fue creado el portfolio:

1. Imágenes de sus proyectos (en alta calidad), que forman la base visual del sitio.
2. URLs de vídeos alojados en plataformas externas, integrados en la web para complementar la presentación de su trabajo.
3. Firma personal dibujada a mano, entregada en formato PNG con fondo transparente.

Todo el contenido se organizó y adaptó directamente en Canva.

Antes de comenzar el proyecto, me encargué de organizar todo el material recibido para tener una visión clara de los recursos disponibles y empezar a definir la estructura del sitio. Clasifiqué y reuní las imágenes y vídeos que quería utilizar para cada uno de los proyectos, así como las piezas que colocaría en el Hero de la Homepage.

Algo que nunca puede faltar en el proceso es la parte de inspiración. Lo que suelo hacer es empaparme de ejemplos visuales y soluciones a las que han llegado otros diseñadores que puedan servirme para empezar a montarme una idea en la cabeza. Hay muchísimas plataformas para encontrar buenas referencias. Yo suelo usar sobre todo Pinterest, Dribbble, y Savee.it. Mientras voy encontrando y guardando referencias, voy construyéndome un moodboard que me servirá para tener todo en un mismo sitio y para volver a él cada vez que sienta que pierdo el rumbo.

También, antes de ponerme a trabajar con Canva, me puse a dibujar wireframes. Los bocetos iniciales son muy importantes para llegar a la idea final sin limitarnos por la herramienta que utilizaremos luego. Es bueno dibujar a mano sobre papel, sin tener en cuenta nada más que lo que tenemos en la cabeza para el proyecto: Cómo nos imaginamos la web, qué secciones incluiríamos y cómo jerarquizaríamos la información. Estos primeros wireframes, muy sencillos, me sirvieron de guía para después ser más eficiente al construir el diseño final en Canva.

Este paso fue clave para establecer una base clara, tanto a nivel visual como de navegación, asegurando que el portfolio fuera atractivo, pero también intuitivo y fácil de utilizar.

Una vez hechos los wireframes y habiendo tenido una idea más clara de la estructura que quería seguir, comencé a trasladarla a Canva. Aunque la plataforma ofrece plantillas prediseñadas, opté por construir el diseño desde cero, para asegurarme de obtener el resultado que había pensado y diseñado por mi cuenta, y que pensaba que reflejaría el estilo visual de la directora de arte.

Al comenzar a montar la web, me encontré con una limitación importante de la versión gratuita de Canva: solo permite publicar hasta cinco páginas dentro de una misma URL. El contenido en este caso requería más secciones. Para adaptarme a esta restricción, decidí estructurar el sitio de la siguiente manera:

1. Una homepage que integra varias secciones en una sola página:

· Hero, con imágenes de proyectos destacados
· Index de proyectos, con la información principal y una imagen cada uno
· About me, breve presentación profesional
· Footer, con links de contacto y redes seleccionadas

2. Cuatro páginas individuales para presentar cuatro proyectos seleccionados del portfolio (los otros dos restantes los enlazaría a las páginas correspondientes de Behance de la directora de arte, aprovechando que no contaba con esos vídeos, por lo que era más eficiente enviar al usuario a una página donde sí podría verlos.

Con esa estructura clara, comencé a trabajar la maquetación inicial en Canva, estableciendo jerarquías visuales, márgenes y espacios en blanco, dejando la parte estética para el siguiente paso, tanto para la Homepage como para las páginas de proyecto. En esta fase no me preocupo por las tipografías, los colores o las imágenes finales, simplemente utilizo blosques de texto, líneas y formas cuadradas o rectangulares en escala de grises. Sí intento ya escribir los textos lo más cercanos a la versión final, porque así los bloques y espaciados se acercan al diseño final, por lo que no habrá tanto problema para adaptar.

Con la estructura del sitio definida y montada en Canva, el siguiente paso fue dar forma a la identidad visual del portfolio, asegurando una presentación coherente, profesional y alineada con la estética de la directora de arte.

El estilo general del diseño es minimalista, dando importancia a los espacios en blanco y a una composición visual ordenada. Esto no solo mejora la experiencia de navegación, sino que también permite que cada proyecto luzca por sí mismo.

Elegí una paleta de colores neutra (blanco, negro y gris), pero buscando un "pop" de color que añadiese personalidad, por lo que seleccioné un tono de rojo potente para destacar algunos detalles del diseño. Recordemos que buscamos que el foco esté siempre en los proyectos.
Normalmente intento seleccionar el menor número de tipografías posibles para mantener la coherencia y una buena jerarquía de la información. En este caso, me decanté por dos de palo seco, Open Sauce, la principal que utilizaría en mayúscula, para headlines y enlaces; y otra muy similar, Open Sans, que utilizaría en minúscula para el resto de contenido, principalmente para párrafos más largos.
Además, es importante seleccionar unos estilos de texto. Por ejemplo, en este caso para los títulos de sección la tipografía es Open Sauce, Black, con cuerpo de letra 46px; y para los enlaces generales la tipografía es Open Sauce, Regular, con cuerpo de letra 12px, y además añadiremos una línea corta de 1px de grosor debajo del texto y un icono sencillo al lado.

Una vez definida la identidad visual, y teniendo organizadas y seleccionadas las imágenes, pasé a la fase de inserción del contenido definitivo en cada una de las secciones del sitio, incluyendo textos finales e imágenes.
También me encargué en esta fase de añadir las urls a las que quería redirigir con cada enlace y sustituí las tipografías y colores provisionales utilizados durante la etapa de estructura por las versiones finales definidas en el sistema visual.

Uno de los elementos clave fue la firma personal de la directora de arte, entregada en formato PNG en color negro. Para integrarla dentro de la nueva identidad, utilicé la herramienta de edición de imagen Duotone de Canva, aplicando el rojo corporativo como color principal. Esta función permitió mantener el diseño original de la firma mientras se adaptaba perfectamente al estilo del portfolio.

A lo largo de esta fase, también fui realizando modificaciones de diseño, corrigiendo alineaciones, afinando márgenes y asegurando una coherencia visual entre las distintas secciones. Esta etapa fue clave para pasar de una maqueta funcional a una presentación más pulida y profesional.

Con el diseño finalizado y los contenidos ya integrados, dediqué la siguiente fase a trabajar la interactividad básica y las animaciones, para que la experiencia de navegación fuera más dinámica y atractiva. La prioridad fue que la interacción fuera intuitiva y sencilla, respetando una jerarquía visual clara y manteniendo la coherencia estilística del diseño general.

Dentro de Canva, aproveché las opciones de animación de elementos para dar fluidez a ciertas transiciones visuales, especialmente en el Hero de la homepage y en las entradas del directorio de proyectos. Utilicé animaciones sutiles, evitando excesos, con el objetivo de enriquecer la experiencia sin distraer del contenido principal. Para que no se muevan todos los elementos por separado, agrupé todos aquellos que formasen una estructura, como por ejemplo una tarjeta de proyecto, para que al añadir animaciones, se anime todo junto.

Para facilitar la navegación de la web, añadí enlace que llevase a la homepage a la imagen de la firma, que actuaría como logotipo en la barra de navegación de todas las páginas de la web. También añadí un en enlace para tener un acceso directo al principio de la página, para evitar que el usuario tenga que hacer scroll.

Con el diseño completamente armado, el contenido integrado y las animaciones aplicadas, pasé a la etapa final del proyecto: la publicación y revisión del sitio web.

Primero, publiqué la homepage junto con las cuatro páginas de proyectos individuales, asegurándome de que todas estuvieran correctamente enlazadas entre sí, así como con los dos proyectos adicionales alojados en Behance. Desactivé la opción de "Include navigation menu", pues ya lo había construido yo manualmente. Una vez publicada la web, realicé una revisión completa del diseño directamente en el navegador, para comprobar el funcionamiento de las interacciones, los enlaces y las animaciones.

Durante esta revisión, detecté que algunas animaciones no terminaban de funcionar como esperaba visualmente, así que ajusté y sustituí ciertos efectos por otros más suaves. Además, al visualizar el diseño en dispositivos móviles, el contenido no se redistribuía del todo bien, y aunque me planteé desactivar la opción “Resize on mobile” en Canva para asegurar así que el diseño se mantuviera fiel a lo que había concebido, me decidí por hacer cambios en la estructura para evitar el tamaño pequeño, sobre todo de los textos, si desactivaba esta opción.

Es complicado y algo lento ajustar todo para que se reajuste bien en formato móvil y se siga viendo perfecto, así que puse por encima asegurar la buena legibilidad y la funcionalidad antes que conseguir el diseño perfecto también en versión móvil. Para esta tarea, es muy útil la previsualización de desktop y mobile de Canva, para no tener que publicar cada vez que realizas cambios. Aquí se trata un poco de prueba-error, ajustando y redimensionando elementos y viendo cómo cambian al previsualizarlos. Un truquito, es intentar que la mayoría de elementos tengan un ancho de aproximadamente 440px, para que al ser manipulados para la versión móvil, estos no necesiten cambiar demasiado de medidas al entrar esos 440px dentro del ancho de la pantalla del móvil.

Esta última revisión fue clave para garantizar que la experiencia de navegación fuera consistente, fluida y profesional, dando por finalizado el proyecto con un resultado sólido tanto a nivel visual como funcional.

Puedes ver la web publicada aquí: https://elenagilportfolio.my.canva.site/