Webdesign Trends: Was ist wirklich wichtig?

Facebook
XING
Twitter

Welche Webdesign Trends sind potentiell zeitlos? Wir haben für Sie, von Dieter Petereit aufgegriffene, wichtige Webdesign Trends zusammengestellt, auf die Sie vielleicht bei der Erstellung Ihrer Website oder dem anstehenden Relaunch zurückgreifen können. Wir empfehlen begleitend zur Lektüre dringend ein Heißgetränk, denn der Beitrag bedarf etwas Sitzfleisch.

Der neueste Webdesign-Trend: Neumorphische Designs

Neumorphismus (auch bekannt als Neomorphismus) ist ein relativ neuer Designtrend und ein Begriff, der in letzter Zeit viel Aufsehen erregt hat. Die Ästhetik ist durch eine minimale und realistisch aussehende Benutzeroberfläche gekennzeichnet, die den Skeuomorphismus neu interpretiert — daher der Name.

User Interface Design - Design
Ein examplarisches Design-Konzept von Neumorphismus. Kreiert von Dawid Tomczyk. Screenshot: Dr. Web.

Der neumorphische Effekt ist eine Kombination aus Flat-Design und skeuomorphem Design (später dazu mehr). Neumorphische Komponenten haben unten rechts einen dunklen Schatten und oben links einen hellen Schatten. Die Kombination aus beidem erzeugt einen Effekt, der die Komponenten täuschend echt aussehen lässt.

Marke - Produktdesign
Wenn CSS-Buttons täuschend echt aussehen. Link zu Codepen. Screenshot: Dr. Web. Kreiert von halvves.com
Logo - Marke
Screenshot: Dr. Web.

Neumorphische Karten

Eine neumorphische Karte ist eine erhabene Form aus genau demselben Material wie der Hintergrund.

Bildquelle: uxdesign.cc

Im Gegensatz zur Material Card „schwebt“ die neumorphische Karte nicht über dem Untergrund, sondern steht ab.

Bildquelle: uxdesign.cc

Der Schatten verleiht der der Material Card sowohl Tiefe als auch die Form selbst — denn die Material Cards sind oft randlos.

Der neumorphische Effekt ist relativ einfach zu erzielen. Sie nehmen zwei Schatten, einer davon Weiß, der andere dunkel. Damit der weiße Schatten überhaupt erkennbar ist, darf der Hintergrund nicht vollständig weiß sein. Die beiden Schatten sollten auf jeden Fall erkennbar bleiben, sonst funktioniert der neumorphische Effekt nicht.

Wie man den neumorphischen Effekt in CSS umsetzt. Bildquelle: uxdesign.cc

Ein neumorphes UI-Kit

Ein ganzes Set an neumorphen UI-Elementen hat Abdelrahman Ismail erschaffen und auf Github bereitgestellt:

Bildschirmfoto - Produktdesign

Dieses Projekt ist noch in Arbeit und auch noch lange nicht abgeschlossen. Der Autor plant, weitere Komponenten aufzunehmen und in Zukunft auch ein Dark-Theme zu unterstützen.

Smartphone - Design
Ganz klar: der App-Design und Webdesign-Trend geht immer mehr hin zum Neumorphismus. Hier ein Beispiel von Filip Legierski. Screenshot: Dr. Web.
Funktionstelefon - User Interface Design
Auch bei diesem Design-Konzept sind die neumorphischen Elemente sehr gut zu erkennen. Designed von Sèrgi Mi. Screenshot: Dr. Web.

Webdesign Trends: Minimal Webdesign macht glücklich

Wenn wir uns mit dem Minimal Webdesign Trend befassen, so ist das bloß eine Facette eines größeren Themas. Denn das Konzept kommt nicht aus dem Design und ist auch nicht darauf limitiert. In diesem Wissen schauen wir genauer hin.

Minimalistisches Design ist in. Sämtliche Flat-Design-Ansätze, Material Design und wie sie nicht alle heißen, bewegen sich in Richtung Minimalismus. Allerdings geht es dabei im Wesentlichen um den Minimalismus in der Darstellung. Icons werden optisch vereinfacht, Farben werden stark reduziert, Seiten erhalten viel Whitespace.

So wirken moderne Websites ausgeglichener, ruhiger und überschaubarer. Das ist gut. Aber eigentlich spiegelt es nur einen Teilaspekt dessen wider, was sein könnte.

Minimalismus als Lebensphilosophie

Minimalismus oder Simplizität oder Essenzialismus – drei Worte für den gleichen Ansatz – beschreiben die bewusste Reduktion des Vorhandenen auf das absolut notwendige Minimum. Wobei sich Minimum hier als das erstrebenswerte Maß definiert, nicht etwa als gerade noch akzeptable Untergrenze.

Wieviel brauchen Sie wirklich? (Bildquelle: Pixabay)

Bezogen auf das Leben an sich, beschreibt Minimalismus den weitgehenden Verzicht auf überflüssigen Konsum, das Wertschätzen der verbleibenden Besitztümer und das achtsame Wahrnehmen seines Umfelds.

Die Wohnung eines Essenzialisten glänzt quasi durch viel Whitespace. Die wenigen Möbel sind sorgfältig ausgesucht. Eine vollgestopfte Bücherwand gibt es ebenso wenig wie andere Sammlungen von Gegenständen, die nur Platz wegnehmen. Im Keller lagern nicht die Klamotten der letzten dreißig Jahre und es gibt auch keine Bestände an Dingen, die eventuell nochmal irgendwann gebraucht werden könnten.

Stellen Sie sich vor, was Sie allein an Zeit gewinnen könnten, wenn Sie nicht mehr aufräumen müssten, weil gar nicht genug da ist, um eine Unordnung zu erzeugen.

Minimalismus spiegelt sich im Lebensumfeld wider. (Bildquelle: Pixabay)

Menschen, die den Minimalismus für sich entdeckt haben, fühlen sich häufig glücklicher, weil sie ihr Leben überschauen können, sich nicht getrieben fühlen und achtsam im Umgang mit sich selbst sind. Von dieser Sorte Menschen gibt es leider viel zu wenige, da dieser Lebensentwurf völlig konträr zu dem läuft, was uns die Werbeindustrie mit brachialer Gewalt täglich um die Ohren haut. Dabei haben Sie sicherlich selbst schon bemerkt, dass Konsum allein nicht glücklich macht.

Mit Sicherheit können wir eines sagen: Minimalismus funktioniert, wenn Sie ihn konsequent umsetzen.

Minimalismus als Designphilosophie

Im Produktdesign der letzten Jahrzehnte hat sich ebenfalls gezeigt, dass minimalistische Ansätze sehr erfolgreich sind. Der berühmte Produktdesigner Dieter Rams versuchte seine Produkte stets so minimalistisch zu gestalten, dass sie praktisch keine Benutzeroberfläche mehr hatten, die hätte erklärt werden müssen. Apple orientiert sich bis zum heutigen Tage an den Ansätzen des Herrn Rams und ist damit ebenfalls sehr erfolgreich.

An einem minimalistisch ausgestatteten Arbeitsplatz arbeitet es sich konzentrierter. (Bildquelle: Pixabay)

Es ist nur logisch: Je einfacher das Design eines Produkts ist, desto einfacher ist dessen Bedienung, desto geringer ist die Schwelle für den potenziellen Bediener, sich mit dem Produkt auseinanderzusetzen.

Niemand liest gerne Handbücher. Deshalb ist es nicht nur wichtig, ein gutes Handbuch zu schreiben, sondern vor allem im Vorfeld darauf zu achten, dass es so wenige erklärungsbedürftige Elemente wie möglich gibt. Entsprechend dünn wird dann das Handbuch ausfallen.

Minimalismus im Webdesign: Wenn das Web ganz klein wird

Sie haben sicherlich inzwischen erkannt, worauf ich hinaus will. Minimalismus existiert auf allen Ebenen. Stets ist es möglich, etwas weiter zu vereinfachen. Dabei müssen Sie natürlich den bekannten Spruch Albert Einsteins im Kopf behalten, der da lautet:

Mach die Dinge so einfach wie möglich, aber nicht einfacher.

Im Webdesign sind Sie sehr trendy unterwegs, wenn Sie sich an einen der modernen Designansätze halten und somit ein Minimal Webdesign abliefern. Allerdings ist diese eher oberflächliche Betrachtung des Layouts, der reinen Optik, nicht ausreichend, um von einem wahren minimalistischen Webdesign Trend sprechen zu können. Dazu bedarf es weiterer Elemente.

Zieldefinition: Was soll die Website erreichen?

Gerade im Webdesign wird häufig, gerne auch kundeninduziert, der Fehler gemacht, Webseiten mit jeglichem vorhandenen Content zu füllen. Dem liegt der Gedanke zugrunde, dass man ja schließlich im Netz eine unbegrenzte Menge an Fläche hat. Warum sollte man also nicht auch noch den Geschäftsbericht von 2009 zeigen? Frisst doch kein Brot.

Unter dem Gedanken des Minimalismus sollten Sie indes genau umgekehrt vorgehen und so tun, als wäre der Platz tatsächlich knapp. Hilfreich ist die Überlegung, was das Ziel der geplanten Website ist. Soll sie verkaufen? Wenn ja, was? Soll sie informieren? Wenn ja, worüber? Soll sie Kunden ins Ladengeschäft locken? Je nach Projekt stellen sich weitere Fragen.

Bei der Beantwortung ist es wichtig, minimalistisch vorzugehen, also die Dinge klar auf den Punkt zu bringen. Soll die Website ein Produkt verkaufen, gilt es, die Gestaltung vollständig darauf auszurichten. Kommen mehrere Produkte in Betracht, kann das Paretoprinzip helfen.

Minimales Design mit Hilfe des Paretoprinzips

Das Paretoprinzip beschreibt ein statistisches Phänomen, das darin besteht, dass eine kleine Anzahl von hohen Werten einer Wertemenge mehr zu deren Gesamtwert beiträgt als die hohe Anzahl der kleinen Werte derselben Menge.

Den Minimal Webdesign Trend gibt es auch im E-Commerce. (Screenshot: Dr. Web)

Landläufig ist der Effekt bekannt durch die Aussage, dass man mit 20 Prozent des Einsatzes 80 Prozent des Ergebnisses erreichen kann, während man für die verbleibenden 20 Ergebnisprozent 80 Prozent des Einsatzes bringen müsste. Die Erkenntnis, die sich daraus ergibt, ist an sich eindeutig. Wenn man einmal identifiziert hat, welche konkreten Tätigkeiten es sind, die einem 80 Prozent des Ergebnisses bringen, kann man sich voll darauf fokussieren. Auf die restlichen 20 Prozent Ergebnis, auf die wir 80 Prozent unseres Aufwands verwenden müssten, verzichten wir einfach.

Im Falle der E-Commerce-Website würden wir also mit unserem Kunden versuchen, zu ermitteln, welche 20 Prozent der Produktpalette 80 Prozent des Umsatzes generieren. Auf diese 20 Prozent würden wir dann die Website optimieren.

Zielerreichung ist das alleinige Kriterium für die Aufnahme von Inhalten

Generell sollten Inhalte nur dann auf eine Website gelangen, wenn sie dem zuvor definierten Ziel dienen und zu dessen Erreichung beitragen können. Schließlich ist zu beachten, dass wir für bestmögliche Ergebnisse die höchstmögliche Aufmerksamkeit des Website-Besuchers benötigen. Wenn wir ihn nun durch irrelevante, weil nicht zielführende Inhalte ablenken, tun wir niemandem einen Gefallen.

Übertragen Sie diese Überlegung einfach auf alle Elemente der Website, und Sie werden zu einer schlanken, schnellen, effizienten Präsenz gelangen, die unter allen denkbaren Aspekten erfolgversprechend ist.

Minimal Webdesign: Das machen Sie alles nicht

Sie brauchen nicht viele Bilder. Bilder verzögern den Seitenaufbau. Die Bilder optimieren Sie mit TinyPNG oder JPEGmini, damit die Seite schneller lädt.

Sie brauchen auch nicht viele Farben. Weniger ist mehr. Achten bei den Farben darauf, dass die Elemente, die Sie zum Auslöser einer Aktion (CTA) erklären wollen, eine dominante Farbe haben, die keines der anderen Elemente hat. Zugleich sollte keines der anderen Elemente farblich ähnlich dominant sein.

Ein einziges Bild als Aufmacher. Radikal, oder? (Screenshot: Dr. Web)

Wenn Sie Dateien auf der Website anbieten müssen, dann stellen Sie sicher, dass Sie wirklich nur relevante, aktuelle und wirklich erforderliche online lassen. Der weiter oben genannten Geschäftsbericht erfüllt die letztgenannten Kriterien sicherlich nicht.

