Red, Lithium und Stack an der Frontend Conference Zurich 2013

Frontend Conference Zürich 2013: inspirierte neue Designansätze

09.09.13

An der Frontend Conference Zürich 2013 wurde über innovative Ansätze und nützliche Tipps zum Thema Frontend-Design gesprochen. Ein Überblick der überzeugendsten Vorträge aus den design-orientierten Beiträgen.

Inspiriertes Frontend-Design

Vom 29. bis 30. August fand zum dritten Mal die Frontend Conference Zurich statt, an der verschiedenste international geladene Sprecher über Technologie und Design im Frontend-Bereich sprachen. Die Vorträge waren in einen Design- und einen Technologie-Stream eingeteilt.

Die beeindruckendsten Beiträge der Design-Front Konferenz waren John Peebles‘ Vortrag darüber, wie bessere Produkte realisiert werden können, Simon Raess‘ Erläuterung seines sogenannten „Design Driven Developments“, Denise R. Jacobs inspirierte Rede zum Thema Kreativität, Hans Christian Reinls Aufklärung darüber, wie Styleguides zu besserer Zusammenarbeit zwischen Designern und Entwicklern führen, Vitaly Friedmans zahlreiche Tipps für responsives Webdesign sowie Dan Rubins Vortrag zur Sprache des Webdesigns.

John Peebles - How to Build the Perfect Product Your Users Want But Can’t Describe

John Peebles sprach darüber, wie wir bessere Produkte erschaffen können. Anders als oft gedacht, sollte die Entwicklung eines Produktes nicht durch den Benutzer vorangetrieben werden. Stattdessen sollte die Aufgabe, die das Produkt erfüllt, im Mittelpunkt stehen.: Ein Produkt zu entwickeln heisst nichts anderes, als ein Problem zu lösen. John Peebles betonte, dass eine durchdachte und tiefschürfende Informationsbeschaffung dabei unabdingbar sind. Seine Kernmechanismen zur Produktentwicklung können in die drei aufeinanderfolgenden Schritte „Wissen“, „Definieren“ und „Lösen“ eingeteilt werden.

Um zu „wissen“ bedarf es tiefgreifender Informationen zum Produkt und seiner Anwendung. Entwickeln Sie detaillierte Personas für das Produkt, erkunden Sie die Aufgabe des Produktes, inklusive was vorher und nachher geschieht, genaustens, betrachten Sie den Anwendungsprozess des Produktes genaustes und ergründen Sie Anreiz und Motivation des Benutzers.

Als nächstes folgt nicht die Lösung, sondern erst die Suche und Definition des Problems. John nannte verschiedene Techniken, die dabei angewandt werden können. Beispielsweise die „5 Warum?“, wobei die vorherige Antwort immer wieder erneut in Frage gestellt wird, bis man den Grund des Problems erreicht hat. Ein weiterer Tipp ist, nichts als gegeben zu nehmen und sich so selbst dazu zu zwingen, neue Konzepte und Innovationen zu entdecken. Zudem ist es wichtig, nicht auf die Benutzer zu hören, sondern sie zu beobachten, sodass wir ihnen nicht das geben, was sie wollen, sondern das, was sie brauchen.

Schlussendlich müssen wir eine Lösung für unser Problem finden. Gehen Sie mit Ihren Personas durch das Produkt, visualisieren Sie das Produkt in seinem Kontext und Ablauf und probieren Sie, ob die Lösung für Sie selbst funktioniert. Sammeln Sie Feedback und setzen Sie die neuen Einsichten so um, dass Sie Ihre Lösung verbessern.

Ein Problem zu lösen ist ein komplexer Prozess, wobei es wichtig ist, stets konstant zu bleiben. Wenn Sie Neues hinzufügen wollen, so müssen Sie bei den Umsetzung stets alle Aspekte des Produkts betrachten. Analogien sind hilfreich, um neue Denkrichtungen zu entwickeln und Alternativen zu entdecken. Oftmals werden Sie jedoch eine gute Idee zu Gunsten einer besseren aufgeben müssen - Innovation ist oftmals nicht evolutionär, sondern revolutionär und bedingt Zerstörung. Und wenn Sie einmal stecken bleiben: Sammeln Sie jede noch so alberne Idee - manchmal wird dadurch ein interessanter neuer Ansatz entdeckt!

Simon Raess – Design Driven Development

Die vielen Anforderungen an ein Produkt, die durch Marketing, Business, gesetzliche Bedingungen und weitere Bereich entstehen, können die ursprüngliche Vision des Produktes überschatten. Techniken wie Usability Engineering, Agile Development oder User-Centered Design versuchen, dies zu verhindern. Simon weihte uns in seinen neuen Ansatz ein: Design Driven Development, eine Kombination der existierenden Methoden, die zum Ziel hat, bessere Resultate in kürzerer Zeit zu erzielen.

