TYPO3 Camp Rhein Ruhr 2015 – Recap 7: Eindrücke von der Vorderseite

Nachdem mir das TYPO3camp letztes Jahr so gut gefallen hat, war es für mich klar, dass ich dieses Jahr wieder dabei sein wollte. Zugegeben als Frontend-Devolperin bin ich letztes Jahr von dem Themen her mehr auf meine Kosten gekommen, aber die Veranstaltung an sich lohnt sich schon sehr. Schließlich trifft man dort viele interessante Menschen mit denen man sich auch außerhalb der Sessions über viele Interessante Themen unterhalten kann.

Während der erste Tag sehr im Zeichen von Security und Clean-Code, bzw Code-Quality stand, freute ich mich Sonntags in der Session-Planung darüber, dass eine Session zm Thema Gestaltung und Konzeption vorgeschlagen wurde.
So fanden wir uns dann in einer gemütlichen, nicht all zu kleinen Diskussionsrunde wieder.

Zu Beginn stand die Frage „Wie geht ihr ein neues Projekt an?“ im Raum. Schnell wurde klar, dass das klassische durchgestylte Layout im Photoshop nicht mehr die erste Wahl ist.
Es bringt die Probleme mit sich, dass kleine Änderungswünsche sehr viel Aufwand genieren, da sie dann in mehreren Dateien angepasst werden müssen. Außerdem ist diese Art der Gestaltung für Responsive-Webdesign etwas zu steif. Es lässt sich nicht einfach zusammenschieben, sondern es müssen mehrere Entwürfe in verschiedenen Breiten angelegt werden. Dies verwirrt Kunden, die sich oft die zwischenschritte nicht vorstellen können, oder überhaupt wie das Ergebnis dann im Browser aussehen könnte. Das wiederrum führt dann dazu, dass sie etwas enttäuscht sind, weil der Text doch irgednwie nicht genau so fließt, wie er im Layout zu sehen war.

Im Print funktionert das ja auch!

Als Frontend-Developer sieht man sehr schnell ob ein Layout von einem Webler oder einem Printler entworfen wurde.
Printler sind sich oft nicht darüber Bewusst, dass ein bestimmtes kleines Design-Element dem Entwickler sehr viel Zeit und Nerven sparen würde, wenn es nur ein klein wenig anders gestaltet wäre.
Printler kennen auch oft nicht alle Möglichkeiten die das Internet zu bieten hat oder aber überschätzen sie auch hin und wieder schon mal. Die Runde war sich doch schnell einig, dass die Unterschiede zwischen Print- und Web-Designern inzwischen doch gewachsen sind. Es sind für diese zwei Berufe unterschiedliche Fachkenntnisse von Nöten.

Trotzdem kommt es oft vor, dass ein Printler vor der Gestaltung einer Webseite steht. Was auch schon logisch ist, denn warscheinlich hat er sowieso das Corperate Design der Firma und somit alle anderen Werbemittel entworfen und die Seite würde somit aus einem Guss kommen. Damit hatten wir dann die zweite interessante Frage der Session: Wie bringt man eigentlich einem Printler Internet bei?

Zur Ausgangsfrage berichteten einige von ein paar neuen Methoden die sie ausprobierten. Eine Methode war, dass es nur grobe Vorgaben gab und der Entwickler bei seiner Arbeit selber improvisieren konnte wie die Elemente aussehen sollen. Hierzu benötigt man natürlich einen Entwickler mit gestalerichem Auge.
Ein weiterer Ansatz war gar nicht mehr das komplette Layout zu entwerfen, sondern einzelene Elemente (z. B. einen Button) und diese dann schon mit dem Kunden abzustimmen. Das brachte uns dann auf das Patterlab, einem Atomic-Design-System. Hier wird eine Seite durch einzelne Dateien generiert die sich nur mit den einzelnen Elementen einer Webseite befasst.
Es beginnt bei grundlegenden Elementen wie den Farben, übergehend zu Schriften, Schriftelementen… und von hier aus immer tiefer in das eigentliche Design. Schließlich fügen sich die einzelnen Elemente, die die Atome eines Layouts darstellen, zu Molekühlen zusammen. So wird aus einem Stück Schrift, einem Input-Feld und einem Button schon eine Suche wie man sie in jedem Kopfbereich einer Seite findet.

Zudem ist dieses generierte Template auch noch responsive und so lässt sich sofort sehen wie sich die Elemente in unterschiedlichen Browser-Breiten verhalten.

Eine Idee war auch auf Grundlage des Patternlabs Gestaltern von Print-Agenturen und Kunden die Funktionen des Internets näher zu bringen. Jo Hasenau (Entwickler der Extension „Themes“) sah hier die Möglichkeit Schulungen von der TYPO3-Community aus anzubieten.

Ich selber habe bereits erste Erfahrungen mit Patternlab gemacht und bin von dieser mir neuen Art zu Arbeiten sehr überzeugt. Es hält einen Design-Prozess (der sowieso entsteht) von Anfang an fest und ermöglicht so die Abstimmung mit dem Kunden.