Was ist AtomicKitchen? Dokumentation
Login
Kontakt
ENDE

Design to Code!

Wer als UX Designer dem Konzept von Design Pattern keine Beachtung schenkt, verschenkt viel Potential. Wer aber als Entwickler Code Pattern keine Beachtung schenkt kommt in Teufels Küche. Garantiert.

Pattern erleichtern die Arbeit von Designern und Entwicklern

Die meisten Frontends digitaler Lösungen werden immer noch "Template-basiert" erstellt. Dazu werden in der Regel Key-Templates, wie die Startseite, Übersichts- und Detailseiten mit denen darauf verwendeten Content-Elementen designt und dann umgesetzt. Sofern das Budget es zulässt wird zur Qualitätssicherung neben einem Developer-Handoff gegebenenfalls auch ein Styleguide oder eine UI-Dokumentation erstellt.

Diese Vorgehensweise ist weder effizient noch nachhaltig. Viel besser wäre es, im ersten Schritt ein «modulares Designsystem» zu entwickeln, welches dann im Anschluss Designer und Entwickler gleichermassen mit Bausteinen versorgt, mit denen sie dann – quasi via «Drag & Drop» eine Vielzahl von Templates und Anwendungen erstellen können.

Gleiches sollte gleich, Ungleiches ungleich behandelt werden

Das Konzept doppelte Arbeit zu vermeiden, indem man bei gleichen Problemen auf gleiche Lösungen setzt und dafür schon bereits erstellte und bewährte Komponenten verwendet, leuchtet so ziemlich jedem ein oder?

Dennoch treffen wir immer wieder Designer an, die behaupten ein Designsystem enge sie in ihrer Kreativität ein. Gerne möchten sie bei jedem Projekt das Rad neu erfinden und alles neu und ganz anders machen. Dabei konzipieren sie für identische Anwendungsfälle völlig unterschiedliche Lösungen. Wie kann das sein?

Für einige Probleme gibt es nur genau eine beste Lösung und die dürfen wir gerne mehrmals anwenden - das spart Zeit und Kosten und führt zu funktionierenden, erwartungskonformen Produkten.

Einen Profi kennzeichnet sich dadurch aus, dass er weiss, wo es sinnvoll ist, seine Zeit zu investieren, indem er sich nicht lange mit "No-Brainern" aufhält und überflüssige Arbeiten vermeidet, indem er gute Vorgaben übernimmt. Stattdessen widmet er seine ganze Aufmerksamkeit den wichtigen konzeptionellen Herausforderungen seines Projektes.

Eine codebasierte Pattern Library schliesst die Bruchstelle zwischen Design und Code

«Pattern» helfen die Bruchstelle zwischen Design und Code zu schliessen, welche gekennzeichnet ist durch Missverständnisse und zeitaufwendige Fehlinterpretationen. Es ist unerheblich ob hier der Designer oder der Entwickler oder beide nicht genügend kommunizieren, eine Interpretation von visuellen Vorlagen ist immer höchst subjektiv - kein Designer kann alle Ineraktions-Stati und responsiven Zustände aufzeigen, es sei denn er benutzt eine codebasierte Pattern Library :-)

Denn codebasierte Design Pattern stellen sicher, dass Designer und Entwickler unmissverständlich die gleichen Bausteine verwenden, die einen als Designkomponenten, die anderen als Code-Snippets.

Die Verwendung von Design Pattern führt zu einer deutlichen Aufwandsreduzierung und Steigerung der Designqualität

Aus unseren bisherigen Erfahrungen können wir sagen, dass man mit Hilfe einer «Design/Code Pattern Library» etwa 50% des Aufwandes sparen kann. Dadurch werden vormals kostenkritische Projekte realisierbar und man gewinnt mehr Zeit für weitere Produktverbesserungen.

Eine Aufwandsreduzierung ensteht vor allem in den Bereichen:

  • technische Realisierung des Frontends
  • Kommunikation Designer - Entwickler
  • beim Auftreten neuer Rahmenbedingungen oder Anforderungen
  • durch das Wegfallen aufwendiger Prototypisierungen
  • innerhalb der UX-Qualitätsicherung in der Post-Golive-Phase

Aber das Beste ist, dass Pattern nicht nur dabei helfen, Zeit und Geld zu sparen, sondern auch direkt zu einer höheren Designqualität führen, da die damit erstellten Arbeitsergebnisse durch die kohärent verwandten Bausteine viel konsistenter sind.

Ausserdem erhält man schon in einer sehr frühen Projektphase ein echtes «Look & Feel» der späteren Anwendung, da Benutzerinteraktionen wie beispielsweise Hover-Stati, aufspringende Akkordeons und Sticky-Elemente responsive beurteilt werden können. Das führt zu mehr Kontrolle und damit letztendlich auch zu mehr Qualität.

AtomicKitchen

Mit AtomicKitchen ist es nun möglich, ein pattern-basiertes atomares Designsystem auf Basis von HTML, CSS und Javascript Code zu erstellen. Probieren Sie es aus! Oder fragen Sie uns nach einer kostenlosen Demo-Session.

Aus einem mit AtomicKitchen erstellten Styleguide kann von jedem Designelement der Code entnommen werden.