Auf den ersten Blick wirkt Design Driven Development wie das veraltete Wasserfall-Modell: Beginnend mit Konzeptdesign folgen Schritt für Schritt Interface Design, Visual Design, Webentwicklung und Optimierung-Phase. Der entscheidende Unterschied ist nun, dass Design Driven Development bei jedem Schritt alle Teammitglieder miteinbezieht. Zudem wird der Benutzer als Zentrum des gesamten Vorgangs definiert und beim Übergang vom einem Schritt zum nächsten immer erst noch getestet wird.

Damit Design Driven Development funktioniert, benötigt man T-förmige Angestellte: Personen, die nebst ihrem eigenen Fachbereich auch ein Grundwissen der Disziplinen ihrer Mitarbeiter besitzen. Nur dann kann die vorgesehene Zusammenarbeit und Kommunikation stattfinden.

Auch der Kunde wird in den gesamten Prozess integriert. Während des gesamten Prozesses stehen alle Beteiligten in direktem Kontakt, ohne zwischengeschaltete Manager oder Bereichsleiter. Indem ein Echtzeit-Feedback-Kreislauf etabliert wird und Fortschritte im Prozess stets allen präsentiert werden, kann jeder sehen und verstehen, was geschieht, sodass die besten Resultate erzielt werden können.

Denise R. Jacobs - The Creativity (R)Evolution

Durch Kreativität gelangen wir zu neuen, besseren Lösungen - zu dem, was Denise „Betterness“ nennt. Mit kreativer Revolution meint Sie, dass wir uns von unserem momentanen Standpunkt entfernen und auf ein neues Ziel zusteuern.

Diese Revolution in Gang zu setzen ist nicht schwer: Beginnen Sie damit, eine Ihrer eigenen Gewohnheiten zu ändern, nach und nach zu verbessern und so etwas zu verankern, das Sie bereits beherrschen. Laut Denise ist das Individuum das Tor zur kreativen Revolution, denn um bessere Resultate zu erlangen und unseren Mitmenschen zu helfen, müssen wir selbst motiviert sein und unseren Job lieben. Alles, was wir gerne tun, Dinge und Prozesse, die uns Spass machen, helfen uns, kreativ zu sein.

In einem nächsten Schritt geht es darum, Kreativität als etwas Soziales zu realisieren und im Team zu betrachten. Je mehr kreative Menschen zusammenarbeiten, desto mehr kreative Ideen entstehen. Dazu brauchen Sie Teams mit Leuten, die einander vertrauen, gerne zusammenarbeiten und einander anspornen. Wichtig ist, dass Sie dieses Ökosystem pflegen, und durch Positivität die Kreativität fördern. Seien Sie die kreative Revolution, die Sie in der Welt sehen wollen!

Hans Christian Reinl - Be Friends With Your Designers and Style Guides

Styleguides sind nicht nur eine nützliche Referenz, sie sind zudem ein Hilfsmittel, um die Zusammenarbeit zwischen Designern und Entwicklern zu verbessern. Styleguides beschreiben und festigen die Identität eines Unternehmens. Sie schaffen Konsistenz und bereiten so den Weg für effiziente, konfliktfreie Zusammenarbeit, indem gewisse Meinungsverschiedenheiten automatisch verhindert werden.

Typischerweise beinhaltet ein Styleguide Informationen über Farben, Ikonographie, Formen, Bilder, etc. Parallel hierzu ist es sinnvoll, auch Code Konventionen in einem Styleguide festzuhalten, wodurch die Lesbarkeit des Codes verbessert und seine Unterhaltung vereinfacht werden kann.

Weiter ist es nützlich, ein Projekt in verschiedene Komponenten wie Module und Widgets einzuteilen. Diese einzelnen Komponenten, bestehend aus Markup, Styles und Funktionalität, ermöglichen es, dass wir uns komplett auf eine einzelne Aufgabe fokussieren können. Besonders bei grösseren Websites ist solch ein Ansatz empfehlenswert, da das Produktionsteam entsprechend in Untergruppen aufgeteilt werden kann, die sich um einzelne Komponenten kümmern.

Libraries wie Bootstrap können bei der Arbeit mit Komponenten eingesetzt werden. Allerdings ist es wichtig, nur die Komponenten zu verwenden, die Sie auch wirklich brauchen und nicht einfach eine Library, die alles mögliche beinhaltet, zu gebrauchen. Hans Christian Reinl wies zudem auf Bower und Yeoman hin und spornte uns an, nicht nur das eigene Git-Repository zu verwenden.

Vitaly Friedman – Responsive Web Design: Clever Tips and Techniques

