t3n News Design

Zeitloses Design war gestern: Was der Designer der Zukunft können sollte [Kommentar]

Zeitloses Design war gestern: Was der Designer der Zukunft können sollte [Kommentar]

Technologie und Gestaltung verschmelzen immer mehr, die Anforderungen an Gestalter steigen. Wie bleibt man als Designer zukunftsfähig?

Zeitloses Design war gestern: Was der Designer der Zukunft können sollte [Kommentar]

Die Zukunft des Designers (Foto: Shutterstock)

Zeiten ändern sich – auch für Designer

Wer in den letzten Jahren nicht mit verschlossenen Augen und Ohren durchs Web gesurft ist, dem wird nicht entgangen sein, dass Webdesign nichts Statisches mehr ist, wie es das vor einigen Jahren noch war.

Vor zehn Jahren feilschte man noch darum, welche Auflösung als Standardauflösung bei Webdesign anzusehen sei – 800x600, 1024x768, 1600x1200? Heutzutage schlägt man sich mit Dingen wie Retina-Displays, Responsive Webdesign und dergleichen herum. Alles in allem: das Gegenteil von starr. Und spätestens seit der Vorstellung von Googles „Material Design“ ist wohl jedem klar, dass da auch noch eine ganz neue Aufgabe hinzugekommen ist: UI-Animation.

Googles „Forderung“ ist deutlich: Man soll sehen, WO und WIE Interaktion stattfindet – Elemente sollen „lebendig“ sein, ohne zu verspielt zu wirken. Doch diese Animationen erstellen sich nicht von allein. Wer soll sie also erstellen? Die Antwort liegt eigentlich auf der Hand: Es geht um das Erscheinungsbild einer Website oder App – also ist der Designer in der Pflicht, denn geben wir es zu: einem Programmierer überlässt man als Designer die Entscheidung darüber, wie etwas aussehen soll, eher ungern.

Das bedeutet, man kümmert sich im Designprozess nicht mehr nur um das Aussehen und das Verhalten des Aussehens bei unterschiedlichen Viewports, sondern auch um die Animationen und mit ihnen sogar (Achtung!) um eine neue Bedeutungs- und „Erzähl“-Ebene im . Jeder Designer kennt wohl aus Kundenterminen den Satz: „Wenn das dann umgesetzt ist, sieht es so-und-so aus,“ unterstützt von wildem Gefuchtel mit den Händen.

Und wie soll das erst ausarten, wenn man die UI-Animationen erklären muss. Denn – das weiß man ja aus dem Motiondesign – Bewegungen erzählen eine Geschichte. Und es ist an uns Designern, diese Geschichte zu gestalten, denn sie ist ein wesentlicher Bestandteil unseres Designs. Mikro-Animationen können sehr viel über ein UI-Element erzählen. Nehmen wir zum Beispiel das UI von iOS: Wenn man sich im „Icon-Editier-Modus“ befindet, wackeln alle Icons fröhlich vor sich hin und zeigen „Hey, wir sind lose, du kannst uns verschieben.“

Aussehen ist nicht alles

Die Arbeit der Designer endet nicht mehr beim Aussehen: Moderne kontextsensitive UI-Designs besitzen eine eigene Bedeutungs- und "Erzähl-"ebene, die es zu berücksichtigen gilt. (Foto: <a href="http://www.shutterstock.com/de/pic-248570401/stock-photo-adelaide-australia-september-close-up-view-of-the-interface-of-ios-on-an-iphone-ios.html?src=q2dmPwDiNz8S8O_ZdzcSvQ-1-77">Shutterstock</a>)
Die Arbeit der Designer endet nicht mehr beim Aussehen: Moderne kontextsensitive UI-Designs besitzen eine eigene Bedeutungs- und „Erzähl“-Ebene, die es zu berücksichtigen gilt. (Foto: Shutterstock)

