Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » UX Design » Design auf kleinster Fläche: Atomisierung ist die Zukunft

Design auf kleinster Fläche: Atomisierung ist die Zukunft

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 6 Minuten
  • von Dieter Petereit
  • 30. April 2018
Bookmarke mich
Share on pocket

Werbeagentur Hannover | 360 Grad Konzept

Dunkel Design | Webdesign Grafikdesign Logodesign

wolpersweb.de Webdesign & SEO

PRIMA LINE

BIZ Digital Marketing

Webtronix Media GmbH

Modernes Design muss überall, nicht nur auf dem Desktop, funktionieren. Damit das klappt, muss es so kleinteilig wie möglich sein. Nennen wir es „Atomisierung“. Wie du dein Design sinnvoll atomisierst, zeige ich dir im folgenden Beitrag.

Früher: Design ist raumgreifend

Was waren das doch paradiesische Zeiten. Designer gestalteten für ein rechteckiges Seitenformat und stritten allenfalls darüber, ob sie nun für 800 x 600 oder 1.024 x 768 Pixel optimieren sollten. Fähigkeiten, die die Browser nicht hatten, wurden per Plugin (Flash, Java und Dutzende weitere) nachgerüstet. So war das Web schon vor zwanzig Jahren dynamisch, bewegt und unterhaltsam.

Schon vor rund zehn Jahren waren Hero-Bereiche in. Mit Flash war eigentlich alles in Hero-Optik. (Screenshot: Smashing Magazine)

Dann kam die erste Welle digitaler Handgeräte. Man versuchte, WAP als Technologie für den mobilen Internetzugriff zu etablieren. Wer etwas auf sich hielt, der hatte eine eigene WAP-Seite im Angebot. So richtig viele waren es nicht. Und mit visuellem Anspruch hatten die WAP-Seiten absolut überhaupt nichts zu tun. Es war mehr eine Art BTX; genauso hässlich wie der alte Bildschirmtext, aber viel kleiner. Ich habe nie eine solche Seite gebaut oder betrieben und ich hatte auch keine Kunden, die das etwa von mir verlangt hätten.

Dann kam irgendwann das iPhone, kurze Zeit später Android und alles änderte sich. Das schöne Design-Rechteck wurde gesprengt. Plötzlich waren die Screens höher als breit und die denkbaren Auflösungen vermehrfachten sich schneller, als wir unsere Designs darauf anpassen konnten. Mit dem responsiven Design glaubten wir, eine Antwort gefunden zu haben auf das Auflösungschaos unserer digitalen Endgeräte. Da traten die Smartwatches auf den Plan und wieder mussten wir neu denken.

Aktuell verbreiten sich Sprachassistenten in Hardware rasant. Amazons Echo Dot kostet mittlerweile unter 40 Euro und selbst der größere Echo trägt nur noch ein zweistelliges Preissschild. Das Konkurrenzprodukt aus Mountain View wird in der kleinen Variante Home Mini für 59 und in der großen Variante Google Home für 149 Euro vertrieben. Preislich spricht vieles für Amazon, funktional unterscheiden sich die Konkurrenten kaum.

Amazons Echo Dot ist der günstigste Sprachassistent am Markt. (Foto: Amazon)

In Autos finden sich ebenfalls mehr und mehr intelligente Lösungen. Hinzu kommen Smart TVs, intelligente Sound-Systeme wie das Sonos sowie haufenweise Geräte, die dem Internet of Things ansonsten zugeordnet werden können.

Du musst dein digitales Angebot omniverfügbar machen

Wenn du ein digitales Produkt verkaufst oder über das Digitale Produkte verkaufst oder Dienste anbietest, dann wirst du ein Interesse daran haben, auf möglichst vielen dieser Endgeräte mit deinem Angebot präsent zu sein. Selbst wenn du das anders siehst – deine Kunden werden erwarten, dass sie dein Angebot auf all ihren Geräten gleichermaßen bequem nutzen können. Auch wenn du diesem Wunsch eventuell nicht entsprechen willst, kannst du sicher sein, dass es einer deiner Wettbewerber auf jeden Fall tun wird. Insofern hast du nicht wirklich eine Wahl.

