Design direkt im Browser – schneller, direkter, effizienter
Design im Browser ist eigentlich nichts Neues – schon lange arbeiten Entwickler direkt mit HTML, CSS und JS, um Layouts zum Leben zu erwecken. Daneben haben sich Tools wie Sketch oder Figma etabliert, weil sie mächtige Funktionen für Kollaboration, Prototyping und Abstimmung bieten. Beide Methoden haben ihre Vorteile bei der Erstellung von Designs: Sketch oder Figma spielen ihre Vorteile insbesondere bei sehr großen Projekten in Teams und bei der Abstimmung mit Kunden aus. Bei kleinen und mittleren Projekten hat das Gestalten im Browser deutliche Vorteile: Änderungen sind sofort sichtbar, die Pixelgenauigkeit stimmt und man gestaltet direkt in der Umgebung, in der das Produkt später auch genutzt wird – ohne Umweg über ein statisches Design-Tool. Der Code kann zudem direkt verwendet werden.
Task Runner wie Gulp und Grunt
Gulp oder Grunt waren beim Gestalten im Browser lange die Werkzeuge der Wahl. Sie automatisierten Aufgaben wie das Kompilieren von Sass, das Zusammenführen von Dateien oder das Neuladen des Browsers. Zwar machten sie die Arbeit strukturierter, aber die Weiterentwicklung dieser Tools ist inzwischen ins Stocken geraten – die Zukunft von Gulp und Grunt wirkt unklar.
Gulp Demo zur Entwicklung eines statischen Website Templates.
Build-Tool Vite
Mit Vite ist bereits seit einigen Jahren ein Tool da, das weit mehr ist als ein Taskrunner. Es ist in erster Linie ein modernes Build-Tool, das beim Arbeiten mit Frameworks wie Vue, Svelte oder React kaum noch wegzudenken ist. Damit ist Vite bestens bekannt und eignet sich auch als “einfacher” Taskrunner-Ersatz – etwa für schnelles Styling, prototypisches Arbeiten oder eben Design im Browser.
Vite Demo zur Entwicklung eines statischen Website Templates.
Fazit
Wer Designs im Browser entwickelt, spart den Übersetzungsschritt, sieht das Ergebnis sofort und kann den Code direkt verwenden. Ein Gegensatz zu Tools wie Figma oder Sketch muss das aber nicht sein, denn je nach Projekt ergänzen sich beide Wege – vom Entwurf im Design-Tool über den Code-Export als Startpunkt bis zum Feinschliff im Editor/Browser. Entscheidend ist nicht das einzelne Werkzeug, sondern ein Vorgehen, bei dem Entwurf und Umsetzung ineinander übergehen. Welcher Weg sich anbietet, hängt dabei auch von den Fähigkeiten im Team ab: Das Gestalten im Browser setzt gute Kenntnisse in HTML, CSS und JavaScript voraus.
