Responsive Prototyping

Wer schell mal einen Prototyp für eine moderne Webseite im Responsive Design bauen will, hat dank einer Vielzahl an Onlinetools nur noch die Qual der Wahl.

Responsive Prototyping

Nachdem Twitter Bootstrap als OpenSource zur Verfügung gestellt hatte, und sich damit schon recht leicht und schnell Prototypen für ein Webseitendesign zusammenbauen lassen, spriessen derzeit Onlinetools aus dem Boden, mit denen man recht einfach via Drag´n´Drop Designs und auch Responsive Design Webseiten erstellen lassen.


Moqups, die Wireframe und Konzept/Prototyp App


Mit Moqups lassen sich schnell Wireframes, Prototypen bzw. sogenannte Mockups erstellen, also einfache, vektorbasierte Entwürfe, die das UI Design von Apps und Webseiten näher bringen soll. Dabei wird mit über 60 vektorbasierten Elementen direkt im Browser layoutet. Moqups bietet dann die Möglichkeit, die Entwürfe als PDF, PNG oder Onlinepräsentation zu exportieren.


Webflow, Responsive Design im Browser


Geht man einen Schritt weiter und möchte gleich die komplette Webseite online gestaltet, bietet sich Webflow an. Hier können komplette Webseiten Layouts bis ins kleinste Detail durchgestyled werden und dann heruntergeladen werden. Den Previewmodus kann man sich dann als Desktop Screen, iPad oder iPhone anzeigen lassen.


LayoutIt! für Bootstrap Projekte


Kommen wir wieder zurück zu Twitters Bootstrap. LayoutIt! ist ebenfalls ein Online Editor, mit dem sich schnell und ebenfalls per Drag´n´Drop HTML Bausteine anordnen lassen. Beim Export kann man dann wählen, ob man rein das HTML Gerüst downloaden möchte um, dann das eigene vorhandene CSS und Javascript darüber zu legen, oder ob man es als komplettes Projekt mit allen zugehörigen Bootstrap Dateien exportieren will.