Du stehst also vor dem Problem, dein digitales Angebot über eine breite Vielfalt an Endgeräten unterschiedlichster Spezifikation, mit Screen und ohne, nahtlos vorhalten zu müssen. Der Designansatz, der das ermöglicht, wird Atomisation, also Atomisierung, genannt.

Wenn du einen konkreten Designansatz suchst, der dich auf dem Weg unterstützen kann, dann lies meinen Artikel zu Atomic Design. Der Ansatz ist zwar nicht zu diesem Zweck ersonnen worden, passt aber gut in den Trend.

Zerleg deinen Dienst in atomare Teilchen

Das Konzept der Atomisierung geht davon aus, dass ein Design in kleinste Einheiten zerlegt werden muss, um es über eine breite Zahl möglicher Endpunkte konsistent ausliefern zu können. Atomisierung kann dabei sogar bedeuten, dass der Service als solcher sich ganz in seine Bestandteile auflöst und in wechselndem Kontext, eventuell sogar als Teil eines Drittangebots wieder auftaucht.

In diesem Zusammenhang wirst du desöfteren das Schlagwort „Headless” hören. Damit bezeichnen wir einen Dienst, der funktioniert, ohne dass er zwingend über eine eigene Benutzeroberfläche verfügen muss (aber kann). Wenn dich das Thema interessiert, dann lies meinen Beitrag zu Headless Browsern.

Benachrichtigungssysteme

Den letztgenannten Fall, also die Integration von Inhalten in Drittangebote, markieren etwa die immer populärer werdenden Notifikationssysteme auf Smartphones, ebenso wie unter Windows oder macOS. Hier werden kleine Informationshäppchen oder Steuerungselemente typischerweise im kartenbasierten Design außerhalb des eigentlichen Markenkontext angezeigt. Ohne dass du eine Wetter-App oder den Terminkalender starten musst, zeigt dir dein Benachrichtigungs-Stream an, ob es regnet und wann du zum Zahnarzt musst. Die App-Logik ist zwar installiert, aber nicht für die Anzeige erforderlich.

Nutzer konsumieren heutzutage wo und wann sie wollen. (Foto: Depositphotos)

Inzwischen entwickeln sich die Benachrichtigungssysteme weiter und bieten für verschiedene Apps bereits jetzt die Möglichkeit, die nächste logische Folgeinteraktion, beispielsweise das Beantworten eines Tweets, direkt aus der Benachrichtigung heraus zu erledigen. Die eigentliche App muss dafür nicht gestartet werden.

Kein oder nur ein minimales Userinterface

Noch interessanter wird es, wenn du deinen Dienst auch in Geräten vorhalten willst, die über kein oder nur ein minimales visuelles Interface verfügen. Das Paradebeispiel für diese Form der Design-Atomisierung ist Spotify. Spotify läuft nahtlos über den Desktop, Smartphones, Tablets, Smart TVs, die Playstation, in Autos von Ford, BMW, Volvo und anderen und sogar auf Soundsystemen von Sonos, Pioneer, Sony und den Dosenboxen Google Home und Amazon Echo.

Viel Platz für eine visuelle UI bleibt da nicht. (Foto: Depositphotos)

Um diese Omnipräsenz zu erreichen, musste Spotify seinen Dienst designtechnisch in atomare Teilchen zerlegen. Als monolithische Desktop-Anwendung lässt sich der Dienst nicht auf die Apple Watch bringen, geschweige denn aufs Sonos.

Probleme, die du vorher nicht hattest

Die Atomisierung eines Dienstes ist für selbstbewusste Markeninhaber kein Zuckerschlecken, denn sie erfordert stets, Kontrolle abzugeben. Du kannst deine Marke nicht mehr in der gleichen Weise kontrollieren, wie du es könntest, wenn du die Umgebung vollständig beeinflussen könntest. Gerade ältere Marken werden daran zu knacken haben. Ich kann mich noch gut an Corporate-Design-Richtlinien früherer Kunden erinnern. Die hatten teils Telefonbuchstärke.