Wenn möglich, sollten Sie keine Dropdown-Menüs verwenden. Das Stichwort lautet „Fluid Navigation“, eine Alternative zum normalen Hamburger-Menü, bei denen die Hauptnavigationspunkte in eine zweite Zeile umbrechen, statt sich hinter einem Menü zu verstecken.

Bei der Gelegenheit entscheiden Sie sich richtigerweise dafür, keine Sidebar anzulegen.

Am Ende dieses radikal minimalen Prozesses erhalten Sie eine ziemlich kleine Website, sowohl vom Gesamtumfang als auch vom Dateigewicht her. Das ist gut unter SEO-Aspekten, aber ebenso unter Konversions-Gesichtspunkten. Stellen Sie sich vor, Sie hätten ein Labyrinth oder eine gerade Linie zur Kasse zu bewältigen. Auf welchem Weg würden Sie nicht nur leichter zum Ziel finden, sondern auch lieber gehen?

Eine rein minimalistische Optik bedeutet jedoch nicht automatisch minimalistisches Webdesign. Ich kenne Designs, die zwar sehr reduziert rüberkommen, aber denen dann auch wesentliche Elemente fehlen. Es geht nicht darum, maximal wenig zu präsentieren, sondern darum, nicht mehr als absolut erforderlich ist, zu zeigen. Das absolut Erforderliche muss schon da sein, sonst ist es kein Minimal Webdesign, sondern einfach eine schlechte Website.

Umgekehrt finden Sie auch einige „Inspirationen”, die auf der Startseite minimalistisch aussehen, Sie dann aber auf den Folgeseiten mit all ihrer Monstranz erschlagen.

Awwwards Februar 2020: Kaum ein Design, das nicht minimalistisch ist. (Screenshot: Dr. Web)

Wie, keine Riesen-Website?

Am Ende mag es Ihnen irgendwie seltsam vorkommen, dass Sie keinen Boliden erschaffen haben. Das ist verständlich und sollte Sie nicht beunruhigen. Immerhin stehen Sie seit Jahrzehnten unter dem Bombardement der Werbeindustrie, die ihnen tagtäglich entgegen schreit, dass Sie nichts sind, wenn Sie nicht X, Y oder Z und noch viel mehr haben. Inzwischen sollen Sie ja sogar im Halbjahres-Rhythmus immer teurer werdende Smartphones kaufen, die sich immer weniger von ihren Vorgängern unterscheiden. Wenn Sie es schaffen, dieses Rufen zu ignorieren, merken Sie sogar, dass Sie selber ruhiger werden. Besitz macht nicht glücklich, sondern unruhig, weil Sie nie genug haben.

Aus den gleichen Gründen ist es gut möglich, dass auch ihr Kunde zunächst irritiert ist. Ihm geht es schließlich genauso. Erklären Sie ihm das Konzept des Minimalismus. Er wird es Ihnen danken.


Webdesign Trend „Kartenbasiertes Webdesign“: So machen Sie es richtig!

Kartenbasiertes Webdesign, auch als Card Based Design bekannt, ist nicht erst durch Googles Material Design zu Beliebtheit gelangt, sondern bietet schon länger handfeste, objektive Vorteile abseits von Konzernstrategien. Wir zeigen Ihnen, wie Sie den populären Webdesign-Trend erfolgreich gestalterisch umsetzt.

Die Anforderungen an modernes Design legen die Karte als Gestaltungsebene nahe

Mittlerweile ist kartenbasiertes Design so omnipräsent, dass es eher auffällt, wenn eine Seite kein Karten-Layout besitzt als umgekehrt. Treiber dieses Webdesign Trends waren anfangs die sozialen Netzwerke Twitter und Facebook. In den letzten Jahren beschleunigte dann vor allem Google mit seinem Material Design die weitere Verbreitung. Auch Microsoft zeigte sich mit den Metro-, respektive Modern-Ansätzen dem Karten-Design nicht abgeneigt. Auch wenn Windows 10 inzwischen die Dominanz der Kachel-Optik deutlich zurückgenommen hat, bleibt sie doch die Gestaltungsphilosophie hinter dem Start-Button.

Mit der Verbreitung der mobilen Webnutzung, der Verwendung grid-basierender Frameworks und der Verfügbarkeit neuer Standardelemente, wie Flexbox und Grid, wird die Karte als Design-Element immer zwingender.

Die fünf Vorteile von Karten im Webdesign

Die mobile Revolution hat uns eine Beschleunigung in der Webentwicklung beschert, die wir vor zehn Jahren noch für völlig unmöglich gehalten hätten. Die Limitationen, aber auch die neuen Möglichkeiten mobiler Devices sorgten dafür, dass die Standardisierung der Webtechnologien Fahrt aufnahm wie nie zuvor.

Ebenso sorgte die rasante Verbreitung mobiler Devices dafür, dass das konventionelle Design unter Druck geriet. Immer mehr Seitenbetreiber legen Wert darauf, dass Smartphone- und Tablet-Nutzer eine ähnliche Nutzererfahrung erleben wie jene, die mit konventionellen Browsern auf dem Desktop die Website besuchen.

Die folgenden Vorteile sollten Sie im Blick haben.

Karten funktionieren gut in responsiven Designs

Aus der Nachfrage nach mobiltauglichen Websites entwickelten sich verschiedene Ansätze. Der erfolgreichste ist sicherlich das responsive Design, gelegentlich noch ergänzt um die Verschärfung Mobile First. Beim responsiven Design geht es bekanntlich darum, dass sich ein Design automatisch den Begrenzungen und Möglichkeiten des Besucherbrowsers anpasst. Das Ziel besteht darin, eine Website auf den unterschiedlichen Geräten möglichst vollumfänglich, aber mindestens soweit es auf mobilen Geräten sinnvoll ist, nutzbar zu machen.

Um das zu erreichen, ist es unabdingbar, dass die Inhalte einer Seite sich dynamisch -- mindestens in der Breite -- an den Viewport anpassen können. Dieses Erfordernis zu erfüllen, ist weniger leicht, als es sich zunächst anfühlen mag, denn es kommt ganz darauf an, mit welcher Zielauflösung Sie unterwegs sind.

Responsive Design im groben Raster. (Foto: Depositphotos)

Sicherlich ist ein fluides Design, das die volle Breite des Bildschirms ausnutzt, auf einem mobilen Gerät in der Regel ansehnlich. Ruft man dasselbe Design aber auf einem 4K-Display auf, sieht die Sache ganz anders aus.

Früher war es üblich, feste Breiten für Websites zu definieren. Jahrelang lag dieser Konsens bei 800 x 600 Pixeln. Entweder fixierten wir den gleichbleibend breiten Bereich in der Mitte des Bildschirms und erzeugten so unterschiedlich breite Ränder rechts und links, oder wir fixierten den Bereich am linken Rand und ließen nach rechts Whitespace oder einen Hintergrundverlauf, später dann auch Hintergrundbilder, zu. Im nächsten Schritt erweiterten wir die Fix-Bereiche auf 1.024 x 768 Pixel. So waren wir im Grunde auf der sicheren Seite.

Zu Beginn der mobilen Revolution – als die Stückzahlen mobiler Geräte höher wurden, sprich als das iPhone kam – brach diese Norm in sich zusammen. Denn das iPhone hatte nur 340 Pixel Breite. Schnell setzten sich besonders angepasste, zusätzliche Websites durch, die zumeist nur eine eingeschränkte Funktionalität im Vergleich zur Vollversion hatten, aber immerhin mobil funktionierten.

Heute gibt es mobile Geräte mit einer breiten Vielfalt verschiedenster Auflösungen. Mit einer speziell angepassten Version ist Ihnen meist nicht geholfen, zumal sowohl Seitenbetreiber wie auch Besucher heutzutage erwarten, mobil keine Kompromisse machen zu müssen.

Unter dem Design-Gesichtspunkt drängt sich damit die Verwendung von kartenbasierten Layout-Blöcken förmlich auf. Diese können Sie auf einem schmalen Bildschirm perfekt nutzen, und sie funktionieren auch auf einem 4K-Boliden. Während auf dem Smartphone die einzelnen Karten als fortlaufender Stream angezeigt werden, können Sie sie die Karten bei mehreren Tausend Pixeln Auflösung wie eine Patience auf dem Bildschirm anordnen; sie aneinander reihen, stapeln, untereinander legen -- ganz, wie es Ihnen beliebt.

Karten sind abgeschlossene Inhaltseinheiten

Dabei gehen Sie am besten so vor, dass eine Karte immer einen Inhaltsbestandteil komplett abdeckt. In einem Magazin wäre das etwa ein Artikel mit Teaserfoto, Anreißer und Call-to-Action, der im Normalfall „Weiterlesen” lauten dürfte. Durchgesetzt hat sich ebenso, dass die sonstigen Interaktionsmöglichkeiten, also in erster Linie die sozialen Medien, von der Karte aus erreicht werden können.

Da eine Karte quasi ein eigener Canvas ist, können Sie gestalterisch aus dem Vollen schöpfen. Alles, was Sie im Viewport ausdrücken können, gelingt Ihnen mit der entsprechenden Kreativität auch auf der Miniaturvariante, der Karte. In manchen Designs würden Sie Wert darauf legen, dass die Karten eine konsistente Optik haben, in anderen würden Sie sie stark unterschiedlich gestalten wollen.

Visuell aufwändige Frameworks, wie etwa Designmodos Slides, sind letztlich auch kartenbasiert, nur dass die Karten hier die Breite des Bildschirms voll abdecken und eher zu einer vertikalen Ordnung beitragen.

Slides von Designmodo, letztlich auch eine Variante des kartenbasierten Designs. (Screenshot: D. Petereit)

Karten lassen sich ausgezeichnet mit anderen teilen

Soziale Medien leben davon, Inhalte zu teilen. Schauen Sie sich an, in welchem Format dieses Teilen zumeist stattfindet. Es sind Karten mit Inhaltshappen, die Sie an ihre Follower weiterleiten. Durch die Reduktion auf das Wesentliche besteht eine erhöhte Chance, dass das Interaktionslevel hoch gehalten werden kann. Je mehr Auswahl ein Besucher hat, desto schwieriger wird es, ihn zu jener Aktion zu bringen, die der eigentlichen Intention des Betreibers entspricht. Und bei sozialen Medien geht es nun mal in erster Linie um das Teilen.

Durch die Unterteilung der Inhalte in Karten ergibt sich eine natürliche Abgrenzung der Inhalte voneinander. Das kommt den wichtigen Aspekten, der Übersichtlichkeit und leichten Bedienbarkeit, zugute. Wenn Sie Karten weiter gruppieren, können Sie es so machen wie Trello, wo Sie Karten in Listen sortieren oder wie der Guardian, der Karten mit einzelnen Beiträgen in große Karten mit dem übergreifenden Thema verpackt.

The Guardian sortiert Karten in Themenbereiche. (Screenshot: D. Petereit)

Karten sind schnell zu erfassen

Wie wir alle wissen, liest heutzutage kaum ein Besucher konzentriert auf einer Website. Stattdessen wird die Seite nach relevanten Inhalten mit den Augen gescannt und bei Misserfolg schneller verlassen als sie aufgesucht wurde. Karten sind dabei wesentlich leichter scannbar als lange Inhaltspassagen ohne klare Abgrenzung.

Sicherlich wäre es schöner, wenn ihre Besucher sich mehr Zeit zum Stöbern nähmen. Da Sie das aber nicht erreichen können, sollten Sie sie im Scanvorgang unterstützen und auf ihre Inhalte lenken. Eine Optimierung der Scanbarkeit gehört auf ihre Aufgabenliste.

Mit Karten kann jeder etwas anfangen

Abgesehen von technischen Aspekten haben Karten etwas, das in diesen schnelllebigen Zeiten nicht selbstverständlich ist. Sie bieten nämlich so etwas wie einen Anker, eine bekannte Umgebung und damit ein Stück Sicherheit.

Diese Karten kennt jeder. (Foto: Depositphotos)

Karten haben eine jahrhundertealte Tradition als Informationsmedium. Als Karteikarten sind sie teils noch heute im Einsatz. In den Achtzigern waren Karten die Datenbanken jener Zeit. Wir alle kennen Spielkarten und senden aus dem Urlaub Postkarten nach Hause -- trotz Whatsapp und Co. Und trotz Digitalisierung verlieren Visitenkarten nicht an Beliebtheit.

Das Bild der Karte dürfte damit eines der vertrautesten überhaupt sein. Jeder kann etwas damit anfangen, niemand benötigt eine Unterweisung. Damit eignet sich die Karte vorzüglich zum Einsatz im Webdesign.

Best Practice: Sechs Tipps für kartenbasiertes Webdesign

