Neues UI im Webflow Designer

Das neue UI im Designer und die Reaktionen darauf zeigen mir vor allem eines: Nichts is schwieriger, als ein Tool, das tausende Leute täglich nutzen, so zu verbessern, dass nachher alle happy sind. Das kennt man auch von Redesigns beliebter Websites. In diesem Artikel gehe ich darauf ein, was mir gefällt, was mich stört und was sich kurzfristig anpassen lässt.

So schwierig es ist, alle zufriedenzustellen, so leicht ist es auch von außen, das fertige UI zu kritisieren. Auch wenn ich ahnen kann, wie viel Arbeit in so ein UI Design fließt und wie viel Mühe sich die Designer:innen geben, kann ich aber nicht verhehlen, dass ich insgesamt mehr enttäuscht als begeistert bin, aber der Reihe nach.

Der erste Blick - schick

Die meisten Elemente sind an ihrer gewohnten Stelle geblieben, ich finde mich nach wie vor gut zurecht. Darüber hinaus wurde versucht, die Komplexität des Designs zu reduzieren. Das UI wirkt weniger verschachtelt und präsentiert sich stärker im Flat Design. Schnell wird klar, dass das neue UI von Figma inspiriert ist. Das ist kein schlechter Schachzug, weil viele Webdesigner mit Figma arbeiten und so direkt vertraute Elemente wiederfinden. Ebenso sorgt das dafür, dass das UI insgesamt wesentlich ruhiger wirkt. Das Style-Selector-Reiter ist auf die linke Seite gewandert, wo er gut aufgehoben ist, weil ich ihn dort genauso wenig nutze wie vorher. Das schafft rechts oben den Platz, statt Icons die Begriffe »Style«, »Settings« und »Interactions« auszuschreiben. Für Neulinge sicher hilfreich, aus meiner Sicht aber weniger prägnant als die bisherigen Icons.

Der zweite Blick – Auweia

Leider war’s das schon mit meinen positiven Eindrücken. Denn leider werden die guten Ansätze von gravierenden Problemen überlagert. Insgesamt habe ich das Gefühl, das man versucht hat, etwas schickes zu machen und dabei den praktischen Nutzen aus den Augen verloren hat. Vladimirs Leibgams bringt es im Forum gut auf den Punkt:

It looks like they decided to make a stylish design, but completely forgot that this is a working tool and about usability.

Konkret manifestiert sich das in folgenden Bereichen:

• Die Schriftgröße ist zu klein (11.5px !?)
• Die Strichstärke ist nicht fett genug, die Schrift wirkt brüchig und schlecht lesbar, vor allem auf Bildschirmen in normaler Auflösung (1x)
• Die Icons. Oh weh. Sie sind zu klein, zu dünn, haben zu wenig Kontrast und wirken einfach nur brüchig und teilweise unprofessionell. Bei iOS (damals bei iOS 7!) und Android haben die Verantwortlichen schnell gemerkt, dass diese 1px-Outline-Icons im UI nicht gut performen, und das entsprechend korrigiert, am Mac ebenso. Wenn schon 1px, dann bitte auch pixel-perfekt und mit mehr Kontrast.
• Die Icons in der linken Spalte sind zudem viel zu komplex. Nicht nur Outlines, sondern teilweise flächige Elemente, die die Icons teilweise matschig wirken lassen.
• Der Hintergrund des gesamten UIs ist zu dunkel. Der Kontrast zu Schriftfarbe und Icons zu gering.
• Input-Felder haben nun eine helle Outline, das hätte man auf Hover beschränken können, siehe Figma.
• Alles ist sehr eng zusammengequetscht. Hier hätte man gerne etwas mehr Luft zumindest in der Vertikalen geben können. Das bisschen mehr Scrollen wäre es mir Wert gewesen.

Man sieht dem UI förmlich an, dass es auf hochauflösenden Monitoren entwickelt wurde. Mac Studio Display, ick hör’ dir trapsen. Hier sieht das ganze auch schick aus. Moderne High-Res-Bildschirme sind hell genug, die Auflösung prima. Aber auch hier besteht das Problem, dass alles viel zu klein ist. Gut hingegen funktioniert das UI auf meinem Laptop und auf meinem iPad. Hier sind Bildschirmgröße und UI-Größe gut aufeinander abgestimmt.

Und jetzt?

Mich hat der dunkle Hintergrund so sehr gestört, dass ich erst mal die Monitor-Helligkeit hochgeschraubt habe. Dann hab ich den Arc-Browser installiert (Mac-only). Damit kannst du das Aussehen jeder Website verändern. Für Webflow gibt es ein vorgefertigtes Boost, dass die Helligkeit des Hintergrunds an die von Figma anpasst:

https://arc.net/boost/12122955-4A30-4DCC-8CEC-1E705C2F396C

Damit habe ich parallel Arc als neuen Browser für Webflow für mich entdeckt. Denn hier kann ich Tabgruppen erstellen und Website nebeneinander platzieren. Sprengt hier den Rahmen, aber googelt mal nach den vielen Möglichkeiten, die der Browser bietet.

Dann gibt es im Webflow Forum einen Thread zum Thema UI:

https://discourse.webflow.com/t/feeling-on-the-new-webflow-ui/256769

Hier könnt ihr niederschreiben, was auch am neuen UI nicht gefällt oder fehlt. Die Webflow-Crew hat bereits reagiert und hört hin. Ein gutes Zeichen.

Fazit

Ein so umfangreiches UI-Redesign im stillen Kämmerlein zu entwickeln, ist keine gute Idee. Man hätte die Community frühzeitig einbinden und eine ausgedehnte Beta-Phase anbieten sollen. Das verhindert nicht, Leute unglücklich über die Änderungen zu machen, aber größere Patzer wären vorher ausgemerzt worden. Zum Beispiel das Verstecken des »Undo«-Buttons, worüber es viele Beschwerden hagelte.

Auf der anderen Seite sollten wir das Redesign im Zusammenhang mit den vielen coolen Features betrachten, die Webflow angekündigt bzw. auch schon implementiert hat. Hier ist es schon beachtlich, was das Team auf die Beine stellt, gerade, weil sie auf so vielen Hochzeiten tanzen. Eingeordnet in diesen Stapel neuer Features wiegt das UI-Problem nicht mehr ganz so schwer. Um diese Features wird es im nächsten Artikel gehen. Stay tuned.

‍