Gleichzeitig ist es natürlich erforderlich, Kontur zu bewahren und als Marke erkennbar zu bleiben. Sonst wirst du von der technischen Plattform, auf der du präsent sein willst, quasi absorbiert und findest im Kundenbewusstsein nicht mehr eigenständig statt. So lässt sich keine Kundenbindung schaffen.

Spotify löste die Aufgabe, indem es sich auf das Logo und das Farbschema konzentrierte und keine weiteren Branding-Elemente schuf. So ist der Dienst jetzt über alle Devices lediglich am grünen Logo eindeutig zu erkennen.

Atomisierung im Design: Kaum Platz auf dem Display, die Watch zeigt dennoch 3 Apps zur Auswahl.
Auf der Gear Fit ist nun wirklich kaum Platz. Spotify bleibt trotzdem erkennbar. (Foto: Spotify)

Wichtig im Zuge der Atomisierung ist es zudem, auf Konsistenz zu achten. Soweit das jeweilige Gerät es zulässt, sollten wesentliche Bedienelemente stets an der gleichen Stelle zu finden und/oder stets auf die gleiche Weise zu bedienen sein. Hier hat es Spotify mit seiner Kernfunktionalität leicht. Immerhin ist diese direkt den gängigen Player-Controls entlehnt.

Unterschiedliche Endgeräte haben unterschiedliche Fähigkeiten

Zur Atomisierung als Designprinzip gehört es ebenso, die Fähigkeiten der jeweiligen Endgeräte gezielt zu nutzen. Google Play Music beispielsweise macht Vorschläge, die ortsbasiert sind. Spotify auf dem Smartphone kann auf die Laufgeschwindigkeit reagieren. In Google Notizen können Nutzer sich ortsbasiert zum Beispiel daran erinnern lassen, neuen Rasierschaum zu kaufen, wenn sie gerade in der Nähe der Drogerie sind. Fitness-Apps nutzen GPS oder Pulsmesser-Features und synchronisieren diese über den Dienst insgesamt. Für den Anwender muss sich die Bedienung des Dienstes homogen anfühlen. Egal, mit welchem Gerät er ihn nutzt.

Fazit: Atomisierung vergrößert deine Reichweite

Wer seine Services fachgerecht filetiert und bedarfsgerecht neu zusammensetzt, hat es verhältnismäßig leicht, geräteübergreifend präsent zu sein. Du musst allerdings bereit sein, ein Stück weit Kontrolle abzugeben.

Quellen zum Weiterlesen

  • Atomic Design: So gestaltest du deine Website modular| Dieter Petereit
  • Design per Storytelling: Wer schreibt, der bleibt | Dieter Petereit

(Bildnachweis Artikelbild: Depositphotos)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Agenturpartner

4eck Media GmbH & Co. KG

Waren (Müritz)

pictibe – Werbeagentur & Marketingagentur

Köln

VABELHAVT

Innsbruck

netkin digital Marketing

Köln

Carmen Hurst | Webdesign

Bad Homburg

Alle Agenturpartner

Jobs

Webdesigner – Vollzeit

Remote

Webtexter für SEO Agentur

Salzburg (Österreich)

Junior Webdesigner/ Mediengestalter

Innsbruck

Cloud Engineer Container & Kubernetes

Karlsruhe

SEO Manager – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Eine Antwort zu „Design auf kleinster Fläche: Atomisierung ist die Zukunft“
— was ist Deine Meinung?

  1. Jens sagt:
    1. Mai 2018 um 23:27 Uhr

    in der Design-Timeline fehlt mir als krönender Abschluß „und dann kam die Zeit, wo ich wegen ‚mobile first‘ und ‚hero images‘ auf einem 27“-Display zwei Seiten nach unten scrollen musste, um zum ersten Satz eines Artikels zu gelangen“ …

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.