In langjähriger Zusammenarbeit mit Klaus Hünerkopf und mir, entstanden zahlreiche Produkte in den unterschiedlichsten Bereichen. Messeprospekte, Infoblätter oder die Webseite sind nur einige davon.

Oberste Priorität hatte hier die Einhaltung des CI (Corporate Identity) und die dargebotenen Inhalte, die auf diese Weise den Qualitätsanspruch des Unternehmens und seiner Kunden widerspiegeln.

Stellvertretend möchte ich hier Bilder von ein paar Prospekten und der Webseite vorstellen. Online kann man sich die Webseite hier anschauen: http://www.huenerkopf.de

Prospekte und Webseite (Klick für grosses Bild)

Auf diesem Blog läuft das WPtouch Plugin von Bravenewcode in der letzten kostenlosen Version 1.9 Basic. Es mag zwar jedesmal ein Stück Arbeit sein das Design anzupassen, aber egal – was macht man nicht alles.

Aber seht selbst:

hier für die Screenshots klicken

“Hanami” ist japanisch und bedeutet “Blüten schauen”. Ausserdem gehört es zu einem der größten japanischen Feste, das in jedem Jahr gefeiert wird. Es ist ein Fest der Begegnung, der Geselligkeit, der Freundschaft und Entspannung. All das sind auch die Attribute, die bei dem Album von Mitsuni im Vordergrund stehen. Somit entstand der Titel “Hanami”.

Klick für grosses Bild und weitere Screenshots

Diesmal verkauft der Shop Uhren. Das Design ist in diesem Fall extrem reduziert und legt Fokus ausschliesslich auf die Produkte. Kunde und Gestalter haben bei diesem Projekt eine Punktlandung hingelegt. Aber so ist das, wenn man sich schon seit Jahren kennt.

Umgesetzt wurde der Shop mit wieder ein mal Commerce:SEO und Dank dem reduzierten Style in atemberaubender Geschwindigkeit. Hier hat es sich auch ausgezahlt, dass die einzelnen Produkthersteller ihr gesamtes Bildmaterial für die Produktdarstellung zur Verfügung gestellt haben.

Eine runde Sache: Kunde zufrieden, Gestalter zufrieden.

Jungnickel-Shop (Klick für grosses Bild)

Ursprünglich hatten die beiden eine iPhone/iPod App namens “Pocketpedia” geschrieben, mit der man seine Sammlung auf das iPhone laden konnte und somit immer im Blick hatte, welche Titel sich im Besitz befinden, welche ausgelliehen sind oder welchen Titel man auf seiner Wunschliste hat. Leider hatte Amazon etwas gegen diese App, da Titel (egal ob DVD, CD, Buch oder Spiel) meist auf Amazon verlinkt und sich entsprechende Informationen zu den einzelnen Titel dort “besorgt”. Deswegen wurde “Pocketpedia2″ entwickelt. Ohne Links zu Amazon, ohne “Infograbbing”, ohne das Amazon in irgendeiner Art und Weise mittels dieser App aufgerufen werden kann. Aber Amazon behaarte auf der einstweiligen Verfügung, dass Pocketpedia, respektive Pocketpedia2, nicht veröffentlicht/genutzt werden darf. Wieder ein typischer Fall von Starrhalsigkeit eines Monopolisten.

Um die entsprechende “…pedia” dennoch auf seinem mobilen Endgerät nutzen zu können, bemüht man sich einem kleinen und völlig legalen Trick: man exportiert seine Bibliothek einfach als HTML Seite, lädt sie auf irgendeinem Server hoch, kann sie dort mittels Browser betrachten und mit einem iPhone/iPod sogar als sogenannte “Webapp” auf dem Homescreen speichern.

Damit das alles reibungslos verläuft, man eine iPhone optimierte HTML Seite angezeigt bekommt und sogar noch ein entsprechendes App-Icon serviert bekommt, habe ich zwei Templates dafür geschrieben, die sich jeder kostenlos hier herunterladen kann: DVDpedia Template by WillDesignForFood.de

