Die eigene Webseite – ein Wegweiser

Wie gestaltet man als Webdesigner die eigene Webseite? Dieser Beitrag hält ein paar Anregungen bereit.

  • von Lennart Prange

Vor einiger Zeit habe ich mit der Artikelserie “In 4 Tagen zum Portfolio” eine Anleitung veröffentlicht, wie ein Gestalter schnell zu seiner eigenen effektiven Seite kommen sollte.

Die Serie hat mich viel Mühe gekostet, aber ich bin mir sicher, dass es sich gelohnt hat. Für mich jedenfalls: Ich konnte danach selber recht einfach ein kleines One-Page Portfolio gestalten, das mir gefallen hat.

Nach über einem Jahr möchte ich ein paar neue Gedanken mit euch teilen. Diesmal nicht mit einer Artikelserie, aber dafür mit einem recht ausführlichem Artikel. So wie es hier mittlerweile die Regel ist (die Quantität leidet leider ein wenig).

Ich brauche eine neue Seite

Mein One-Page Portfolio war für mich eigentlich perfekt: Ich konnte meine letzte Arbeit präsentieren, ein Kontaktformular anbieten, einen kurzen Text über mich reinstellen und das Ganze in wenigen Stunden fertig machen. Es brauchte danach kaum noch Pflege und hat mir gefallen. Besser geht es kaum

Jeder von euch wird wissen, wie schwer es ist, für sich selber zu gestalten. Dann ist man froh, wenn man etwas hinbekommen hat, das einen selber anspricht.

Leider gab es ein Problem: Die potenziellen Kunden konnten damit nichts anfangen. Es gab Kommentare wie “das verstehe ich nicht wirklich” oder “was soll das?”. Das kann man dann mit einem Wort beschreiben: FAIL!

So sieht das One-Page Portfolio aus

Ich habe das Glück, dass ich de Seite nicht wirklich zur Akquise brauche (bisher). Aber wer weiß, was mir durch die schwache Ausführung alles “durch die Lappen geht”.

Daher werde ich mich nun dem Problem widmen. Als Webdesigner sollte ich mich auch einigermaßen vernünftig im Web präsentieren. Naja, schrauben wir die Ansprüche mal etwas hoch: Ich sollte mich als Webdesigner sehr gut im Internet präsentieren.

Die Suche nach dem perfekten Layout

Das mit dem einfachen One-Page Portfolio hat nicht gut hingehauen. Es waren nicht genug Informationen über mich und besonders über meine Arbeit vorhanden.

Man muss sich als Webdesigner klar machen, dass der Besucher der eigenen Seite vielleicht nicht 100% weiß, was ein Webdesigner tut (und selbst zwischen Webdesignern gibt es da ja unterschiedliche Meinungen). Also muss das auf jeden Fall auf die neue Seite.

Außerdem braucht es Referenzen und auch zu diesen Referenzen einige Informationen und natürlich muss ich auch meine Person präsentieren.

Man kann jetzt feststellen: One-Page Portfolio Ade 🙁

Klar, theoretisch ginge das. Es gibt diese sog. One-Page Portfolios, die zwar tatsächlich nur auf einer Seite sind, bei denen man aber beim Scrollen Muskelkater bekommt, bevor man das Ende der Seite erreicht hat. Das bringt mir nichts.

Es sollen also mehrere Seiten werden.

Das Ganze soll natürlich gut geplant sein und deswegen fange ich erst mal mit ein paar Skizzen an. Old School mit Stift und Papier. Später sogar mit Sift, Papier und Lineal!

So, dann noch mal schnell auf den Computer übertragen sieht das so aus:

Ein paar Worte will ich zu dem Layout natürlich auch noch verlieren: Verzeiht mir bitte, falls das ein oder andere Element nicht auf den Pixel genau richtig ausgerichtet ist. Ich habe mich zwar an einem Raster orientiert, das war mit dem Trackpad vom Macbook aber nicht so einfach (auf Grund der Hitze arbeite ich im Moment so wenig wie möglich am stationären Rechner). Und da es sich nur um eine Art Skizze handelt, habe ich darauf verzichtet, meine Zeit mit dem genauen Positionieren zu verschwenden.

Der Aufbau sollte eigentlich gut funktionieren: Die Augen des Nutzers kleben am Anfang meist links oben, werden dann aber sofort auf das große Webdesign aus Hamburg gelenkt. Darum gehts ja. Logo kurz gesehen reicht mir und Max Mustermann bestimmt auch.

Den Standard-Satz “Hi, my name is Max Mustermann and I am a great Webdesigner from Hamburg” usw. habe ich weggelassen. Die Information Webdesign und Hamburg reicht. Darunter kurz die Kernleistungen, damit der Besucher weiß, was Max Mustermann wirklich unter Webdesign versteht.

Rechts neben der kurzen “Einleitung” ist dann eine Galerie mit ein paar guten (!) Referenzen. Da bekommt der Besucher schon mal einen kleinen Eindruck, was Max Mustermann so kann.

Dann geht der Blick weiter runter und natürlich nach links. Dort stellt Max Mustermann sich vor, sogar mit einem kleinen Bild. Direkt daneben hat der Benutzer sofort die Möglichkeit, ihn zu kontaktieren. Diese Form wird meist aber eher ungern genutzt, da sie klein und deswegen etwas unhandlich ist. Hier darf ein Link zu einer guten Kontaktseite mit weiteren Informationen und einem größeren Formular nicht fehlen!

