Arbeitsablauf im WebDesign

WebDesign ist ein lustvolles Spiel mit Regeln für mich. Die Regeln sind vorgegeben durch die Technik, den Markt und das Medium.

Welche Mixtur daraus der Kunde mag ist im Idealfall im Lastenheft definiert,mein Pflichtenheft ist geschrieben. Aber irgendwann sitzt man als WebDesigner vor der Aufgabe das Projekt X zu realisieren und wie ich was, wann mache ist dann der Arbeitsablauf.

Dieser Artikel gibt nicht vor wie der Arbeitsablauf im WebDesign zu sein hat, sondern wie ich es mache. Ich weiß nicht, ob dieser Arbeitsablauf überhaupt für jeden WebDesigner gleich sein kann, doch vielleicht findet sich der eine oder andere wieder oder hat Lust seinen Arbeitsablauf zu schildern. Dass es überhaupt eine Frage sein kann wie denn der Arbeitsablauf im WebDesign sein kann, fand ich in den Suchanfragen auf webdesign-in.de.

Arbeitsablauf im WebDesign für das Projekt X, das ich alleine realisieren kann.

Ich habe die Wünsche des Kunden, die sind in meinem Kopf und dann beginne ich ==> auf meinem Ottoman. (= eine alte Couch.) Dies ist mein Lieblingsplatz.

  1. Ein Collegeblock, A4 und kariert.
  2. Faserschreiber in mindestens 5 Farben.
  3. In der Mitte des 1. Zettels kommt der Name, der mir für dieses Projekt einfällt.
  4. Ein Mindmap entsteht.

Ich brauche so ein Mindmap, weil mein Kopf ist meist derart voll mit lauter Ideen, dass mich die Fülle dieser Ideen am Realisieren hindern tät.
Stehen diese Ideen wo, wird mein Kopf leerer und ich kann gezielt und schnell ans „Tun“ gehen.

Wenn mir wirklich nichts mehr einfällt, was alles wie zu tun sei, dann vergebe ich eine Reihenfolge für diese Tätigkeiten. Das was mir am meisten Spaß macht bekommt eine 1, das was ich tun muss, sich meine Lust dafür in wirklich engen Grenzen hält, landet eindeutig am letzten Platz.

Das Lastenheft im Kopf, die Beschäftigung mit dem Projekt durch das Mindmap, die Gewissheit all meine Ideen stehen wo nachlesbar und somit brauche ich nicht mehr daran denken, haben mich sehr gut auf das Projekt X eingestimmt. Und genau in dieser Stimmung nehme ich den nächsten Zettel und beginne die Struktur des Projektes X aufs Papier zu bringen, die Projektlandkarte entsteht.

  1. Ich drehe den A4 Block quer.
  2. Teile das leere Blatt mit Strichen in 9 Flächen.
  3. Mit anderer Farbe schreibe ich hinein, was wo hinkommt.
  4. Dann nehme ich das Farbschema für dieses Projekt und verteile es auf die Inhalte.

Je nach Projekt verbringe ich so gut eine Stunde auf meinem Ottoman. Und wenn dies getan ist, dann kann bis zum nächsten Schritt ruhig viel Zeit vergehen. Selbst wenn ich mir eine Woche später diese beiden Zettel, das Mindmap und die Projektlandkarte wieder hervorhole, habe ich alles was ich benötige, um es zu realisieren.

  • Wenn es technisch irgendwie geht, beginne ich mit dem was mir am wenigsten Spaß macht.
    Das mag ich *hinter mich* bringen. 😉
  • In Fotoshop gestalte ich die Projektlandkarte, mit allen Farben, Bildern, Texten für die Navigation, Überschriften, bishin zu den kleinen Buttons.
  • Dieses Bild zerlege ich und mache es zu Einzelbildern.
  • Das Tippen des Cascading StyleSheets (CSS) beginnt.
  • Das (X)HTML wird geschrieben.
  • In die womöglich benötigte Software [Content Management, Weblog, ..] eingebunden.
  • Scripte angepasst.
  • Auf Tippfehler korrigiert.
  • In den unterschiedlichsten Browsern angesehen.
  • Korrekturen des CSS , wenn nötig.
  • Dem Kunden gezeigt.
  • Veränderungswüsche des Kunden machen.
  • Abliefern.
  1. Alle Dateien zu diesem Projekt auf eine CD brennen.
  2. Abschied nehmen. Ist ja _mein_ Projekt, das ich weggebe.
  3. Alle Unterlagen zu diesem Projekt, selbst der kleinste Notizzettel, die CD mit den Dateien kommen in eine kleine Mappe, Name drauf geschrieben und abgelegt wird diese Mappe, wenn der Kunde bezahlt hat.

So ist mein Arbeitsablauf im WebDesign, wenn ich ein Projekt alleine machen kann. Ein immer wieder anderes Spiel mit den Regeln des WebDesign. Mag nüchtern klingen und wirken, doch es ist immer wieder eine lustvolle Befriedigung. 😉

mts