Es gibt zwei verschiedene Themes. Zum einen das Dark Theme, das ähnlich wie dieser Blog mit dunklen Farben gestaltet ist und zum anderen das Safari Theme, welches die nativen Farben des iPhone Browsers Safari imitiert. Jedes Theme kommt mit drei verschiedenen Darstellungsversionen: Mini, Midi und Maxi, je nach dem wie viele Informationen man aus der entsprechenden Bibliothek exportieren möchte. Jede “…pedia” bietet die Möglichkeit bis zu 10 eigene Felder mit eigenen Informationen anzulegen. Diese Felder werden von den beiden Themes in vollem Umfang in der “Maxi” Export Variante unterstützt.

Hinweis: Das erste Eigene Feld wird von mir als Feld für meine Inventarnummer verwendet und ich lasse es direkt in der Übersicht unter den Bewertungsternen anzeigen. Wer also im ersten Customfield etwas anderes zu stehen hat, sollte das eventuell abändern bzw. leer lassen, um unangenehme Darstellungsfehler zu vermeiden.

Vor dem Export mit dem jeweiligen Theme, sollte man seine Liste nach einem bestimmten Kriterium sortieren. Am hilfreichsten ist hier die Sortierung nach Genre. Eine ordentlich und sauber gepflegte Bibliothek ist hier natürlich von Vorteil.

Das Beste zum Schluss: Sämtliche Cover (Übersicht und Detailansicht) sind mit einem Overlay versehen, so dass alle DVD Cover in einem Jewelcase dargestellt werden.

Beispiel Dark Theme
Beispiel Safari Theme

Nachtrag (23.04.2010): Heute Morgen hat mich Nora, die Entwicklerin von Bruji, angeschrieben und mich gefragt ob sie die beiden Templates im hauseigenen Downloadbereich “Extras” für die Allgemeinheit bereitstellen dürfte. Natürlich hab ich zugestimmt. Mal sehen wann die Templates dort online gehen.

Wow, das ging echt fix mit dem “Online stellen”. Nora hat die Files umgehend in den Bruji Downloadbereich eingebunden:
http://www.bruji.com/extras/dark.html
http://www.bruji.com/extras/safari.html

Screenshots: hier klicken

Die leipziger Mamas Pearl GmbH bekam zusätzlich zu ihrem Webshop auch noch das gesamte CI für ihr Ladengeschäft im Messehof in Leipzig.

Zur Zeit wird der Shop mit Produkten gefüllt und wird in Kürze in vollem Umfang unter www.mamaspearl.de erreichbar sein. Bis dahin gibt es hier schon einmal eine kleine Vorschau:

Mamas Pearl GmbH (Klick für grosses Bild)

Laut Brave New Code wird in naher Zukunft Version 2.0 ihres genialen Plugins erscheinen, das dann auch eigene Themes unterstützen wird. Naja, so lange wollte ich nun nicht warten. Ausserdem bin ich dann schon mal vorbereitet.

Es ist natürlich ein dunkles Theme geworden. Einerseits passt es damit zum WD4F – Style, andererseits schont es den Akku des mobilen Endgerätes. Wie das? Na ganz einfach: Wenn das Display nicht so hell leuchtet verbraucht es weniger Strom.

Aber seht selbst, hier sind ein paar Screenshots oder einfach mit dem iPhone, Android oder was auch immer ansurfen.

hier für die Screenshots klicken

Sagen wir es mal anders herum: es gibt auch Kunden, die nicht genau wissen was sie wollen, nur was sie nicht wollen. Und eigentlich sind sie mir lieber als diejenigen, die einem als Gestalter ihre Vorstellung “aufzudrängen”. Da hat man dann kaum noch Bewegungsfreiraum.

Wie es vom ersten zum letztlich endgültigen Entwurf kommt, möchte ich hier mal darstellen. Es sei noch angemerkt, dass es sich höchstwahrscheinlich nicht um das endgültige Produkt handelt, so wie es später der Öffentlichkeit zugänglich ist, oft geht da noch was. Zwar nur Kleinigkeiten und Details aber immerhin. Sei es von Seiten des Kunden, dem plötzlich noch etwas einfällt oder von Seiten des Gestalters / Umsetzers, dem plötzlich auffällt, dass man noch ein Quäntchen mehr heraus holen könnte.

