Workflow – Vom Design zur fertigen Webseite

Wie entsteht eine Website? Was ist der beste Weg angefangen von der Idee bis hin zur fertigen Website? Sicherlich Fragen die man nicht pauschal beantworten kann, da jeder seinen eigenen Stil hat und anders an die Sache heran geht. Der eine fängt mitBleistift und Papier an und scribbelt seine Ideen nieder. Ein anderer hingegen bautWireframes in Fireworks oder anderen dazu tauglichen Programmen. Wiederum andere legen einfach los und basteln vor sich hin. Mein bevorzugter Weg ist eine Mischung aus erstem und letztem Weg. Ich fange gern einfach an drauf los zu arbeiten. Natürlich mit einer Idee im Hinterkopf, 100% planlos würde nun auch wieder keinen Sinn machen. Die Idee versuche ich dann ganz grob auf Papier zu bringen. Aber wirklich ganz grob. Hier geht es mir oft eher nur um das Anordnen der Elemente. Künstlerisch wertvoll sind diese Papierfetzen sicherlich nicht.

Das ist jetzt aber wie gesagt nur ein Weg den man gehen kann. Es wird keinen Weg geben der für jede Person oder für jedes Projekt der perfekte ist. Hier sollte man flexibel sein und nicht stur seine Schiene fahren. Oft muss man auch Wege gehen die man normal nicht gehen würde, da ein Projekt/Auftrag es so verlangt.

Ich möchte hier aber mal anhand des Make Better Websites Redesigns einen Weg aufzeigen der eher in die Richtung einfach drauf los arbeiten geht. Der Seitenaufbau sollte sich dabei nicht wirklich ändern was heißt, dass nicht wirklich Scribbles gemacht werden mussten.

Meistens eher spontan. Es wurde zum Beispiel nicht geplant, dass Make Better Websites eine neue Optik bekommen soll. Aber diese Spontanität kommt wohl oft nur bei eigenen Projekten zum Einsatz, da Aufträge meist an Termine gebunden sind und hier muss dann oft zwingend eine Idee im Kopf herum schwirren. Hier kann man nicht einfach sagen, dass heute wohl nichts mehr brauchbares raus kommen wird und man ein anderes Mal weiter macht. Aber das soll jetzt nicht so klingen, als wären Aufträge eine Qual für mich. Im Gegenteil! Es ist sehr spannend unter Druck kreativ zu sein. Man muss sich sofort in den Auftrag hineindenken und Ideen entwicklen. Es klappt mal mehr und mal weniger gut. Oft kommt es aber vor, dass man sofort eine zündende Idee hat und sofort loslegen könnte, diese umzusetzen. Ob allerdings die erste Idee auch gleich die beste ist bleibt dahingestellt. Es macht natürlich auch einen Unterschied ob im Team oder alleine gearbeitet wird. In diesem Beispiel arbeite ich alleine und kann mich voll auf mich verlassen und quasi mein Ding durchziehen. Das Lustige bei diesem Redesign von Make Better Websites ist, dass das was nun online zu sehen ist, eigentlich schon vor der letzten Version online gehen sollte. OK, da waren die Farben noch komplett anders und noch ein paar andere Dinge. Aber im Grunde ist damals die Version 3 vor der Version 2 online gegangen. Das macht es jetzt vielleicht teilweise etwas chaotisch, das ein oder andere zu erklären, aber wir bekommen das schon hin.

Make Better Websites ist ein privates Projekt. Hier gab es also keinen der sagte, dass hier was neu gemacht werden muss. Keine Anfrage, kein Auftrag. Der Ansporn lag allein bei mir etwas zu verändern. In diesem Falle wollte ich die Seite etwas klarer habenq im Vergleich zur Vorgängerversion. Die gezeigten Websites sollten auch noch größer zur Schau gestellt werden. Die Optimierung sollte nicht mehr auf 1024 Pixel Breite ausgerichtet sein, sondern auf 1200 Pixel. Das war Anlass genug etwas Neues zu machen. Man hat ja sonst nichts zu tun :)

Als ich angefangen habe nahm ich mir noch kurz die Zeit auf der Festplatte nach alten PSD Files zu suchen, um zu schauen ob ich noch etwas rumliegen hatte, das man gebrauchen kann. Und tatsächlich fand ich was, das mir wirklich weiterhelfen konnte. Eine Voraussetzung für das Redesign war es, dass das Look and Feel der alten Website schon beibehalten werden sollte. Farben und Stil sollten dem Benutzer beim Besuch ein vertrautes Gefühl geben. Da die gefundene PSD nicht viel mit der - zu dem Zeitpunkt noch aktuellen - Seite zu tun hatte, war sie aber nur teilweise zu gebrauchen. Dennoch war eine Grundlage vorhanden, die mir weiterhelfen sollte. Los ging es also, das Design auszuarbeiten...

Meiner Meinung nach sollte man sich nicht all zu lange in Photoshop aufhalten und jede Seite komplett darstellen. Es ist vor allem zeitaufwendig so etwas zu machen. Leider wollen die meisten Kunden oft alle Screens erst als JPG Datei sehen, um diese dann frei zu geben. Klar ist das aus Kundensicht sicher nicht verkehrt, aber man muss auch bedenken, dass ein in Photoshop erstelltes Layout nie 100% dem entspricht, wie es dann letztendlich im Web zu sehen sein wird. Auch kann man schwer rüberbringen, wie sich eine Website anfühlen wird. Ein JPG ist halt doch nur ein Bild, das zwar viel zeigt, aber auch vieles eben nicht zeigt.

