So baust du eine professionelle Portfolio-Website mit Squarespace

Kennst du schon Victoria Weber? Sie bringt dir bei, wie du mit Squarespace eine eigenen Website erstellst. Ich selber habe die komplette Studio Umi Website mit Squarespace aufgebaut und bin absolut begeistert von ihrem hilfreichen Blog. Sie hat mich vor kurzem um einen Gastartikel über GIFs gebeten. Da konnte ich natürlich nicht Nein sagen. Im Gegenzug hat sie für uns einen wundervollen Beitrag über die Erstellung einer professionellen Portfolio Seite geschrieben. Ein Portfolio ist das Aushängeschild jedes Illustrators/Motion Designers. Und wie man so eine Seite mit Squarespace erstellt erfährst du in diesem Blogartikel. Los geht’s.

 
Studio Umi - Pinterest Pin Vorlage.jpg
 

Was tun die Leute, wenn sie dich bei Instagram finden und näher interessiert sind? Genau. Sie klicken erstmal auf den Link in deiner Bio - oder, wenn sie am Desktop sitzen - googlen dich.

Am Ende landen sie auf deiner Website. 

Klar, Instagram selbst ist ja schon eine Art Portfolio. Doch das Problem ist am Ende: Instagram kann machen, was es will. Auf deiner Website dagegen hast du absolute Freiheit und keiner kann dich beschränken. Du entscheidest außerdem selbst über dein Format und musst deine Werke nicht in Kästchen quetschen.

Abgesehen davon, dass du, wenn du deine eigenen GIFs auf Instagram bekommen willst, für die Verifizierung als Brand eine professionelle Website brauchst. Daran hakt es oft. 

Wenn das nicht top überzeugende Gründe sind, dir eine ordentliche Portfolio-Website zuzulegen!

Das Problem der meisten Portfolio-Websites

Viele Kreative sagen sich: “Okay, ich brauche ein Portfolio online.” Ein Schaufenster für all die tollen Sachen, die du so machst. Du baust das Ganze also fröhlich auf, setzt deine Werke hübsch in Szene und denkst: Sieht gut aus! :-) Allerdings gibt es, wenn du dir nicht vorher Gedanken dazu machst, ein Problem: Solche Websites sind eher “Kunst” als Verkaufstool.

Klar willst du deinen Stil zeigen und wie wunderschön deine Arbeit ist.

Aber - wenn das Ganze nicht gerade ein Hobby ist - möchtest du ja normalerweise auch, dass etwas passiert. Dass deine Website nicht nur ein “nettes Angucken” erreicht, sondern dich potenzielle Kunden auch buchen. Das Problem: Die meisten Portfolio-Websites stehen still und stumm im Internet. Das ist vergleichbar mit einem wunderschön dekorierten Schaufenster - das aber zu einem Laden gehört, der geschlossen hat. Die Leute gucken sich vielleicht dein Portfolio an, aber dann sehen sie keine offene Eingangstür, und obwohl ihnen deine Sachen eigentlich gefallen, gehen sie weiter.

Aber keine Sorge - das wird dir natürlich nicht passieren, nachdem du diesen Artikel gelesen hast!

Squarespace: Das super Tool, wenn deine Website schön UND leicht zu bearbeiten sein soll

Bei Portfolio-Websites ist es wichtig, dass der Look stimmt. Gerade wenn du ein Auge fürs Schöne hast, willst du keine hässliche Website, sondern wahrscheinlich etwas, das auch noch ein bisschen fancy anmutet.

Falls du dich darin wieder erkennst, kann ich dir Squarespace empfehlen, das ultimative Website-Tool, wenn du keine Lust auf nervige Technik hast.

Nicht nur Sophia hat sich für Studio Umis Website und diesen Blog für Squarespace entschieden - immer mehr Leute setzen auf das System, das in den USA schon lange riesengroß ist. (Ob Squarespace auch etwas für dich ist, kannst du hier im Detail nachlesen.)