Case Study Part 1 (Klick für grosses Bild)

Das Basislayout steht: Die Aufteilung der Grundelemente ist festgelegt. Inhaltselemente wurden noch nicht besprochen aber die Farbgebung ist schon geklärt.

Case Study Part 2 (Klick für grosses Bild)

Die ersten Überarbeitungen: Farbgebung wurde überarbeitet, Grundlayout bleibt unberührt. Die Inhalte wurde besprochen und neu positioniert. Zusätzlich kommen rechts diverse Navigations- und Auszugselemente hinzu.

Case Study Part 3 (Klick für grosses Bild)

Die Haupt-Navigation wird ins Auge gefasst: Position und “Hover”-Effekt werden neu gestaltet. Hinzu kommen ein paar kaum merkliche Abweichungen in den Farbnuancen.

Case Study Part 4 (Klick für grosses Bild)

Erneut gehts der Navigation an den Kragen: “Hover”-Effekte werden auf ein Minimum reduziert. Ebenso wird der Inhalt neu positioniert und optisch von einem offensichtlichen Blogeintrag entfernt. Auch die Sidebar-Elemente erfahren noch Einmal eine Frischzellenkur. Im Großen und Ganzen wird rund herum abgespeckt / minimalisiert ohne dabei Funktion oder Optik zu reduzieren. Jetzt sind wir an dem Punkt, an dem alle zu 99,9% glücklich mit dem Ergebnis sind. Die fehlenden 0,1% ergeben sich später bei der Umsetzung und den einzelnen Funktionen wenn das Projekt online geht.
Ich werde berichten.

Die SWISS Systemhaus GmbH wande sich mit dem Erstellen einer Webseite nach Deutschland. Die Gestaltung und Umsetzung wurde durch die werk:zwei GbR an mich übergeben.

Endlich mal ein Projekt ohne enge Rahmenbedingungen. Lediglich Logo und grundlegende Elemente des Firmen-CI waren als Vorgaben greifbar. Der Rest: “freie Hand” bei der Gestaltung. Durch das klare und einfache Logo der SWISS Systemhaus GmbH konnte die Website schnell und unkompliziert abgeleitet werden. Das “weniger ist mehr” Design, wirkt übersichtlich und aufgeräumt. Die wirklichen Raffinesse liegen im Verborgenen. Unter der Haube werkelt Essential System 2.3 (hauseigenes CMS exklusiv für Kunden von mir). Kombiniert mit einigen zusätzlichen individuellen Module, speziell auf den Bedarf der Website zugeschnitten, und ein paar netten AJAX Effekten, ist ein wirklich schöner und stimmiger Auftritt gelungen.

Die zusätzlichen Anforderungen an das eingesetzte CMS waren unter Anderem Mehrsprachigkeit, AJAX Bildergalerie und eine “geschmeidige” Navigation.

www.swiss-systemhaus.ch

Ich finde ja diese Bilder mit den extremen Lichteffekten richtig genial. Beispiel gefällig? Hier: 45 Superb Light Effects

Kann man aber auch selber machen, ist nämlich gar nicht so schwer. Das komplizierteste war das geeignete Motiv zu finden. Dazu hab ich ausgiebig Deviantart.com bemüht. Fündig geworden bin ich bei zwei Fotografen: zum Einen Carsten Breschel aus Dänemark und zum Anderen David Haubourdin aus Frankreich. Auf ihren Deviantart Seiten (Carsten on deviantart.com und David on deviantart.com) haben sie eine Menge genialer Bilder von hübschen Mädels in entsprechenden Glamour-Posen ausgestellt. Meine Wahl ist auf die Bilder Vicki in blue jeans und Black n red von Carsten und The Wall AuroreDG von David gefallen.

Natürlich hab ich Carsten und David kontaktiert und um ihre Erlaubnis gebeten, die angefertigten Wallpaper veröffentlichen zu dürfen. Was ich dann natürlich auch auf Deviantart.com gemacht hab: Lightning Vicki, Lightning Natascha und exklusiv nur hier Lightning Aryana

Die Wallpaper unterliegen der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

