Frontend 2011 – Das Wichtigste in Kürze

Vom 10. bis 12. Oktober fand in Oslo die Frontend 2011 Konferenz statt. Es handelt sich dabei um eine internationale Konferenz mit namhaften Speakern und einem guten Themenmix aus UX Design, Frontend Engineering und Konzeption, aber auch Marketing und Research kamen nicht zu kurz. Ich hatte die Gelegenheit an dieser teilzunehmen und möchte im folgenden Artikel einige interessante Talks und Eindrücke zusammenfassen. Ich habe mich bei der Auswahl der Talks bewusst für viele Themen ausserhalb meines Aufgabengebietes, der Entwicklung, entschieden. Aus meiner Sicht eine unglaublich wertvolle Horizonterweiterung, die ich allen nur empfehlen kann. Die Konferenz bestand aus zwei Vortragstagen und einem Tag Masterclasses, eine Art Workshops. Zu den Masterclasses wird es demnächst einen separaten Artikel geben.

4024-6233508241_fd85cd86d3_b-thumb-500x332-4023.jpg

Photo: Aleksander Dye

Embracing the ebb and flow von Simon Collison (@colly)

Simon Collison hat für einen äusserst inspirierenden Auftakt der Konferenz gesorgt. Sein Talk hat viele generelle Themen rund um Ideenfindung und aktuelle Entwicklungen im UX Design Umfeld behandelt. Wir sollen z.B. versuchen zu verstehen, wieso uns etwas im realen Leben und im Web innert weniger Sekunden gefällt oder eben nicht. Wir sollen uns nicht verleiten lassen, Designentscheidungen nur aufgrund von Tools (wie z.B. CSS3 Effekte) zu tätigen, sondern vorallem weil sie dem Nutzer einen Vorteil bringen. Das Browserfenster soll nicht als geschlossener Rahmen angesehen werden, sondern einfach als Ausschnitt eines Ganzen. Natürlich kam auch das Trending Topic Responsive Design nicht zu kurz. Simon würde es gerne sehen, wenn man in Zukunft vermehrt an einer Art Visueller Grammatik arbeiten würde, wie dies beim Begriff Responsive Design von Ethan Marcotte erreicht wurde. Damit z.B. auch Kunden ein besseres Verständnis für solche Themen entwickeln können.

Sketchnotes von Eva-Lotta Lamm, Designer (@evalottchen)

Eine nicht unbedingt neue aber spannende Art Notizen zu erstellen, hat die Designexpertin Eva-Lotta Lamm mit ihrem Talk über Sketchnotes vorgestellt. Es geht dabei darum, Notizen in Form von visuellen Elementen zu erstellen, weg von klassischen Textnotizen, hin zu einem universell verständlichen Mix aus Text und Bild. Nicht zeichnen zu können, gilt definitiv nicht als Ausrede, lässt sich nach diesem sehr kreativen Vortrag feststellen. Natürlich hab ich das gleich beim nächsten Talk der Standardistas ausprobiert. Neben mehr Spass beim Zuhören, hatte ich wirklich das Gefühl mehr aus meinen Notizen rausgeholt zu haben. Auf jeden Fall nachmachen! Hier das Resultat:

4026-IMG_0889-thumb-500x373-4025.jpg

Wie das ausschaut, wenn Eva-Lotta das macht, sieht man in ihrer Flickr Kollektion “Sketchnotes”.

Designing the Fluid Web von den Standardistas

Ein Ausflug in die Geschichte des Webs wurde uns von den Web Standardistas geboten, sehr unterhaltsam vorgetragen. Ich muss zugeben, es könnte sein, dass mich das Olma-Plakat auf einer der Folien leicht beeinflusst hat, aber ist ja schon mal was. Die beiden Herren aus Belfast haben über, wie könnte es anders sein, Responsive Design gesprochen, aber auch über die sogenannte geheime Formel guter Webseiten. Dazu gehören Proportionen (Grössen, Abstände, Verhältnisse), Hierarchie, Typographie, Komposition & Systeme (Durchgängige, wiedererkennbare Konzepte z.B. mit Farben, Titel/Inhalt, etc.). Viele Buchempfehlungen, eine Case Study mit der Bahn und noch ein bisschen mehr Responsive Design rundeten den Vortrag ab.

Crafting the User Experience von Sarah Parmenter, Designer

