Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Ein verspielter One-Pager I: Prelude

Ein verspielter One-Pager I: Prelude

Im täglichen Geschäft bleibt das eigene Design, der eigene Internetauftritt von Webworkern oft außen vor. Irgendein Projekt für Kunden ist immer wichtiger; schließlich ist der Kunde König. Aber irgendwann ist der Relaunch einfach fällig. Nicolai Schwarz berichtet aus der Praxis, der erste Teil einer Art »Logbuch eines Relaunchs«.

Die letzte Version meiner Webseite textformer.de ist im Mai 2006 online gegangen. In Webjahren ist das eine Ewigkeit her. Anfang 2009 habe ich deshalb angefangen, an einem Relaunch zu arbeiten. Nebenbei, und dementsprechend zog es sich hin. Schlimmer noch: Alle paar Monate habe ich in Teilen wieder von vorne angefangen, weil mir die alte Aufteilung nicht mehr gefallen hat. Oft fehlte nur ein Element: Illustrationen. Weil ich mir in den Kopf gesetzt hatte, die Webseite mit Illustrationen aufzupeppen. Das ist leider kontraproduktiv, wenn man selbst nicht zeichnen kann, aber auch keinen befreundeten Illustrator heranziehen möchte, weil man wirklich alles selbst machen will.

Die aktuelle Startseite von textformer.de
Die aktuelle Startseite von textformer.de

Mittlerweile ist die neue Webseite online. Endlich. Und im Gegensatz zu Kundenprojekten kann ich hier etwas ausführlicher über das Wie, Warum und Wieso erzählen. Viele Aspekte dieses ersten Teils sind rein subjektiv. Es gibt gute Gründe, zu anderen Schlüssen zu kommen.

Alles auf Null

Dieser Relaunch startete ganz am Anfang: beim Namen. Ich firmiere seit 2003 unter dem Namen »textformer«. Ursprünglich sollte es bedeuten: Der Kunde liefert den Text, den Inhalt – ich sorge für die äußere Form, das Design. Nun denken die meisten Leute aber, dass ich texte. Was ich bei einigen Kunden mittlerweile zwar mache, was aber nicht meine eigentliche Dienstleistung ist. Insofern ist der Name – sagen wir mal – zumindest suboptimal gewählt.

Also habe ich mehrere Wochen überlegt, ob ich vielleicht nur unter meinem Namen firmiere. Das funktioniert für andere Dienstleister schließlich auch ganz gut. Die arbeiten dann oft mit ihren Initialen – da bin ich beim Namen »Nicolai Schwarz« schon mal äußerst schlecht bedient. Außerdem läuft mein twitter-Account auf den Namen textformer; diverse andere Seiten verlinken auf und nennen textformer.de, Text ist mir wirklich wichtig und vor allem: Ich mag das Signet. Das t und das f verbinden ideal Text und Form. Leute erkennen in dem Zeichen ein Reagenzglas, eine Leier, ein Drachenschiff, ein chinesisches Schriftzeichen – alles Ideen, mit denen ich sehr gut leben kann.

Ich habe mich also dazu entschieden, bei textformer.de zu bleiben.

Formulierungsschwierigkeiten

Ein Firmenname lädt dazu ein, sich hinter ihm zu verstecken. Alles hat dann eben textformer mediendesign erledigt. Das habe ich auf der alten Webseite so gehandhabt. Nun bin ich aber selbstständig und arbeite erst einmal alleine. Das sollen Besucher ruhig deutlich sehen. Außerdem finde ich die Ich-Form bei einigen Kollegen ganz charmant. Also habe ich mich bemüht, die meisten Text auf ein Ich umzuschreiben.

Eine gewisse Unentschlossenheit ist trotzdem zu erkennen: Im Kopf ist zwar das Signet zu sehen. Statt textformer.de oder textformer mediendesign steht dort aber mein Name. Ideal ist es noch nicht; lediglich das beste, was mir bisher für den Kopf eingefallen ist – und ich habe einige Dutzend Versionen ausprobiert und verworfen.

Charmant finde ich hier übrigens die Lösung von Vibor Viskovic. Er verbindet mit einem einfachen Satz seinen Namen mit dem Firmennamen CreativeSwitch.

Design und Webentwicklung

Eine andere Schwierigkeit bei unsereins ist ja, den Leuten zu erklären, was wir genau machen. Ich mache mehr als Screendesign; bin aber kein Programmierer. Webworker hört sich zwar gut an, ist aber genauso schwammig. Außerdem gestalte ich für einige Kunden auch Logos, was auch nicht alle Webleute machen. Mittlerweile nenne ich mich Designer und Webentwickler – schön kurz und knapp. So handhabt es zum Beispiel auch Matt Hamm, der seine Tätigkeiten ebenfalls schön plakativ in den Vordergrund stellt.