Wenn Sie sich nun für den Einsatz des kartenbasierten Designs entschlossen haben, sollten Sie noch die folgenden sechs Best Practices beachten. Denn Karten können Sie natürlich auch falsch einsetzen. Das wollen wir in jedem Falle vermeiden.

Bauen Sie keine weiteren Unterteilungen ein

Die Karte ist ihre kleinste Einheit. Unterteilen Sie diese nicht in weitere Einheiten, etwa indem Sie mit horizontalen oder vertikalen Linien arbeiten oder viel Whitespace innerhalb der einzelnen Karte einsetzen.

Erstellen Sie eine Karte stets so kompakt wie möglich. Sie sollte schnell vom Nutzer erfasst werden. Wenn er erst herausfinden muss, wie Sie das Kartendesign womöglich gedacht haben, ist es kein Gutes.

Eine vorbildliche Karte mit allen wichtigen Elementen. (Bildquelle: Google Material Design Guidelines)

Setzen Sie auf visuelle Hierarchie

Statt mit weiteren Ordnungsmerkmalen, wie etwa Linien, ihr Kartendesign zu strukturieren, setzen Sie lieber auf visuelle Hierarchie. Das erreichen Sie durch typografisch sinnvolle Schriftgrößen für Header und Subheader. Strukturiere ihre Karten stets gleich, etwa Bild, Header, Subheader, Teaser, Call to Action.

Verwenden Sie pro Thema eine Karte

Sobald der nächste Header fällig würde, weil Sie ein neues Thema bearbeiten, erstellen Sie eine neue Karte. Vermischen Sie die Themen nicht innerhalb ein und derselben Karte. Dadurch geht die Übersicht verloren. Zudem torpedieren Sie so das Konzept als solches.

Bewahren Sie den logischen Zusammenhang

Wenn Sie zum Beispiel eine Kontaktliste anzeigen, dann ist diese Liste ihre Karte. Kommen Sie nicht auf die Idee, aus jedem einzelnen Kontakt eine einzelne Karte zu erstellen. Wichtig ist, immer den logischen Zusammenhang zu wahren.

So nicht! Homogene Inhalte sollten nicht als einzelnen Karten dargestellt werden. (Bildquelle: Google Material Design Guidelines)

Homogene Inhalte – wie die genannte Kontaktliste oder etwa eine Bildergalerie – gehören logisch zusammen und bilden so eine Karte. Dass die Karte dann im Beispiel der Bildergalerie mehrere Fotos enthalten wird, versteht sich von selbst. So könnte die Karte etwa „Sonntags am Strand” heißen, und alle entsprechenden Bilder des Tages enthalten.

Limitieren Sie die Interaktionsmöglichkeiten

Zumeist ist eine Karte ein einziger Link. Wenn es die Aufgabe der Karte ist, ihre Besucher zu einer bestimmten Information zu leiten, so stellen Sie sicher, dass die Karte auch tatsächlich als ein kompletter Link funktioniert. Optisch lässt sich das etwa durch einen leichten Schlagschatten um die Karte realisieren.

Kompakte Karten mit klaren Interaktionsmöglichkeiten. (Bildquelle: Google Material Design Guidelines)

Sollte das nicht die Aufgabe ihrer Karte sein, müssen Sie explizit Interaktionsmöglichkeiten vorsehen. Diese sollten dabei aber ihren Zielen entsprechen und nicht ins Beliebige abdriften. So sollten Sie insbesondere auf Links ins Irgendwo verzichten, wenn Sie eigentlich möchten, dass der Besucher ihr Produkt kauft oder ihren Newsletter abonniert.

Halten Sie jede Karte so kompakt wie möglich

Bedenken Sie, dass die Karte der Zugangspunkt zu weiteren Informationen sein soll und nicht die umfassende Information selbst. Auf eine Karte gehört daher nur das absolute Mindestmaß dessen, was sich als Zugangspunkt definieren lässt.

Karte in ein- und ausgeklapptem Zustand. (Bildquelle: Google Material Design Guidelines)

Wenn Sie dazu neigen, eher etwas mehr Infos zu geben, sollten Sie überlegen, die Karte erweiterbar anzulegen. So würde sie im eingeklappten Zustand nur das Minimum und im ausgeklappten Zustand etwas mehr an Informationen liefern. Der eingeklappte Zustand wäre der initiale, sodass der Besucher einen aufgeräumten und übersichtlichen optischen Eindruck gewinnt.

Karten vereinfachen das Design und erhöhen die Konversionschancen

Je einfacher ihre Besucher zu den gewünschten Informationen gelangen, desto leichter lassen sie sich steuern. Denn die psychologische Barriere, die sich bei sperriger Bedienung aufbaut, bleibt aus. So ist kartenbasiertes Design tendenziell konversionsfördernd.

Vollkommen frei von Problemen ist natürlich auch diese Art der Gestaltung nicht. So kann kartenbasiertes Design auf sehr großen Bildschirmen dennoch zu Unübersichtlichkeit führen. Sicherlich wäre jede andere Gestaltungsform schon sehr viel früher unbedienbar geworden, aber Karten können auch nur bis zu einem gewissen Punkt ausgleichend wirken. Das würde ich indes nicht als Nachteil der Gestaltungsmethode bezeichnen.


Webdesign-Trends: Mit Atomic Design gestalten Sie ihre Website modular

Begrifflichkeiten bei Webdesign Trends sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.

Atomic Design: Das steckt dahinter

Der Begriff „Atomic Design“ geistert seit fast einem halben Jahrzehnt durch das Weltennetz. Erfunden von Brad Frost und inzwischen auch mit einem kompletten, online lesbaren Buch hinterlegt, lässt indes der Siegeszug auf sich warten. Oder etwa doch nicht? Das hängt ganz davon ab, wie man auf das Phänomen schaut.

Wenn Sie noch nichts von „Atomic Design“ gehört haben, sind Sie hier an der richtigen Adresse. Ich stelle den theoretischen Ansatz in aller Kürze dar, damit wir wissen, wovon eigentlich die Rede ist.

Die fünf Bestandteile des Atomic Design. (Illustration: Brad Frost)

„Atomic Design“ ist wörtlich gemeint. Es geht vom Atom als kleinstem Bestandteil eines Designs aus. Ein Atom ist beispielsweise ein HTML-Tag oder ein Font oder eine andere, nicht weiter verkleinerbare Einheit im Design-System. Ein Molekül ist dann ein Konglomerat mehrerer Atome, die gemeinsam (als Molekül) eine Aufgabe lösen. Das könnte zum Beispiel ein vollständiges HTML-Formular sein. Die nächstgrößere Einheit bezeichnet Frost als Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle. Ein Organismus könnte beispielsweise ein kompletter Seitenheader oder -footer oder der Bereich mit aktuellen News sein. Ich denke, Sie können sich vorstellen, was gemeint ist.

Atomic Design - Sich anpassendes Webdesign
Templates sind sind eine Ansammlung von „Molekülen“ und „Organismen“. Sie bilden auch das finale Design ab. (Illustration: Brad Frost)

Ab diesem Punkt verlässt Frost die Analogie zur Sprache der Chemie. Nach dem Organismus kommt das Template, die Vorstufe der eigentlichen Pages. Letztere sind die dem Besucher schlussendlich zugänglichen Seiten mit allen aktiven Inhalten, während die Templates die Vorlagen sind, in die eben jene Inhalte später einfließen sollen.

Atomic Design - Design
Atome können auch abstraktere Elemente wie Farbpaletten, Schriftarten und noch unsichtbarere Aspekte einer Benutzeroberfläche wie Animationen enthalten. (Illustration: Brad Frost)

Dadurch, dass wir von „Atomic Design“ sprechen, schaffen wir ein Bewusstsein, ein Mindset, das direkt in die richtige Richtung weist. Wir erreichen, dass wir uns bewusst auf die Kleinteiligkeit des Designansatzes fokussieren und nicht gleichsam zufällig richtig gestalten.

Dabei dürfte es wohl unstrittig sein, dass ein Designansatz generell immer vom kleinsten zum größten Teil ablaufen sollte. Nicht zuletzt das responsive Design zwingt uns fast schon zu dieser Vorgehensweise. Doch ob freiwillig oder nicht, für den Ansatz gibt es durchaus handfeste Gründe.

Argumente für ein Design im Baukastensystem

Obwohl Häuser durchaus unterschiedlich aussehen können, hat man sich in der Bauwirtschaft auf ein gemeinsames modulares System geeinigt, nachdem im Prinzip jedes Haus in gleicher Weise gebaut wird. Decken-, Wand- und Dachelemente werden zugeliefert und verbaut. Ebenso verhält es sich mit Fenstern, Türen und so weiter. Individuell ist letztlich nur die Zahl der verbauten Elemente sowie deren Optik.

In gleicher Weise verhält es sich in unserer Branche. Auch wenn Sie jede Seite individuell nach den Vorgaben des Kunden bauen, so hat jeder von uns diverse Snippets und Templates gebunkert, die wir immer wieder gerne einsetzen. Das ist nicht etwa eine Schande, sondern ein Gebot der Vernunft, nicht zuletzt unter wirtschaftlichen Aspekten.

Wireframing als Konzeptionsmethode für Webseiten
Wireframing als Konzeptionsmethode. (Foto: Depositphotos)

Das fängt schon beim Wireframing an. Das Wireframing ist eine Konzeptionsweise, die den Ansatz des „Atomic Design“ bildlich erfahrbar macht. In groben Inhaltsblöcken skizzieren wir, wie die Seite strukturiert werden und welche Funktionalität wo zu erwarten sein soll. So können wir ein Projekt von unten nach oben durchdenken, ohne uns bereits in den Details der Gestaltung zu verlieren.

Wir könnten also sagen, dass „Atomic Design“ dabei hilft, den Überblick zu bewahren. Und natürlich hilft der andere gedankliche Ansatz schon vom Start weg dabei, Code-Blöcke zu erstellen, die gut wiederverwendbar sind. Ohne den Ansatz könnten Sie durchaus weniger fokussiert auf diesen Punkt sein.

Fassen wir die Vorteile des Denkansatzes, ob wir ihn „Atomic Design” oder nicht nennen, kurz zusammen, kommt dabei eine schöne Liste mit einigem Nutzwert zusammen:

Sie haben einen Fundus an beliebig zusammensteckbaren Modulen

Wenn Sie sich tatsächlich streng an den Ansatz halten, haben Sie ein Arsenal fertiger Funktionsmodule an der Hand, die Sie beliebig zusammenstöpseln können. Innerhalb der gegebenen Hierarchie sind Sie frei im Einsatz und stellen auf diese Weise schnell zumindestens Prototypen her.

Ihr Style Guide entsteht quasi automatisch

Da Sie auf atomarer Ebene gestalten, können Sie die Einzelteile direkt als Style Guide verwenden. Oder, noch anders ausgedrückt, Sie benötigen gar keinen solchen mehr, denn die Verwendung der Kleinteile sorgt automatisch für ein konsistentes Design.

Auch die Code-Basis ist zwangsläufig konsistent, was zum einfacheren Verständnis der Funktionsmodule beiträgt.

Ihr Gestaltungsanspruch bleibt pragmatisch

Wenn Sie frei gestalten können, neigen Sie dazu, seitenbasiert zu layouten. Das ist ganz normal und entspricht alten Gewohnheiten. Gestalten Sie atomar, geht es mehr darum, ein funktionierendes Design zu erstellen, das mit den gegebenen Bausteinen ordentlich aussieht. Durch die Kleinteiligkeit der Herangehensweise ist „mobile first” quasi der native Denkansatz. Logisch, dass Ihre ersten Vorschläge weitaus schneller vorliegen.

So stark unterscheiden sich Atomic Design und der Bau eines Hauses nicht. Depositphotos)

Ihre Website bleibt leichter pflegbar

Wenn Sie konsequent mit der Hierarchie des „Atomic Design” arbeiten, ist es Ihnen ein leichtes, Blöcke zu entnehmen, zu ersetzen, umzustellen. Dadurch ist die aktive Pflege ihrer Website nicht unbedingt so einfach wie das Legen einer Patience, aber doch ähnlich strukturiert.

Der Ansatz lässt sich ausweiten

Haben Sie den Atomic-Ansatz erst einmal verinnerlicht, wird ihnen auffallen, dass nicht nur ihr HTML-Markup profitieren kann. Auch mit CSS, JavaScript und anderen Technologien können Sie so verfahren. Gerade JavaScript bietet da Potenzial.

Atomic Design ist eine gute Sache

„Atomic Design” ist eine gute Sache. Ob Sie kleinteiliges Gestalten nun so bezeichnen oder nicht, bleibt Ihnen überlassen. Möchten Sie ein bisschen mit Brad Frosts Ansatz experimentieren, dann schauen Sie beim Pattern Lab vorbei. Hier können Sie sich mit dem Denkmodell vertraut machen. Kennen Sie Bootstrap, wird Sie das nicht übermäßig anstrengen.