Nun stehen wir also vor der Aufgabe, das von uns entworfene (UI-)Design zu animieren. Klar: Photoshop und AfterEffects klingen erst einmal nach naheliegenden Lösungen – man setzt sich hin, animiert und hat dann ... tja ... ein GIF oder einen Film. Damit daraus eine echte UI-Animation wird, muss das immer noch durch den „Programmierfilter“, wie ich es mal nennen möchte. Ich habe die Erfahrung gemacht, dass nur wenige Frontend-Developer in der Lage sind, Animationen, die sie sehen, eins zu eins in Code umzusetzen.

Nicht etwa, weil sie nicht in der Lage wären, das zu programmieren, sondern weil sie die Animation anders wahrnehmen: Timing, Dauer, Bewegungen, Beschleunigungen, Verzögerungen ... da kann es passieren, dass eine organische Animation auf einmal eher linear aussieht (das ist natürlich wirklich einfacher zu programmieren). Also bleibt der Schluss: selbst Hand anlegen.

Um als Designer auch noch in Zukunft wirklich gut arbeiten zu können, müssen wir in der Lage sein, UI-Animationen zu erstellen. Sei es via Adobe Edge Animate oder wirklich von Hand, mittels SVGs, CSS & jQuery. Wirft man einen Blick über den großen Teich, findet man in vielen erfolgreichen Startups genau solche Multitalente – wobei sich teilweise nicht sagen lässt, ob es ein programmierender Designer oder ein designender Programmierer ist.

Fazit

