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
Apps Programmierung

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

Links zum Beitrag