Webdesign Trends: Mondrianismus

Kennen Sie Mondrian? Nein, würden Sie vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird ihnen bekannt vorkommen. Schauen Sie selbst.

Der Namensgeber: Piet Mondrian

Piet Mondrian war ein niederländischer Maler und Erfinder des Neo-Plastizismus, einer Kunstform, der er nahezu religiösen Status zuschrieb. Mondrian gehörte zu den Begründern der abstrakten Malerei und inspirierte etwa Walter Gropius zur Erfindung des weltberühmten Bauhaus-Architekturstils.

Mondrians mosaikartige Malereien haben Sie mit Sicherheit schon gesehen. Dieses Werk etwa heißt „Komposition mit Rot, Gelb, Blau und Schwarz“ und stammt aus dem Jahre 1921.

Piet Mondrian [Public domain], via Wikimedia Commons

Etwa seit Anfang der Zwanziger bis zu seinem Tode im Jahre 1944 widmete sich Mondrian dieser Konzentration auf Primärfarben und klare Linien. Seine Formensprache inspiriert Künstler, aber auch Architekten bis zum heutigen Tage.

Mosaik als Gestaltungsraster

Mosaikartige Gestaltungsraster bieten sich indes nicht nur in der Architektur an, auch im Design mit zumeist rechteckiger Medien, wie Bildschirmen, erreichen Sie per Mosaik die beste Ausnutzung des vorhandenen Raums. So ist es kein Wunder, dass sich Screendesigner Inspiration beim niederländischen Neo-Plastizisten holen.

Das Konzept der unterschiedlichen Kachelung des Bildschirms griff zunächst Microsoft für sein mobiles Betriebssystem auf und weitete es später auf die Desktop-Variante aus. Metro-Design, später in Modern Design umbenannt, repräsentierte eine Benutzeroberfläche, die als Mosaik angelegt war. Je größer die Kachel zur jeweiligen Interaktion war, desto wichtiger war sie entweder für den Benutzer oder die Funktionalität im Allgemeinen.

Dabei konnte es durchaus auch zu starker farblicher Kontrastierung der einzelnen Kacheln zueinander kommen. Zwingender Bestandteil des Konzeptes war das, anders als bei Mondrian, allerdings nicht.

Mondrianismus als Design-Stil

Es bedarf im Grunde keiner näheren Erläuterung, warum sich Mondrians Strukturkonzept auch für das Design von Websites anbietet. Gerade in Zeiten responsiver Websites und des Box-Modells von CSS, in jüngerer Zeit durch Features wie Flexbox und CSS Grid promotet, ist das Mosaik fast schon das logische Gestaltungsmodell.

Wenn wir nun kachelige Designs mit Animationen verbinden, die sich in rechteckig abgegrenzten Bildschirmbereichen natürlich besonders gut isolieren und somit gezielt anwenden lassen, können dabei beeindruckende Layouts entstehen.

Etliche Designer zeigen auf Dribbble, wie das aussehen kann.

Twisted by Shota 

Mondrian by Stugbear

Video Reveal by Gil 

Landing page by Zak Steele-Eklund for Studio VØR 

Anxiety by Modis

Girsu by Zak Steele-Eklund for Studio VØR


Webdesign Trends: Der Goldene Schnitt im Webdesign

Effektives Webdesign muss nicht unbedingt schön oder farbenfroh sein. Gutes Design will natürlich, klar, harmonisch und ansprechend wahrgenommen werden. Hier kommt der sogenannte Goldene Schnitt ins Spiel.

Der goldene Schnitt -- Mathematik und Mysterium

Seit der Renaissance proportionieren Künstler und Architekten ihre Werke, um sie dem Goldenen Schnitt anzunähern, insbesondere mit Hilfe des Goldenen Rechtecks, bei dem das Verhältnis der langen Seite zur kürzeren Seite den Goldenen Schnitt darstellt. Hintergrund ist der Glaube, dass dieses Verhältnis natürlich, universell, harmonisch und ästhetisch ansprechend ist.

Beim Goldenen Schnitt beträgt das Seitenverhältnis der Strecke A zur Strecke B 61,8 % zu 38,2 %.

Dieses Teilungsverhältnis beträgt 1:1,618. 1,618 ist der Beginn der irrationalen Zahl Phi, die sich nicht als Bruch ganzer Zahlen darstellen lässt. Klar soweit?

Die Höhe eines Designs soll 64 cm betragen. Wir machen daraus ein 64x64cm großes Quadrat. Dann multiplizieren wir 64 cm mit 1,62, was 104 cm ergibt. Dies ergibt die volle Breite des Design-Canvas.

Diese Aufteilung kann man natürlich auch hochkant machen.

Der Goldene Schnitt, der auch „stetige Teilung“, „göttliche Teilung“ oder in diesem Zusammenhang kurz Φ (Phi) genannt wird, ist überall im Universum zu finden. Vieles um uns herum kann man mit diesem Verhältnis beschreiben.

Um 1490 entstand die bekannteste Illustration des Künstlers Leonardo da Vinci, nämlich der „vitruvianische Mensch”. Das ist insofern von Bedeutung, als der Mathematiker Luca Pacioli eben sowohl die Person war, die da Vinci in die Mathematik einführte, als auch jene, die 1509 eine Abhandlung über die „Göttliche Proportion” schrieb. Diese Abhandlung beeinflusste in der Folge viele Künstler und Geisteswissenschaftler, wurde aber dennoch erst durch das Buch „Neue Lehre von den Proportionen des menschlichen Körpers” des deutschen Lehrers Adolf Zeising im Jahre 1854 populär.

Der vitruvianische Mensch von Leonardo Da Vinci | Fotograf: www.lucnix.be | Lizenz: Public Domain

Wie Mark Boulton in seinem Beitrag Design and the Divine Proportion schreibt, ist “eines der Schlüsselelemente in der Kommunikation die Komposition. In der Designausbildung wird sie als etwas gelehrt, das man eher fühlen als logisch herbeiführen sollte.”

Wer seinen Besuchern ein ansprechendes und natürlich aufgebautes Design präsentieren möchte, sollte den Goldenen Schnitt in Erwägung ziehen.

Was genau ist der Goldene Schnitt? Grundsätzlich ist es das Verhältnis 1.618033988749895 ≈ 1.618 zwischen Objekten im selben Zusammenhang.

Natürlich müssen Web-Layouts nicht nach dem Goldenen Schnitt proportioniert sein. Dennoch kann es in einigen Fällen nicht nur die Aussagekraft Ihres Designs, sondern auch Ihr Layout vervollkommnen.

Das Interessante ist nun, dass Texte durch eine nicht optimale Layout-Breite eine nicht optimale Länge von 90 Zeichen pro Zeile haben. Angenehm zu lesende Texte haben pro Zeile zwischen 60 und 80 Zeichen. Eine Verbesserung des Layouts würde daher auch zu einer besseren Lesbarkeit der Inhalte führen. Ein netter Nebeneffekt der zeigt, wie man Dinge erreicht, in dem man den Gesetzen der Natur folgt.

Für Grob-Entwürfe können Sie das Verhältnis 5 : 3 verwenden, welches zwar nicht genau der Goldene Schnitt ist, aber als Faustformel nützlich sein kann, wenn Sie gerade keinen Taschenrechner zur Hand haben. Der Goldene Schnitt liefert verlässliche Werte, die man für fast jedes Design verwenden kann.

Die Fibonacci-Spirale

Im Zusammenhang mit Phi steht die sogenannte Fibonacci-Folge. Die Fibonacci-Folge ist die unendliche Folge von natürlichen Zahlen, die mit zweimal der Zahl 1 beginnt. Von der zweiten Stelle an ist jedes Glied der Folge gleich der Summe der beiden vorhergehenden. Nach 0, 1 und 1 kommt demnach 2, gefolgt von 3, gefolgt von 5, gefolgt von 8, gefolgt von 13 und so weiter. Die darin enthaltenen Zahlen werden als Fibonacci-Zahlen bezeichnet.

Je weiter man der Fibonacci-Folge folgt, desto mehr nähert sich der Quotient aufeinanderfolgender Zahlen dem goldenen Schnitt an. Der Mathematiker Fibonacci brachte seine Folge nie selbst in Verbindung mit der Bezeichnung „Goldener Schnitt”, vielmehr benutzte er die Zahlenfolge, um im Jahr 1202 das Wachstum einer Kaninchenpopulation mathematisch zu beschreiben.

Wenn die Eckpunkte dieser Quadrate in einer gebogenen Linie miteinander verbunden werden, entsteht eine logarithmische Spirale – die „Goldene Spirale“.

Die Drittel-Regel

Die Drittel-Regel ist eine vereinfachte Variante des Goldenen Schnitts und daher eine mehrteilige Faustregel. Eine Bildkomposition zu dritteln ist ein einfacher Weg, ohne jede Berechnung den Goldenen Schnitt anzuwenden.

Die Regel besagt, dass jede Bildkomposition durch jeweils zwei waagerechte horizontale und vertikale Linien in gleichem Abstand zueinander in neun gleiche große Teile geteilt werden kann. Hervorzuhebende Elemente können in der Nähe der Linien-Schnittpunkte platziert weden, damit sie eine hervorgehobene oder dominante Position im Design einnehmen. Eine Komposition mit der Drittel-Regel anzuordnen erzeugt mehr Spannung, Energie und Interesse als es einfaches Zentrieren vermag.

Rule of Thirds
Beispiel für die Drittel-Regel. Quelle: Wikipedia

In den meisten Fällen ist es weder möglich noch sinnvoll, alle vier Schnittpunkte zum Hervorheben von Website-Funktionen oder Navigationselementen zu nutzen. Sie können aber einige Punkte (üblicherweise ein oder zwei) verwenden, um die wichtigste Aussage oder Funktion einer Seite zu platzieren. Der Punkt links oben ist normalerweise der beste, weil Nutzer Websites visuell in Form eines “F” erfassen.

Wie teilen Sie nun ein Layout in neun gleiche Teile?

  1. Zeichnen Sie zunächst ein Rechteck. Die vertikale und horizontale Dimension spielt keine Rolle, zeichnen Sie aber sauber und 90-Grad-Winkel.
  2. Teilen Sie Ihr Rechteck horizontal und vertikal in drei Teile.
  3. Teilen Sie das obere Drittel Ihres Layouts erneut in drei Teile.
  4. Teilen Sie jede der Spalten in zwei Hälften, um ein Gitter zu erhalten.
  5. Sie sollten nun ein Quadrat haben, das dem Gitter der Drittel-Regel ähnlich ist.

Tools zur Umsetzung des goldenen Schnitts

Modular Scale

Modular Scale. (Screenshot: D. Petereit)

Die Web-App Modular Scale erlaubt die Umrechnung verschiedener Fontgrößen auf Basis verschiedener Relationen, darunter befindet sich auch die Ratio 1,618 -- der goldene Schnitt.

Atrise Golden Section

Atrise Golden Section. (Screenshot: D. Petereit)

Atrise Golden Section legt einen transparenten Fibonacci-Grid über deinen Bildschirm. Diesen verschiebst du dann an die Stelle, an der du ihn brauchst und veränderst ihn in der Größe. So hast du bis ins kleinste Detail stets die richtigen Proportionen nach dem goldenen Schnitt vor Augen. Das Tool läuft nur unter Windows und kann 30 Tage lang kostenlos getestet werden.

Atrise Golden Section kennt alle Varianten des goldenen Schnitts und legt auf Wunsch auch eine Spirale oder ein Dreieck über dein Design. Die Orientierung lässt sich ebenfalls verändern. Damit bietet Atrise die wohl vollständigste Hilfestellung für Designer überhaupt. Inwieweit dir das 50 USD wert ist, musst du natürlich selbst entscheiden.

Phiculator

Phiculator. (Screenshot: D. Petereit)

Der Phiculator ist ein kostenloses Widget für macOS, mit dessen Hilfe du zu jeder beliebigen Zahl die korrespondierende Zahl nach den Regeln der Fibonacci-Folge ermitteln kannst. Du gibst die Ausgangszahl entweder in den größeren oder den kleineren Eingabebereich ein und erhältst entsprechend entweder den passenden größeren oder kleineren Zahlenwert.

Zusammenfassung

In einigen Fällen können Goldener Schnitt und Drittel-Regel die Aussagekraft Ihres Designs erheblich steigern. Mit dem Goldenen Schnitt geben Sie Ihrem Design Struktur, ein natürliches Gleichgewicht und machen es einfacher zu erfassen.

Mit der Drittel-Regel können Sie wichtige Funktionen ihrer Website hervorheben und ihren Besuchern ein Design präsentieren, das die Website benutzbar macht und die Informationen rüberbringt, die Sie vermitteln wollen.