Mit Squarespace ist es möglich, dass du auch als Nicht-Technik-Pro mit einer tollen Seite online vertreten bist. 

Hier zeige ich dir in 7 Schritten, wie du deine Portfolio-Website bei Squarespace umsetzen kannst!

Schritt 1: Überleg dir VORHER, was du mit deiner Portfolio-Website erreichen willst (und wen!)

Gleich an allererster Stelle der häufigsten Website-Fehler stehen mangelnde Überlegungen. Dabei ist es eigentlich gar nicht so kompliziert, sich ein bisschen Gedanken zu der ganzen Sache zu machen.

Vor allem solltest du dir vorab aufschreiben, wer denn eigentlich die Leute sind, die deine Portfolio-Website angucken sollen. 

  • Bist du jemand, der für große Firmen arbeitet und willst dich deswegen online als Designer/Künstler/XYZ präsentieren?

  • Willst du digitale Produkte verkaufen?

  • Oder willst du Poster/eigene Produkte verkaufen?

  • Oder wendest du dich an Hobby-Leute, denen du zeigst, wie sie Dinge selbst machen können?

  • Oder verkaufst du fertige Ergebnisse?

  • Oder willst du für eine 1-zu-1-Zusammenarbeit als Dienstleister gebucht werden?

Je nachdem, was eigentlich dein Website-Ziel und wer dein Zielkunde ist, musst du dann ganz anders an die Sache herangehen. (Wenn dir diese Fragen etwas abstrakt vorkommen, melde dich zu meinem gratis Email-Kurs an, bei dem du das in 5 Tagen komplett vorbereitest).

Wichtig ist es auch zu wissen: Alles auf einmal geht nicht. Zumindest am Anfang. Such dir also erstmal nicht 10 Unterziele aus, sondern schau ganz genau, was für dich das wichtigste Ziel im aktuellen Stadium ist. Deine wichtigsten Seiten kannst du dann ganz konkret in diese Richtung planen. Aber erst NACHDEM du festgelegt hast, was du willst.

Nehmen wir mal ein konkretes Beispiel. Du möchtest Handlettering-Kurse geben. Ein super Thema, für das du genau deine Zielgruppe kennst und zu dem du richtig Ahnung und gute Referenzen hast.

Jetzt ist die Frage: Was sollen deine potenziellen Kunden im Idealfall auf deiner Website machen? Richtig - den Kurs kaufen! Also musst du dir überlegen, welche Schritte sie dahin führen können. Einfach nur den Kurs auf die Seite zu setzen wird nicht funktionieren.

Du musst zunächst überzeugen, dass du gut bist, einen bestimmten Stil verkörpern, die Leute an dein Angebot heranführen und sie das Gefühl bekommen lassen: “Da weiß jemand, wovon er spricht, hier bin ich gut aufgehoben!”

Aus diesen Punkten kannst du dann haargenau ableiten, welche Seiten du eigentlich brauchst: 

  • Startseite (um zu zeigen, worum es bei dir geht und wie dein Handlettering-Stil aussieht)

  • Über-mich-Seite, auf der du mehr zu dir zeigst - und was deine Arbeit und dich qualifiziert

  • Blog, in dem du kleine Kostproben gibst, wie du den Leuten super Handlettering-Tipps vermittelst

  • Kursseite, in der du ganz spezifisch zeigst, was man in deinem Handlettering-Kurs lernen kann

  • + eventuell davor aufbauende Seiten, in denen du zeigst, wie du anderen Leuten schon geholfen hast, Handlettering ganz einfach zu lernen (um Vertrauen zu erzeugen)

Du siehst: Mit so einer Liste hast du schon eine strategisch zielführende Seiten-Übersicht für deine neue Website, statt auf Teufel komm raus irgendwelche Seiten zu füllen.

Schritt 2: Such dir bei Squarespace ein Template aus

