Kategorien
Bilder & Vektorgrafiken bearbeiten Essentials Freebies, Tools und Templates Photoshop UI/UX

Marvel: Kostenloses Website-Prototyping für Photoshop-Dropboxer

Erstellen Sie Ihre Design-Prototypen mit Photoshop oder einer anderen Pixelschubse? Ich gebe zu, ich tue es. Und ich glaube kaum, dass sich das so schnell ändern wird. Der Kunde will immer zuerst einen grafischen Prototypen sehen. Der soll dann auch ein Stück weit funktionieren. Die neue Web-App Marvel kann diesen Prozess extrem beschleunigen. Wenn Sie Photoshop, Fireworks, Gimp oder was auch immer nutzen und Dropbox-Nutzer sind, sollten Sie dennoch nur dann weiterlesen, wenn Sie auch Websites erstellen…

marvelapp

Prototyping Online: Nicht ganz aufwandslos

Wird es sich in absehbarer Zeit ändern? Ich glaube nicht. Website-Prototypen lassen sich eben sehr schnell in Photoshop oder anderen Pixeleditoren bauen, entsprechende Kenntnisse vorausgesetzt. Da sehen sie dann ausdrucksstark aus und können Kunden vom Design überzeugen. Natürlich sind die so erzeugten Prototypen in keiner Weise interaktiv. Spätestens, wenn der Kunde die verschiedenen Bestandteile seines PSD-Webauftrittes mal in Aktion sehen will, wird es aufwändig. Ich nutzte in der Vergangenheit bereits mehrfach Powerpoint als Basis für die Präsentation klickbarer Prototypen im vollständigen Design, aber komfortabel ist das nicht. Der Aufwand ist zudem relativ hoch, so dass sich eine solche Vorgehensweise nur für größere Projekte lohnt.

Die neue Web- und iOS-App Marvel kommt spät, aber sie kommt und sie bedient genau diesen Anwendungsfall. Sie erstellen ein grafisches Mockup, vorzugsweise als PSD, aber auch jedes andere Bildformat geht, legen die einzelnen Bestandteile in Ihrer Dropbox ab und laden die Dateien in die Marvel-App. Dort können Sie dann mit einfachen Tools Hot-Spots definieren und Klickziele festlegen. Verschiedene Übergänge sorgen für Bewegung.

Das folgende Video zeigt die Funktionsweise sehr anschaulich:

Den größten Nutzen ziehen Sie aus Marvel, wenn Sie tatsächlich PSD-Prototypen erstellen und in Ihrer Dropbox ablegen. Marvel ist in der Lage, PSDs nativ zu lesen und zu behandeln, so dass der Schritt des Web-Exports komplett entfallen kann. Sie speichern einfach Ihre PSDs in der Dropbox, laden sie in Marvel und erstellen Ihren Klick-Prototypen.

Ändern Sie im weiteren Designprozess die PSDs, so werden die geänderten PSDs automatisch in den Marvel-Prototypen eingelesen. Das ist schon ein Knüller, wie ich finde.

Marvel: Ohne Dropbox-Vollzugriff tut sich nichts

Marvel erreicht dies allerdings nur, wenn Sie der App Vollzugriff auf Ihre Dropbox geben. Damit könnte Marvel theoretisch NSA-mäßig durch Ihre Dateien streifen und beliebiges Unheil anrichten. Natürlich versprechen die Marvel-Macher, dass sie niemals auch nur auf eine derartige Idee kommen würden. Dennoch, ich würde diese Berechtigung niemals erteilen.

Was ich mir allerdings vorstellen kann, und das wird sicherlich auch für Sie praktikabel sein, ist eine separate Dropbox, deren freier Speicher mit Sicherheit für komplexe Designs ausreichend sein würde. Zu dieser, rein für das Prototyping erstellten Dropbox gäbe ich Marvel bedenkenfrei Vollzugriff. Die Macher von Marvel versprechen, dass sie, sobald es die technische Möglichkeit gibt, entsprechend eingeschränkte Rechte anfordern werden. Bis dahin dürfte die Lösung mit der zweiten Dropbox ganz sinnvoll sein.

Marvel ist noch in der Beta-Phase und daher kostenlos verfügbar. Das Prototyping als Kernfeature soll auch in Zukunft kostenfrei bleiben, zusätzliche "Pro"-Features sind bereits pauschal angekündigt, ohne näher benannt worden zu sein. Diese Features sollen Geld kosten…

Schlussendlich ist Marvel heute eine interessante App, die all jene Designer näher anschauen sollten, die ihre Prototypen grafisch bauen. Wer ohnehin als erstes Vi anheizt, wenn der Kunde anfragt, der wird in Marvel keinen Nutzen erkennen können…

Links zum Artikel

Kategorien
Design Essentials Freebies, Tools und Templates UI/UX

Divshot: Noch schnelleres Rapid Prototyping mit Bootstrap

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: