Ein Beitrag von Martin „Rossi“ Rosskopf.

In allen Agenturen, in denen ich bisher gearbeitet habe, musste bei jedem Website-Projekt in schweißtreibender Arbeit das Rad neu erfunden werden: Welche Bestandteile gibt es? Welche davon setzen wir ein? Dabei schreiben wir bereits das Jahr 2017. Mittlerweile sollte klar sein, dass sich praktisch jede Webseite aus den gleichen Bestandteilen zusammensetzt. Mal sind es mehr, mal weniger. Mal sind sie rund und bunt, dann wieder kantig und grau.

Ganz schön viele Möglichkeiten also. Und da kommt Twitters Bootstrap ins Spiel. Jeder, der schon mal an einer Website gearbeitet hat, sollte sich zumindest einmal mit diesem Framework auseinandergesetzt haben. Bei Bootstrap geht es in erster Linie darum, all diese faszinierenden Möglichkeiten des Webs durchzuspielen. Das schafft eine gemeinsame Basis, welche die Zusammenarbeit von Designern und Entwicklern immens vereinfacht. Mögliche Fragen oder Unklarheiten werden bereits im Vorfeld weitgehend beseitigt. Das spart nicht nur Zeit und Nerven, sondern auch teilweise eine nicht zu unterschätzende Summe an Budget. Und das Beste ist: Das Produkt funktioniert am Ende auf allen Endgeräten.

Ein Beispiel aus dem Design-ABC

Du hast ein Eingabefeld, also lege das Design fest.
Abgerundete Ecken oder Linienstärke, Farben, Typo und alles was dazu gehört.

/ Aber hast du auch an das Design des inaktiven Feldes gedacht?
/ Oder auch an das Feld, das eine Fehlermeldung ausgibt?
/ Hast du auch an den Tooltip gedacht, der das Feld beschreibt?
/ Gibt es einen Hover-Zustand oder ein „Fertig und korrekt“-Icon?

Und nun habe ich mit diesen paar Fragen nur ein klassisches Eingabefeld beschrieben, welches auf fast jeder Webseite zum Einsatz kommt. Diese Fragen wird Dir Dein Frontend-Entwickler definitiv auch stellen, also werde nicht gleich nervös …

Mehr Design – weniger technischer Kleinkram

Eingabefelder sollten auf einer Webseite alle gleich funktionieren, egal ob du Deinen Namen oder Deine Telefonnummer eingeben musst.
Stell Dir vor, Du hast in einer agilen Entwicklungsumgebung alle diese Felder schon definiert – mit der Definition eines einzigen Feldes.
Die Arbeit liegt also in der Informationsarchitektur und Du lehnst Dich als Designer/-in entspannt zurück und/oder kannst Dir mehr Gedanken über beispielsweise Motion-Usablility und Micro-Animations machen.

Viel Spaß beim Schmökern: atomicdesign.bradfrost.com oder anschauen: vimeo.com/67476280

Brad Frost hat das ganze übrigens noch mal auf den Punkt gebracht. Ursprünglich und für noch tiefere Informationen würde ich Euch The Haystack von Stephen Hey empfehlen, auch per Video.

Liebe Grüße
Rossi

Der Autor

Martin Rosskopf