Das Tolle ist: Mit Squarespace eine neue Website zu beginnen ist leicht. Also, im Sinne von: Wirklich leicht. Du suchst dir einfach ein Template aus und legst direkt los. 

Früher war es so, dass du mit der Auswahl deines Templates automatisch Funktionen bekommen oder ausgeschlossen hast. Seit Juni 2020 ist Squarespace aber mit der Version 7.1 dazu umgestiegen, dass alle Templates die gleichen Features mitbringen.

Das Beste daran ist: Das Template ist nur ein “Designvorschlag”, in Wirklichkeit sind seitdem aber alle neuen Templates gleich und du kannst komplett alles selbst ändern. Es ist also fast egal, welches Template du auswählst, auch wenn sie sehr verschieden aussehen:

squarespace-templates.jpg

Gut zu wissen ist allerdings, dass Version 7.1 und die alte Squarespace 7.0-Version dann doch ein paar Unterschiede im Handling haben. Falls du also alte Websites als Vorbilder nehmen willst, musst du bei den Templates ganz nach unten scrollen und zu den “Templates der früheren Version” gehen. 

Was die Finanzen angeht: Du kannst Squarespace ganz einfach 14 Tage lang gratis testen. Es ist also kein Beinbruch, wenn du dich danach entscheidest, das Ganze doch nicht mit dem jeweiligen Template umzusetzen. 

Schritt 3: Richte deine wichtigsten Seiten ein

Sobald du auf “Jetzt mit (Templatename) loslegen” geklickt hast, bist du auch schon mittendrin im Vergnügen! 😎

Es gibt bei Squarespace unter “Seiten” vorgefertigte Seitenlayouts - noch besser ist es allerdings, dir deine Seiten erstmal auf Papier aufzumalen, sie vor dir hinzulegen und das Ganze “freestyle” zu bauen. Ansonsten kann es sein, dass deine Website am Ende langweiligerweise genauso aussieht wie das Template. Und das willst du ja eigentlich nicht.

Je nachdem, welche Ziele du dir oben überlegt hast, kannst du jetzt nach und nach deine Seiten aufbauen.

Diese Seiten braucht fast jede Portfolio-Website:

#1 Startseite mit klarer Info “über dem Falz”

Auf deiner Startseite sollte eine nicht misszuverstehen “Ansage” zu finden sein. “Über dem Falz” ist übrigens der Bereich, den man sieht, ohne zu scrollen. Hier baust du am besten ein klares Statement ein, was es bei dir zu finden gibt bzw. wer du bist.

Ein super Beispiel ist Sophia auf der Studio-Umi-Startseite:

startseite-studio-umi Kopie.jpg

Ein Button, der direkt zu deinem Angebot führt, schadet natürlich auch nicht. 

Wenn du zum Beispiel Packaging-Designer bist, könntest du einen Button setzen, der zu deinen vergangenen Projekten führt. Oder direkt zu deinem Anfrageformular. 

Das Wichtigste ist aber in diesem Bereich, dass sofort und glasklar herüberkommen musst, für wen du was bietest. Jegliche Form von Verwirrung verscheucht die Leute sofort wieder.


#2 Über-mich-Seite

Vor allem, wenn du als einzelne Person hinter deiner Arbeit stehst (aber natürlich auch als Agentur- oder Markeninhaber), sind die Leute immer absolut interessiert, wer sich hinter der ganzen Sache verbirgt.

Und trau dich ruhig, hier ein paar Sätze mehr zu schreiben als die klassischen Lebenslauf-Fitzel, Errungenschaften oder Wegstationen. Kleine, spezifische Details setzen sich fest. 

Ich selbst ändere meine Über-mich-Seite ab und zu, und bin immer wieder überrascht, welche winzigen Details (auf die ich selbst gar nicht sooo geachtet habe) dann in Gesprächen genannt werden. 😊

