Dunkelmodus:
Animationen:
 
Was Apples WWDC 2020 über die zukünftigen Entwicklungen in Design und Interaktion aussagt

Was Apples WWDC 2020 über die zukünftigen Entwicklungen in Design und Interaktion aussagt

Diese Sonderausgabe beschäftigt sich mit den zukünftigen Entwicklungen, die in der gestrigen Apple keynote deutlich wurden. Etablierte Betriebssysteme setzen oftmals die Trends in Design; und was am gestrigen Tag beim WWDC 2020 deutlich wurde, beschäftigt uns wahrscheinlich noch länger. Große und bemerkenswerte Änderungen für iPhone, WatchOS, iPadOS und MacOS, welche die Zukunft des Webs, UI-Design und der Art und Weise wie wir miteinander interagieren maßgeblich beeinflussen werden.


Inhalt des WWDC 2020 kurz zusammengefasst

Bevor hier ins Detail gegangen wird, soll kurz zusammengefasst werden was bei der gestrigen Apple Keynote vorgestellt wurde. WWDC steht für „World Wide Developer Conference“, dort werden Design und Software bezogene Neuerungen des Apple Ökosystems vorgestellt. Die diesjährige WWDC war schon von der Aufmachung historisch, da sie ausschließlich als Livestream verfügbar war. Kein Publikum im Apple Park, ohne viel TamTam und Geklatsche dafür sehr kompakt und informativ. Wahrscheinlich ein Format welches die WWDC der nächsten Jahre maßgeblich beeinflussen wird!

In diesem Jahr wurde mit iOS, dem Betriebssystem des iPhone, begonnen. Interessante Änderungen hinsichtlich Widgets, App Organisation, verbesserte Maps, Siri und App Clips wurden vorgestellt. Danach wurde über über iPadOS, das Betriebssystem des iPad gesprochen, welches ebenso von den neuen Änderungen des iPhones profitiert. Als drittes wurde die Neuerungen der Apple Watch bzw. des Betriebssystems WatchOS vorgestellt. Als größte Änderung wurde hier das Sleep Tracking eingeführt, man ist also auf keine externe App mehr angewiesen.

All diese Neuerungen führten zum finale der des diesjährigen WWDC hin: MacOS Big Sur!

My Movie2 

Apples neues Betriebssystem für Macs. Einige Industrieverändernde Designchanges, auf die im folgenden eingegangen werden soll.

Designänderungen von MacOS Big Sur

Designänderungen von großen Plattformen und Betriebssystemen wie beispielsweise von Apple geben oftmals indirekt die Designtrends für die nächsten Jahre vor. Man kann sich das wie High Fashion in der Modeindustrie vorstellen; die abgefahrenen Kleidungsstücke werden natürlich nie direkt von der breiten Masse getragen; Mainstream Brands adaptieren jedoch die Schnitte und Farben dieser High Fashion Brands. So ähnlich passiert es im Webdesign auch. Unternehmen wie Apple haben alle eine eigene Designsprache und beeinflussen mit ihren Plattformen andere Designer maßgeblich.

Die Trends lassen sich auf fünf Überkategorien beschränken; aufmerksame Zuschauer des Livestream werden möglicherweise das ein oder andere aufgefallen sein.


Rund, runder am rundesten

rounded corners

Abbildung 1: Die neuen Widgets kommen auch nun auch auf MacOS. Ganz auffällig sind die abgerundeten Ecken der Elemente.


Abgerundete Ecken von Buttons, Schaltflächen und anderen Elementen sind vorherrschend im neuen User Interface Design von Big Sur. Dies erzeugt ein sehr softes User Interface. Wir können erwarten, dass sich der Trend zu abgerundeten und harmonischen Objekten bewegen wird und sich das Webdesign daran orientieren wird. 

Diese stark abgerundeten Elemente erzeugen auch einen sehr futuristischen Eindruck. Wenn man also nachhaltiges Design anstrebt, welches die nächsten Jahre noch lange Zeit als modern gilt, sollte man darauf achten, dass Elemente möglichst rund und harmonisch gestaltet werden. 

rounded corners5

Abbildung: 2: Auch das neue Kontrollcenter hat sehr weiche Kanten und besitzt fast keine Spitzen Elemente mehr.

rounded corners2

Abbildung 3: Das softe Interface macht sich besonders bei den Fenstern bemerkbar. Erzeugt einen sehr modernen und futuristischen Look!

Tiefe durch Schatten und Durchlässigkeit

Tiefe

Abbildung 4: Exemplarisches Bild von Ebenen. Geringe Deckkraft = Element ganz unten.


Tiefe wird mit verschiedenen Deckstärken von Farben erreicht. Eine hohe Durchlässigkeit indiziert, dass ein Element weit hinten liegt. Hohe Deckkraft zeigt dagegen, das ein Element weiter oben liegt. 

