Professionele webportfolio met Canva
Web Portfolio Profesional con Canva
van cristinacalima @cristinacalima
- 473
- 23
- 1
(Automatisch vertaald uit Spaans)
Introductie
Introducción
Voor dit project heb ik een portfoliowebsite ontworpen met Canva, een tool die oorspronkelijk bedoeld was voor grafisch ontwerp, maar nu steeds uitgebreidere functies biedt voor websitecreatie. Als grafisch ontwerper en UX/UI-ontwerper werk ik meestal met meer technische platforms, maar toen ik ontdekte dat je met Canva websites kunt bouwen, besloot ik deze optie te verkennen.
Het project ontstond uit een echte behoefte: het creëren van de professionele portfolio van een bevriende artdirector. Hoewel ik oorspronkelijk van plan was om andere, meer gespecialiseerde software te gebruiken, motiveerde de aankondiging van de #CanvaContest me om te experimenteren met Canva als alternatieve oplossing. Het doel was om te kijken hoe ver ik kon komen met deze gratis tool, die ik zo vaak heb gebruikt voor socialmediaberichten, presentaties en advertenties, en de mogelijkheden ervan optimaal te benutten om een visueel aantrekkelijke, overzichtelijke en gebruiksvriendelijke website te ontwerpen.
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.
Materialen
Materiales
Voor dit project heb ik alleen de gratis versie van Canva gebruikt. Ik vond het interessant om de mogelijkheden van deze tool te verkennen en te demonstreren zonder gebruik te maken van betaalde functies, waardoor iedereen het proces kan repliceren zonder financiële investering.
Naast de software heb ik gewerkt met de volgende materialen, die ik heb gekregen van de art director voor wie de portfolio is gemaakt:
1. Afbeeldingen van uw projecten (in hoge kwaliteit), die de visuele basis van de site vormen.
2. URL's van video's die op externe platforms worden gehost en die in de website worden geïntegreerd om de presentatie van uw werk aan te vullen.
3. Handgetekende persoonlijke handtekening, geleverd in PNG-formaat met transparante achtergrond.
Alle inhoud werd rechtstreeks in Canva georganiseerd en aangepast.
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.
Stap 0: Inhoudsorganisatie, inspiratie en wireframes
Paso 0: Organización del contenido, inspiración y wireframes
Voordat ik met het project begon, ordende ik alle ontvangen materialen om een duidelijk overzicht te krijgen van de beschikbare bronnen en de structuur van de site te definiëren. Ik categoriseerde en verzamelde de afbeeldingen en video's die ik voor elk project wilde gebruiken, evenals de onderdelen die ik in de Homepage Hero zou opnemen.
Iets wat nooit mag ontbreken in het proces is inspiratie. Meestal doe ik dat door visuele voorbeelden en oplossingen van andere ontwerpers op te snuiven die me helpen een idee in mijn hoofd vorm te geven. Er zijn talloze platforms om goede referenties te vinden. Ik gebruik Pinterest, Dribbble en Savee.it het meest. Terwijl ik referenties zoek en opsla, maak ik een moodboard dat ik kan gebruiken om alles op één plek te bewaren en waar ik naar terug kan grijpen wanneer ik het gevoel heb dat ik de weg kwijtraak.
Voordat ik met Canva aan de slag ging, begon ik met het tekenen van wireframes. Eerste schetsen zijn erg belangrijk om tot een definitief idee te komen, zonder beperkt te worden door de tool die we later zullen gebruiken. Het is goed om met de hand op papier te tekenen, zonder na te denken over wat we voor ogen hebben voor het project: hoe we de website voor ons zien, welke onderdelen we zouden opnemen en hoe we de informatie zouden prioriteren. Deze eerste, zeer eenvoudige wireframes dienden als leidraad om later efficiënter te kunnen werken aan het uiteindelijke ontwerp in Canva.
Deze stap was essentieel om een duidelijke basis te creëren, zowel visueel als qua navigatie. Zo moest de portfolio aantrekkelijk zijn, maar ook intuïtief en gebruiksvriendelijk.
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.
Stap 1: De structuur in Canva bouwen
Paso 1: Construcción de la estructura en Canva
Nadat de wireframes waren gemaakt en ik een duidelijker beeld had van de structuur die ik wilde volgen, begon ik ze over te zetten naar Canva. Hoewel het platform kant-en-klare sjablonen biedt, koos ik ervoor om het ontwerp helemaal zelf te maken. Zo kreeg ik het resultaat dat ik zelf had bedacht en ontworpen, en waarvan ik dacht dat het de visuele stijl van de art director zou weerspiegelen.
Toen ik begon met het bouwen van de website, stuitte ik op een belangrijke beperking met de gratis versie van Canva: je kunt er maximaal vijf pagina's mee publiceren binnen één URL. De content vereiste in dit geval meer secties. Om aan deze beperking tegemoet te komen, besloot ik de site als volgt te structureren:
1. Een homepage die verschillende secties in één pagina integreert:
· Held, met afbeeldingen van uitgelichte projecten
· Projectindex, met de belangrijkste informatie en een afbeelding voor elk project
· Over mij, korte professionele presentatie
· Voettekst, met contactlinks en geselecteerde netwerken
2. Vier afzonderlijke pagina's om vier geselecteerde projecten uit de portfolio te presenteren. De andere twee zouden worden gekoppeld aan de bijbehorende Behance-pagina's van de art director. Hierbij werd gebruikgemaakt van het feit dat ik die video's niet had, dus het was efficiënter om de gebruiker naar een pagina te sturen waar hij of zij deze kon bekijken.
Met die structuur helder begon ik te werken aan de eerste lay-out in Canva, waarbij ik visuele hiërarchieën, marges en witruimte vastlegde. De esthetiek liet ik over aan de volgende stap, zowel voor de homepage als voor de projectpagina's. In dit stadium maak ik me nog geen zorgen over lettertypen, kleuren of uiteindelijke afbeeldingen; ik gebruik gewoon tekstblokken, lijnen en vierkante of rechthoekige vormen in grijstinten. Ik probeer de teksten wel zo dicht mogelijk bij de definitieve versie te schrijven, omdat de blokken en de witruimte dan nauw aansluiten bij het uiteindelijke ontwerp, waardoor er minder moeite is met aanpassen.
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.
Stap 2: De visuele identiteit definiëren
Paso 2: Definición de la identidad visual
Nadat de sitestructuur in Canva was gedefinieerd en ingesteld, was de volgende stap het vormgeven van de visuele identiteit van de portfolio. Hierbij moesten we zorgen voor een samenhangende, professionele presentatie die aansloot bij de esthetiek van de art director.
De algehele ontwerpstijl is minimalistisch, met de nadruk op witruimte en een overzichtelijke visuele lay-out. Dit verbetert niet alleen de browse-ervaring, maar zorgt er ook voor dat elk project op zichzelf staat.
Ik koos een neutraal kleurenpalet (wit, zwart en grijs), maar ik was op zoek naar een vleugje kleur dat persoonlijkheid zou toevoegen. Daarom koos ik een opvallende roodtint om enkele ontwerpdetails te benadrukken. Vergeet niet dat we altijd de focus op de projecten willen houden.
Meestal probeer ik zo min mogelijk lettertypen te gebruiken om de samenhang en een goede hiërarchie van de informatie te behouden. In dit geval koos ik voor twee schreefloze lettertypen: Open Sauce, de hoofdletter die ik in hoofdletters zou gebruiken voor koppen en links; en een andere, zeer vergelijkbare, Open Sans, die ik in kleine letters zou gebruiken voor de rest van de tekst, voornamelijk voor langere alinea's.
Daarnaast is het belangrijk om een aantal tekststijlen te selecteren. In dit geval is het lettertype voor de sectietitels bijvoorbeeld Open Sauce, Black, met een lettergrootte van 46 px; en voor de algemene links is het lettertype Open Sauce, Regular, met een lettergrootte van 12 px. We voegen ook een korte lijn van 1 px dik onder de tekst toe en een eenvoudig pictogram ernaast.
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.
Stap 3: Inhoud invoegen en ontwerp aanpassen
Paso 3: Inserción de contenidos y ajustes de diseño
Nadat de visuele identiteit was vastgelegd en de afbeeldingen waren georganiseerd en geselecteerd, ging ik over tot de fase van het invoegen van de uiteindelijke inhoud in elk van de secties van de site, inclusief de uiteindelijke tekst en afbeeldingen.
Tijdens deze fase heb ik ook de URL's toegevoegd waarnaar ik bij elke link wilde doorverwijzen. Bovendien heb ik de voorlopige lettertypen en kleuren die ik tijdens de structuurfase had gebruikt, vervangen door de definitieve versies die in het visuele systeem waren gedefinieerd.
Een van de belangrijkste elementen was de persoonlijke handtekening van de art director, aangeleverd in zwart PNG-formaat. Om deze te integreren in de nieuwe huisstijl, gebruikte ik Canva's Duotone-tool voor beeldbewerking, waarbij ik het rood van het bedrijf als hoofdkleur gebruikte. Dankzij deze functie kon ik het originele ontwerp van de handtekening behouden en tegelijkertijd perfect aansluiten bij de stijl van de portfolio.
Gedurende deze fase heb ik ook ontwerpwijzigingen doorgevoerd, uitlijningen gecorrigeerd, marges verfijnd en de visuele consistentie tussen de verschillende secties gewaarborgd. Deze fase was cruciaal om van een functionele mockup over te gaan naar een meer verfijnde en professionele presentatie.
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.
Stap 4: Interactiviteit en animaties
Paso 4: Interactividad y animaciones
Nadat het ontwerp was afgerond en de content was geïntegreerd, wijdde ik de volgende fase aan het werken aan basisinteractiviteit en animaties om de navigatie-ervaring dynamischer en boeiender te maken. De prioriteit lag bij het intuïtief en eenvoudig maken van de interactie, met respect voor een duidelijke visuele hiërarchie en behoud van de stilistische samenhang van het algehele ontwerp.
Binnen Canva heb ik gebruikgemaakt van de mogelijkheden voor elementanimatie om bepaalde visuele overgangen te stroomlijnen, met name in de Hero- en projectmap-items op de homepage. Ik heb subtiele animaties gebruikt, waarbij ik overdaad heb vermeden, met als doel de ervaring te verrijken zonder af te leiden van de hoofdinhoud. Om te voorkomen dat individuele elementen zouden verschuiven, heb ik de elementen die een structuur vormden, zoals een projectkaart, gegroepeerd. Zo zou alles samen bewegen wanneer ik animaties toevoegde.
Om de website gemakkelijker te kunnen navigeren, heb ik een link naar de homepage toegevoegd met de afbeelding van het bedrijf. Deze link zou als logo in de navigatiebalk op alle pagina's van de website dienen. Ik heb ook een link toegevoegd om direct naar de bovenkant van de pagina te gaan, zodat de gebruiker niet hoeft te scrollen.
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.
Stap 5: Publicatie en beoordeling
Paso 5: Publicación y revisión
Nadat het ontwerp helemaal klaar was, de inhoud was geïntegreerd en de animaties waren toegepast, ging ik over naar de laatste fase van het project: het publiceren en herzien van de website.
Eerst publiceerde ik de homepage samen met de vier afzonderlijke projectpagina's, waarbij ik ervoor zorgde dat ze allemaal correct aan elkaar gekoppeld waren, evenals aan de twee extra projecten die op Behance gehost werden. Ik schakelde de optie 'Navigatiemenu toevoegen' uit, omdat ik die al handmatig had gebouwd. Nadat de website gepubliceerd was, voerde ik een volledige ontwerpbeoordeling rechtstreeks in de browser uit om te controleren of de interacties, links en animaties werkten.
Tijdens deze review merkte ik dat sommige animaties visueel niet helemaal werkten zoals ik had verwacht, dus heb ik bepaalde effecten aangepast en vervangen door vloeiendere effecten. Bovendien liep de content niet goed terug bij het bekijken van het ontwerp op mobiele apparaten. Hoewel ik overwoog de optie 'Formaat wijzigen op mobiel' in Canva uit te schakelen om ervoor te zorgen dat het ontwerp trouw bleef aan mijn idee, besloot ik toch de structuur aan te passen om de kleine omvang, met name van de tekst, te voorkomen als ik deze optie uitschakelde.
Het is ingewikkeld en tijdrovend om alles zo aan te passen dat het goed past in mobiel formaat en er nog steeds perfect uitziet. Daarom gaf ik prioriteit aan een goede leesbaarheid en functionaliteit boven het bereiken van een perfect ontwerp in de mobiele versie. Voor deze taak is Canva's desktop- en mobiele preview erg handig, zodat je niet elke keer dat je wijzigingen aanbrengt, hoeft te publiceren. Dit vereist wat trial-and-error, waarbij je elementen aanpast en van formaat verandert en bekijkt hoe ze veranderen tijdens het bekijken ervan. Een truc is om te proberen de meeste elementen ongeveer 440 px breed te houden, zodat ze bij het bewerken voor de mobiele versie hun afmetingen niet te veel hoeven te wijzigen wanneer die 440 px binnen de breedte van het mobiele scherm passen.
Deze laatste beoordeling was essentieel om een consistente, vloeiende en professionele browse-ervaring te garanderen en het project af te ronden met een solide resultaat, zowel visueel als functioneel.
U kunt de gepubliceerde website hier bekijken: https://elenagilportfolio.my.canva.site/
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/
1 opmerking
Dankzij jou kan ik zo'n mooi werk maken
Log in of doe gratis mee om te reageren