Frontend Conference 2012 in Zürich - Tag 2

Memi Beltrame

Auch am zweiten Tag an der Frontendconf (Hashtag #fec12) berichtet der Pixelschieber in Wort und Bild…

UX: No Design without Research

Memi Beltrame, Experience Designer bei Liip

Herrliche Einführung mit der Gegenüberstellung von Designer und Customer, bildlich dargestellt und übertrieben wir erwartet. Aber im Endeffekt ist es doch genau so. Der Kunde erwartet vom Designer Zauberei, während dieser hofft, mit seinen Argumenten zu punkten.
Erkläre deinem Kunden deine Vorstellung, was für das Projekt wichtig ist, welche Massnahmen du als unerlässlich erachtest. Im Idealfall entscheidest du, welche Stakeholders, du an den Tischen holen willst.

Ein weiterer Punkt ist die Zielgruppenanalyse: anhand eines Diagramms mit den Achsen Size bzw. Relevance kannst du erkennen, für welche Benutzergruppen du schlussendlich gestaltest.

Das Value/Complexity-Diagramm hilft beim Aussortieren deiner Ideen, einfache Fragmente mit hohem Nutzwert werden zuerst umgesetz.

Nach wie vor steht aber der Content an oberster Stelle. Erkenne woher der Inhalt kommt, welchen Stellenwert er hat, ist er langlebig oder nur von kurzer Dauer. Und ganz ganz wichtig: get real data, no lorem ipsum … schon so oft wurde mit "echten" Daten ein ganzes Konzept über den Haufen geworfen, da plötzlich viel längere Titel eingesetzt wurden, als der Designer vorgesehen hatte.

Dabei unerlässlich: Post-its
http://de.slideshare.net/memibeltrame/no-design-without-research

Visualizations for Developers

Dio Synodinos, C4Media, zeigte uns in einem ersten Teil die Wichtigkeit von visualisierten Daten. Durch Formen, Grösse und Farben kann man das Verhältnis der Daten besser verstehen. Dabei lernte ich auch, dass Github das Facebook für Entwickler ist :)

Im zweiten Teil zeigte er anhand von Beispielen die diversen Technologien und Bibliotheken, wie heute Daten visualisiert werden können: CSS3, Javascript, SVG (designer-freundlich), Canvas (entwickler-freundlich), WebGL, Raphaël, processing.js, d3.js, fabric.js

Nach der Mittagspause gings mit sogenannten Lightning Talks weiter. Dabei konnte sich jeder, der wollte, selber für 5 Minuten nach vorne stellen und sein Projekt oder ein Tool vorstellen. So erklärte uns Mark Melnykowycz, dass das Device den Benutzer erkennen sollte und Benny Schudel zeigte verschiedene Beispiele von Live preview playgrounds http://slides.swissamigos.com/live-web-playgrounds

Olympisch ging es bei Martin Bommeli zu und her, er liess Photoshop im Bild-Export gegen Fireworks antreten und @webchaeschtli stellte sein eigenes CMS vor, das auf Rechts-Klick aufgebaut ist.

Reading between visual codes

Über Visualisierung, Wahrnehmung und die Interpretation von Bildern sprach Paloma Lopez Grüninger. Eine liebevolle Session, aber sehr kopflastig.

Fazit

Ein wirklich toll organisierter Event, mit topmotivierten Speakers und einer sehr jungen, aufmerksamen Audience. Und ich bin einfach alt. So jedenfalls kamen wir (Mazze und ich) uns vor, unter all diesen Nerds und Freaks - ist nicht despektierlich gemeint - die mit 2 Tastenkombinationen die Konsole bedienen, dazu twittern und der Session mental noch folgen können.

Auffällig auch, wieviele Sessions zuerst geschichtlich in die Vergangenheit schweiften und mit Beipielen die Parallelen zu heutigen Prinzipien zeigten.

Viel Neues habe ich nicht entdecken können, einige, der vorgestellten Tools hatte ich bereits in meinen Bookmarks gespeichert - sie endlich mal anwenden, steht eh schon lange auf meiner Pendenzenliste, dazu ist einfach Selbstdisziplin gefragt. Aber es tut einfach mal wieder gut, aus dem Design- oder Coding-Alltag zu entfliehen und mit seinesgleichen auf einer Wellenlänge zu surfen.

Im Designsegment sind mir die beiden Sessions von Philipp Schroeder und Memi Beltrame geblieben. Ganz einfache Prinzipien, deren Einhaltung das Endergebnis massiv verbessern wird.

Danke an das OK und die Speaker, toll gemacht!

Kommentare

Kommentar hinzufügen

  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <h5>
  • Zeilen und Absätze werden automatisch erzeugt.

Weitere Informationen über Formatierungsoptionen

Type the characters you see in this picture. (verify using audio)
Geben Sie die Zeichen ein, die in den oben gezeigten Bild zusehen sind. Wenn die Zeichen unlesbar sind, senden Sie das Formular ab und ein neues Bild wird generiert. Groß-und Kleinschreibung wird nicht beachtet.