Lass dir garantiert sein: Die Leute sind mindestens genauso interessiert an dir wie an deinem Portfolio. Du kannst dich also ruhig ein bisschen in Szene setzen und die Person hinter deinem Werk hervor scheinen lassen. Das gilt auch, wenn du mit großen Unternehmen zusammen arbeitest.

Wenn du übrigens noch keine Fotos von dir hast, empfehle ich dir diesen Artikel. Ordentliche Fotos lohnen sich tatsächlich immer!

#3 Seite zur Zusammenarbeit bzw. Buchung (nicht: Kontakt!)

Hier wird oft der Fehler gemacht, dass zwei Dinge verwechselt werden. Die Kontaktseite sollte nämlich nur dein allgemeines Formular sein - für die Websitebesucher, die ganz spezifische (oder komische :-)) Anliegen haben.

Dein von dir als am wichtigsten angesehenes Angebot solltest du aber auf eine eigene Seite packen - auf der du klar beschreibst, wie man zu deinem Hauptziel kommt.

Gucken wir uns ein Beispiel an. 

Du bist Grafikdesigner und hast dich auf Buchcover spezialisiert.

Statt zu schreiben: “Kontaktiere mich jetzt” und auf deine Kontaktseite zu verweisen, solltest du eine Seite erstellen, auf der es ganz glasklar wird, was man tun muss, wenn man HIER UND JETZT mit dir zusammenarbeiten möchte.

Das bekommst du dadurch hin, in dem du die einzelnen Schritte der Zusammenarbeit zeigst - und eventuell noch ein paar Testimonials und Arbeitsbeispiele untermischt, um deine Street Credibility in diesem wichtigen Moment zu untermauern.

Selbst wenn du keine Preise zeigen willst (was vollkommen okay ist) - den Prozess und was man genau bekommt würden die meisten Leute ja dann doch gerne wissen.

Du würdest also auf deine Services-Seite eine Beschreibung setzen, und darunter die drei konkreten Angebote, die du hast:

  • “Self-Publisher-Paket 1: Komplettes Ebook-Design mit XYZ”

  • “Self-Publisher-Paket 2: Ebook-Design mit 3 Korrekturschleifen, Cover-Adaption für Printausgabe und Design von passenden Flyern als Druckvorlage”

  • “Für Verlage: Persönliches Angebot erfragen” + Button, der zu spezifischen Ausfüll-Formular führt, in dem du schon alle wichtigen Dinge abfragst

Und dann jeweils darunter eine klare Anleitung, wie man das denn in Auftrag geben kann, wenn man sich dafür interessiert!

Durch solche konkreten Dinge sind die Leute gleich viel gewillter, direkt in Aktion zu treten. Mach es den Leuten so einfach wie möglich :-)

#4 Die rechtlichen Standards

Neben den Seiten, die du als wichtig für deine Ziele ansiehst, kommen noch die rechtlichen Dinge wie das Impressum oder die Datenschutzerklärung.

Bei denen musst du dich inhaltlich und designmäßig aber nicht verkünsteln, da gibt es Standards. 

Schritt 4: Zeige, was du kannst (und beweise es!)

Ja, ein Portfolio verdeutlicht normalerweise schon ziemlich gut, wie dein Stil aussieht und was du so alles in dir hast.

Noch besser ist es allerdings, wenn du diesen Stil auch mit konkreten Beweisen unterstützt.

So sieht das zum Beispiel bei Studio Umi aus:  

testimonials-website.jpg

Neben Logos funktionieren auch ehrliche Kundenstimmen (am besten mit Namen und Bild) super. Die Leute wollen nämlich gerne sehen, dass du von Dritten “approved”, also für gut befunden, wurdest. Ob das jetzt Pressezitate oder die Aussagen echter Menschen sind, ist eigentlich egal - das Wichtigste ist es, dass es nachweisbar ist.