Als Designer muss es also unsere Aufgabe sein, Kompetenzen im Bereich Motiondesign (wer ganz genau hinhört, kann Flash leise kichern hören) und Programmierung aufzubauen und zwar sehr solide. Denn nur so können wir sicherstellen, dass das Design, welches wir liebevoll erstellt haben, auch animiert noch reinster Augenzucker ist.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
12 Antworten
  1. von mprove am 26.04.2015 (12:21 Uhr)

    Ja, stimmt so. Es kann aber nur für "Designer" eine Überraschung sein, die im Kern Visual Designer sind (Layout, Farbe, Typo) und darüber hinaus wenig mehr. Interaction Design beinhaltete schon immer auch die Gestaltung der Dynamik der Interface-Elemente von simplen Hover-Effekten zu großflächigen Verschiebe- oder Zooming-Übergängen zwischen Screens, Views, oder Windows.

    "Zeitloses Design war gestern" – In dieser Überschrift lese ich mindestens zwei Anspielungen, die ich entweder für platt oder falsch halte. Interaction- oder Screen-Design war niemals zeitlos. Sonst würde mann es Grafik nennen, oder Plakat. Sobald das Gerät einen Knopf besitzt, der den Zustand ändert, hat man Gestaltung IN DER ZEIT. Man denke nur mal an einen Toaster!
    Außerdem höre ich Christopher Alexander's "A Timeless Way of Building". In dem Sinne wäre 'zeitlos' ein Qualitätsmerkmal, das nicht durch Mode immer wieder neu bewertet wird. Ich hoffe, dass wir Interaktionsdesigner diesen Anspruch nicht aufgeben nur weil die UI-Technologie und -Mode gerade nach ganz viel Micro-Animationen ruft.
    Aber das war ja nur eine Überschrift, die nicht den ganzen Artikel ersetzen kann. Deshalb lasse ich auch "Augenzucker" in der Punchline mal unkommentiert.

    Antworten Teilen
    • von Jürn-Christian Hocke am 26.04.2015 (14:50 Uhr)

      Hallo Matthias,

      natürlich richtet sich der Artikel in erster Linie an "Screendesigner". Da du als Interaction Designer genau die Rolle einnimmst, von der in dem Artikel die Rede ist, hast du selbst verständlich einen ganz anderen Blick auf dieses Thema. Tatsache ist jedoch, dass es (zumindest in den meisten Agenturen) immer noch sehr wenige bis keine Interaction Designer gibt (wie heisst es so schön im Fachchinesisch: die awareness dafür ist oft gar nicht da).

      Somit fällt die Aufgabe, Interaktion zu gestalten dem Designer zu. Die verschiedenen Felder verschmelzen einfach immer mehr - klar muss es auch Spezialisten geben - aber in den meisten Fällen sind Generalisten gefragt, die flexibel und überblickend auf Projekten arbeiten können.

      Die Technologien im Netz (und auch die Leistungsfähigkeit von Hard- & Software) hat sich erst in jüngster Vergangenheit auf eine Evolutionsstufe begeben, in der es möglich ist auch im Web sich ernsthaft mit Interaction Design auseinander zu setzen (dass der Bedarf vorhanden war, zeigte in der Vergangenheit der teilweise massive Einsatz von Flash, um möglichst frei eine hochinteraktive und reaktive UI umsetzen zu können).

      Und natürlich ist Interaction Design weit mehr als nur ein wenig UI-Animationsspielerei .. und deswegen kann und sollte für diesen Bereich "normalen" Designer ein grundlegendes Verständnis vorhanden sein.

      Antworten Teilen
    • von Joachim Tillessen am 27.04.2015 (11:09 Uhr)

      Treffend kommentiert! "Zeitlos war gestern" ist in der Tat eine kühne These. Tatsächlich ist es im raschen Wandel von Technik und Nutzungsgewohnheiten noch bedeutungsvoller und wichtiger geworden, das Design Identitäten stiftet, die diesen Wandel überdauern.

      Antworten Teilen
  2. von te am 26.04.2015 (12:53 Uhr)

    Die Fage ist weniger ob und inwieweit sich Digitales Design verändern wird (man sehe ich derzeitge Cases an – dann liegt das auf der Hand), sondern eher wie man Kunden begreiflich machen kann, dass sich die Mehraufwände für Animationen tatsächlich lohnen.

    Antworten Teilen
    • von Jürn-Christian Hocke am 26.04.2015 (14:54 Uhr)

      Solche Fragen & Probleme stellen sich ja immer, wenn es darum geht "mal was neues" zu machen. Es wird Kunden geben, die UI-Animationen einfordern, und es wird welche geben, denen das vorerst zu teuer ist. Das kann aber schon in 1-2 Jahren ganz anders aussehen. So, wie man heute darüber lächelt, dass man vor 15 Jahren alle Layouts noch mit Tabellen und "spacer.gif" erstellt hat.

      UI-Animation sollte meiner Meinung nach einfach Bestandteil des Designs sein bzw werden. Damit stellt sich das Frage eigentlich schon nicht mehr, ob es sich hier um einen Mehraufwand handelt. Es gehört einfach dazu

      Antworten Teilen
  3. von Oimel am 26.04.2015 (15:19 Uhr)

    Für mich zeigt es mal wieder das der Beruf des "Webdesigners" komplexer wird und sich weiter entwickelt, wie das Web selbst.

    Ich persönlich mag die Verschmelzung von Programmierung und Design.
    Die Frage ist es ein "programmierender Designer oder ein designender Programmierer" finde ich spannend, da ich selbst erlebe wie unterschiedlich sich Designer orientieren.

    Ich erwarte von "Webdesignern" ein technisches Verständnis, was auch über HTML & CSS hinausgeht. Grade im responsive Webdesign hat sich die Frage nach der technischen Umsetzbarkeit oder Funktionalität eines Designs noch verstärkt.

    Antworten Teilen
  4. von E. am 26.04.2015 (17:17 Uhr)

    Ja :) Augenzucker. Ein schönes Wort. Ich erfreue mich auch immer sehr über elegant gut animierte Website. Allerdings ist dieses Glück eher Kennern vergönnt. Es hört oft sofort auf bei Leuten, die Websites nur bedingt verstehen. Sie beeindruckt vielleicht noch, wenn sie nicht überfordert. Aber Information? Zahlen sind animiert, Button, Bilder.... alles schön und gut. Besonders für Werbeseiten ein Hingucker. Aber handfeste Infos muss man dann bei Wikipedia, Foren oder bei Erfahrungsberichten holen... und hier das Design ist oft starr, (oft nicht einmal mehr zeitlos), doch sie funktionieren. Zeitloses Design kann auch länger überdauern, nicht nur ein Gestern sondern auch ein Morgen. Eine solche Seite wird nicht all zu schnell langweilig, denn ein all zu großer Effekt ermüdet das nächste Mal. Wenn jetzt noch Information dazu kommt, wäre für mich mehr »Honig« als eine »Hubba-Bubba-Material-Design-Website« :)

    Antworten Teilen
  5. von E. am 26.04.2015 (17:24 Uhr)

    Aber nicht falsch verstehen. Gerade für große Firmen sind solche Seiten gerade ein Muss. Wer große Deals abschließen will, muss genau das drauf haben. Hier braucht es nur bedingt »Transparenz«, es muss vor allem »Wow« beim Kunden und beim Kunden des Kunden machen. Es ist zwar nicht mehr als »Effekthascherei« aber solange die Kasse stimmt, wird dieses Modell über dem zeitlosen Design siegen.

    Antworten Teilen
  6. von E. am 26.04.2015 (17:28 Uhr)

    Es kommt somit auf den den Kunden an und was er transportieren will - und wie hoch sein Budget ist.

    Antworten Teilen
  7. von Jürn-Christian Hocke am 26.04.2015 (17:43 Uhr)

    Also das Design sollte natürlich immer zielgruppenadäquat sein. Dein Vergleich zu Wikipedia ist da ein schönes Beispiel ... in Wikipedia // Foren /// geht es u.a. darum, sich intensiv mit einem Thema auseinanderzusetzen. Im Design, wie es im Artikel erwähnt ist, eher darum, Zusammenhänge zu verdeutlichen. Ich spreche jetzt nicht von animimerten Infografiken, sondern - wie im Video von Google gezeigt: WIE funktioniert das UI?

    Ein ähnliches Paradigma war die Einführung von Icons. Man kann eine Funktion hinter eine grauen Schaltfläche verbergen - und sobald man 40 verschiedene Funktionen hat, kann man sie einfach nicht mehr (optisch) auseinanderhalten - und muss sie alle einzeln lesen (wer kennt nicht das "sich durch die Menüs forsten" in komplexeren Programmen). Da hilft es schon sehr, wenn man Icons als Repräsentanzen hat.

    Ähnlich verhält es sich derzeit mit den UIs ... wenn man "erkennt" wie sich etwas verhält .. zB wenn sich ein Screen "aufbaut" kann man schon sehr viel über scheinbar "versteckte" Funktionen erzählen ... zB wenn man einen "Galeriestreifen" integriert hat und beim Laden der Seite ein scheinbar vollflächiges Bild sich leicht bewegt und das nächste Bild zum Vorschein kommt .. "erkennt" der Nutzer (durch erlerntes Verhalten), dass man da offensichtlich scrollen kann .. durch Pfeile oder durch swipen.

    Und ein wirklich durchdachtes und gutes Interaction Design sollte von jedem verstanden werden. Kleinkinder sind da ein gutes Beispiel - wie gut die mit diversen Mobilgeräten umgehen können - diese Bedienparadigmen sind also leicht zu verstehen.

    Und es geht letztendlich gar nicht um Effekthascherei, sondern um eine "entschlackte", und einfache - intuitive Bedienung von Websites, Apps, ...

    Antworten Teilen
  8. von Heidi Klein am 28.04.2015 (14:10 Uhr)

    Ich würde gerne einen bestimmten Artikel nochmals auswählen - geht aber bei euch nicht wegen der dynamischen Programmierung - ich suche diesen Artikel, den ich jetzt gerne lesen würde.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Design
Ist responsives Design besser für SEO?
Ist responsives Design besser für SEO?

Es gibt Aussagen, die verselbstständigen sich so schnell, dass sie bald nicht mehr hinterfragt werden. „Responsives Design ist besser für SEO“ ist eine davon. Wir schauen genauer hin. » weiterlesen

Responsiveres Design mit Element Queries
Responsiveres Design mit Element Queries

Sicherlich lassen sich mit CSS Media Queries Designelemente an die Breite oder Höhe des Viewports, also des Browserfensters oder der Bildschirmdimensionen mobiler Geräte, anpassen. » weiterlesen

Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll
Canva: Ein Design-Tool, mit dem jeder zum Designer werden soll

Mit Canva soll das Gestalten verschiedenster Grafiken kein Problem mehr sein. In nur 23 Sekunden soll jeder zum Designer werden. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?