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. mARTin mertens
    17. Juli 2010 um 19:02 Uhr

    toller Beitrag mit einen guten durchgehenden roten Faden.

    • Lennart Prange
      17. Juli 2010 um 19:13 Uhr

      Da hat aber jemand sehr schnelle gelesen 😀 Danke!

      • mARTin mertens
        17. Juli 2010 um 19:28 Uhr

        gute Aufteilungen lassen sich immer gut lesen 🙂

  2. simonnickel
    17. Juli 2010 um 19:43 Uhr

    Jo, lässt sich wirklich gut lesen. Gute Leserführung, sowohl stilistisch, inhaltlich als auch emotional (oder so in der Art, hab das mit der Textkritik noch nie so wirklich hin bekommen)

    Hat Spaß gemacht zu lesen, würde mich über mehr der Art freuen 🙂

  3. KChristoph
    17. Juli 2010 um 20:06 Uhr

    Ich brauche nicht sofort etwas verstehen, ich möchte “berührt” werden, neugierig gemacht werden.
    Ich reagiere dann wahrscheinlich nicht sofort, aber es hat sich erst einmal verankert …
    z.B.
    Die Hinweise auf die CRM-Gebilde “julitec” und “taurec_cm” (Einzelplatzversion z.Zt. noch kostenfrei) sind mir vor ca. 2 Jahren das erste Mal begegnet. Jetzt bei einem aktuellen Bedarf hatte ich sie fast sofort wieder vor Augen.
    Bei Julitec war es der Schmetterling über grünen Gräsern, bei taurec die klare Linie und der Hinweis auf die verwendete OpenSource- firebird-Datenbank …

    Mir hat z.B. gefallen, daß ein Designer sagt: “… für sich selber zu gestalten. Dann ist man froh, wenn man etwas hinbekommen hat, das einen selber anspricht.”

    Das Bild mit den Hinweisschildern hat mir sehr gut gefallen.

    Gesundheit und Erfolg.

  4. Kevin
    17. Juli 2010 um 20:16 Uhr

    Du setzt als erstes ein 0815- Layout fest, sagst dazu noch, dass der Aufbau solide, bodenständig und i.O. ist und dann zeigst du Designs, die größtenteils genau das Schema verfolgen: Logo links, Navi rechts.

    Textlich sehr gut, aber deine Beispiele finde ich nicht passend gewählt. Find diese weder great, awesome oder stunning und sind einfach nur grafisch aufgepeppte Kopien deines 0815-Layouts.
    btw. würde ich ein Client sein, würde ich mich wild durch den Baum im zweiten Design klicken.

    • Lennart Prange
      17. Juli 2010 um 22:10 Uhr

      Danke.

      Ich finde die Beispiele schon passend (sonst hätte ich sie natürlich auch nicht eingebunden), aber es ist natürlich schade, dass sie dir nicht zusagen. Hast du vielleicht ein Beispiel, dass deiner Meinung nach besser passen würde? Ich ergänze gerne noch eins 🙂

  5. André Nitz
    19. Juli 2010 um 11:17 Uhr

    Hallo Lennart,

    prinzipiell gebe ich dir natürlich Recht. Die Kreativebranche sollte sich abheben können und dies auch tun. Nur gibt es viele Kunden, gerade im Budgetbereich, wo man dann auch davon leben kann, die gerade nicht solch kreativen Dinge haben möchten und teilweise dann damit auch nicht umgehen können.

    Für diese zählen dann eigentlich nur: “Was kann er, was hat er gemacht und wie kann ich ihn erreichen.”

    Ich habe auf meiner Seite sehr viele Conversion-Tests durchgeführt und bin leider zu diesem Punkt gekommen. Vorher dachte ich auch: “Hey, dass muss mal ein bisschen cooler sein”. Aber die daraus entstandenen Projekte sprachen für sich. Um es mal in Zahlen auszudrücken, so habe ich bei einer Seite mit mehr “Tamm Tamm”, knapp 60% weniger Anfragen über meine Website erhalten. Seitdem ich auf Clean und Schlicht setze, komme ich zu einer Conversion von 35%.

    Dennoch, sehr schön geschrieben 😉

    Viele Grüße, André

  6. stefan
    19. Juli 2010 um 12:14 Uhr

    gute einleitung. danke!
    ich suche auch gerade noch nach dem gelben vom ei. bin kein webdesigner – “nur” entwickler und seo 🙂
    dir auch viel erfolg!

  7. Max vom Alpinlager
    24. Juli 2010 um 10:55 Uhr

    Gut geschriebener Beitrag – gerne mehr von der Art.
    Ich finde persönlich, dass die Beispiele besser gewählt hätten werden können. Trotzdem verdeutlichen sie was du meinst.

    Also ich würde mich auf jeden Fall freuen, wenn du mehr in der Art bringst!

  8. Webseiten Design
    29. Juli 2010 um 19:55 Uhr

    Ein wirklich angenehm zu lesender Blog. Die Tipps sollte auf jeden Fall jeder beherzigen, weil dies einfach essentiell ist, wenn man eine professionelle Website haben will. Nur weiter so.

  9. Martin
    1. August 2010 um 19:40 Uhr

    Vor den gleichen Überlegungen stand ich vor einigen Wochen auch: Portfolio-Relaunch mit One-Page oder doch mehrere Seiten und welche Aufteilung?
    Hab mich für eine klassiche Variante entschieden – bewußt! Die Zielgruppe, der (potentielle) Kunde ist bestimmte Konventionen gewöhnt (Navi oben, klarer Aufbau etc.) und das Portfolio, die eigene Startseite, ist die erste Referenz! Hier fragt sich der Kunde doch schon – bevor er die eigentlichen Referenzen gesehen hat – ob so auch seine Seite aussehen könnte / sollte!? Mit “Outside the box”-Lösungen kann man sicherlich eine Menge Aufmerksamkeit auf sich ziehen.(s. Carsonified) – innerhalb der “Kreativszene”. Interessiert das aber den Mittelständler aus dem Umland? Er wird es nie mitbekommen. Ich denke, die Entscheidung, ob One-Page oder nicht, ob “anders” oder nicht, ist die Frage vor dem Gestalten: Was ist mein Ziel, wer ist meine Zielgruppe, wie will ich mich verkaufen / dastehen! Und: Bestimmte Konventionen einhalten, heißt nicht zwingend langweilig sein!

  10. Designer
    16. Oktober 2010 um 14:09 Uhr

    Ich stand ebenfalls vor ganz ähnlichen Erwägungen bei der Erstellung meiner Website damals (vor ca. 3 Jahren). Ich habe mich letztendlich entschieden alles komplett aus das Wesentliche zu reduzieren und Fachbegriffe komplett wegzulassen. Damit werde ich meinen Kunden am besten gerecht. Die haben nämlich von Webdesign, geschweige denn HTML oder CSS, keine Ahnung. Sie wollen nur Beispiele sehen und wissen wie viel es in etwa kostet.