Idee/Konzept
Beim Kickoff Meeting haben Dan und ich uns geeinigt das CMS Wordpress für seine Website zu benutzen. So hat er die Möglichkeit selbst daran zu arbeiten und die Website aktuell zu halten. Weiter besprachen wir Punkte wie das Layout, Anzahl Seiten, Navigation und die Kontaktaufnahme. Ich habe mir ein paar Themes rausgeschrieben und bin mit ihm verschiedene durchgegangen. Wir kamen zum Schluss, dass wir auf seiner Seite mit vielen Bildern arbeiten möchten. Sei es über Slider, Portfolios oder Galerien. Weiter legten wir die Anzahl Seiten fest. Da sich seine Projekte in 3 Hauptkategorien unterscheiden lassen kamen wir auf folgende Lösung: Startseite, Produkte mit Customizer, Dienstleistungen, Lackierarbeiten, Kontakt und Über mich. Schlussendlich legten wir noch fest, dass die Seite hauptsächlich über einen Desktop besucht werden würde weshalb ich nicht Mobile First programmierte. Mit diesen Infos machte ich mich an die Arbeit.
Wordpress
Ich habe auf meinem Webserver einen neuen Ordner für das Projekt erstellt und Wordpress installiert. Danach installierte ich das ausgewählte Theme und erstellte ein Child-Theme um meine Anpassungen zu machen. Dies lief alles sehr gut und das grobe Template stand sehr schnell.
Fotos
Von Dan erhielt ich relativ viele Fotos seiner Projekte. Viele waren aber im Hochformat oder einfach so nebenbei erstellt worden. So machte ich mit Dan einen Termin ab, um weitere Fotos für den Webauftritt und den Customizer zu schiessen. Schliesslich war mein Ziel die Website möglichst persönlich zu gestalten und dafür benötigte ich ein paar Fotos mit Dan. Diese waren auch relativ schnell im Kasten. Der Aufwand für die Fotos des Customizer war im Gegensatz erheblich grösser. Dazu erstellten wir ein improvisiertes Fotostudio mit Leintüchern, Werkzeugkisten und Baustrahlern. Das ganze Shooting dauerte schlussendlich einen ganzen Nachmittag, wobei ich im Nachhinein sagen kann, das sich die Zeit gelohnt hat. Die Aufnahmen waren eine gute Grundlage und erleichterten mir die Arbeit im Photoshop.
Photoshop
Mit den aufgenommenen Bildern erstellte ich im Photoshop die Grundlagen des Customizer. Ich stellte die Kanister frei, färbte diese um und erweiterte diese mit verschiedenen Designs und Innenausstattungen. Als ich die Hauptansichten fertiggestellt hatte war es schlussendlich eine reine Fleißarbeit alle möglichen Kombinationen zusammenzustellen und entsprechend zu exportieren. Insgesamt gibt es nun über 300 Variationen und Ansichten, welche mit dem Customizer erstellt werden können.
Customizer
Als Idee für den Customizer nahm ich die Web App Nike ID. Dort haben User die Möglichkeit ihre Nikes zu individualisieren und bestellen. Ich probierte meinen Customizer mit React zu programmieren, wie es auch die Entwickler von Nike ID gemacht haben. Schliesslich habe ich schon ein paar wenige Web und Mobile Apps mit dieser Technik erstellt. Ich machte ein paar Tutorials und erkundigte mich nach der Integration ins Wordpress. Diese stellte sich schlussendlich schwieriger heraus als angenommen. Darum entschied ich mich kurzerhand um den Customizer mit HTML, CSS und Javascript zu erstellen. So konnte ich sicher gehen das Produkt auch in der gewünschten Zeit umzusetzen. Für die Umsetzung benötigte ich eine Navigation und ein Slider von Bootstrap, welche ich kombinierte. Um die Usability nicht zu beeinträchtigen überlegte ich mir eine schlaue Ordnerstruktur. So dass mit einer JS Funktion und ein paar Variablen nur der Pfad zu den Bildern verändert wird und die Ladezeit kurz bleibt.
Übergabe
Nachdem ich die Inhalte erstellt und den Customizer ins Wordpress integriert hatte übergab ich die Website Dan. Ich erstellte ihm ein Login und führte ihn in das Backend von Wordpress ein. Nun hat er die Möglichkeit die Beispieltexte anzupassen und die Website nach seinem Gusto zu gestalten.
Fazit
Die ganze Arbeit ging länger als geplant. Vor allem die Photoshop Arbeit hatte ich massiv unterschätzt. Auch das Testen und entsprechende Anpassen des Customizers in allen Browsern und auf dem Smartphone hat viel Zeit gekostet. Nun bin ich aber zufrieden, dass die Website 100% Responsive ist und ich Dan die Website mit relativ wenigen Bugs übergeben konnte.