Gut, Design und Webentwicklung also. Das sollte im Idealfall auch auf der Webseite rüberkommen. Webentwicklung lässt sich gut mit ein paar JavaScript-Effekten darstellen; ist nicht so kompliziert, macht sich aber bei vielen Kunden ganz gut. Was das Design angeht: Ich hatte mir früh in den Kopf gesetzt, Illustrationen zu nutzen. Die bastle ich zwar nie für Kunden, wollte sie aber auf meiner Seite haben.

Außerdem habe ich nicht so viele Inhalte, dass ich sie unbedingt auf mehrere Seiten verteilen müsste. Es sollte daher ein One-Pager werden. Und es sollte verspielter wirken als früher. Insofern lautete das kurze Briefing an mich selbst: Verspielter One-Pager, der für Design und Webentwicklung steht.

Die Webseite dient ansonsten nur als erweiterte Visitenkarte. Ich bekomme meine Kunden in der Regel über Empfehlungen oder Vorträge, die ich halte. Ich bin also nicht darauf angewiesen, über die Webseite nach neuen Kunden zu fischen.

Und eins, und zwei, und drei

Es hat mehrere Anläufe und etwas über ein Jahr gebraucht, bis ich tatsächlich eine neue Webseite online geschaltet habe. Zwei, drei erste Varianten liegen immer noch halbfertig auf meinem Server rum.

Bei Version 1 ist bereits alles als One-Pager angerichtet. Eine Infobox am linken Rand gibt eine ständige kurze Beschreibung über das Unternehmen, das Portfolio steht im Mittelpunkt, kleine Boxen enthalten die weiteren Infos. Es war von Anfang so geplant, dass nur wenig Platz für Texte zur Verfügung stehen sollte; ich wollte mich möglichst kurz fassen. Oben sollte es eine Illustration von Dortmund geben, die per Parallax-Scrolling hübsch anzusehen wäre.
Wenig später dachte ich mir: Text-Boxen zu klein, und die Illustration hätte das Dortmunder U enthalten, das hier in der Gegend mittlerweile zu oft für alles mögliche verwendet wird.

Relaunch von textformer.de - 1. Versuch
Relaunch von textformer.de - 1. Versuch

Variante 2 ist der Versuch, doch stärker meinen Namen (also: Schwarz) zu berücksichtigen. Das heißt alles eher dunkel zu halten. Hier gibt es zwei getrennte Bereiche: Oben allein das Portfolio, hell und damit hervorgehoben. Unten kleine Boxen, die hin- und hergeschoben werden können und wirklick nur Platz für minimale Infos bieten.
Wertung: Schon besser (finde ich zumindest), aber wirklich tierisch wenig Platz unten.

Relaunch von textformer.de - 2. Versuch
Relaunch von textformer.de - 2. Versuch

Die nächste Iteration ist nur eine Abwandlung. Keine Kästen mehr unten, stattdessen eine Navigation mit den wichtigsten Punkten. Die Inhalte selbst kann man oben schon in einem Rutsch durchscrollen, wenn man will. Das Portfolio bot vorher Platz für 15 Beispiele, das war mir dann doch etwas zuviel. So wurden daraus zehn Beispiele. Eines ist absichtlich hervorgehoben, um es dem Besucher einfacher zu machen, einen Link als ersten anzuklicken. Dazu kommt kurzer Text, der nur den Zweck hat zu sagen: »Ja, hier kann man klicken, also klick!«.
Diese Fassung war eigentlich schon fertig. Kollegen haben mich überzeugt, auf die Anfangsanimation (das Herausfahren der Elemente) zu verzichten; es wäre nicht mehr so viele daran zu tun gewesen. Allein, ich wollte Illustrationen haben, für die ich nie Zeit (oder Talent) hatte.

Relaunch von textformer.de - 3. Versuch
Relaunch von textformer.de - 3. Versuch

und vier

Bis ich dann wieder Zeit für die Seite hatte, gefiel mir das dunkle Design schon wieder nicht mehr. In dem Fall habe ich mir selbst ein Datum gesetzt, an dem die Seite in jedem Fall online gehen sollte. So ist sie nun in der aktuellen Form online – ohne Illustrationen.