Danach kommt der Footer mit der verkleinerten Navigation und dem Link, der an den Seitenanfang führt.

Achja: Oben rechts ist die Navigation. Dort erwartet der Besucher sie.

Insgesamt doch super, oder? Der Nutzer findet die wesentlichen Informationen und kann sich auf Unterseiten weiter schlau machen. Auf unnötige Elemente habe ich bewusst verzichtet. Die letzten Tweets sind dem potenziellen Kunden meist vollkommen egal und verwirren ihn wahrscheinlich eher (ein Link zum Twitter Profil sollte natürlich trotzdem irgendwo sein).

Der Blick des Nutzers sollte nicht hin und her flitzen, sondern von einer Information zu nächsten gelenkt werden.

Das ist also sehr effektiv und total…

Langweilig!

Der kleine Entwurf oben sollte sich eigentlich an die meisten Regeln halten, sehr gut funktionieren und ausgestaltet einen guten Eindruck machen. Er ist aber vorhersehbar und langweilig.

Sometimes it’s all about decorationLennart Prange

Ich habe langsam genug Seiten von Freelancern und Agenturen gesehen und bin mittlerweile von einer Sache überzeugt: Der Erfolg hängt nicht davon ab, ob diese klassischen Regeln beim Gestalten der eigenen Webseiten eingehalten wurden.

Aufwachen: Wir sind in der Kreativbranche und werden nicht engagiert, weil wir Leute sind, die sich an feste Schemata halten. “Think outside the box” passt in diesem Fall wirklich gut zum Thema.

Gerade weil es gefühlt mehr Freelancer als Menschen auf der Welt gibt (ja, ich übertreibe; Du hast mich erwischt), muss man sich doch irgendwie abheben. Tut man das mit dem Layout da oben? Nein! Verloren. Egal, ob es nach allen Regeln gestaltet wurde: Man macht damit sicherlich nicht auf sich aufmerksam

Es gibt einfach zu viele, die die Regeln einigermaßen gut beherrschen und ob man sie etwas besser umgesetzt hat oder nicht, merkt der Betrachter dann häufig auch nicht.

Dieser Beitrag ist also eine Art Aufruf: Tobt euch aus! Photoshop, Illustrator vielleicht auch noch Cinema 4d und Paint (eahm, neee?!) bieten euch viele Möglichkeiten mal etwas richtig Interessantes zu machen. Etwas, das zu dem Vokabular von Steve Jobs passen würde.

Das Layout oben ist nicht great, awesome oder stunning. Es ist eher solide, bodenständig und in Ordnung.

Wollt ihr so wahrgenommen werden? Hoffentlich nicht.

Wenn ein potenzieller Kunde verschiedene Seiten vergleicht, wird diese dann herausstechen? Wahrscheinlich nicht. Vielleicht, wenn bei der Ausgestaltung etwas wirklich Außergewöhnliches gemacht wurde. Aber dieses Layout legt bestimmt keinen guten Grundstein.

Also: Hebt euch ab, macht etwas Tolles und Ungewöhnliches. Bitte. Schaut in Web Galerien, um festzustellen, was ihr nicht machen solltet (zum Beispiel den typischen “Hi, my name is Max Mustermann and I am a good Webdesigner” Einleitungssatz) und nicht um bei anderen abzuschauen.

Worauf ich mich freue

Schauen wir uns doch ein paar Seiten an, die ich da als gute Beispiele gerne zeige.

Bei allen Webseiten sind schon die Layouts interessant und ungewöhnlich. Natürlich hat auch die grafische Umsetzung bei jedem Beispiel eine Klasse, die vielleicht nicht jeder bringt.

Jedenfalls fallen sie alle auf und man erkennt sie wieder. Solche Webseiten sind wirklich erfrischend und ich würde sie, wäre ich ein potenzieller Kunde, sicherlich eher beachten, als diese ganzen Standard-Dinger.

Erinnerung

Nur, damit jetzt keine Katastrophen passieren und ich dafür verantwortlich gemacht werde: Natürlich rufe ich nicht dazu auf, alles über den Haufen zu werfen. Ein paar Sachen sollte man schon beachten. Da fallen mir zum Beispiel folgende Dinge ein:

  • Lesbarkeit – Irgendwie sollte der Besucher eure Texte schon lesen können. Auch ohne Lupe und Anstrengung.
  • Splash Pages – Weg damit, ich hasse sie.
  • Links – Sie sollten eindeutig zu erkennen sein.
  • Rechtschreibung – Ir wist waß isch mein. (<- ja, das war extra!)

Usw. Diese einfach Tipps kennt ihr wahrscheinlich alle und sie sind natürlich auch komplett logisch. Daher lasse ich das an dieser Stelle.

Ich werde mich jetzt jedenfalls langsam aber sicher daran machen, interessante Ideen für meine eigene Seite zu generieren. Ein Erfolg wäre sie ja schon dann, wenn die Besucher sie sofort verstehen würden.

Wenn ihr wollte schreibe ich auch noch einen Artikel darüber, sobald ich fertig bin. Interesse?

Ich freue mich auf eure Kommentare 🙂

13 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.