Webdesign-Trends: Brutalismus im Webdesign: So einfach wie möglich, oder doch einfacher?

Im Design gilt, dass die beste Gestaltung die ist, die keiner Erklärung bedarf. Das beste Design lässt sich intuitiv bedienen und wird ohne Worte verstanden. Ist Brutalismus also das beste Design?

Wenn Sie durch ihre Stadt gehen und auf einen potthässlichen Betonklotz stoßen, dann können Sie den entweder als potthässlichen Schandfleck im Stadtbild oder als Ausdruck des Architektur-Trends des Brutalismus bezeichnen. Das läuft getreu dem Motto „Ist das Kunst oder kann das weg?“

Verfechter des Brutalismus-Webdesign-Trends stellen die Funktion eines Gebäudes so weit in den Vordergrund, dass für die Form überhaupt kein Raum mehr bleibt. Das kulinarische Prinzip „Das Auge isst mit“ gilt hier nicht.

Habitat 67, Montreal (Foto: Matias Garabedian)

Brutalismus war also ursprünglich eine eher minimalistische, nüchterne Sicht auf die Welt und nicht etwa Kunst, sondern maximal ein Ausdruck des funktionsorientierten Schaffensanspruches früherer Architektengenerationen. Zudem sollte die Gestaltung auch politischer Protest sein, quasi die AfD in Beton.

Webdesign der Neunziger = Brutalismus?

Übertragen auf Webdesign Trends spielen solche Aspekte nur eine untergeordnete Rolle. Zwar kommen durchaus künstlerische Gesichtspunkte, sowie der Ausdruck einer gewissen Protestkultur zum Tragen, doch schon rein optisch hingegen war in den Neunzigern im Grunde jede Website brutalistisch. Denn es gab nur wenige Möglichkeiten, ein Design optisch ansprechend zu gestalten. Die Gestalter waren zumeist jene, die sich zuvor schon durch vollkommen überfrachtete Powerpoint-Folien einen entsprechenden Ruf erarbeitet hatten.

Wer erinnert sich nicht an Beepworld, Geocities und im Grunde eigentliche alle damals verfügbaren Websites? Der damalige Webdesign Trend war vor allem: „Wir hatten ja nix“. Seiten waren teilweise so hässlich, dass nach deren Besuch unmittelbar ein Augenarzt aufgesucht werden musste.

Linie - Winkel
Die Webseite von Bloombergs Design-Konferenz mit all ihren spielerischen Elementen und ihrem übermäßig vereinfachten Aussehen. Screenshot: Dr. Web.

Heutzutage hingegen finden wir HTML-Templates an jeder Ecke des Internets. Mit diesen Templates kann sogar Opa Heinz, einst der gefürchteteste Geocities-Bewohner, eine optisch ansprechende, funktional leicht bedienbare Website ins Netz der Netze laden. Mit einem CMS, wie WordPress, ist es sogar noch leichter. HTML-Kenntnisse werden nicht benötigt, Wissen zu CSS, PHP oder Javascript schon gleich gar nicht.

Wir dürfen also mit einiger Bestimmtheit sagen, dass das Web in seiner Grundkonzeption Inhalt und nicht Gestaltung ist. Dem stimmen frühe Webmaster wie Justin Jackson umstandslos zu. Ebenfalls erhellend wird sich dieser Blick in die Motivation des Web-Erfinders Tim Berners-Lee auswirken.

Widersprechen sich die beiden Ansätze denn überhaupt? Sicherlich bringen uns moderne Werkzeuge immer weiter weg von den technischen Grundlagen des Web, allen voran dem Schreiben von HTML mit der Hand. Andererseits eröffnet gerade dieser Umstand einer breiten Zahl von Menschen überhaupt erst die Möglichkeit, sich aktiv am Web zu beteiligen, also Inhalte zu teilen.

Natürlich ist der Eindruck gerechtfertigt, dass sich Webdesign immer mehr vereinheitlicht. Strittig ist lediglich, ob das nun gut oder schlecht ist.

Brutalismus im Webdesign

Internet - Megabit
Die Website-Designs werden auch immer interessanter. Screenshot: Dr. Web.

Wir können also den aktuellen Brutalismus-Trend durchaus mit Protest an den Gegebenheiten in Verbindung bringen. Hier gestalten Personen ihre Websites mit voller Absicht in einem Stil, den man heutzutage nicht mehr zeigen müsste, weil die technischen Möglichkeiten nun mal nicht mehr auf dem Stand der Neunziger sind.

Ist es Nostalgie, die hier eine Rolle spielt? Früher war alles besser? Ist es eine Frage der Ideologie? Geht es um Web-Purismus auf den Spuren der initialen Aussagen eines Berners-Lee? Ist es etwa so wie Punk oder Gothic? Also eine auffällige Form, sich so von der Norm abzugrenzen, dass diese Norm es auch bemerkt?

Das ist schwer zu beurteilen. Wir können relativ sicher sagen, was es nicht ist. In aller Regel ist es nicht der Mangel an Kenntnissen.

Das fand Pascal Deville, Partner bei der Züricher Kreativagentur „Freundliche Grüße“ recht bald heraus, nachdem er schon im Jahre 2014 seine Sammlung brutalistischer Websites unter dem Namen „Brutalist Websites“ aus der Taufe gehoben hatte.

Brutalist Websites: Sammlung hässlicher Webdesigns. (Screenshot: D. Petereit)

Zu dieser Erkenntnis gelangte Deville über die Codeanalyse. Diese zeigte vielfach den Einsatz moderner Technologien und optimierte Abläufe, die aber dennoch zu potthässlichen Layouts führten. So konnte nichts anderes als Absicht unterstellt werden.

Was spricht denn nun für Brutalismus im Webdesign?

Die Macher einiger der gelisteten Websites beziehen in kurzen Interviews Stellung zu der Frage, warum sie eine brutalistische Seite betreiben. Die Antworten variieren von „weil es mir Spaß macht“ über „ich stamme aus einer brutalistischen Gegend“ bis hin zu „weil es zur Zeit im Trend liegt“. Eine eindeutige Motivation ist nicht zu erkennen.

Grafikdesign - Marke
Von der Webseite jisooeom.com kann man halten, was man will. Screenshot: Dr. Web.

Wenn uns die Betreiber nicht einmal aus erster Hand gute Gründe liefern können, müssen wir wohl selber spekulieren. Betrachten wir das Thema aus Marketing-Sicht, kommen wir nicht umhin, anzuerkennen, dass eine brutalistische Website mit großer Wahrscheinlichkeit eine höhere Aufmerksamkeit erreichen wird, als eine Streamline-Version des letzten Template-Bestsellers. Wenn es gut läuft, geht das Design sogar viral. Wir sollten uns allerdings vorher gut überlegen, was wir sagen, wenn wir gefragt werden, warum wir in 2018 eine Website starten, die aussieht, wie aus den Neunzigern übrig geblieben.

Ganz generell ist Minimalismus einer der Megatrends der jüngeren Zeit. Und was ist Brutalismus anderes als Minimalismus? Gut, es ist eine besonders hässliche Form des Minimalismus, aber das ist doch eine Detailfrage.

Wenn ihr brutalististisches Design gut gemacht ist, ist es quasi automatisch zugänglich und somit auch responsiv, ganz ohne sonstige technische Vorkehrungen. Wenn es dabei nicht so hässlich wäre, könnte es glatt als Best Practice durchgehen.

Gnadenlos durchgezogener Brutalismus kann im Grunde neben dem Protestaspekt nur eine glaubhafte Erklärung haben: Kunst, denn über Kunst lässt sich nicht streiten. Das sieht man an der Yale-Universität in jedem Falle so. Schauen Sie sich ganz unerschrocken die Website der dortigen School of Art an:

Das ist wirklich die Website der Yale School of Art. (Screenshot: D. Petereit)

Insgesamt ist es auffällig, dass Brutalismus häufiger in der rein künstlerischen Ecke vorkommt als anderswo im Netz. Sind Sie also Künstler, wollen Sie vielleicht mal ein brutalistisches Auge auf ihre Außendarstellung werfen.

So kann es funktionieren: Brutalismus in entschärfter Form

Wenn wir davon ausgehen, dass wir weder Protest transportieren, noch progressiv künstlerisch rüberkommen wollen, wofür könnten wir Brutalismus dann nutzen? Etwa gar nicht? Das geht natürlich auch.

Aber, es ist durchaus möglich, die positiven Effekte des modernen Brutalismus mitzunehmen, ohne gleich wie ein Gestaltungs-Legastheniker zu wirken.

Schauen Sie sich das Beispiel des Online-Magazins The Outline an:

Das brutalistische Online-Magazin The Outline. (Screenshot: D. Petereit)

Ausnehmend hässliche Gestaltungselemente harmonieren mit modernem Designkonsens und legen so den Fokus auf die einzelnen Beiträge des Magazins. Das kann sicherlich nicht jeder so machen, aber bei The Outline passt die Optik zum Konzept. Schauen Sie sich nur die Unterstreichungen an. Sie sind in Wellenform angelegt und bewegen sich dabei auch noch. Schaurig schön.

Auch die Designagentur AKU aus Tallinn in Estland bietet so eine schaurig schöne Brutalistenoptik. Da sich die Agentur ausdrücklich an Kunstschaffende richtet, ist es nur logisch, dass die eigene Präsentation extravagant ausfällt. Otto Normalverbraucher kommt kaum damit zurecht, aber der potenzielle Kunde wird es toll finden:

Nicht minder erstaunlich präsentiert sich die Designagentur AKU aus Estland. (Screenshot: D. Petereit)

Alles, was Sie benötigen, um die Möglichkeiten des Brutalismus für Sie einzusetzen, ist Fantasie und Mut. Denn in der heutigen Designwelt ist es schwierig, sich abseits der ausgetretenen Pfade neue Wege zu suchen, die ihre Besucher dann auch mitzugehen bereit sind. Wenn ihnen das aber gelingt, dann haben Sie ein gutes Alleinstellungsmerkmal.

Designerin Maria Grilo geht sogar so weit, zu behaupten, dass Brutalismus genau die Form von schlechtem Einfluss ist, die wir brauchen, um unsere Designs wieder zu echtem Leben zu erwecken. Ob das allerdings stimmt?


Webdesign-Trends: Was ist Emotional Design und warum sollte Sie das interessieren?

Emotional Design markiert gewissermaßen die Oberklasse moderner Gestaltung. Und obwohl der Begriff nicht neu ist, gibt es im Wettbewerb nicht viele, von denen Sie lernen könnten.

Auch wenn der Begriff „User Experience“ sich nicht nur als solcher, sondern ebenso als Fokus in der Design-Umsetzung durchzusetzen scheint, ist damit noch nicht die Königsklasse, das obere Ende der Fahnenstange erreicht. Aber, lassen Sie uns von vorne beginnen. Dann verstehen Sie, worauf ich hinaus will.

Das kleine Einmaleins: Funktionalität, Zuverlässigkeit, Benutzbarkeit

Wenn wir uns anschauen, was ein Design auf der untersten Ebene, also mindestens leisten muss, dann werden wir uns einig sein, dass das Stichwort hier „Funktionalität“ lautet. Wenn Sie ein Design abliefern, dann muss es wenigstens die gewünschten Funktionen haben. Dabei ist es zunächst unerheblich, wie das Design aussieht. Es zählt nur, dass es tut, was es soll.

Einen Schritt weiter ist es dann wichtig, dass es diese Funktionalität zuverlässig bietet und nicht nur unter bestimmten Voraussetzungen (etwa einem bestimmten Browser). Wenn sich die Entwickler nativer Apps für iOS und Android stärker diesem Punkt widmen würden, hätte ich ein reduziertes Herzinfarktrisiko bei der Verwendung vieler Apps auf Smartphones. Unzuverlässigkeit ist ein KO-Kriterium.

Ist ihr Design funktional und zuverlässig, muss es auf der nächsten Ebene auch benutzbar sein. Usability wird heutzutage immerhin groß geschrieben und ist unter dem Schlagwort UX (User Experience) stets repräsentiert, wenn von qualitativ hochwertigem Design die Rede ist. Ein Design, das nicht benutzbar ist, wird trotz gegebener Funktionalität und Zuverlässigkeit regelmäßig scheitern.

Auch wenn es inzwischen viele Designer gibt, die beim Stichwort UX nicht nur an die schiere Benutzbarkeit, sondern auch an die Benutzbarkeit emotional verbessernde Elemente denken, so ist Emotional Design insgesamt noch eher unterrepräsentiert.

Emotional Design: Wenn der Spaßfaktor dazu kommt…

Emotional Design ist ein Begriff, der bereits in den Achtzigern von Don Norman, Mitgründer der bekannten Nielsen Norman Group, geprägt wurde. Seine Standardwerke „The Design of Everyday Things“ und „Emotional Design“ sind, nicht zuletzt dank regelmäßiger Anpassungen, immer noch aktuell.