Anstatt komplette Testimonial-Seiten mit ellenlangen Texten einzurichten, mache ich selbst es übrigens so, dass ich wenige ausgewählte Kundenstimmen an genau dem Ort einbinde, an dem sie relevant sind. Zum Beispiel in der Nähe der Buchungs-Buttons! 😉

Schritt 5: Lass dein Portfolio nicht für sich selbst sprechen

Du hast noch keine fancy Testimonials, die du einbinden kannst?

Dann ist es trotzdem besser, dein Portfolio nicht leer im Raum stehen zu lassen, sondern deiner Arbeit einen Kontext zu geben. Das bekommst du durch sogenannte Case Studies hin.

Selbst bei persönlichen Projekten (die du zeigst, weil du noch keine Kundenprojekte vorzuweisen hast) kannst du dazu schreiben, wie das fiktive Projekt angelegt ist und was du dir dabei gedacht hast. So steht das Ganze nicht erklärungslos im Raum und dein potenzieller Kunde kann sich überlegen, ob er deine Art zu denken (und ein Projekt anzugehen) gut findet. 

Wenn du also zum Beispiel als Kinderbuchillustrator arbeiten willst und noch keine Aufträge hast, könntest du das fiktive Buch beschreiben und 3-4 ausgewählte Illustrationen daraus zeigen. Dazu dann zum Beispiel deinen Arbeitsprozess, deine Skizzen, wie du sie umgesetzt hast, was du dir dabei gedacht - und die Zeit, die du dafür gebraucht hast.

Du kannst dann zwar nicht schreiben: “Für Verlag X gemacht”.

Aber du zeigst durch solche konkreten Beispiele, wie man sich die Zusammenarbeit mit dir vorstellen kann, WENN man sich dann entscheidet, dich für ein neues Kinderbuch als Illustratoren zu buchen.

Kreativ hin oder her: Die meisten Käufer und Auftraggeber kaufen am liebsten Sicherheit. Wenn du zeigst, dass du ordentlich arbeitest und weißt, was eine Deadline ist, hilft das schon ungemein!

So setzt du das bei Squarespace um: 

Was viele nicht wissen, ist, dass du mehrere sogenannten Blog-Sammlungen haben kannst. Oder aber auch Galerien. Du kannst also entweder einen Blog für deine Case-Studies anlegen oder sie aber als eine Art zweites Portfolio zeigen. 


Schritt 6: Baue Handlungsaufrufe (CTAs) und konkrete Aufforderungen ein

Nicht nur deine Angebotsseite sollte konkrete Handlungsaufrufe haben (siehe Schritt 3). Ich vertrete die These, dass auf JEDE Seite ein sogenannter Call-to-Action kommen muss.

Vor allem, weil auf mobilen Geräten oft so viel Scrollen nötig ist, dass man gar nicht mehr weiß, wo man eigentlich gerade noch gewesen ist...

Wenn dann ganz unten ein Knopf ist, der mir sagt: “Jetzt zu XY gehen”, dann klicke ich da doch gerne drauf - erleichtert, dass mir jemand den Weg zeigt. 

handlungsaufrufe.jpg

Beispiel von meiner Über-mich-Seite - hier habe ich nicht nur einen, sondern gleich mehrere Handlungsaufrufe. Einmal für die “Kaufwilligen”, die sofort Hilfe brauchen, und dann auch für diejenigen, die mich erstmal durch meine Emails und Gratiskurse kennen lernen wollen.

Die beste Aufforderung? Mit dir in Kontakt zu bleiben!

Die Leute, die dein Angebot sofort buchen, werden immer in der Unterzahl sein. Da ist natürlich die Frage: Was machst du mit all denen, die deine Sachen eigentlich gut finden, aber gerade keine Zeit/Geld/dringenden Bedarf haben?

Antwort: Du lädst sie ein, sich mit dir zu verknüpfen.

Ob du das als Newsletter oder durch eine Einladung zu Instagram machst, ist eigentlich egal - Hauptsache ist, du hast dir das vorher gut überlegt. 

