Workflow-Optimierung im Webdesign

[Philex]

Hallo liebes Forum,

ich betreibe nun schon seit einigen Jahren Webdesign als intensives Hobby und habe regelmäßig ehrenamtliche Aufträge von gemeinnützigen Organisationen und kleinen Straßenläden, deren Seiten ich umsetze, weil ich sie gerne unterstütze.
Es läuft auch immer wunderbar und die "Kunden" sind auch zufrieden.

Jetzt mache ich mir allerdings Gedanken um meinen Workflow, ob der nicht irgendwie optimaler geht.
Momentan sieht er nämlich so aus:

1. Design in Photoshop erstellen und Entwurf als JPG an den "Kunden" schicken -> Korrekturschleife -> Erneuter Entwurf als JPG -> ... -> bis Design abgenommen
2. Design wird in Notepad++ mit HTML und CSS beschrieben, unter Zuhilfenahme des Responsive-Frameworks Bootstrap. Besondere Features und Animationen werden mit JavaScript gecodet.
3. Verknüpfung mit Wordpress mit allem PHP-Schnickschnack, der dazu gehört.
4. Nach Abnahme geht die Seite online und alle sind happy.

Nun kommt mir dieser Workflow aber etwas veraltet vor und hat entscheidende Nachteile:

• Der "Kunde" bekommt nur das fertige Design zu sehen und hat keine Möglichkeit, an seiner Entstehung mitzuarbeiten. Somit wird er ins kalte Wasser geschmissen, weil das Design immer anders ist als die Vorstellung, die er im Kopfe hat. Von diesem "Schockmoment" muss er sich erst mal erholen, bevor er meine Arbeit beurteilen kann. Das erstellte Design ist ihm einfach fremd und er kann sich nicht damit identifizieren, da er nicht daran mitgewirkt hat.
• Das Beschreiben des Designs in HTML+CSS ist zeitintensiv und monoton. Dieser Teil macht mir am wenigsten Spaß. Was für Möglichkeiten gibt es hier? Kann man vielleicht sogar die Phasen 1. und 2. meines Workflows kombinieren?

Bin gespannt auf eure Erfahrungen, Links und Google-Stichworte

 

[TeXniXo]

Ich mach das immer gleich einige Response Seitenlayouts in Entwurf-Modus (mit "Lorem"-Textbausteine usw.) und schicke die dazugehörigen Links mit 1-3 Thumbnails dieser Seiten; Thumbnail 1 > die eine Testseite etc.

Da kann der Kunde sich austoben und herumklicken & Co. - wenn es ihm was nicht taugt, kann ich das alles per CSS/HTML/PHP rasch ändern und zwar unabhängig, wo ich mich derzeit befinde.

 

[dagdavincy]

..............
Es läuft auch immer wunderbar und die "Kunden" sind auch zufrieden.

Jetzt mache ich mir allerdings Gedanken um meinen Workflow, ob der nicht irgendwie optimaler geht.
.................

Ich sehe keinen Anlaß andieser Vorgehensweise grundsätzliche Änderungen vorzunehmen wenn alle zufrieden sind - bis auf die Ergänzung einer angemessenen Vergütung.
Nach zu Anfang festgestelltem Anforderungskatalog an das Layout bekommen meine Auftraggeber 2 oder 3 Rohlayouts aus denen dann eines weiter entwickelt wird. Sobald wesentliche Änderungen/Umstellungen wie Anordnung, Farbkonzept etc. entstehen werden auch weitere Screenshots zur Freigabe/Korrektur übermittelt. Auf die Mitarbeit des Auftraggebers darf besonders am Anfang nicht verzichtet werden um ein zielführendes Ergebnis zu erreichen.

 

[Dobi78]

Der "Kunde" bekommt nur das fertige Design zu sehen und hat keine Möglichkeit, an seiner Entstehung mitzuarbeiten. Somit wird er ins kalte Wasser geschmissen, weil das Design immer anders ist als die Vorstellung, die er im Kopfe hat. Von diesem "Schockmoment" muss er sich erst mal erholen, bevor er meine Arbeit beurteilen kann. Das erstellte Design ist ihm einfach fremd und er kann sich nicht damit identifizieren, da er nicht daran mitgewirkt hat.

Ich muss zugeben, dass mich dieser Abschnitt hier total irritiert. Wenn ich das richtig gelesen habe, dann schickst Du ihm Material zur Ansicht und er segnet es ab... also warum wird er dann ins kalte Wasser geschmisssen?

 

[tr4ze]

Design in Photoshop erstellen und Entwurf als JPG an den "Kunden" schicken -> Korrekturschleife -> Erneuter Entwurf als JPG -> ... -> bis Design abgenommen

Schon das mache ich anders, ich mach den ersten Entwurf in PSD meistens Live mit dem Kunden zusammen, schlepp meine Laptop mit oder lade ihn zu mir ins Büro ein.Kurze Wege und direkte Komunikation, ausserdem sind die meistens ziemlich beeindruckt .

Design wird in Notepad++ mit HTML und CSS beschrieben, unter Zuhilfenahme des Responsive-Frameworks Bootstrap. Besondere Features und Animationen werden mit JavaScript gecodet.

Hier hab ich einen Zwischenschritt drin, ich schreibe erst einen Prototyp. Dabei geht es weniger Funktionalität sondern um die Verschiedenen Viewports. Also rein um die Optik.
Kunden könne sich meistens die verschieden Ausgabemedien nur schwer vorstellen, dieser Schritt hilft mir Überaschungen zu vermeiden und evtl. Fehler im Design zu finden.

Von Notepad hab ich mich schon vor Jahren verabschiedet und es durch eine Vollwertige IDE ersetzt, in meinem Fall Netbeans.

Ist der Prototyp abgenommen gehts an die Umsetzung unter zuhilfenahme der üblichen Verdächtigen(Wordpress,Joomla,Drupal oder seltener Typo und Contenao).
Auswahl eines passenden CSS(Bootstrap,Fondation,Blueprint...) und JS(Jquery, YUI, Prototype... ) Frameworks. Alles was die Frameworks nicht abdecken wird mit Customcode gefüllt, im Falle von JS nehme ich dort z.B. gerne Coffeescript.
Überhaupt achte ich streng darauf bei allen Programmierarbeiten ein Objektorientierten Ansatz zu verfolgen.

Nach Abnahme geht die Seite online und alle sind happy.

Ok, da ist vielleicht der größte unterschied...
Die meisten unserer Kunden sind KMUs und wir schließen mit denen langfristige Verträge welche dann sowohl Hosting als auch Pflege und Support mit einschließen. Ich mach also selten FireandForget Projekte.

Als Rat kann ich dir nur mit auf den Weg geben, deinen Kunden so früh wie möglich in Prozesse einzubinden, und eine klare und deutliche Kommunikation aufzubauen(Also dich nicht hinter irgenwelchen Fachbegriffen zu verstecken). Der Kunde ist wie ein Pferd das du reitest. Nur das dieses Pferd denkt selber der Reiter zu sein, ihn in diesem glauben zu lassen und trotzdem die Zügel nicht aus der Hand zu geben ist der Trick.