Einen überaschend guten Beitrag hat aus meiner Sicht Sarah Parmenter geliefert. Sie arbeitet als UX Designerin im iOS Umfeld. Ihr Talk behandelte vorallem Beispiele von kleinen aber effektiven Aktionen oder Veränderungen, welche die Kunden beeinflussen. Wie dies Coca-Cola mit dem Happiness Machine Project gemacht hat. Oder wie 7-Up mit der simplen Erhöhung des Gelbanteils (+15%) im Dosendesign eine massive Umsatzsteigerung erreichte, weil die Konsumenten danach meinten, das Getränk sei nun erfrischender. Neben vielen weitere Beispielen waren z.B. auch Farben ein Thema, die zum Problem werden können, weil sie von Kultur zu Kultur unterschiedliche Bedeutungen haben können (Colours in Cultures) oder Dark Patterns. Viele eindrückliche und hilfreiche Beispiele von Amazon und Co. haben mir zum Schluss einen guten Überblick über einfache und effektive Methoden zur (fairen) Kundenbeeinflussung geboten.

Lettering von Jessica Hische, Designer

Jessica hat mit ihrem Vortrag über Lettering eindrücklich bewiesen, dass Leidenschaft ein sehr wichtiger Bestandteil der Arbeit als Designer oder auch als Entwickler ist. Sie hat viel über das Design von einzelnen Buchstaben aber auch von Typodesign gesprochen. Unter anderem hat sie erläutert, wieso ein Schrift so teuer scheint, in den meisten Fällen aber auch fair ist. Am Beispiel der populären Schrift Gotham, dessen Produktion eine geschätzte Million Dollar gekostet hat.

Ecosystems von Albert Shum, Designer, Microsoft

In der Präsentation von Albert Shum ging es genau um das Thema, mit dem Microsoft wohl im Moment am meisten Mühe bekundet, was den Kampf gegen die Konkurrenz, allen voran Apple, angeht. Das Ecosystem. In seinem Talk hat Albert aufgezeigt, was alles wichtig ist, wenn man ein neues Ecosystem um sein Produkt herum schaffen möchte. Einige der erwähnten Grundsätze habe ich nachfolgend aufgelistet (frei übersetzt).

  • Gib den Leuten etwas zum mitmachen
  • Versuch nicht alles selbst zu machen, setze nur Samen
  • Lasse es offen, aber setze Schranken
  • Mache es einfach, darauf aufzubauen
  • Starte eine Konversation
  • Das Design ist erst fertig, wenn die Community es übernimmt

Mal schauen ob es Microsoft gelingt, mit Metro ein erfolgreiches Ecosystem aufzubauen.

Everyone acts differently von Joseph O’Sullivan

Joseph arbeitet als “Problemlöser” bei Intuit, einem Softwareunternehmen aus den USA, welche den Markt der Steuersoftware für Privatpersonen nahezu komplett beherrscht. Er hat in den letzten Jahren mithilfe von sehr kreativen Methoden die Unternehmenskultur in eine wesentlich kundenorientiertere gewandelt. In dem er folgende Grunsätze angewandt hat.

  1. Prinzipien über Prozesse
  2. Unternehmen sind Netzwerke, nicht Hierarchien
  3. Schwimme mit dem Strom
  4. Sagen / Tun Verhältnis
  5. Gib es aus der Hand (z.b. jeder Mitarbeiter kann designen)

Es sei wichtig, jedes (auch unternehmerische) Problem als Designproblem zu behandeln. In der Praxis heisst das, viel Workshops mit Storyboarding, Sketching, Testing, Hands-On der Führungsmitarbeiter und die Einbeziehung der Kreativität aller Mitarbeiter. Aus meiner Sicht eine äusserst fruchtbare, wenn auch in einer Organisation dieser Grösse, etwas riskante Strategie. Mehr dazu gibt’s später auch in meinem Artikel über die Masterclasses an der Frontend 2011.

4033-6233968218_0ec8835df6_b-thumb-500x332-4032.jpg

Photo: Aleksander Dye

Persuasive Web Design von Andy Budd

Aus meiner Sicht einer der besten Talks der Konferenz. Ein sehr psychologielastiger, aber äusserst interessanter Vortrag, den uns Andy Budd von ClearLeft geboten hat. Andy hat begonnen, intensiv das Verhalten der Menschen in bestimmten Situation, sowie deren Beeinflussung zu beobachten. Sei dies in Las Vegas im Casino vor dem Wheel of Fortune, im Supermarkt, in der klassichen Werbung oder eben auch im Web. Wir werden überall beeinflusst. Auch Urinstinkte wie “Was schön ist, ist gut”, haben enormen Einfluss, gerade auch im Web. Oder nehmen wir als Beispiel den Facebook Button. Wir versuchen uns immer an den anderen zu orientieren um soziale Normen herauszufinden. Steht also eine hohe Zahl an “Likes” neben dem Button, sind wir eher bereit auch den “Like” Button zu klicken, als wenn die Zahl tief oder gar 0 ist. Oder ein weiteres Beispiel aus der Facebook Welt sind Pinnwandeinträge. Man hat Auswertungen gemacht, wie oft ein Pinnwandeintrag auf der Wand eines Freundes eine Antwort erhält. 99%. Einfach weil wir nicht als die bösen, nicht antwortenden Freunde dastehen wollen. Wenn wir das verstehen, können wir uns dies im Web zunutze machen. Auch Themen wie Gamification oder das ein begrenztes Angebot die Nachfrage ankurbeln kann (siehe Apple), kamen zur Sprache.