Apple verwendet für normale Interfaces verschiedene Stärken von weiß, für den Dunkelmodus verschiedene Stärken von Schwarz. Ein großer Vorteil davon ist, dass man eine sehr schlichte Farbaufteilung erreicht. Die Benutzeroberfläche wird nicht mit zu vielen verschiedenen Farben belastet, was einen sehr reifen und erwachsenen Eindruck macht.


Tiefe2  

Abbildung 5: Hier zu sehen der Dunkelmodus des Mailclients. Hier wird mit verschiedenen Durchlässigkeiten von Schwarz gearbeitet. Man beachte die Sidebar links im Bild: Dies ist die Farbe schwarz, wo jedoch die Opazität runtergesetzt wurde, sodass der Hintergrund durchscheint.

Revival des Skeumorphism

Die letzten 10 Jahre war das Flat Design vorherrschend. Wie der Name schon sagt wurden Elemente als flaches Objekt gestaltet. Es scheint nun jedoch so, dass die Dekade des Flat-Designs nun ein Ende hat. Icons von großen Corporates sind immer ein guter Indikator für Designtrends; die breite Masse adaptiert diese Icons. 

Bei den Webdesign Trends 2020 lässt sich ein Shift zum Skeumorphism erkennen.

Beim Skeumorphism möchte man Design-Elemente möglichst an natürlichen Objekten anlehnen, d.h. sie sollen so realistisch wie möglich aussehen. Meistens wird dabei durch Schatten eine gewisse Haptik erzeugt. Apples neues Message Icon in Abbildung 6 ganz rechts zeigt diese Entwicklung hervorragend. Es wird versucht die Elemente dreidimensional zu gestalten.

EbIzK67WAAEHCnG

Abbildung 6: Die neuen Message Icons von Apple zeigen: Elemente werden wieder haptischer dargestellt. Was im Flat-Design Trend noch undenkbar war kommt wieder zurück: Schatten werden wieder prominent eingesetzt.


Dynamische Farben

Farben mit hoher Sättigung, die rausstechen und in manchen Fällen aufdringlich wirken halten wieder Einzug in die Design Welt. Dies heißt nicht, dass die Anzahl der Farben im User Interface drastisch erhöht werden, sondern das eine dynamische Farbe mit mehreren unbunten Farben kombiniert werden. Abbildung 7 macht das schön deutlich: hier ein gesättigtes rot mit verschiedenen Deckkräften von Weiß kombiniert.

vibrant colors 

Abbildung 7: Dynamische Farben werden wieder beliebt. In diesem Bild sieht man alle bisher angesprochenen Entwicklungen sehr deutlich: Abgerundete Kanten und Buttons, unterschiedliche Deckkräfte erzeugen Hierarchie und Schatten erzeugen eine gewisse Haptik.


Weniger Details, Konzentration auf das wesentliche

Die Rückbesinnung auf Einfachheit ist ein weiterer Trend, den man an den kommenden Icon Änderungen ablesen kann. Apple war schon immer dafür bekannt, komplexe Software Icons zu gestalten. Dies war im Grunde genommen eine regelrechte Signatur für den Macintosh. Umso interessanter ist es, dass die Komplexität nun langsam abnimmt. 

Anhand den Apps GarageBand und Xcode lässt sich das sehr gut erkennen; die neuen Icons haben zwar noch die alte komplexe Charakteristik, werden jedoch trotzdem schlichter und minimalistischer.

Wir können daher ebenfalls erwarten, dass Benutzeroberflächen sowie Logos weit aus einfacher gestaltet werden.

less detail
less detail2  

Abbildung 8: Die Apps Garageband und Xcode von Apple hatten ziemlich komplexe Icons, dafür das sie normalerweise sehr klein dargestellt werden. Diese Komplexität machte jedoch nie etwas aus, da die Retina-Displays mittlerweile in allen Apple Geräten verbaut sind und somit die Auflösung von iPhone etc. absolut ausreichend ist.


Takeaway

Wenn du kurz vor einem Redesign deiner Website stehst oder womöglich selber Designer bist dem rate ich, auf diese Entwicklungen acht zu geben. Moderne Oberflächen möglichst nach diesen Richtlinien zu gestalten wird ein Garant für langlebiges Design sein. Ich rate ebenfalls jedem Interessierten selber die Apple Keynote anzuschauen. Das Video gibt es natürlich überall online!


Ich führe Redesigns und Neustrukturierungen von Websites durch. Frage unverbindlich an:

Mehr Artikel über UX, Usability und Webdesign!

Trage dich in meine persönliche E-Mail Liste ein:

Noch keine Kommentare vorhanden

Was denkst du?

Mehr Artikel über UX, Usability und Webdesign!

Trage dich in meine persönliche E-Mail Liste ein:

Ich erschaffe digitale Erlebnisse!

Kontaktiere mich!

Beliebteste Beiträge

Kontakt Portfolio
design philosophie. Leistungen. About Me. Blog Home. Portfolio. Kontakt.