Und: Gib den Leuten einen guten Grund, warum sie sich anmelden/dir followen sollen. 

Ein super Beispiel habe ich vor Kurzem bei einer Künstlerin gesehen, die Aquarell- und Ölbilder verkauft. Ich fand den Stil wunderschön und dachte: “Das sieht alles super schick aus.” Aber ich war in diesem Moment nicht so sehr auf “Bildkauf” aus, dass ich sofort meine Kreditkarte gezückt hätte.

Stattdessen habe ich mich “unverbindlich” zum Schnuppern auf der Website umgesehen. 

Dort wurde ich dazu eingeladen, drei ihrer abstrakten Malereien gratis als Hintergrundbild fürs iPhone herunterzuladen (als Bonusgeschenk für die Anmeldung zum Newsletter). Das habe ich doch glatt spontan gemacht - und seitdem landen alle paar Wochen mal News mit den neuesten Werken in meinem Posteingang. Und immer wenn eine Mail von ihr kommt, dann weiß ich: Das ist die Künstlerin, die meinen coolen iPhone-Hintergrund gemalt hat. 

Wenn ich in den nächsten Monaten oder Jahren Kunst kaufen will, kannst du dir sicher sein, dass sie in meinem “Coole-Künstler-Speicher” im Gehirn ganz vorne mit dabei ist! 

Überleg dir also eine Möglichkeit, im Gedächtnis der Leute zu bleiben und dich regelmäßig zu zeigen.

Squarespace macht dir das übrigens total einfach. Es gibt automatische Einbindungen von verschiedenen Tools so wie Instagram - oder du setzt eine Newsletterbox auf deine Seite, was ab dem Business-Paket von Squarespace kinderleicht möglich ist.

squarespace-instagram-einbinden.jpg

Schritt 7: Nicht warten, sondern launchen!

(Neue) Websites laden erfahrungsgemäß dazu ein, ihren Launch immer weiter zu verschieben. Schließlich wird dein Portfolio immer größer - und perfekt ist es eigentlich nie.

Aber - solange die in Nummer 1 bis 6 gezeigten Schritte ordentlich abgehakt und optimiert sind, würde ich dir raten: Done is better than perfect! Denn je früher du mit deiner Website “hinaus in die Welt” gehst, desto früher kannst du entdeckt werden.

Wenn du vor dem Drücken auf den “Veröffentlichen”-Knopfdruck noch ein paar SEO-Basics angewandt hast (alle Seiten benannt, Bilder optimiert etc.), sollte dem Launch deiner Website nichts mehr im Weg stehen.

Es ist auf jeden Fall besser, mit einer etwas unperfekten Seite zu starten als monatelang zu prokrastinieren. Google und Co. zieren sich nämlich ohnehin ganz schön lange, dich online zu zeigen. Jeder Tag, an dem dein Angebot nicht stolz präsentiert wird, geht vorbei, ohne dass du gebucht werden kannst.

In diesem Sinne: Frohes Schaffen und viel Erfolg mit deiner neuen Portfolio-Website.

 
squarespace-experte-victoria-weber.png

Victoria Weber

ist Squarespace-Expertin und bloggt zu Website-Wachstum & Tipps für dein Online-Branding. Hier kannst du dich für ihren gratis Email-Kurs “Plane deine neue Website in 5 Tagen” anmelden! 

 
 
squarespace-webdesign.jpg
 
Sophia Dei

Hey, ich bin Sophia! Danke, dass du hier auf meinem Blog vorbeischaust. Wenn du mehr über Procreate, Animation & Tipps für kreative Unternehmen erfahren möchtest, dann bist du hier genau richtig!

https://www.studio-umi.de
Zurück
Zurück

Animieren mit der iPad App Looom

Weiter
Weiter

Digitale Illustration – der umfangreiche Guide für Einsteiger in Sachen digitales Zeichnen