{"id":973,"date":"2016-08-12T10:04:44","date_gmt":"2016-08-12T08:04:44","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=973"},"modified":"2016-08-12T10:04:44","modified_gmt":"2016-08-12T08:04:44","slug":"buttons-design","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/buttons-design\/","title":{"rendered":"Die Evolution von Buttons im Web Design"},"content":{"rendered":"

Buttons sind ein kleines interaktive Element im Design-Prozess. Jeden Tag werden sie hundertfach von Usern angeklickt. Auch auf diesen Artikel sind Sie ziemlich wahrscheinlich durch den Klick auf einen Button gesto\u00dfen. Mit der Ver\u00e4nderung von Web Design, haben sich auch Buttons weiterentwickelt. Und um diese Weiterentwicklung geht es in unserem heutigen Artikel.<\/p>\n

Worum es bei dem Design von Buttons geht, ist recht einfach: Buttons m\u00fcssen als solche erkannt werden, damit der User sie intuitiv anklickt.<\/p>\n

In diesem Artikel gebe ich zuerst einen \u00dcberblick, wie sich Button Design ver\u00e4ndert hat und erkl\u00e4re dann, wie man moderne Web Buttons erstellt. Los geht\u2019s!<\/p>\n

<\/p>\n

Die Evolution von Button Design<\/h2>\n

Buttons gibt es schon sehr lange. Denken Sie einfach einmal an die folgenden Produkte und Anwendungsf\u00e4lle.<\/p>\n

\"buttons-everywhere\"<\/p>\n

Die Evolution von Webdesign und die Rolle von Buttons<\/h2>\n

Schon immer wurden Buttons als interaktive Elemente verwendet. Mittels Farben und Schatten versuchten Webdesigner eine Unterscheidung zwischen Buttons und anderen Content Elementen zu erzeugen.<\/p>\n

Der Button an sich ist aus Design-Perspektive recht einfach: Man braucht einen Rand, Schatten und einen Text: Fertig! Der Button hebt sich vom Hintergrund und dem restlichen Content ab. User haben l\u00e4ngst gelernt, dass sich dahinter Content verbirgt.
\n\"buttons-apple-website\"<\/p>\n

(Buttons auf Apple.com im Jahr 1999)<\/i><\/p>\n

Skeuomorphismus im Button Design<\/h2>\n

Skeuomorphism ist die \u00dcbertragung von physischen Produkten ins digitale Zeitalter. B\u00fccher-Apps sehen manchmal aus wie B\u00fccher-Regale, Taschenrechner-Apps wie Nachbildungen eines Taschenrechners.<\/p>\n

Im Webdesign werden also physische Elemente in UI Elemente auf einer Website \u00fcbertragen.
\n\"skeuomorphic-button-design-website\"<\/p>\n

Wenn es um Button-Design geht, ist Skeuomorphismus eine sichere Wahl f\u00fcr Webdesigner und Entwickler. Onboarding-Kosten k\u00f6nnen so minimiert werden und neue User f\u00fchlen sich direkt vertraut, einfach, weil das Design attraktiv ist.<\/p>\n

Moderne Button-Formen – von Schatten bis zu Flat Design<\/h2>\n

Vielleicht erinnern Sie sich noch an die fr\u00fchen Tage des Webdesigns, an denen Designer mit Schatten spielten? Damals waren sie \u00fcberall: in Headlines, Bildern und sogar in Buttons. Schattens wurden verwendet, um den Unterschied zwischen Elementen herauszustellen.<\/p>\n

\"apple-buttons-website\"<\/p>\n

Sogar Apple.com benutzte Schatten vielfach, um 3D Effekte zu erstellen und interaktive und nicht-interaktive Elemente von einander abzugrenzen.<\/p>\n

Mit der Zeit wurden Farben im Webdesign immer wichtiger. Und das betraf auch Buttons.<\/p>\n

\"click-me-button\"<\/p>\n

Flat Buttons<\/i><\/b><\/p>\n

Mit dem derzeitigen Flat Design Trend <\/a>\u00a0wurden Schatten und 3D Effekte weniger beliebt unter Webdesignern und UI Experten.<\/p>\n

\"click-me-button-flat\"<\/p>\n

Flat Web Design macht Websites leichter und erlaubt Designern, Ihren Horizont zu erweitern. Dabei geht es nicht l\u00e4nger darum, real-life-Elemente in die digitale Welt zu \u00fcbersetzen, sondern darum, leichte Designs zu erstellen.<\/p>\n

Googles Design-Sprache ist ein gutes Beispiel f\u00fcr Flat Design.<\/p>\n

Ghost Buttons<\/i><\/b><\/p>\n

Ghost Buttons erh\u00f6hen die Funktionalit\u00e4t einer Seite und stellen gleichzeitig sicher, dass die UX nicht zu \u00fcberw\u00e4ltigend wird. Wenn man \u00fcber einen Ghost Button f\u00e4hrt oder \u00fcber ein Bild, wird dieser sichtbar und der User kann f\u00fcr weitere Informationen auf diesen klicken.<\/p>\n

Ghost Buttons k\u00f6nnen im Normal-Status transparent sein und farbig werden, wenn man dr\u00fcber f\u00e4hrt.<\/p>\n