Anzeige
Anzeige
Kommentar
Artikel merken

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?

Von Jürn-Christian Hocke
2 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

Vor zehn Jahren feilschte man noch darum, welche Auflösung als Standardauflösung bei Webdesign anzusehen sei – 800×600, 1024×768, 1600×1200? Heutzutage schlägt man sich mit Dingen wie Retina-Displays, 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.

Anzeige
Anzeige

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 Design. 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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
12 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

mprove

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
Jürn-Christian Hocke

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
Joachim Tillessen

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
te

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
Jürn-Christian Hocke

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
Oimel

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
E.

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
E.

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
E.

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

Antworten
Jürn-Christian Hocke

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
Heidi Klein

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
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige