Wolf Brüning

Interaction Design, eCommerce, Fotografie & ich


Design&UX |

Alles neu (oder: Hell ist das neue Dunkel)

Wolf macht alles neu

Vier Jahre ist es mittlerweile her, dass ich meine persönliche Website generalüberholt habe. 10 Jahre ist es her, dass ich überhaupt mit einer vollwertigen Seite im Netz präsent war. Also war es durchaus an der Zeit für einen Relaunch und hier seht ihr endlich das Ergebnis. Für sich selbst zu gestalten ist doch immer noch am schwierigsten…

Eigentlich hatte ich ja vor, diesen Artikel schon vor einem Jahr zu schreiben. Ein Großteil des neuen Konzepts und Designs waren damals schon fertig. Allerdings war immer noch eine lange Liste von kleineren und größeren Dingen offen und nachdem ich die Fertigstellung erst einmal ein paar Wochen vor mir hergeschoben hatte, dann Weihnachten kam, ein neues Jahr, neue Herausforderungen… nun ja, knapp 11 Monate lag die zu 80% fertige Seite einfach nur rum.

Vor einigen Wochen habe ich mich dann aber doch mal wieder aufgerafft und bei der Fertigstellung hat mir vor allem eine Sache geholfen, die ich bei OTTO gelernt habe: Der Entwicklungsprozess unserer neuen eCommerce-Plattform zielt nicht auf den Launch eines perfekten Webshops, sondern zu aller erst auf den Bau eines „MVP“ – eines Minimum Viable Products – ab. Dieses MVP umfasst nur die Features und Funktionen, die für einen erfolgreichen Betrieb unbedingt notwendig sind. Mit dieser Philosophie im Kopf hab ich mir noch mal die ToDos für den Relaunch zur Brust genommen und die Punkte, die für einen Start wirklich fehlen herausgepickt. Das Ergebnis war eine Liste, die sich an einem Wochenende locker bewältigen ließ und so bin ich nun in der Lage, meine neue Seite hier endlich vorzustellen.

Alte Versionen meiner Website

Die deutlichste Veränderung – und das wird natürlich besonders präsent, wenn man sich die Screenshots oben anschaut – ist natürlich die Änderung des Farbschemas. Ganz nach dem Motto „Hell ist das neue Dunkel“ habe ich den Trend, dass meine Webseiten immer dunkler werden umgekehrt (viel dunkler wäre ja auch nicht möglich gewesen). Nun gibt es also augenfreundlicheren schwarzen Text auf weißem Grund. Darüber hinaus ist das Layout deutlich großzügiger geworden. Standen bisher 550px Breite für Inhalte zur Verfügung sind es ab jetzt ganze 800px, ihr könnte euch also schon auf viel größere Fotos freuen. Das hat natürlich zur Konsequenz, dass ich die klassische 1024er-Grenze einfach mal gesprengt habe. Aber wer hat das heute auch noch (Tablets zählen nicht, die zoomen ja automatisch). Responsive Design wäre natürlich auch eine Option gewesen, aber mit diesem Thema bin ich erst seit diesem Jahr per du, und hätte ich das auch noch eingebaut, dann wäre die Website wahrscheinlich erst ein ein, zwei weiteren Jahren online gegangen.

Veränderungen gab es nicht nur in der Optik sondern auch im Entwicklungsprozess. Bis auf einige wenige Vorabtests in Photoshop ist fast das komplette Design während des Programmierens, also direkt im Code entstanden. In HTML5 natürlich. Für eine ansprechendere Gesamt-Optik sorgt zudem der Einsatz von Webfonts

Es ist natürlich nicht alles neu. Der Unterbau aus einem WordPress-System und die bisherigen Inhalte bleiben im Gegensatz zum letzten Relaunch 2009 bestehen. Ab sofort sind die einzelnen Seiten und (konsolidierten) Kategorien aber immerhin über eine Hauptnavigation zu erreichen.

Natürlich bliebt noch viel zu tun, das Layout ist bestimmt noch nicht an jeder Stelle wirklich rund und ich freue mich sehr auf Feedback und Verbesserungsvorschläge eurerseits. Auf jeden Fall will ich die Gelegenheit nutzen, wieder häufiger Beiträge zu verfassen und nicht nur alle drei Monate (auch wenn andere Blogs ebenso nach meiner Aufmerksamkeit verlangen). Für neue Inhalte wird auf jeden Fall die Integration meines bisher separat betriebenen Tumbleblogs „Urban Typography“ sorgen.

PS: Passend zum MVP-Gedanken ist das neue Design auch schon mehr als drei Wochen online. Ich wollte eben nicht warten, bis auch noch dieser Artikel fertig ist…


Urbane Typographie |

Urbane Typographie