Etwas frischer kommt „Designing for Emotion“ vom Designveteranen Aarron Walter daher, setzt aber auf den gleichen Thesen auf. Walter allerdings kommt mit der originellen Idee, die Maslowsche Bedürfnispyramide auf Design anzuwenden. So werden aus den bereits benannten Elementen Funktionalität, Zuverlässigkeit und Benutzbarkeit aufeinander aufbauende Schichten einer Pyramide.

Das sieht nach Walter so aus:

Aus Aarron Walter, Desigining for Emotion, A Book Apart

Danach fehlt die Spitze der Pyramide bei den meisten Designs unserer Zeit. Wie bei Maslow bedarf es der kompletten Umsetzung der unteren Schichten, um die Spitze zu erreichen. Anders als bei Maslow ist das Streben an die Spitze keine natürliche Zwangsläufigkeit, sondern bei Emotional Design braucht es den konkreten Willen des Designers, den Extraschritt zu gehen.

Wenn ihr Design also funktional, zuverlässig und benutzbar ist, heißt das noch lange nicht, dass es auch emotional ist. Emotional ist hier natürlich stets in positiver Konnotation gemeint. Erst wenn ihr Design etwa Spaß macht, die Benutzer sich freuen, es verwenden zu können, dann ist es in positivem Sinne ein Emotional Design. Hierzu gehört nicht nur die sprichwörtliche Schönheit des Designs, sondern vor allem das Gestalten perfekter Interaktionen, um das Design mit Leben zu füllen und fühlbar zu gestalten.

Der Haken an der Sache ist, dass ihr Design immer Emotionen hervorrufen wird, ob Sie es beabsichtigen oder nicht. Es ist so ähnlich wie bei der alten Weisheit, das man nicht nicht kommunizieren könne. Es ist also besser, sich des Instrumentes der Emotionalisierung bewusst zu bedienen, als versehentlich unterschwellig die falschen Gefühle zu triggern.

Methoden des Emotional Design

Wenn Sie sich nun also fragen, wie Sie ihr Design emotional gestalten können, brauchen Sie nur ein kleines Stück über den Tellerrand zu schauen. Dabei setzen wir voraus, dass Sie den ästhetischen Aspekt ohnehin schon im Griff haben. Hier etabliert sich stets verhältnismäßig schnell ein Konsens, der dieser Tage Flat Design heißt. Folgen Sie den sich immer langsamer wandelnden Trends, sind Sie hinsichtlich des Aspektes nackter Schönheit, zumindest in der Bewertung durch die Masse, auf der sicheren Seite.

Deshalb konzentrieren wir uns hier auf andere Aspekte des Emotional Design:

Minimalismus

Natürlich kann ein Beitrag wie dieser nicht ohne Verweis auf Dieter Rams auskommen. Rams kennt jeder Designer. Seine Designgrundsätze gelten noch heute als modern, obwohl seine designerischen Meisterstücke während seiner Schaffenszeit für das deutsche Unternehmen Braun aus der zweiten Hälfte des letzten Jahrhunderts datieren. Reminiszenzen an Rams finden wir auch heute noch zuhauf, etwa in den Produkten aus dem Hause Apple. Rams ist inzwischen 85 Jahre alt.

Gutes Design ist so wenig Design wie möglich, lautet einer der Grundsätze Rams. Gekoppelt mit dem Grundsatz, dass gutes Design ein Produkt verständlich machen soll, wird klar, worauf ich hinaus will. Wenn Sie es schaffen, dass ihr Design sich quasi von selbst erklärt und ganz im Sinne eines Steve Krug die Menschen nicht zum Denken zwingt, dann erzeugen Sie damit positive Emotionen in den Benutzern des Designs. Jeder hasst komplizierte Produkte, für deren Bedienung man erst promovieren muss.

Minimalismus an sich ist daher bereits ein Instrument des Emotional Design, wird aber häufig nicht gezielt in diese Richtung interpretiert und genutzt. Da ist noch Luft nach oben.

Gamification

Game-Design ist vornehmlich Interaktions-Design. Dabei geht es darum, den Spielenden so tief wie möglich in das Spiel zu ziehen. Hierzu bedarf es eines Großangriffs auf die menschlichen Neuronen.

Ziel des Game-Designs ist stets das Belohnungssystem. Erwartet der Mensch eine Belohnung, schüttet er schon im nahen Vorfeld dazu Dopamin, im Volksmund als Glückshormon bezeichnet, aus. Dopamin steigert Antrieb und Motivation und sorgt dafür, dass der Gamer dabei bleibt.

Emotional Design macht Spaß.

Dass unsere Besucher oder Benutzer dabei bleiben, wünschen wir uns als Designer ebenfalls. Wieso sollten wir also nicht Ansätze des Game-Designs übernehmen. Slack, die Team-Kommunikations-Revolution, etwa, setzt voll auf einen spielerischen Umgang mit seinen Features. Das bezieht sich nicht nur auf das Design, sondern auch auf die Funktionalität an sich.

Alle Netzwerke, die mit Likes arbeiten, setzen ganz transparent auf den Dopamin-Mechanismus. Der kleine Kick, der entsteht, wenn der Mensch einen Like auf seinen Tweet, seinen Post oder sein Bild erhält, sorgt dafür, dass er noch mehr twittert, postet, hochlädt. Der Like wird zur Belohnung.

Ebenso wie kleine Belohnungen können auch kleine Überraschungen positive Emotionen triggern. Windows etwa bringt Ihnen bei jedem Login einen schicken Hintergrund, den Sie näher erforschen können. Es ist schon mehr als einmal vorgekommen, dass ich tatsächlich wissen wollte, wo das entsprechende Bild aufgenommen wurde. Der Login-Bildschirm ist ein Element, auf das ich mich regelrecht freue, weil ich gespannt bin, welche Landschaft sich mir dieses Mal präsentieren wird. Ähnliche Effekte könnte man über Zitate oder kleine Tipps erzielen.

Immersive Design

Immersives Design zielt darauf ab, möglichst alle Sinne des Verwenders anzusprechen. Durch den rasanten Fortschritt der Smartphone-Technologie und die Erfindung der Gesten-Steuerung als vollkommen neuartige Möglichkeit, digitale Erlebnisse zu gestalten, sind wir heute schon in der Lage, Design regelrecht fühlbar zu machen, wenn auch noch eine ganze Weile eben nicht alle Sinne anzusprechen.

Subtile Animationen vermitteln den Eindruck, dass ihr Design lebt. Besonderes Augenmerk sollten Sie auf die Mikrointeraktion legen. Mikrointeraktionen definieren die eigentliche Mensch-Maschine-Schnittstelle. Wenn Sie ihren Wecker ausschaltent oder ihr Auto per Funkfernbedienung auf- oder abschließen oder das Licht ein- oder ausschalten — all das sind Mikrointeraktionen.

Fluid Switch | Leo Zakour

Anhand der Beispiele können Sie schon erkennen, dass es sich um zwar nur kurze Aktionen, die schnell erledigt sind, handelt, diese aber ganz wesentlich für die jeweilige Nutzererfahrung sind. Es ist also nicht übertrieben, Mikrointeraktionen als wichtigste Elemente im Design von Produkten zu bezeichnen.

Es sind die Mikrointeraktionen, mit denen Sie als Designer ihr Produkt von anderen absetzen können. Denn im Grunde interagiert der Nutzer mit ihrem Produkt immer nur über Mikrointeraktionen. Je überzeugender Sie diese also gestalten, desto flüssiger fühlt sich die Nutzung an und desto lieber wird der Nutzer ihr Produkt verwenden.

Es ist dabei die Interaktion an sich, die Emotion triggert. Denn durch die Interaktionsmöglichkeit wird das pure Design vom Ding zu etwas, mit dem wir eine Beziehung eingehen können. Das Design reagiert, bewegt sich, wird dadurch selbst menschlicher und entwickelt eine Persönlichkeit.

Die Extrameile

Emotional Design erstreckt sich über das reine Design hinaus. Wenn Sie etwa einen Online-Shop betreiben, könnten Sie das Prinzip auch nach dem Kaufabschluss fortsetzen. Sie könntest eine besonders freundliche E-Mail senden, die etwa erklärt, warum Sie sich über den neuen Kunden so freuen, was ihre Philosophie ist und mehr. Sie könnten statt der 0815-Verpackung eine nehmen, die man gerne öffnet. Vielleicht posten Kunden sogar Unboxing-Videos, weil sie so beeindruckt von ihrem Zusatzaufwand sind. Sie könnten ein Geschenk beilegen. Sie könnten so viel tun, was Sie vom Wettbewerb absetzt. Der Kunde wird es sich merken, weil er es nicht erwartet.

Emotional Design setzt Sie vom Wettbewerb ab

Sie brauchen nicht weit zu schauen, um festzustellen, dass Emotional Design nicht die Regel darstellt. Umso attraktiver ist es für Sie, jetzt damit zu beginnen, denn der Wettbewerbsvorteil kann immens sein.

Tatsächlich kann Emotional Design heutzutage noch nicht das Potenzial entfalten, das theoretisch denkbar wäre. Dafür müsste unser Interface seinerseits wieder Emotionen erkennen können. Sind Sie gestresst und in Eile oder gut gelaunt und entspannt? Wenn Designs über moderne Schnittstellen auch solche Gefühlszustände als Input akzeptieren, geht es richtig los. Wir nennen das dann einfach Emotional Design 2.0.

Einstweilen könnten Sie auf Aaron Walter hören, der in „Designing for Emotion“ sagt:

Wenn wir aufhören, Interfaces als bloße Kontrollzentren zu gestalten und sie stattdessen als die Person betrachten, mit der unser Zielanwender kommunizieren will, können wir überzeugendere Erlebnisse erschaffen, die bleibenden Eindruck hinterlassen.

In diesem Sinne: Wo sehen Sie bei Ihrer Website bzw. ihren Kunden-Websites noch Verbesserungspotenziale?

Wollen Sie mehr zum Thema „Emotional Design“ lesen?


Webdesign-Trends: So geht hirnfreundliches Webdesign

Das menschliche Gehirn arbeitet in einer Weise, die Sie nicht ignorieren können, wenn ihr Design erfolgreich werden soll. Hirnfreundliches Webdesign entscheidet über Erfolg und Misserfolg, also nehmen Sie es nicht auf die leichte Schulter.

Dass ihre Designs nicht bloß rein nach ästhetischem Geschmack zu beurteilen sind, ist ihnen als erfahrenem Designer seit langem bewusst. Glücklicherweise hat sich gerade bei der Erstellung großer Designs, etwa für E-Commerce-Websites, die Verwendung von Nutzertestverfahren zum Standard entwickelt. Denn, auch wenn wir grundlegende Erkenntnisse des Aufbaus von Designs kennen, können einzelne Zielgruppen doch zu überraschenden Besonderheiten tendieren.

Halten Sie sich an Steve Krugs alte Empfehlung, die da lautet „Don’t make me think“, also „Zwing mich nicht zum Denken“, so haben Sie jedenfalls eine grobe Richtschnur, die die gröbsten Fehler vermeiden helfen sollte. Es kann jedoch überdies nicht schaden, wenn Sie ein paar grundlegende Funktionsweisen des menschlichen Gehirns näher kennen. Im folgenden wird es nicht um eher psychologische Aspekte gehen. Zu diesem Thema finden Sie bei uns ebenfalls Beiträge, einen davon habe ich unten in den „Links zum Thema“ hinterlegt.

Das Gehirn als Beispiel natürlicher Algorithmik

Beachten Sie bitte, dass jetzt keine medizinisch akkurate Erklärung folgt. Die getätigten Vereinfachungen dienen dazu, dass Sie gerade so viel verstehen, wie es für die Arbeit erforderlich ist. Sollten Sie also Medizin studieren, ist der Beitrag für Sie eher ungeeignet.

Das Hirn ist stets beschäftigt. (Foto: Stockvault)

Das menschliche Gehirn arbeitet in sich wiederholenden Schleifen immer vom Einfachen zum Schwierigen hin. Diese Vorgehensweise versucht man heutzutage mit künstlichen neuronalen Netzen algorithmisch nachzubilden. Der Begriff „Deep Learning“ ist damit assoziiert. Diese grobe Darstellung der Arbeitsweise lässt bereits Rückschlüsse darauf zu, wie Sie eine Website anlegen sollten. Vom Start weg einfach zu bedienen, mit der Möglichkeit, sich in die Tiefen der Anwendung führen zu lassen.

Die verschiedenen Funktionsbereiche des menschlichen Gedächtnisses

