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.