Lightning Vicki (Klick für grosses Bild)

Lightning Natascha (Klick für grosses Bild)

Lightning Aryana (Klick für grosses Bild)

Unter der Haube werkelt eine osCommerce Engine mit vielen raffinierten zusätzlichen Features wie z.B. einem integrierten CMS, einem Cross-Selling Modul, Mutiple Product Image Feature, zusätzlichen Attributmerkmalen und speziell angefertigten Produktattributen, die nicht von Haus aus in der osC Installation enthalten waren.

Gloss & Glory Interactive hat das Projekt realisiert und dabei weder Kosten noch Mühen gescheut. Nach den ersten Entwürfen und der gemeinsamen Abstimmung mit der Shop-Betreiberin, kam es zu einem eigens für diesen Shop inszenierten Fotoshooting. Eine extra für das Shooting angereiste Hairstylistin, gab dem Shooting und den Kids den letzten Schliff. Der Aufwand hat sich natürlich gelohnt und das Ergebnis ist äusserst zufriedenstellend.

Doch genug der vielen Worte: Liveansicht des Shops -> www.tausendschoenchen-kindermoden.de

Startseite (Klick für grosses Bild)

Markenübersicht (Klick für grosses Bild)

Kategorieübersicht (Klick für grosses Bild)

Produkt Detailansicht (Klick für grosses Bild)

Das Ergebnis ist eine frische und anspruchsvolle Webseite geworden, auf der Infos, Fotos und Videos von Danijel in einer entspannten Atmosphäre präsentiert werden.

Sofern der Domainumzug erledigt ist und die Webseite betriebsbereit ist werde ich noch den Link veröffentlichen.
Der Umzug ist zwar immer noch nicht vollständig über die Bühne gegangen, aber so lang kann man sich das Ergebnis hier anschauen: http://www.danijelperic.com

Wir werden sehen was sich die xt:C Coder in der aktuellen Version haben einfallen lassen, um dem geneigten Themedesigner das Leben zur Hölle zu machen.

Einzelheiten und Erfahrungsberichte folgen.

xt-Commerce Shop

[Update v1]

Also hier die neusten Erkenntnisse:
Ja, ich habe bei xt:C immer mit den Augen gerollt. Nicht ohne Grund, wie ich finde. Denn auch in der aktuellen Version 3.04 (SP2.1) wurde wieder mit Tabellen um sich geschmissen als gäbe es kein W3C. Und unübersichtlich ist es ebenso wie vor einigen Jahren. Buttons und Grafiken sind in Smarty-Objekten und im xt:C Core versteckt. Damit ist jede Designanpassung der Bau eines Kartenhauses, dass mit einem eventuellen Update der Kernsoftware wieder zusammen fällt. Umwege müssen (ich betone MÜSSEN) gegangen werden, um beispielsweise eine Bestsellerliste zu erstellen, da es diese nur als “Boxmodul” gibt und diese nicht auf Inhaltsseiten oder an beliebiger Stelle dargestellt werden können. Muss das denn sein? Allerdings ist die Community rundum xt:C recht groß und es gibt viele und sehr gute Lösungen für diverse Probleme.

Alles in Allem ging die Anpassung aber dennoch recht flott von Statten und der eigentliche Zeitfresser war nur die Suche nach den einzelnen Elementen. Ich denke mal, dass man/ich in Zukunft so einen Umbau mit etwas Übung recht zügig über die Bühne bekommt.

Sofern ich noch die Anpassungen für den allseits beliebten InternetExplorer gemacht habe und das Projekt online geht, gibt es den Link.
Wie versprochen folgt der Link: http://shop2009.innovatronix.de

Die Bilder in den Screenshots sind nicht im Onlineshop vorhanden. Dafür werden noch extra Fotos angefertigt. Ich habe in den Screenshots Fotos von Calvin Dexter, einem Fotografen aus Barcelona, als Platzhalter verwendet.

[Update v2]

Ich hatte den Kontakt von Calvin Dexter an den Shopbesitzer weitergeleitet. Und siehe da, die beiden stehen in engem Kontakt und Calvin hat die Genehmigung erteilt, dass die Bilder verwendet werden dürfen. Im nächsten Jahr werden wahrscheinlich sogar extra Fotos von Calvin angefertig.

