Frameworks

Divshot: Noch schnelleres Rapid Prototyping mit Bootstrap

13. Dezember 2012
von

Twitters Bootstrap eignet sich zum schnellen Entwerfen responsiver Website-Prototypen, was die stetig steigende Beliebtheit des Frameworks erklärt. Wie aber wäre es, wenn man das ohnehin schon hohe Tempo, mit dem man mit Bootstrap funktionsfähige Designs erstellt, noch einmal anheben würde? Genau dieser Aufgabe widmet sich die brandneue Web-App Divshot, die derzeit im Stadium einer Public Beta verfügbar ist und kostenlos verwendet werden kann.

Divshot: Drag and Drop mit Bootstrap

Divshot ist ein WYSIWYG-Editor, der auf Bootstrap aufsetzt. Wie die Gründer Michael Bleigh und Jake Johnson erklären, ist Bootstrap nur die erste Unterlage für den Start des Dienstes. In der Zukunft will Divshot weitere Frameworks, allen voran Zurbs Foundation unterstützen. Man könnte sich dann zu Beginn des Prozesses aussuchen, mit welchem Framework man arbeiten will. So weit ist es noch nicht. Aktuell kann ausschließlich Bootstrap verwendet werden.

Wie erwähnt befindet sich Divshot derzeit in offener Beta und kann kostenlos genutzt werden. Bislang gibt es keinerlei Informationen zum zu erwartenden Preismodell oder zu der Frage, wie lang die offene Betaphase dauern wird. Die Betreiber versprechen dabei immerhin, dass niemand auf die bis dahin erstellten Prototypen verzichten wird müssen. Aktuell finanziert sich das Projekt über Seed Funding einzelner Investoren.

In Divstrap wird sich jeder Designer sofort heimisch fühlen, der bereits mit Tools wie Dreamweaver gearbeitet hat. Eine Website wird per Drag and Drop zusammengestöpselt. Die Maus ist das wichtigste Werkzeug. Die Detaildefinition erfolgt objektorientiert über seitlich angezeigte Optionsdialoge.

Die ersten Schritte erfolgen intuitiv. Divshot gibt keine Rätsel auf. Nach der Anlage eines Folders, also dem künftigen kompletten Projekt, werden einzelne Seiten angelegt, die auf der Basis verschiedener Templates oder komplett from scratch gestaltet werden. Die einzelnen Komponenten, also Designelemente zieht man mit der Maus an die entsprechende Stelle im Layout. Da Bootstrap responsiv ausgelegt ist, erfolgt natürlich keine pixelgenaue Positionierung.

Ist man mit dem Layout fertig, lässt sich dieses als HTML exportieren, in einem separaten Fenster als Preview anzeigen und auch auf der Basis vordefinierter Viewports für mobile Geräte beurteilen.

Divshot und das Customizing: flexibel

Divshot ist insbesondere deshalb sehr flexibel, weil es dem Designer die Möglichkeit gibt, selbst Hand anzulegen. Man ist nicht auf die definierten Styles angewiesen, sondern kann über eigene Klassen und eigenes CSS das Layout exakt den eigenen Vorstellungen anpassen. In Sachen CSS unterstützt Divshot interessanterweise nicht nur die pure Variante, sondern arbeitet auch mit Preprocessors, etwa SASS und LESS zusammen.

Über sogenannte Themes bietet Divshot schicke Layoutvorschläge an, die auf manipuliertem Bootstrap-CSS beruhen. Das ist letztlich Geschmackssache, sowie eine Frage des persönlichen Könnens. Die Themes stammen von der Website Bootswatch, die es sich zur Aufgabe gemacht hat, freie Themes für Bootstrap zu sammeln und zum Download anzubieten. Da Divshot Bootswatch direkt integriert, würden etwaige weitere Themes auch direkt im Editor von Divshot verfügbar werden.

Insbesondere, aber nicht nur mit Blick auf die Themes muss es als Nachteil empfunden werden, dass Divshot ausschließlich HTML exportiert, dieses allerdings wie gemalt. Immerhin deuten die Betreiber an, künftig nicht mehr bloß den HTML-Quelltext bereitstellen zu wollen. Das spräche für eine offenere Handhabung und könnte sicherlich mehr Nutzer überzeugen.

Kann man Divshot nun empfehlen und wenn ja, wem? Meiner Meinung nach ist Divshot durchaus eine Empfehlung für alle Bootstrap-Verwender wert. Sicherlich richtet sich Divshot nicht an technische Newbies, dazu ist der Grad der Abstraktion zu gering. Ein Bootstrap-Experte muss man indes auch nicht sein.

Seine besten Dienste leistet Divshot im Rapid Prototyping, möglicherweise sogar in Anwesenheit des Kunden, mindestens aber, wenn ein Entwicklerteam beteiligt ist. Im Gespräch lässt sich relativ schnell das Gerüst der Anwendung zusammenstellen. Das ginge zwar mit Photoshop auch, erzeugte aber keinen weiter zu verarbeitenden Code und wäre nicht responsiv.

Eine kleine Video-Einführung erklärt das Konzept

Was meinen Sie? Wie sind Ihre Erfahrungen mit Bootstrap?

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!