Ebenfalls informativ und lesenswert

19 Kommentare zu “Arbeitsablauf im WebDesign

  1. Dennis Kuhl

    Ich habe zwar keinen Ottoman aber der Ablauf einer Konzeption bishin zur Umsetzung sieht bei mir ähnlich aus. Allerdings wird bei uns die gesamte Konzeptionsphase mit mind. 2 Personen geplant und schriftlich genau definiert (bei größeren Projekten).

  2. mts

    Hi Dennis
    ja bei Aufträgen wo mehr beteiligt sind, geht es auch noch ein bisschen stringenter ab.

    [ohne Ottoman –stell ich mir schrecklich vor ]
    😉

    herzlich willkommen hier
    lg

  3. Noreya

    Oh ja, der Arbeitsablauf kommt mir ebenfalls bekannt vor. Nur habe ich keine Ottomane, sondern einen bequemen Ohrensessel mit Hocker :-).

    Sobald das Konzept auf dem Papier steht, versuche ich immer, die für mich unangenehmen Dinge zuerst zu erledigen – das macht meinen Kopf frei für alles, was ich „genieße zu tun“. Andersrum würde es mir die Freude nehmen.

    Ansonsten, sehr informativ und super zu surfen, deine Site.

    Grüße aus Österreich,
    Noreya

  4. Thomas

    Ein sehr guter und sinnvoller Arbeitsablauf, vielen Dank für den Artikel.

  5. Pix-Planet Webdesign

    Du redest dabei aber von einer kompletten Webpräsenz und nicht nur von einem Webdesign. Für ein einfaches Webdesign, sprich Musterentwurf mit anschließender Umsetzung in HTML brauche ich kein Pflichtenheft. Das wird einfach gemacht ohnetagelang darüber nachzugrübeln… 🙂
    pix-planet.de

    edit von mts

    Grüß Dich Herr oder Frau Pix Planet WebDesign,

    ich nehm mir da mehr Zeit, denn immerhin kommts schon drauf an, wo der Link zur Email ist und ob ein Bild links oder rechts ist. Und welche Worte wo stehen, zb den Namen als Pix-Planet WebDesign anzugeben, kann fatal sein, wenn man dann in jedem Satz auf einer fremden Domain mit Pix-Planet WebDesign angesprochen wird. :zwinker:

  6. chio

    Ich habe _auch_ kein Sofa.. Ich wohne in meinem Büro, mit Notschlafstätte..

    Normalerweise teile ich nicht groß auf, was wo hinkommt, weil es ohnehin klar ist: Dorthin, wo es die Leute erwarten. Menü links oder oben (hängt v.a. von der Anzahl der Punkte ab), weitere Infos rechts, oben ein Bildchen, damit jeder gleich kapiert worum es geht. Kontakt unten und/oder irgendwo, wo man es gleich findet. Content: Mittenrein.
    Ist im wesentlichen alles ohnehin durch die Gegebenheiten definiert.

    Auch die Farben sind meist vorgegeben (Logo, CI), muss man für den Bildschirm feintunen.

    Außerdem „nötige“ ich die Leute gerne dazu, sich mit mir gemeinsam „das Internet“ anzusehen, schauen, was es so gibt und was gefällt. Danach habe ich meistens eine recht genaue Vorstellung und oft sogar eine grobe Photoshop-Skizze.
    Das setzt natürlich voraus, dass ich die Leute physisch treffe, aber so klein ist Wien ja nicht…

    Ich weigere mich standhaft, einen genauen Plan zu machen; es kommt sowieso anders und dann kann man wieder umkrempeln. Wenn ein Kunde das nicht versteht, ist er bei mir falsch 😉

  7. Sonja, Webdesign Bonn

    Ich muss zugeben, dass es meine Kunden trotz durchaus auch bei mir bestehender standardisierter Arbeitsabläufe, immer wieder schaffen, das alles ganz anders läuft…. Insofern habe ich es aufgegeben, nach Listen vorgehen zu wollen. Ich habe es ja immer mit ganz unterschiedlichen Menschen zu tun, und genau so unterschiedlich ist meist auch die Vorgehensweise. Damit habe ich mich schon abgefunden 😉

    Dein Punkt 1, ( „Wenn es technisch irgendwie geht, beginne ich mit dem was mir am wenigsten Spaß macht.
    Das mag ich *hinter mich* bringen.“) den schaffe ich meistens nicht 😉 Dafür bin ich wohl zu sehr „kreativ“ statt „diszipliniert“ 😉 Was dazu führt, das alles, was kein Spaß macht, zwar auch erledigt wird, aber erst gaaaanz zum Schluss 😉

    Sonnige Grüße aus Köln-Bonn,
    Sonja

  8. Katrin

    Das Papierkonzept steht bei mir auch am Anfang. Bei größeren Projekten finde ich auch Mindmapping ganz nützlich, zum Beispiel mit dem Tool auf http://www.bubbl.us/. Zwischenzeitlich hatte ich mal versucht, Grobkonzepte für Zwischenabnahmen mit Powerpoint zu erstellen, aber das ist zu umständlich. Inzwischen bekommen die Kunden – zumindest bei größeren Webseiten – das Grobkonzept bereits als funktionierende html- oder php – Seiten ins Netz gestellt. Es sind nur Platzhalter-Seiten. Aber die Navigation funktioniert weitgehend und die Farben werden schon mal eingebracht, so dass der Kunde eine grobe Vorstellung bekommt, wie das alles funktionieren wird. Das erspart oft nachträgliche Änderungen an Navi und Farben.

  9. nik

    Hört sich gut an. Als Laie ist es immer interessant, wie Profis vorgehen. Allerdings vermisse ich den wichtigsten Schritt, den du wahrscheinlich hinter „Schreibfehler korrigieren“ versteckst:
    Das Validieren der Daten mit W3C…

  10. Webdesigner aus Hamburg

    Hey,
    ich bin selbst Webdesigner. Was genau meinst du mit „Projektlandkarte“? Ich mache es ganz ähnlich wie du, allerdings fertige ich dabei zunächst immer eine Photoshopgrafik der Startseite der Website an. In diese Phase stecke ich relativ viel Arbeit, da die Grafik oftmals darüber entscheidet, ob ich den Auftrag bekomme. Ist das was du mit „Projektlandkarte“ meinst?

  11. walther

    Mache ich auch meistens so, erstmal in photoshop die Vorlage erstellen und dann ran an die Arbeit! 😉

  12. Homburg

    Hallo zusammen,

    wenn der Kunde kein Lastenheft liefert, ist der erste Schritt immer eine Konzepterstellung. Um an dieser Stelle manchen Frust zu ersparen, habe ich angefangen, diese Konzepterstellung bereits als Dienstleistung anzubieten und selbstverständlich abzurechnen. Das Resultat: Weniger Abschlüsse in absoluten Zahlen, dafür zufriedenere Kunden und bessere Kommunikation. Nur zu empfehlen!

    Grüße,
    D. Homburg

  13. ptra ;-)

    Mal ein kurzes Wort zur Couch: Ottoman bezeichnet in der türkischen Sprache ein Gewebe…

    …aus dem OTTOMANE, d.h die gepolsterten Sitzmöbel mit einer halbrunden Seitenlehne, hergestellt werden.

    Da fehlt ein kleiner Buchstabe am Ende. Wenn schon Klugsch… dann aber korrekt 😉

    Gruß. Agade.

  14. Michael

    Wir erstellen immer erstmal 2-3 grobe Designentwürfe pro Person (sind zu zweit) in Photoshop. Danach wird entschieden welcher dieser Entwürfe am besten ist und wird dann weiter ausgearbeitet.
    Wir nutzen eigentlich keinerlei „analoge“ Methoden mehr (wie z.B. Block o.ä.)

    Grüße aus Rosenheim

  15. typo3 agentur löwenstark

    Auch ich kann einen ähnlich struckturierten bzw. standartisierten Arbeitsablauf nur bestätigen. Ich kann nur hoffen, dass es mir / uns in Zukunft weiterhin viel Spass macht und nicht, dass eine Art Routine bzw. Langeweile eintritt.

    Viele Grüße

  16. Webdesign Agentur Halle

    Zunächst Danke für den Beitrag:

    Eine kleine Ergänzung würd ich gern beiführen.

    Im Zeitalter von Content-Management-System und WYSIWYG-Editoren werden Inhalte durch die User ja nun weitesgehend selbst bearbeitet.

    Zeigt euren Kunden nach der Erstellung der Seite den W3C-Validator-Auszug mit 0 Fehlern – oft kommt es vor dass durch etwas Unwissenheit der Kunden (soll kein Vorwurf sein) – sich hier & da ein paar Fehlerchen einschleichen, die evtl. irgendwann auf Euch zurückgeführt werden (auch wenn unberechtigt).

    Ansonsten gebe ich auch meine Zustimmung zu dem Ablauf.

  17. D. Homburg

    Jedem Auftrag von Anfang an Struktur zu geben und etwas Zeit zu investieren, hat sich bisher immer ausgezahlt.
    Auch kann man hier schonmal die Kommunikation mit dem Kunden „üben“, damit auch wirklich Klarheit über alle Details der Arbeit herrscht.

  18. Mario

    Ein sehr toller Artikel. nun bin ich angeregt auch so ein Artikel zu verfassen und online zu stellen. Danke!

  19. Simlink

    So ähnlich schaut es bei mir auch aus aber man kann das nicht auf Alles anwenden. Gerade bei großen Web-Projekten sieht das ganze schon ein wenig anders aus. Was bei mir Standard ist: Eine Dienstleistungsvereinbarung. Da steht drauf was gemacht wird und ein Preis dafür. Gerade bei großen Projekten kann man sich viel Streit vom Hals halten. Auch der Kunde hat eine Sicherheit in der Hand. Sätze wie „es war doch ausgemacht…“ oder „wollten Sie nicht noch…“ fallen somit weg.