Object-oriented JavaScript von Sara Chipps

Im Talk von Sara Chipps ging es vorallem um Basics der Verwendung von Objektorientierung in JavaScript ohne Bibliotheken oder dergleichen. Nebst vielen Codebeispielen hat sie auch einige Beispiele im Bezug auf Wartbarkeit behandelt. Für Einsteiger, vorallem ohne Background aus der objektorientierten Programmierung ist diese Präsentation äusserst hilfreich. Sara hat auch kurz Projekte wie die JS Template Engine Tempo angesprochen. Ein wichtiges Fazit aus dem Talk war auch, dass sauberer, wartbarer Frontend Code immer wichtiger wird. Ich bin überzeugt, dass Frameworks wie Terrific in Zukunft einen wesentlichen Beitrag zur Erreichung dieses Ziels beitragen.

CSS3 Secrets von Lea Verou (@leaverou)

Dieser Dame macht man nichts vor was CSS angeht. Ein Vortrag der bereits in ähnlicher Form an der Frontend Conference in Zürich gehalten wurde war aber auf jeden Fall ein Besuch wert. Lea stellte zehn CSS Techniken vor, über die man so vorher wohl noch nie gestolpert ist. Über diagonale Streifen mit reinem CSS (Gradients), sauberem Styling von Checkboxen, Animationsmagie mit Bezier Kurven und vielen weiteren Tricks hat sie einen Grossteils des Publikums sicherlich verblüfft. Natürlich sind wesentliche Teile der vorgestellten Funktionen nicht in älteren Browserversionen verfügbar. Aber gerade was aktuelle Versionen von FF, Webkit, Opera und eben auch IE angeht ist der Support ansprechend. Sie hat aufgezeigt was schon jetzt und speziell in Zukunft mit CSS3 möglich ist und das ist fantastisch. Während der Konferenz hat Lea übrigens ihr neuestes Projekt PrefixFree online gestellt. Auf jeden Fall ein Blick wert.

4031-6234529484_125dcc3cc9_b-thumb-500x333-4030.jpg

Photo: Ravn Heggerud

Module Driven Development von Dustin Diaz (@ded)

Sicher einer der prominentesten Speaker dieses Jahres war Dustin Diaz. Er hat für Yahoo, Google und Twitter als Entwickler gearbeitet, war mitverantwortlich für das neue Twitter und gilt als JavaScript Experte. Seit einigen Monaten ist er nun nicht mehr bei Twitter, sondern wieder bei einem Startup namens Obvious tätig. Er hat in seinem Talk Ender vorgestellt. Ender ist kurzgesagt ein Paketmanager für JavaScript Module. Basierend auf npm (Paketmanager für node.js) können Module installiert werden (z.B. Selector Engine, Query Engine, Animations, etc.) und zwar limitiert auf jene, die man für das jeweilige Projekt benötigt. Dies sorgt dafür, dass das resultierende JavaScript zum Teil signifikant kleiner wird. Gedacht ist es als leichtgewichtige Alternative zu Libraries wie JQuery. Ein ambitioniertes aber durchaus interessantes Projekt.

Das war’s

Dies war ein kurzer Einblick in die Inhalte der diesjährigen Frontend 2011 Konferenz. Falls sich jemand näher für einen der Talks interessiert, bin ich über Twitter (@rogerdudler) oder Skype (rogerdudler) zu erreichen.

4029-IMG_0850-thumb-500x373-4028.jpg

4 Gedanken zu “Frontend 2011 – Das Wichtigste in Kürze

  1. That was fast! I started writing my article about the conference on the train back to Bergen, but not quite ready to post yet. I was also planning to do a seperate one on the masterclasses. Too many cool pictures of alle the sketchnotes! :D

  2. Danke Roger für den umfassenden Beitrag.
    Klingt nach einer sehr “breiten” Konferenz die einen wirklich auch über den alltäglichen Horizont schauen lässt.
    Konnte am UX Europe Camp 2010 einen Sketchnotes Workshop bei Eva-Lotta besuchen.
    Das Thema Responsive Design sollten wir aufgreifen und UX & Frontend übergreifend anschauen.

  3. @Elisabeth: Would be nice to get the link to your wrap-up when it’s finished :)

    @Daniel: Das Thema sollten wir auf jeden Fall übergreifend diskutieren und es sollte von Beginn weg in einem Projekt berücksichtigt und angedacht werden. Freue mich auf einen Austausch. Btw: Die Übungen mit den Faltblättern von Eva-Lottas Workshop waren an der Afterparty ausgestellt. Eindrücklich und vorallem witzig :)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>