Es ist schon eine gefühlte Ewigkeit her, dass ich auf Tumbler einen Blog mit dem Titel „Urban Typography“ gestartet habe. Ich wollte dort typographische Fundstücke und Streetart aus den Städten, in denen ich wohne oder durch die ich reise sammeln. Leider ist das ganze dann doch recht schnell eingeschlafen. Es ist schon schwer genug, einen Blog am Leben zu erhalten… Da mich das Thema aber doch noch reizt, will ich den Tumbleblog mit meinem regulären Blog verheiraten und die Fundstücke eben hier in der Kategorie Urbane Typographie präsentieren. Ich hoffe, zukünftig mit einer höheren Frequenz!

Urbane Typographie

ut_berlin

ut_buckau



Design&UX |

Creating a large scale interaction pattern library (UXCampEurope & UX Roundtable)

UXCampEurope(Foto: © Bastian Ehl, UCDplus)

Wie im vergangenen Jahr sind wir vom OTTO-UXD-Team Ende Juni wieder auf das UXCampEurope nach Berlin gefahren – diesmal sogar fast in voller Stärke. Es war wieder eine absolut großartige Veranstaltung mit vielen spannenden Vorträgen, Gesprächen, neuen Kontakten, Kölsch, Currywurst und wenig Schlaf.

Auf meinem mittlerweile dritten UXCamp habe ich mich meinen Mut zusammengenommen und habe zum ersten Mal selber eine Session gegeben. Ich habe unser Pattern-Library-Projekt vorgestellt und erklärt, was wir dabei gelernt haben. Nachfolgend kann man die Folien meiner Präse durchblättern:

[slideshare id=23362142&doc=patternlibrariesslideshare-130623064207-phpapp01]
Slideshare: Creating a large scale interaction pattern library

Update 1: Das Foto oben hat übrigens mein ehemaliger Magdeburger Kollege bei UCDplus, Bastian Ehl, geschossen. Ich war so sehr in den Vortrag vertieft, dass ich gar nicht mitbekommen habe, wie er neben mir herumgekrabbelt ist.

Update 2: Mittlerweile habe ich den Vortrag noch einmal erweitert und beim UX Roundtable Hamburg auf deutsch gehalten:

[slideshare id=26943820&doc=patternlibrary-prasentationuxroundtable2013slideshare-131007104422-phpapp01]
Slideshare: Design Pattern Libraries, Aufzucht und Pflege

Update 3: Ich bin im Moment dabei die Inhalte der Präsentationen in eine Artikelserie auf Produktbezogen zu gießen. Hier geht es los: Bauanleitung für eine Pattern Library

Update 4: Mittlerweile habe ich auch auf dem UXCampEurope einen aktualisierten Vortrag gehalten. Die neuen Folien gibt es hier:
[slideshare id=35596569&doc=patternlibrary-prasentationuxcampeurope2014-140607070112-phpapp02]
Slideshare: How to build the perfect pattern library


Fotografie |

Mit Instagram in der City Nord

Nach dem Schnee, der Dunkelheit und Kälte der letzten Wochen und Monate hat uns das grandiose Osterwetter natürlich sofort zu einem Spaziergang nach draußen gelockt. Leider zeigte sich der Hamburger Stadtpark – oder besser gesagt dessen Wege – noch von einer sehr matschigen Seite, so dass wir spontan eine 180°-Wende vornahmen und den Spaziergang durch einen dafür eher untypischen Ort fortsetzten: Hamburgs Bürostadt aus den 60ern, die City Nord. Vor allem außerhalb der typischen Arbeitszeiten ist dieser Stadtteil ein sehr leerer und trister aber dafür auch ruhiger Ort, der dem geneigten Fotografen den Blick einige spektakuläre Architektur-Solitäre bietet. Zwar hatte ich auf das Mitführen einer meiner schwereren Kameras verzichtet, dafür durfte mein iPhone samt Instagram zur Bildaufzeichnung herhalten. Hier ein paar Impressionen:

Die alte ESSO-Zentrale, neuerdings Allianz:
City Nord + Sonne 1

Mein „Lieblingsgebäude“ – die leerstehende, ehemalige Oberpostdirektion:
City Nord + Sonne 2

Und mittendrin in der Betoneinöde wohnen Menschen:
City Nord + Sonne 3

Dekoratives Logo vor der alten Shell-Zentrale:
City Nord + Sonne 4

Die City Nord wurde als städtebauliche Utopie im Geiste Le Corbusiers errichtet. Ein wichtiger Aspekt war dabei die Trennung von Auto- und Fußgängerebenen. Zum Glück baut man heute nicht mehr so.
City Nord + Sonne 7

Auf Flickr gibt es noch ein paar mehr Bilder von der City Nord.