Skip to content

INTJ Kreativität: Webseite

Eines der größten Kreativ-Projekte die ich in der letzten Zeit gestemmt habe war das komplette Remake der Firmenwebseite www.brunker.de. Die vorherige Seite basierte einfach auf einem Template das nicht responsiv war, außerdem war der Inhalt noch komplett auf ALNO bezogen - unseren Hauptlieferant von dem wir uns wegen Insolvenz trennen mussten. Jedenfalls half da nur alles komplett neu zu machen. Die vorherigen Seiten wurden immer von meinem Onkel aufgesetzt und ich habe nur Inhalt beigesteuert. Inzwischen habe ich aber so viel Erfahrung in html und PHP, Webservern und so weiter dass ich alles in die eigene Hand genommen habe um das bestmögliche Ergebnis zu bekommen.

Homepage www.brunker.de

Homepage www.brunker.de

Ich habe etwas überlegt und habe dann aber die Plattform beibehalten. Wenn es nur die Imageseite gewesen wäre hätte man alles auch mit einem WISYWIG-Editor oder einem Webseitebaukasten erstellen können, da ich aber auch immer in der Nase hatte einen Shop für Kleinteile oder so einzubinden bin ich dann bei Joomla geblieben und ich bin auch der Empfehlung meines Onkels für Templates von Joomlashine treu geblieben. Ich habe mir verschiedene Templates angesehen und darunter war auch eines was für Möbelläden gedacht war - und das hat auch Zustimmung gefunden. Außer dem reinen Erscheinungsbild waren in dem Template eben auch ein Shop und ein Blog integriert - und der Konsens war wieder das auch umzusetzen.

Template JSN Miro Demo

Jetzt ist das ganze mittlerweile das dritte Webprojekt und da ich nun einmal weit vorausschauend war als ich meinen neuen Server gebaut habe ist das ein physikalischer Hyper-V mit Server 2016 wo der Domänencontroller als VM darauf läuft. Und praktischerweise kann man dann auch weitere virtuelle Maschinen erstellen, also eben auch ein CentOS7 als Testserver. Das hatte den Vorteil dass ich die komplette Seite lokal zusammenbauen und testen kann und es dann nur minimale Änderungen braucht um es zum www-Host zu kopieren.

Um herauszufinden wie die Demoseite mit dem Template eigentlich gebaut ist kann man sich das Demopaket installieren und analysieren. Joomlashine versucht natürlich seine eigenen Erweiterungen zu verkaufen aber wie sich im Endeffekt herausgestellt hat ließ sich alles auch ohne diese Features realisieren. Die Idee mit der Slideshow stammt von einem anderen Küchenstudio, das ging aber auch gratis mit slideshowCK, genauso wie die Lightboxes mit mediaboxCK vom gleichen Autor. Das ich da natürlich drin herumgefummelt habe, habe ich hier schon beschrieben. Was ich kaufen musste war neben dem Template an sich nur articlesAnywhere um die neuesten Blogeinträge in ein Modul zu bekommen.

Die größte Herausforderung beim Design der Webseite war die Umsetzung des Kachellayouts der Module und Artikel. Mag sein dass Joomlashine das mit ihrem Pagebuilder gemacht haben, daraus wurde ich aber so einfach nicht schlau und ich war zu geizig dafür auch noch Geld auszugeben. Deshalb also selbstmachen und damit nochmal ein Crashkurs in Sachen CSS. Die unterschiedlich großen Kacheln auf der Startseite gehen nur mit einem Grid-Layout, für die gleich großen nimmt man Flexbox. Beides hat den Vorteil, von Haus aus schon reponsiv zu sein. Nur ist das eben nicht Teil des Templates und Stück für Stück habe ich 400 Zeilen eigenes CSS geschrieben um das so hinzubiegen dass es aussieht wie auf der Demoseite. Aber insofern war das der richtige Weg als das ich nur eine einzige Zeile mediaQuery habe um bei schmalen Layouts das Padding kleiner zu machen. Alles andere geht automatisch. Wenn ich etwas soweit selbst machen kann/muss, dann sind mir die klarsten und geradlinigsten Lösungen immer die liebsten. Deshalb war ich auch so froh als ich es endlich geschafft habe den WYSISYG-Editor in Joomla durch einen einfachen Code-Editor zu ersetzen der mir mein html so lässt wie ich es geschrieben habe.

Neben dem Konstrukt brauchte ich auch noch Inhalt. Wie man unschwer erraten kann fällt mir texten nicht so schwer, wenngleich ich auch absichtlich meinen etwas flapsigen Stil beibehalten habe. Meine Firma ist eben nicht so groß, dafür aber familiär und direkt und genau dieses Bild will ich auch vermitteln. Deshalb auch die auf der Seite eingebauten Gags. Und für die Bilder .. ich habe zwar schon länger nicht mehr aktiv fotografiert aber so etwas vergisst man nicht. Vom Fotostil fällt das ja in die Rubrik "Studiotechnik" und da bin ich David Hobby von Strobist immer noch dankbar - lang leben Chinablitze und Fernauslöser. Im großen und ganzen sind meine Küchen zwar gut beleuchtet, aber manche Ecken brauchten eben etwas Korrektur. Und ich habe mich entschieden auch meine ganzen Küchen zu fotografieren und ins Netz zu stellen. Die meisten Kollegen machen das nicht, die verwenden fertiges, steriles Bildmaterial ihrer Lieferanten. Ich aber wollte wieder die persönliche Note und deshalb sind die Bilder eben auch alle aus meiner Ausstellung. Ich habe das jeweils kombiniert aus den üblichen Totalen, manche sogar als HDR:

Totale mit HDR
Totale mit HDR

und Detailfotos:

Stimmungsdetailfoto
Stimmungsdetailfoto

Und ich habe Portraits gemacht, unter anderem auch mal endlich ein brauchbares von mir selbst für die Chronik als seriöser Inhaber:

Selbstportrait als Geschäftsmann
Selbstportrait als Geschäftsmann

Was die Strobist-Methode bedeutet, sieht man an diesen Setup-Fotos: ferngezündete Blitze als Lichtgestaltung, zum Beispiel mit Schirm für weiches Licht für die Portraits:

Setup für Portraits
Setup für Portraits

oder das Spezialsetup um in den Hochglanzfronten Spiegelungen zu erzeugen - was man sieht erinnert an ein Fenster, ist aber Karton auf dem Boden und ein weiterer Blitz.

Setup für Hochglanzspiegelung
Setup für Hochglanzspiegelung

Daraus wird dann so ein Foto:

Küchendetail mit Spiegeleffekt
Küchendetail mit Spiegeleffekt

Die ganzen Bilder zu machen und in Lightroom nachzubearbeiten war eine ziemliche Plackerei, macht aber Spaß. Ich hätte auch nie gedacht dass ich die Verlaufsfilteroption so oft brauchen würde, das ist aber wirklich der einfachste Weg den Fotos den letzten Schliff zu geben wenn eine Ecke nicht ganz so perfekt ausgeleuchtet ist was in der Realität ständig der Fall ist. Und natürlich noch die Großillumination, das Geschäftsgebäude von außen mit drei Blitzen gleichzeitig:

Nachtaufnahme mit drei Blitzen
Nachtaufnahme mit drei Blitzen

Es ist halt INTJ-Kreativität: nichts weltbewegend neues, aber eben im Detail ausgefeilt mit neuen Detailideen.

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
Form options

You can also subscribe to new comments without writing one. Please enter your email address down below.