Das Web ist eine unvorhersehbare, unberechenbare Umgebung. In seinem Vortrag bot Vitaly Friedman eine umfangreiche Übersicht über praktische Tipps und Tricks für responsives Webdesign, die uns dabei helfen können, mit den fortwährenden Veränderungen des Webs zurechtzukommen und unser Design zukunftsfreundlich zu gestalten.

Zukunftsfreundliches Design zwingt uns, weiter zu denken als zuvor. Über responsives Design hinausdenken gelangen wir zu Dingen wie responsive Benutzeroberflächen, die sich der Erfahrung des Benutzers anpassen. Websites, bei denen Assets wie beispielsweise der Login-Button mit dem Fortschritt des Benutzers auf der Website in ihrer Grösse angepasst werden.

Eine weitere neue Herausforderung ist der Umgang mit unterschiedlichen Bildauflösungen entsprechend der Vielzahl an Geräten. Mit der rasanten Verbreitung von High-Density Displays werden wir gezwungen, über Lösungen nachzudenken, durch die wir unabhängig werden von Bildauflösungen. Unsere heutigen Optionen sind SVG und Icon Fonts, doch auch hier gibt es noch einiges zu verbessern. SVG und Icon Stacks zeigen die Idee, selektiv zu bestimmen, welche Teile eines SVGs welche Farbe hat, anstatt wie bisher zwei SVGs kombinieren zu müssen. Ein weiterer Trick sind kompressierte Bilder. Um auf High-Density Bildschirmen überzeugende Bilder zu bieten, braucht es nicht zwingend Bilder mit hoher Auflösung. Stattdessen können wir ein Bild mit normaler Auflösung verwenden, dieses in seiner Grösse verdoppeln und anschliessend die JPEG-Kompression auf ein Maximum stellen. Somit ist das Bild um einiges kleiner in der Dateigrösse, sieht aber dank der Skalierung auf den kleineren Bildschirm trotzdem noch wie ein Bild mit hoher Auflösung aus.

Zudem zeigte Vitaly einige Tricks, wie die Ladezeit einer Website verbessert werden kann. Beim „Conditional Loading“ wird alles auf die drei Bereiche Kerninhalt (z.B. HTML/ CSS), Verbesserung (z.B. JavaScript) und Reste (z.B. Google Analytics) aufgeteilt, die voneinander losgekoppelt behandelt werden. So können wir durch stufenweises Laden den Kerninhalt bereits zeigen, während die JavaScript „Verbesserungen“ noch am Laden sind. Der zweite Trick, „Lazy Loading“, optimiert die lange Ladezeit von JavaScript. Diese lässt sich verkürzen, indem wir den Browser zwar alles an JavaScript laden lassen, es aber nur evaluiert wird, wenn der Benutzer ein bestimmtes Feature gebraucht. So ist ein Grossteil des JavaScripts zwar geladen, bleibt aber bei Nichtgebrauch auskommentiert. Denn schliesslich kann Performance auch ein Design-Aspekt sein!

Dan Rubin – The New Language of Web Design

Dan Rubins Vortrag drehte sich um die Sprache, die wir tagtäglich im Webdesign verwenden. Worte haben Macht - Sie können beschreiben, versprechen, befehlen, etwas ausdrücken oder sogar den Zustand der Welt ändern. Die Web-Industrie, die schneller wächst als viele anderen Bereiche, schafft ständig neue Ausdrücke und Wörter. Dan überlegte, wie wir dabei ein Vokabular schaffen können, das auch in den kommenden Jahren bestehen bleibt.

Neue Begriffe können auf verschiedene Wege kreiert werden. Oft leihen wir Wörter aus anderen Disziplinen aus. Dies kann jedoch für Verwirrung sorgen, denn hinter solchen Begriffen steht immer bereits ein Konzept: Im Print Design beschreibt der Ausdruck „Seite“ statische Dimensionen. Im Webdesign hingegen versteht man darunter einen dynamischen Bereich. Begriffe aus weiter entfernten Disziplinen führen zu weniger Verwirrung, der Begriff „Responsive Architektur“ beispielsweise führt kaum zu Verwirrung zwischen Web und Architektur. Weitere Quellen für neue Wörter sind Kombinationen zweier existierender Begriffe, die vereint ein neues Konzept beschreiben, oder die Verwendung alter Begriffe, wie zum Beispiel der Begriff „Scrollen“, der vom englischen Substantiv „scroll“, auf Deutsch „Schriftrolle“, abstammt.

Die Welt der Webentwickler und -designer kann durch einen einzigen Blogpost, der ein neues Wort einführt, verändert werden. Aus diesem Grund ist es wichtig, dass wir über die Wörter, die wir verwenden, nachdenken und unser Vokabular definieren. Dabei sind alle, die in der Web-Industrie tätig sind, dafür verantwortlich, dieses Vokabular zu formen - Wir alle definieren die Begriffe des Webs von morgen!