Professionelles Web-Portfolio mit Canva
Web Portfolio Profesional con Canva
von cristinacalima @cristinacalima
- 570
- 23
- 1
(Automatisch übersetzt aus Spanisch)
Einführung
Introducción
Für dieses Projekt habe ich eine Portfolio-Website mit Canva erstellt. Dieses Tool wurde ursprünglich für Grafikdesign entwickelt, bietet aber mittlerweile immer umfassendere Funktionen für die Website-Erstellung. Als Grafik- und UX/UI-Designer arbeite ich normalerweise mit eher technischen Plattformen. Als ich jedoch entdeckte, dass man mit Canva Websites erstellen kann, beschloss ich, diese Option auszuprobieren.
Das Projekt entstand aus einem echten Bedürfnis: das professionelle Portfolio eines befreundeten Art Directors zu erstellen. Obwohl ich ursprünglich eine andere, spezialisiertere Software verwenden wollte, motivierte mich die Ankündigung des #CanvaContests, Canva als alternative Lösung auszuprobieren. Ziel war es, herauszufinden, wie weit ich dieses kostenlose Tool, das ich so oft für Social-Media-Posts, Präsentationen und Social Ads verwendet habe, nutzen und sein Potenzial voll ausschöpfen konnte, um eine optisch ansprechende, übersichtliche und benutzerfreundliche Website zu gestalten.
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.
Materialien
Materiales
Für dieses Projekt habe ich ausschließlich die kostenlose Version von Canva verwendet. Ich fand es interessant, die Möglichkeiten dieses Tools zu erkunden und zu demonstrieren, ohne auf kostenpflichtige Funktionen zurückgreifen zu müssen. So kann jeder den Prozess ohne finanzielle Investitionen nachbilden.
Zusätzlich zur Software habe ich mit den folgenden Materialien gearbeitet, die mir der Art Director, für den das Portfolio erstellt wurde, zur Verfügung gestellt hat:
1. Bilder Ihrer Projekte (in hoher Qualität), die die visuelle Grundlage der Site bilden.
2. URLs von Videos, die auf externen Plattformen gehostet und in die Website integriert werden, um die Präsentation Ihrer Arbeit zu ergänzen.
3. Handgezeichnete persönliche Unterschrift, geliefert im PNG-Format mit transparentem Hintergrund.
Alle Inhalte wurden direkt in Canva organisiert und angepasst.
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.
Schritt 0: Inhaltsorganisation, Inspiration und Wireframes
Paso 0: Organización del contenido, inspiración y wireframes
Vor Projektbeginn habe ich alle erhaltenen Materialien geordnet, um einen klaren Überblick über die verfügbaren Ressourcen zu erhalten und die Struktur der Website zu definieren. Ich habe die Bilder und Videos, die ich für jedes Projekt verwenden wollte, sowie die Elemente, die ich in den Homepage Hero integrieren wollte, kategorisiert und zusammengestellt.
Inspiration darf dabei nie fehlen. Normalerweise sauge ich visuelle Beispiele und Lösungen anderer Designer auf, die mir helfen, eine Idee zu formen. Es gibt unzählige Plattformen, um gute Referenzen zu finden. Am häufigsten nutze ich Pinterest, Dribbble und Savee.it. Während ich Referenzen suche und speichere, erstelle ich ein Moodboard, mit dem ich alles an einem Ort speichere und jederzeit wieder darauf zurückgreifen kann, wenn ich den Faden verliere.
Bevor ich mit Canva zu arbeiten begann, habe ich außerdem angefangen, Wireframes zu zeichnen. Erste Skizzen sind sehr wichtig, um die endgültige Idee zu entwickeln, ohne durch das später verwendete Tool eingeschränkt zu sein. Es ist gut, von Hand auf Papier zu zeichnen, ohne an etwas anderes zu denken als an das, was wir uns für das Projekt vorstellen: wie wir uns die Website vorstellen, welche Abschnitte wir einbinden und wie wir die Informationen priorisieren. Diese anfänglichen, sehr einfachen Wireframes dienten als Leitfaden, um später das endgültige Design in Canva effizienter zu erstellen.
Dieser Schritt war entscheidend, um sowohl optisch als auch hinsichtlich der Navigation eine klare Grundlage zu schaffen und sicherzustellen, dass das Portfolio nicht nur ansprechend, sondern auch intuitiv und benutzerfreundlich ist.
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.
Schritt 1: Erstellen der Struktur in Canva
Paso 1: Construcción de la estructura en Canva
Nachdem die Wireframes erstellt waren und ich eine klarere Vorstellung von der gewünschten Struktur hatte, begann ich mit der Übertragung auf Canva. Obwohl die Plattform vorgefertigte Vorlagen anbietet, entschied ich mich, das Design von Grund auf neu zu erstellen, um sicherzustellen, dass ich das Ergebnis erhielt, das ich selbst konzipiert und entworfen hatte und das meiner Meinung nach den visuellen Stil des Art Directors widerspiegelte.
Als ich mit der Erstellung der Website begann, stieß ich bei der kostenlosen Version von Canva auf eine erhebliche Einschränkung: Man kann nur bis zu fünf Seiten unter einer einzigen URL veröffentlichen. Der Inhalt erforderte in diesem Fall mehrere Abschnitte. Um dieser Einschränkung Rechnung zu tragen, habe ich die Website wie folgt strukturiert:
1. Eine Homepage, die mehrere Abschnitte auf einer einzigen Seite integriert:
· Hero, mit Bildern der vorgestellten Projekte
· Projektindex mit den wichtigsten Informationen und einem Bild zu jedem Projekt
· Über mich, kurze berufliche Vorstellung
· Fußzeile mit Kontaktlinks und ausgewählten Netzwerken
2. Vier einzelne Seiten zur Präsentation von vier ausgewählten Projekten aus dem Portfolio (die anderen beiden würden mit den entsprechenden Behance-Seiten des Art Directors verknüpft sein. Dabei würde ich mir die Tatsache zunutze machen, dass ich diese Videos nicht hatte und es daher effizienter war, den Benutzer auf eine Seite zu schicken, auf der er sie sehen konnte).
Nachdem diese Struktur klar war, begann ich mit der Arbeit am ersten Layout in Canva. Ich legte visuelle Hierarchien, Ränder und Leerraum fest und überließ die Ästhetik dem nächsten Schritt – sowohl für die Homepage als auch für die Projektseiten. In dieser Phase mache ich mir keine Gedanken über Schriftarten, Farben oder endgültige Bilder; ich verwende einfach Textblöcke, Linien und quadratische oder rechteckige Formen in Graustufen. Ich versuche, die Texte so nah wie möglich an der endgültigen Version zu schreiben, da die Blöcke und Abstände dann dem endgültigen Design sehr ähnlich sind und die Anpassung weniger schwierig ist.
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.
Schritt 2: Definition der visuellen Identität
Paso 2: Definición de la identidad visual
Nachdem die Site-Struktur definiert und in Canva eingerichtet war, bestand der nächste Schritt darin, die visuelle Identität des Portfolios zu gestalten und eine stimmige, professionelle Präsentation sicherzustellen, die mit der Ästhetik des Art Directors übereinstimmt.
Der Designstil ist minimalistisch und legt Wert auf Leerraum und ein übersichtliches Layout. Dies verbessert nicht nur das Surferlebnis, sondern sorgt auch dafür, dass jedes Projekt für sich steht.
Ich habe mich für eine neutrale Farbpalette (Weiß, Schwarz und Grau) entschieden, suchte aber nach einem Farbtupfer, der Persönlichkeit verleiht. Deshalb habe ich einen kräftigen Rotton gewählt, um einige Designdetails hervorzuheben. Denken Sie daran, dass wir den Fokus immer auf die Projekte legen wollen.
Normalerweise versuche ich, möglichst wenige Schriftarten auszuwählen, um die Kohärenz und eine gute Hierarchie der Informationen zu wahren. In diesem Fall habe ich mich für zwei serifenlose Schriften entschieden: Open Sauce, die ich hauptsächlich in Großbuchstaben für Überschriften und Links verwende, und eine weitere, sehr ähnliche Schrift, Open Sans, die ich in Kleinbuchstaben für den restlichen Inhalt verwende, vor allem für längere Absätze.
Zusätzlich ist es wichtig, einige Textstile auszuwählen. In diesem Fall verwenden wir beispielsweise für die Abschnittstitel die Schriftart „Open Sauce, Schwarz“ mit einer Schriftgröße von 46 Pixeln und für die allgemeinen Links die Schriftart „Open Sauce, Normal“ mit einer Schriftgröße von 12 Pixeln. Wir fügen außerdem eine kurze Linie mit 1 Pixel Breite unterhalb des Textes und ein einfaches Symbol daneben hinzu.
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.
Schritt 3: Inhalte einfügen und Designanpassungen vornehmen
Paso 3: Inserción de contenidos y ajustes de diseño
Nachdem die visuelle Identität definiert und die Bilder organisiert und ausgewählt waren, ging ich zur Phase des Einfügens des endgültigen Inhalts in die einzelnen Abschnitte der Site über, einschließlich des endgültigen Textes und der endgültigen Bilder.
Während dieser Phase habe ich auch die URLs hinzugefügt, auf die ich mit jedem Link weiterleiten wollte, und ich habe die während der Strukturphase verwendeten vorläufigen Schriftarten und Farben durch die im visuellen System definierten endgültigen Versionen ersetzt.
Eines der Schlüsselelemente war die persönliche Signatur des Art Directors, die im schwarzen PNG-Format bereitgestellt wurde. Um sie in die neue Identität zu integrieren, nutzte ich das Duotone-Bildbearbeitungstool von Canva und verwendete das Rot des Unternehmens als Hauptfarbe. So konnte ich das ursprüngliche Signaturdesign beibehalten und es gleichzeitig perfekt an den Stil des Portfolios anpassen.
In dieser Phase nahm ich auch Designänderungen vor, korrigierte Ausrichtungen, optimierte Ränder und sorgte für visuelle Konsistenz zwischen den verschiedenen Abschnitten. Diese Phase war entscheidend für den Übergang von einem funktionalen Modell zu einer ausgefeilteren und professionelleren Präsentation.
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.
Schritt 4: Interaktivität und Animationen
Paso 4: Interactividad y animaciones
Nachdem das Design fertiggestellt und die Inhalte integriert waren, widmete ich mich in der nächsten Phase der Arbeit an grundlegender Interaktivität und Animationen, um das Navigationserlebnis dynamischer und ansprechender zu gestalten. Priorität hatte eine intuitive und einfache Interaktion, die Einhaltung einer klaren visuellen Hierarchie und die stilistische Kohärenz des Gesamtdesigns.
In Canva habe ich die Elementanimationsoptionen genutzt, um bestimmte visuelle Übergänge zu optimieren, insbesondere im Startseiten-Hero und in den Projektverzeichniseinträgen. Ich habe subtile Animationen verwendet und Überflüssiges vermieden, um das Erlebnis zu bereichern, ohne vom Hauptinhalt abzulenken. Um zu verhindern, dass sich einzelne Elemente bewegen, habe ich diejenigen gruppiert, die eine Struktur bilden, beispielsweise eine Projektkarte. So wird beim Hinzufügen von Animationen alles gleichzeitig animiert.
Um die Navigation auf der Website zu vereinfachen, habe ich einen Link zur Startseite mit dem Firmenbild hinzugefügt. Dieses dient als Logo in der Navigationsleiste auf allen Seiten der Website. Außerdem habe ich einen Link hinzugefügt, der direkt zum Seitenanfang führt, damit der Benutzer nicht scrollen muss.
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.
Schritt 5: Veröffentlichung und Überprüfung
Paso 5: Publicación y revisión
Nachdem das Design vollständig zusammengestellt, die Inhalte integriert und die Animationen angewendet waren, ging ich zur letzten Phase des Projekts über: der Veröffentlichung und Überarbeitung der Website.
Zuerst veröffentlichte ich die Homepage zusammen mit den vier einzelnen Projektseiten und stellte sicher, dass sie alle korrekt miteinander sowie mit den beiden weiteren auf Behance gehosteten Projekten verknüpft waren. Ich deaktivierte die Option „Navigationsmenü einschließen“, da ich sie bereits manuell erstellt hatte. Nach der Veröffentlichung der Website führte ich direkt im Browser eine vollständige Designprüfung durch, um zu prüfen, ob die Interaktionen, Links und Animationen funktionierten.
Bei dieser Überprüfung fiel mir auf, dass einige Animationen optisch nicht ganz meinen Erwartungen entsprachen. Daher habe ich einige Effekte angepasst und durch weichere ersetzt. Außerdem wurde der Inhalt beim Anzeigen des Designs auf Mobilgeräten nicht korrekt umgebrochen. Obwohl ich überlegt hatte, die Option „Größe auf Mobilgeräten anpassen“ in Canva zu deaktivieren, um sicherzustellen, dass das Design meinen Vorstellungen entspricht, habe ich mich entschieden, die Struktur zu ändern, um die geringe Größe, insbesondere des Textes, zu vermeiden, falls ich diese Option deaktiviere.
Es ist kompliziert und zeitaufwändig, alles so anzupassen, dass es sich im mobilen Format gut skalieren lässt und trotzdem perfekt aussieht. Daher war mir gute Lesbarkeit und Funktionalität wichtiger als das perfekte Design auch in der mobilen Version. Die Desktop- und Mobilvorschau von Canva ist hierfür sehr praktisch, sodass Sie nicht nach jeder Änderung alles veröffentlichen müssen. Dazu müssen Sie ein wenig herumprobieren, Elemente anpassen und ihre Größe ändern und beobachten, wie sie sich in der Vorschau verändern. Ein Trick besteht darin, die Breite der meisten Elemente auf etwa 440 Pixel zu beschränken, damit ihre Abmessungen bei der Bearbeitung für die mobile Version nicht zu stark geändert werden müssen, wenn diese 440 Pixel auf die Breite des mobilen Bildschirms passen.
Diese abschließende Überprüfung war entscheidend, um ein konsistentes, flüssiges und professionelles Browsing-Erlebnis zu gewährleisten und das Projekt mit einem sowohl optisch als auch funktional soliden Ergebnis abzuschließen.
Sie können die veröffentlichte Website hier sehen: 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 Kommentar
Dank Ihnen kann ich solch ein schönes Werk schaffen
Melden Sie sich an oder melden Sie sich kostenlos an, um zu kommentieren