Professionelles Web-Portfolio mit Canva

Web Portfolio Profesional con Canva

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.

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.

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.

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.

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.

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.

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.

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/