Meistens erstelle ich nur die Startseite, also das Grundlegende Layout in Photoshop. Das Look and Feel, das hier entsteht, ist dann gesetzt. Klar mache ich mir auch Gedanken was auf Unterseiten passieren soll, doch das stricke ich in meinem Kopf zurecht oder mache mir ein, zwei kleine Skizzen, die das verdeutlichen. Hier geht es dann speziell aber erstmal um Aufteilungen und Funktionen, was hier und da passieren soll. Designelemente, die dort zum Einsatz kommen, werden hier erstmal nicht berücksichtigt. Diese werden dann erstellt, wenn sie gebraucht werden. Aber das ist wie schon erwähnt eher ein Weg den man geht, wenn man seine eigenen Sachen macht oder man einen Kunden hat, der einem zu 100% vertraut, dass ihn das Endergebnis überzeugen wird. Egal, wir sind hier bei einem privaten Projekt, also heißt das für mich, wenig Photoshop und ein schneller Weg hin zur Entwicklung. Die PSD für Make Better Websites sah dann so aus:

Am Besten so schnell wie möglich. Ich habe gerne etwas zum rumspielen, rumprobieren und live testen. Eine Webseite ist ja kein statischer Screenshot, sondern eine dynamische Sache und deswegen sollte man hier auch schnell genau dort hinkommen. Vieles verhält sich im Browser ganz anders, als man es vielleicht in Photoshop angedacht hatte. Vor allem sehen Sachen dann teilweise auch ein wenig anders aus als in Photoshop. Schon allein die Texte sehen im Web fast immer anders aus. Das liegt schon daran, dass Betriebssysteme unterschiedlich mit Schriften umgehen. Die einen glätten die Schriften, die anderen eben nicht. Das ist schon etwas, das man beachten sollte. Die Umsetzung beginnt für mich konkret dann, wenn ich das Gefühl habe, dass das was ich aktuell in der PSD sehe ausreichend ist, um daraus einen HTML Prototypen zu basteln.

Ich bin Designer. Für mich heißt umsetzen nicht, dass ich einfach stur einen Screen in HTML umwandle. Beim Umsetzen sind meine Gedanken immer noch beim Design. Ich mache Sachen dann vielleicht anders, als sie bisher in der PSD zu sehen sind. Oder ich passe die PSD oder einzelne Grafiken noch einmal an, da ich beim Programmieren merke, dass es noch nicht 100% so ist, wie ich mir das vorstelle. Im Grunde ist es jetzt ein Zusammenspiel der einzelnen Bereiche (Design/Entwicklung). Es liegt also keine Trennung vor die sagt, dass das Design fertig ist und nun umgesetzt werden kann. Das Design ist dann fertig, wenn es umgesetzt ist.

Ich baue mir prinzipiell erstmal einen HTML Prototypen (außer bei sehr kleinen, überschaubaren Sachen). Dieser macht es mir später deutlich einfacher das Ganze z.B. als WordPress Theme umzusetzen. Speziell in diesem Fall habe ich aber darauf verzichtet und einfach das Theme der alten Seite kopiert und angepasst. Der Prototyp wurde hier nicht wirklich gebraucht, da viel von der alten Seite übernommen und angepasst wurde.

Wenn die Website fertig ist? Nicht ganz. Meine Vorgehensweise ist die, dass ich auf einem Browser die Entwicklung mache und nicht immer schaue ob gerade in allen Browsern alles rund läuft. Meine Empfindung ist hier, dass ich mehr Zeit verlieren würde wenn ich so arbeiten würde. Ich baue die Website also komplett fertig und kümmere mich dann anschließend um das Bugfixing. Der Browser meines Vertrauens ist hier aktuell Google Chrome mit Webkit Engine. Wenn da alles passt sieht im Safari meist auch schon alles super aus. Auch der Firefox zieht hier meistens gleich mit, sodass hier oft nichts oder nicht viel angepasst werden muss. Die Problemkinder sind ganz klar die aus dem Hause Microsoft. Sie hören auf den Namen Internet Explorer. IE6 und IE7 sind hier mit ganz großem Abstand diejenigen, die mir oft am meisten Kopfschmerzen bereiten. Hier tun sich doch teilweise große Abgründe auf. Wie ich damit umgehe? Auf meinen privaten Seiten so, dass mir der IE6 fast schon egal ist. Wer mit solch einem Dinosaurier noch unterwegs ist sollte sich nicht wundern, dass nicht alles toll ausschaut. Eigentlich müsste man diese Benutzer gleich komplett aussperren :)

Bei Kundenprojekten ist das dann wieder anders. Hier gibt es klare Aussagen auf welchen Browsern die Website zu laufen hat. Der IE6 ist hier leider viel zu oft noch dabei. Für welche Browser man letztendlich optimiert, muss man für sich selbst entscheiden oder aber man hat eben Vorgaben.

Wenn Bugs gefixt sind, macht es sich auch immer ganz gut, dass man noch mal ein paar Leute drüber schauen lässt, bevor man die Website bzw. das neue Theme online stellt. Oft findet man so dann doch noch den ein oder anderen Bug und kann sich dessen annehmen. Am erfreulichsten ist es natürlich, wenn nichts gefunden wird und totale Zufriedenheit herrscht. Gibt es das? NEIN! :D

Es bleibt zu hoffen, dass ich einen kleinen Eindruck vermitteln konnte, wie die ein oder andere Website bei mir entsteht. Und noch mal muss ich es sagen, dass dies sicher nicht der Weg der Wege ist, sondern einer von vielen und einer der auf das Beispiel-Projekt gepasst hat.

Wie das ganze dann letztendlich ausschaut könnt ihr auf Make Better Websites selber bestaunen.