xt:Commerce Shop in angepasstem Design
Auf das Bild klicken, um weitere Bilder zu sehen

Und das ging leichter als erwartet. Man erstellt lediglich ein Plugin für WordPress in dem eine spezielle CSS Datei und die Grafiken eingebunden sind und schon kann man es verwenden. Eine genaue Anleitung hab ich hier gefunden: Creating Admin Themes @ Codex.

Das Ergebnis kann sich sehen lassen, wie ich finde. Der Mehrwert? Ganz einfach: vielleicht missbraucht der ein oder andere WordPress auch als CMS oder ähnliches. Wenn man das z.B. als Webdesigner für Kunden betreibt, kann man dem Kunden eine vollständige Umgebung schaffen, in der das Frontend UND das Backend dem CI des Kunden entsprechen.

Download: WD4F Admin Theme (WP Plugin)

[Update 05. April 2009]: Juchu! Hab es endlich geschafft das Plugin auf WordPress.org zu veröffentlichen. Man kann es auch direkt aus der Adminoberfläche im Pluginverzeichnis aufrufen und installieren. Suchbegriffe und Tags: admin, theme, lime, color, individual, admin-theme, wd4f, willdesignforfood, green, light. Updates funktionieren dann natürlich auch (sofern es welche gibt).
Das nächste Update hängt auch schon in der Warteschleife. Ich habe Kerry Webster angefragt, ob ich sein Plugin Branded-Admin bei mir integrieren kann. Ich warte nur noch auf seine Zustimmung und dann gibt es direkt die neue Version 1.1 hier und im WordPress Plugin Trunk zum downloaden. Ausserdem werde ich noch zusätzlich die *.PSD Files integrieren und die CSS Datei ausführlich dokumentieren, damit jeder der möchte, das Design an seine Bedürfnisse anpassen kann.

Was auch immer. Onlineshops gibt es wie Sand am Meer. Fast genauso sieht es bei der Shopsoftware aus. Wer sich damit schon einmal befassen musste, weiß wovon ich gerade spreche. Da gibt es zum einen die Platzhirsche: xt:Commerce und OsCommerce. Dann wären da noch die Underdogs: zenCart oder auch die ganzen Plugins für die großen CM-Syteme wie Drupal, Joomla oder Contenido. Für Informatikstudenten gibt es dann noch diverse Plugins für ihre Typo3-Installation.

Aber in letzter Zeit stolpert man immer häufiger über ein neues System: Magento. Glaubt man der Featurelist und den Meinungen aus der Szene, scheint es sich bei diesem Produkt um ein echtes Multitalent zu handeln: mehrere Shops über eine Adminoberflächeverwalten, Mehrsprachigkeit (Backend/Frontend), multiple Währungen, rollenbasiertes Administrationsmenü, individuelle Kundengruppen, integriertes CMS und vor allem 100%ig anpassbares Design.

Magento Shopsystem

Da sich in nächster Zeit ein Projekt angekündigt hat, in dem es darum geht einen Onlineshop aufzusetzen, werde ich Magento die Chance geben zu beweisen was es kann und welche Hürden (oder hoffentlich auch nicht) es zu nehmen gilt.

Fortsetzung folgt …

So weit, so gut. Leider gibt es Fotogalerien wie Sand am Meer im Netz. Aber nach einigen Stunden Recherche habe ich dann doch eine wirklich angenehme Galerie gefunden. JonDesign hat die SmoothGallery entwickelt. Sie basiert auf den allseits bekannten MooTools. Die Umsetzung des Projekts hatte allerdings so seine Tücken. Zum Einen war es nicht ganz so easy die Seite für den “beliebten” Internet Explorer 6 aufzubereiten, zum Anderen sollte ein eigenes Backend geschaffen werden, um den Upload und das “Taggen” der Bilder so einfach wie möglich zu gestalten.

Aber es ist gelungen. Nun müssen nur noch viele viele Fotos hochgeladen werden.

Link zum Projekt: http://amy.centershock.com