Der eigentliche Inhalt ist auf einer üblichen Breite von 960 Pixeln untergebracht. Im Kopf gibt es eine Mini-Vorstellung. Ich gehe davon aus, dass die meisten Besucher schon vorher wissen, was ich mache. Das bestätige ich noch einmal im Kopf und zeige dann gleich das Portfolio. Die Kurzinfo im Kopf ist noch eine Grafik, ich habe aber absichtlich die Museo als Schrift gewählt, um den Part irgendwann mal als reinen Text zu implementieren.

Idealerweise startet die Seite später mit einer Mischung aus aktuellem Inhalt plus Illustration. Die Hilfsfarbe grün werde ich je nach Jahreszeit wechseln. In der Navigation schiebt sich der grüne Balken lustig unter die Schrift hindurch – auch wenn es kaum jemandem auffallen wird.

Soviel zum Vorspiel. Morgen geht es weiter mit der Umsetzung und dem Handwerk.

Links zum Thema:

Kommentare

Falko vom Worte...
am 18.05.2010 - 09:10

Da ich selbst noch keinen solchen Launch vollzogen habe, ist so ein Ablauf von der Pike auf natürlich äußerst interessant zu lesen.
Freue mich auf die Fortsetzung! :-)

Permanenter Link

Andre
am 18.05.2010 - 18:32

Hi Nicolai,

toll geschrieben. Vielen Dank für die Ausführungen.

Alles Gute weiterhin und viel Erfolg!

Grüße,

Andre

Permanenter Link

Benjamin
am 19.05.2010 - 09:02

Vorab: Ich finde alle Entwürfe design-technisch schön. Aber in sachen Zugänglichkeit ist das alle snoch nicht optimal.
Man merkt sehr deutlich dass du auf einem großen Bildschirm entwickelst. Ich habe hier auf meinem Macbook (13") bei allen Entwürfen und auch bei der Endversion (und hier ist einfach der Header zu groß) vertikale Scrollbalken. Bei der ersten Version is dank der absoluten Positionierung auch der Text ganz links nicht zu lesen.
Die Navigation geht leider kaputt wenn Javascript aus ist (was gerade bei der Endversion doch besser ginge), und bei der schwarzen Version war ich sofort genervt von den zwar schönen slide-effekten, die aber zu lange dauern und mich davon abhalten den eigentlichen Inhalt zu lesen. Zudem tritt zusammen mit dem vertikalen Scrollbalken in der schwarzen Version das Problem auf, dass beim klicken den unteren Links man wieder nach oben springt (der sprungmarke # zu verdanken) und dadurch muss man wieder runterscrollen um den Text überhaupt lesen zu können.

Das Grün ist schön und die Idee das ab und zu zu wechseln finde ich toll.

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 19.05.2010 - 13:08

@Benjamin Die ersten drei Fassungen habe ich nie fertig gemacht. Wozu auch? Soll heißen: Natürlich ist da nix optimiert.
Und wieso geht die Navigation kaputt, wenn JavaScript deaktiviert ist? Ohne JS erscheint gar keine Navigation. Hätte ich anders lösen können, aber wozu? Der Nutzer kann einmal durchscrollen, gut ist.

Permanenter Link

Benjamin
am 19.05.2010 - 13:37

Ok, dann nehme ich die Kritik an den ersten Versionen zurück.

Zur non-Javascript endversion: das eben die Navigation gar nicht vorhanden ist hat mich tatsächlich verwirrt, ich habe (so wie die im zweiten Artikel erwähnte Freundin) auch nur auf "zur Person" geklickt und wusste nicht weiter.

Dann bin ich angefangen an ein wenig zu scrollen und fühlte mich erschlagen von der Masse an Portfolioeinträgen. Dadurch wird die horizontale Scrollstrecke ewig lang und durch das fehlende Menu geht in meinen Augen die Struktur verloren. Ich weiss gar nicht so recht wo ich auf der Webseite bin.

Die Antwort auf deine Frage ist also: "Um die Struktur der Webseite aufrecht zu erhalten".

Was ich mich jetzt gerade frage: Werden Sprungmarken in der Horizontale richtig interpretiert? Wenn ja kannst du das Menu ja stehen lassen. Wenn nicht würde ich eher auf ein vertikal scrollendes Fallback setzen (wie beim iphone wenn ich es richtig verstanden habe).

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 19.05.2010 - 22:34

@Benjamin: Du hast recht. Sprungmarken funktionieren auch horizontal. Zumindest die Menüpunkt-Navigation kann es dann auch ohne JavaScript geben. Demnächst mal. Danke für den Hinweis.

Permanenter Link

tom
am 05.06.2010 - 16:00

hi nicolai, mal wieder ein sehr chöner und vor allem umfangreicher artikel von dir. dank dir und beste grüße tom

Permanenter Link

Die Kommentare sind geschlossen.