Eines der wesentlichen Leistungsmerkmale unseres Gehirns ist das Gedächtnis. Eigentlich könnte man versucht sein, das Gedächtnis mit einer Festplatte zu vergleichen. Wie Daten auf der Festplatte, so werden Informationen im Gedächtnis gespeichert. Das allerdings greift viel zu kurz. Denn das Gedächtnis ist kein bloßer Massenspeicher, sondern teilt sich in verschiedene „Fachbereiche”. Es gibt verschiedene Methoden, das Gedächtnis zu klassifizieren. Für uns relevant ist die Unterscheidung nach der Dauer der „Speicherung“.

Das Ultrakurzzeitgedächtnis ist ein rein sensorisch arbeitender Funktionsbereich. Hier werden Sinnesreize gerade lange genug, maximal für einige Sekunden, gespeichert, um aus der Kombination mehrerer Sinnesreize einen Kontext entstehen zu lassen.

Im Arbeitsgedächtnis halten wir Inhalte für Minuten vor, die wir in einem definierten Kontext für eine Weile benötigen. Wir merken uns etwa eine Adresse, um sie unmittelbar ins Navigationsgerät einzuspeichern und haben sie unmittelbar nach erfolgreicher Eingabe schon wieder vergessen.

Das Kurzzeitgedächtnis arbeitet im Zeitbereich von einigen Stunden und stellt typischerweise eine Vorstufe des Langzeitgedächtnisses dar. Informationen, die im Kurzzeitgedächtnis liegen, können durch gezieltes Wiederholen in das Langzeitgedächtnis überführt werden. Bekannte Lernsysteme, etwa Phase 6 arbeiten nach diesem Prinzip.

Das Langzeitgedächtnis ist für die dauerhafte Speicherung von Informationen angelegt und kommt überall da zum Einsatz, wo Informationen mindestens mehrere Tage benötigt werden. Hier kann die Speicherung auch lebenslang erfolgen. Wollten wir das Gedächtnis mit einer Festplatte vergleichen, käme für diesen Vergleich am ehesten das Langzeitgedächtnis in Frage. Betrachten wir jedoch die Arbeitsweise des Langzeitgedächtnisses, wird klar, dass wir auch hier nicht von einer Art Festplatte sprechen können.

Denn das Speichern neu im Langzeitgedächtnis eintreffender Informationen erfolgt nicht einfach auf freiem Speicherplatz oder durch das Überschreiben von für die Löschung freigegebenen Daten. Vielmehr baut das Gehirn die neuen Informationen in vorhandene Strukturen ein. Es bildet quasi neue Gedächtnisinhalte, indem es an bereits vorhandene Inhalte anknüpft. Dabei spielen vorhandene Erfahrungen ebenso eine Rolle, wie grundsätzliche Fragen der Gesinnung im Allgemeinen. Mit anderen Worten: Die Informationen im Langzeitgedächtnis sind nie vollständig objektiv. Eine solche Festplatte würden wir uns nie freiwillig kaufen.

Wenn hirnfreundliches Design das Gedächtnis überwinden soll

Wo wir nun wissen, wie das menschliche Gedächtnis arbeitet, stellt sich die Frage, welches der Areale wollen wir ansprechen? Die Antwort darauf, ist wiederum mit der Frage, was wir erreichen wollen, verknüpft.

Auf der untersten Ebene müssen wir auf jeden Fall am Ultrakurzzeitgedächtnis vorbei. Hier werden Informationen nur maximal 20 Sekunden gehalten, bevor sie verschwinden. Im Rahmen wissenschaftlicher Untersuchungen wurde bereits 1956 festgestellt, dass die Zahl erinnerbarer Informationsfetzen im Ultrakurzzeitgedächtnis bei sieben plus/minus zwei liegt. In späteren Jahren konnte konkretisiert werden, dass die Kapazitätsangabe sich auf sieben Zahlen beziehe. Bei Buchstaben läge die Kapazitätsgrenze bei sechs und bei Wörtern bei fünf.

Unter wenigen Alternativen entscheidet es sich leichter. Schuld ist ihr Gedächtnis. (Foto: Pexels)

Was bedeutet das für unser Design? Wir müssen damit rechnen, dass Menschen, die unsere Website besuchen, bereits nach wenigen Sekunden orientierungslos werden, wenn wir ihnen keine solide Führung an die Hand geben. Dabei müssen wir laut Nielsen Norman mehrere Aspekte beachten:

Die Ladezeiten unserer Seiten darf nicht so lang sein, dass laufende Transaktionen Gefahr laufen, abgebrochen zu werden, weil der Seitenaufbau zu zögerlich stattfindet. Gerade im Checkout-Prozess sollten Sie das beachten, sonst vergisst der potenzielle Kunde womöglich noch, dass er mitten im Kaufabschluss steckt.

Bereits besuchte Links sollten andersfarbig gekennzeichnet sein, damit der Besucher sieht, wo er bereits war. So muss er seine begrenzten Speicherplätze nicht mit nutzlosen Infos belegen. Überhaupt sollten Sie mit Hilfe und Unterstützung nicht sparen, damit der Ablauf des Besuches möglichst wenig von kognitiven Prozessen abhängt, die über das Ultrakurzzeitgedächtnis hinausgehen.

Wollen Sie etwas verkaufen und bieten eine gewisse Auswahl, dann machen Sie es für den Besucher leicht, die verschiedenen Angebote miteinander zu vergleichen. Der potenzielle Kunde wird sich die wesentlichen Eckdaten der einzelnen Angebote ansonsten nicht merken können und zum Abbruch neigen. Damit erleichtern Sie ihm zudem die qualifizierte Auswahl, die ansonsten durch die Natur des menschlichen Gedächtnis erschwert wird.

Kann der Mensch aus zu vielen Optionen wählen, blockiert das Gedächtnis, denn jede Option will evaluiert werden. Hierzu werden unter anderem vergangene Erfahrungen herangezogen. Werden derer zu viele gleichzeitig aktiviert, dauert die Bewertung länger als es dem Besucher möglicherweise wert sein wird. Das Prinzip der Begrenzung der Auswahl ist übrigens jenes, dass Apple seit den Nullern sehr erfolgreich nutzt.

Erafhrungen aus der Vergangenheit spielen eine bedeutende Rolle für Entscheidungen in der Gegenwart. (Foto: Pexels)

Generell empfiehlt es sich, durch gezielte Wortwahl Verknüpfungen zu möglicherweise bereits bestehenden Informationen in anderen Gedächtnisbereichen des Gehirns zu initiieren. So erzeugen Sie Interesse und steigern die Wahrscheinlichkeit, dass der Besucher dran bleibt.

Dieses Triggern von Verknüpfungen ist besonders wichtig, wenn es um das Navigationsdesign geht. Je nach Komplexität ihrer Seite wird es nicht sinnvoll sein, die Navigation auf fünf bis sieben Wahlmöglichkeiten zu verkürzen, um dem Ultrakurzzeitgedächtnis ihres Besuchers nicht zu hohe Anforderungen zu stellen. Der Schuss könnte sogar nach hinten losgehen, weil Sie eine solche Verkürzung zwingen würde, ihre Navigation sehr generisch zu gestalten. Das wiederum würde mit hoher Wahrscheinlichkeit dazu führen, dass sich Besucher hinter den Begriffen nichts vorstellen können, was wiederum die Interaktionsrate senken würde.

Wenn wir am Navigationsdesign arbeiten, arbeiten wir nicht in erster Linie mit dem Gedächtnis, sondern setzen auf weitergehende kognitive Prozesse. Der Besucher soll leicht erkennen, was wir jeweils anbieten und sich bewusst in die jeweilige Richtung bewegen. Dazu dienen aussagekräftige Symbole, klare Texte und etablierte Nomenklatur. Der Grundsatz des „leichten Erkennens“ wird übrigens durch das beliebte Hamburger-Menü ad absurdum geführt. Zu diesem unsäglichen Designelement schrieb ich an dieser Stelle ausführlich.

Generell können wir festhalten, dass wir im Design alles unternehmen sollten, um das Gedächtnis des potenziellen Kunden zu entlasten. Je weniger bereits sein Ultrakurzzeitgedächtnis gefordert wird, desto größer sind die Chancen, dass wir ihn bei der Stange halten.

Weiterhin darf als generelle Empfehlung gelten, einen minimalistischen Designansatz zu wählen. Das entlastet nicht nur das Gedächtnis des Besuchers, sondern erlaubt es auch, gezielt Verknüpfungen zu Erfahrungen und Erinnerungen zu triggern, die in tieferen Gedächtnisschichten angelegt sind. Hier spielt ebenfalls die Empfehlung eine Rolle, die Zahl der zu verarbeitenden Informationen so klein wie möglich zu halten.

Zurückhaltende, klare Designs entlasten den Besucher. (Foto: Pexels)

Wenn es uns nun gelungen ist, den Besucher über die Phase des Ultrakurzzeitgedächtnisses hinweg zu behalten, muss es darum gehen, über hirnfreundliches Webdesign eine dauerhafte Bindung zu erzeugen, also ins Langzeitgedächtnis zu wechseln. Der klassische Weg dorthin führt über wiederholte Anwendung und konzentrierte Anstrengung. Beides erfordert Willensanstrengung seitens der Zielperson. Dafür können wir schwerlich sorgen.

Natürlich ist es möglich, mit einem sehr klaren und übersichtlichen Design unterschwellig den Effekt der Wiederholung zu aktivieren und uns so ins Langzeitgedächtnis des Besuchers zu „mogeln“. Die konzentrierte Anstrengung hingegen werden wir gar nicht triggern können.

Es gibt glücklicherweise einen weiteren Weg, das Langzeitgedächtnis zu entern. Der führt über Emotionen. Wenn es Ihnen gelingt, mit ihrem Design fundamentale Emotionen zu aktivieren, ist die Chance groß, nachhaltig in Erinnerung zu bleiben. Das Problem an Emotionen ist, dass es eine breite Grauzone gibt, in der Menschen auf den gleichen visuellen Reiz emotional völlig unterschiedlich reagieren. Sie müssten also unmissverständliche Akzente setzen, wären dann aber auch in Extremen unterwegs. Ich fühle mich da nicht so wohl und unterlasse es daher, klar an Emotionen zu appellieren.

Nicht ignorieren sollten Sie allerdings den Faktor „Emotion“ da, wo es um die Emotionen geht, die ihr UX-Design hervorruft. Eine schlechte Nutzererfahrung führt zwar dazu, dass ihre Seite schnell in Vergessenheit gerät. Das dumpfe Gefühl der schlechten Erfahrung hält sich jedoch lange. Umgekehrt kann eine positive Nutzererfahrung dafür sorgen, dass Besucher gern und oft zurückkehren, weil es etwa Spaß macht, ihre Seite zu besuchen oder weil sie besonders schön gestaltet ist. Die Möglichkeiten sind da vielfältig.

Links zum Thema

  • How Human Memory Works: Tips for UX Designers. | UX Planet
  • Short-Term Memory and Web Usability | Nielsen Norman Group
  • Die Ebenen des Gedächtnisses | Gehirn und Lernen
  • Die Psychologie der Farben in Marketing und Branding | Dr. Web
  • Psychologie im Design: Diese 5 Tipps helfen Ihnen bei besserem Interaction-Design | t3n
  • Design principle: IKEA effect | UXDesign.cc
  • 7 Proven Cognitive Biases (And How They Impact Your Design) | Sitepoint

Webdesign-Trends: Flat Design kann teurer sein als Sie denken

Nanu? War Flat Design nicht das Beste seit Bier in Dosen? Eine neue Studie der Nielsen Norman Group zeigt, dass das Gegenteil der Fall sein kann.

Sind Sie Designer? Dann werden ihnen die Ergebnisse der neuen Studie zum Thema Flat Design möglicherweise weh tun. Es hilft sicher, wenn Sie sich bewusst machen, dass Webdesign keine Kunst-, sondern eine Kommunikationsform ist. Richtig ist, womit Sie den Besucher erreichen, nicht, wofür Sie den meisten Applaus auf Dribbble erhalten.

Die guten alten Zeiten

Blauer, mit einem Strich unterlegter Text, das war früher ein Link. Zugegeben, das ist nicht schön, aber deutlich erkennbar.

Schaltflächen sahen früher monumental aus. Dicke Knöppe mit wenig subtiler 3D-Anmutung prangten auf den Websites. Heutzutage sind Ghost-Buttons schick. Denen sieht man ihre Knopf-Funktionalität nur dann an, wenn man Ghost-Buttons als solche erkennen kann. Eine dünne Linie umrahmt einen mehr oder weniger knackigen Text. Meist hat der Ghost-Button einen transparenten Hintergrund. Was er heutzutage aber nie hat, ist eine knackige 3D-Anmutung, eine fast schon aufdringliche Optik. Im Gegenteil wird versucht, den Button optisch mit dem Hintergrund zu verschmelzen.

Wer sieht den Button zuerst? (Screenshot: Dr. Web)

Auch andere UI-Elemente, wie Tabs, Slider, Formularelemente, wurden ihrer herausgehobenen Optik beraubt und in das ästhetisch angenehme Flat Design überführt. Selbst bei der Farbgebung einer Website setzen echte Designer auf harmonische Symmetrien und nicht auf plumpe Akzentuierungen.

Das ist alles sehr schön anzusehen und galt daher als State of the Art. Jedoch, die Nielsen Norman Group (NN/g) hat sie sich mit der Frage befasst, ob und wie der Flat Webdesign-Trend Besucher zum Ziel führt. Die Ergebnisse sind eindeutig.

Klar zielorientierte Websites sollten nicht subtil sein

In einem sehr ausführlichen und aufwändig bebilderten Beitrag kommt Kate Meyer von NN/g zu dem Ergebnis, dass Flat Design weniger Aufmerksamkeit erzeugt und sogar Unsicherheiten verursacht. Schwere Kost. Das kann ja nun wahrlich kein Designer wollen.

Untermauert wird die Erkenntnis vor allem durch Beobachtungen, die durch den Einsatz von Eyetracking-Technologie gewonnen wurden. Hierzu setzte die NN/g verschiedene Focus-Groups vor den Computer und versah sie mit konkreten Aufgaben, die es dann zu erledigen galt. Die Zeit, die es bedurfte, die jeweilige Aufgabe zu bewältigen, wurde ebenso gemessen, wie alle Aktionen, die die Nutzer auf dem Weg dahin unternahmen.

Dabei stellte NN/g jeweils zwei Versionen der an sich gleichen Website zur Verfügung. Eine, die im Stile des Flat Design ästhetisch einwandfrei gestaltet, also vor allem schön war. Und eine, die eindeutiger die Interaktionselemente hervorhob, etwa mit blau unterstrichenem Text oder deutlichen Schaltflächen. Auch mit Farbe experimentierten die Forscher, indem sie etwa einzelne Farben ausschließlich für interaktive Elemente verwendeten.

Das eindeutige Ergebnis war, dass die Testpersonen stets deutlich länger benötigten, um die gegebene Aufgabe zu erfüllen, wenn sie es mit Flat Design zu tun bekamen, während die auffälligeren Signale konventionellen Designs dazu führten, dass die Testperson schneller ans Ziel gelangte.

Die Testpersonen waren nun darauf angesetzt, den Task auf jeden Fall zu beenden. Der normale Website-Besucher ist nicht so hartnäckig. Der könnte sich schneller zur Konkurrenz aufmachen, als Sie denken. Und dann kostet ihr Flat Design richtig Geld.

Für kommerziell orientierte Websites lässt sich daraus durchaus ein eindeutiger Schluss ziehen: Wenn ihre Website Geld verdienen soll, dann darf sie nicht subtil sein.

Übertreiben sollten wir es aber auch nicht

Müssen wir nun also zurück zu den Anfängen des Web? Ist es unter dieser Erkenntnis nicht sogar geboten, Schaltflächen wieder blinkend zu gestalten und wichtigen Text als Ticker über die Seite laufen zu lassen? Machen wir den Kaufen-Button am besten Neongrün und animieren ihn?

Das ist glücklicherweise nicht erforderlich. Denn NN/g fand im Rahmen der Studie ebenso heraus, dass es einen Grenzbereich gibt, in dem Flat Design und konventionelle Ansätze zu keinen signifikanten Unterschieden führen. Daraus leiten die Usability-Forscher einige Empfehlungen ab:

  • Die Informationsdichte pro Seite sollte maximal im moderaten Bereich liegen. Wenn der Nutzer nicht von Textwüsten erschlagen wird, findet er sich leichter zurecht. Dabei ist es gut auf White Space, also Freiflächen, zu setzen, damit einzelne Elemente immer auch als einzelne Elemente erkennbar bleiben.
  • Experimentieren Sie nicht mit ungewöhnlichen Layouts. Nutzer finden Interaktionselemente leichter, wenn sie sich an bekannten Stellen befinden. Dies erinnert mich schwer an „Don’t Make Me Think“. Hierzu gehört auch der Aspekt der Konsistenz ihrer Designs.
  • Setzen Sie auf hohe Kontraste der zu benutzenden Elemente gegenüber deren Umgebung. So können Sie etwa Schaltflächen einen knackigen Farbeindruck verpassen, der dem Effekt eines dicken 3D-Knopfs ebenbürtig ist. Generell gilt, dass funktionswichtige Elemente stets mit deutlichem Kontrast zum Rest des Designs ausgestattet werden sollten.
  • Anstelle des zumeist unpassenden blau unterstrichenen Textes als Link-Kennzeichner, können Sie farblich abgesetzte Texte ohne Unterstreichung wählen. Entscheidend ist, dass die eingesetzte Farbe einen deutlichen Kontrast zum Fließtext erhält.

Beitragsbild von Stugbear auf Dribbble

Dies ist ein Kompendium an Artikeln, die unserer ehemaliger Chefredakteur Dieter Petereit über die Jahre zum Thema Webdesign geschrieben hat.

Low-Poly-Trend: Sechs freie Generatoren für Hintergründe und Bilder

Immer mehr Websites folgen dem Low-Poly-Trend und setzen ihn ein, um Hintergründe und Bilder verfremdet darzustellen. Im Prinzip ist der Trend schnell geklärt: Er ähnelt dem klassischen Mosaikeffekt mit dem Unterschied, dass statt quadratisch angeordneter farbiger Flächen Polygone unterschiedlicher Form platziert werden. Da meist dreieckige Formen verwendet werden, ist auch von Triangulation die Rede. Im Folgenden stellen wir einige Generatoren und Werkzeuge vor, mit denen sowohl abstrakte Low-Poly-Hintergründe als auch aus Bildern erstellte Low-Poly-Grafiken erzeugt werden können.

„Trianglify“: Ein einfacher Hintergrundgenerator

low-poly_trianglify


Mit „Trianglify“ lassen sich einfache Low-Poly-Hintergründe per Knopfdruck erstellen und als SVG-Datei herunterladen. Die Farbe wird bei jeder Generierung zufällig ausgewählt. Über eine Steuerung gibt es die Möglichkeit, die Größe der Dreiecke sowie deren Verteilung einstellen. Außerdem steht ein Rauscheffekt zur Verfügung, der über das Bild gelegt werden kann. Für das eilige Erstellen schneller Hintergründe ist „Trianglify“ die richtige Wahl.

„triangulate images“: Bilder in Low-Polys umwandeln

low-poly_triangulate-images


Mit „triangulate images“ werden hochgeladene Bilder mit dem Low-Poly-Effekt versehen. Über mehrere Schieberegler lassen sich die Anzahl der Polygone sowie die Detailtreue einstellen. Ein „randomise“-Button sorgt dafür, dass die Einstellungen zufällig ausgewählt und angewendet werden. Das Ergebnis steht anschließend zum Download als PNG- oder SVG-Datei bereit. Bei letzterer hat man entsprechend noch die Möglichkeit, die Grafik in einem Vektorprogramm zu bearbeiten.

„I ♥ ∆“: Offline-Tool für Low-Poly-Grafiken

low-poly_i-love-triangles


Unter dem Namen „I ♥ ∆“ verbirgt sich ebenfalls ein Werkzeug, welches Bilder in Low-Poly-Grafiken umwandelt. Hier muss man allerdings selbst Hand anlegen. Nachdem ein Bild importiert wurde, klickt man mit der Maus für jeden Punkt, der für ein Dreieck gesetzt werden soll, ins Bild. Auf diese Weise entsteht ein sehr individuelles Low-Poly-Bild, bei dem man selbst entscheidet, wie groß die Dreiecke jeweils sein und wie sie angeordnet sein sollen. Auch nachträglich lassen sich einmal gesetzte Punkte einzeln verschieben.

Wem das doch zu viel Aufwand ist, kann sich auf einen Schlag 25 Punkte zufällig im Bild verteilen lassen. So ist der Weg zum Ergebnis nicht ganz so aufwändig. Die Grafiken stehen auch hierbei als SVG-Datei zur Verfügung.

Obwohl „I ♥ ∆“ per HTML und JavaScript realisiert ist, steht das Tools als Download bereit und wird offline im Browser betrieben.

„DMesh“: Teils kostenpflichtige klassische Anwendung

low-poly_dmesh


Ebenfalls für den Offlinebetrieb ist „DMesh“ gedacht. Hierbei handelt es sich jedoch um eine klassische Desktopanwendung für Windows und Mac. Neben einer kostenlosen Variante, die einen eingeschränkten Funktionsumfang bietet, gibt es eine Pro-Version für 10 US-Dollar. In der freien Version gibt es leider keine Möglichkeit, die Dichte der Punkte und die Anzahl der Dreiecke zu steuern. Allerdings steht ein Radiergummi bereit, mit dem nachträglich die Anzahl der Dreiecke für bestimmte Bereiche reduziert werden kann.

Exportiert werden die Low-Poly-Bilder als Bitmap, PDF- oder als Wavefront-OBJ-Datei. Wer Low-Poly-Bilder unterwegs generieren möchte, kann sich „DMesh“ auch als App fürs iPhone herunterladen. Ich wüsste nicht wozu, aber -- gut -- jedem das seine…

„Image Triangulator App“: Java-App für den Desktop

low-poly_image-triangulator-app


Die letzte Desktopanwendung im Bunde ist die „Image Triangulator App“, die auf Java basiert und ebenfalls für Windows und Mac erhältlich ist. Sie ist kostenlos und erstellt Low-Poly-Bilder mit einer variablen Anzahl an Punkten und Dreiecken. Exportiert werden die Bilder als PDF-Dateien.

Für optimale Ergebnisse besteht die Möglichkeit, Punkte manuell zu setzen. Die gesetzten Koordinaten der Punkte können exportiert und für andere Grafiken wieder importiert werden.

Weitere Tools

Neben den vorgestellten Generatoren stellen auch andere Tools die Möglichkeit dar, Low-Poly-Bilder zu erstellen. Dazu gehören die hier bereits vorgestellten JavaScript-Bibliotheken „Snap.svg“ und „seen.js“, die Polygone als Basis zur Erstellung von für 2D- und 3D-Objekten nutzen.

Links zum Beitrag

13 Antworten

  1. Apropos Webdesign: Ich sehe mir diese Seite auf einem 27″-Monitor an und der Text ist ein langer, schmaler Schlauch mit gigantischen Abständen zu den Seiten. Ich find´s unschön und unpraktisch. Man kann den Mobil-Wahn auch übertreiben …

    1. Hallo Ati,

      Du hast recht. Auf einem großen Bildschirm sieht das momentan aus wie eine lange Rolle… Nach dem Konsolidieren unseres besten Contents (und einer Riesenlöschaktion) kommt das Thema Content-Präsentation auf den Schirm.

      Liebe Grüße

      Michael

    2. Hi, wenn die Schrift auf 100% oder auch nur 2x so breit laufen würde, wäre das vom Lesefluss aber auch nicht gut. Das Auge verliert sonst schnell die Orientierung wenn man die Zeile wechselt. Ich finde es daher so genau richtig. 🙂

      LG
      Adrian

    1. Ja, so statisch wie in seiner Bedürfnisse-Pyramide geht es im wahren Leben nicht zu; wie das nun einmal so ist mit den Modellen. Trotzdem lassen sich aus Modellen nützliche Schlüsse ziehen.

  2. Danke für diese wunderbare Zusammenfassung. Einige Dinge hab ich endlich mal verstanden;)

    Ich lese im übrigen immer gerne bei euch mit, auch wenn ich nicht zur Designer-Zunft gehöre!
    Herzliche Grüße
    Irene Dietrich

    1. Zünfte werden ja eher, trotz närrischer Jahreszeit, überschätzt 🎎 Freut uns, dass Sie hier ab und an etwas Nützliches für ihre Firma finden.

  3. Vielen Dank für den informativen Artikel. Auf einem PC Monitor ist der Text schon echt lang. Auf einem Smartphone sind solche Texte kein Genuss, auch wenn Sie inhaltlich gut sind.

    Bei der Umsetzung von Trends kommt es doch aber vor allem auf die Zielgruppe und Zielsetzung der Website an.

    Viele Grüße
    Michael Mand

    1. Hallo Herr Mand,

      dieser Artikel umfasst mehr als 10.000 Worte. Wer den, und noch dazu mobil, komplett durchliest, hat einen Leserorden erster Klasse verdient! Jo, die Wahl des Designstils von der Zielgruppe herzuleiten ist genau der richtige Ansatz.

      Herzlich

      Michael Dobler

Schreibe einen Kommentar

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

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.