Moqups: Websites und Apps schnell und unkompliziert entwerfen

Moqups: Websites und Apps schnell und unkompliziert entwerfen
Die Lösung für schnelle Visualisierungen sind so genannte Mockups, Wireframes oder Prototypen: Einfach  gehaltene Entwürfe, die dazu dienen den Aufbau und die Funktionsweise von Webseiten oder Apps möglichst simpel zu veranschaulichen. Ein Tool, das diese Entwurfsphase erleichtert, ist moqups.

 

Moqups ist eine WebApp, mit der man Entwürfe für Webseiten schnell und unkompliziert realisieren kann. Aus einer Auswahl von über 60 Vektor-Schablonen können schnell Layouts entstehen und exportiert werden.

moqups screenshot1
Benutzeroberfläche von moqups

Die Anwendung ist in den Layout-Bereich, der auf eine individuelle Größe gebracht und mit eigenem Raster versehen werden kann, und eine Toolbar mit der Sammlung der Schablonen aufgeteilt. Von Formen, einfachen HTML-Elementen über Tabellen und Formularen-Elementen bis hin zu User-Interface-Elementen wie der iPhone-Tastatur ist alles vertreten, was man für einen schnellen Entwurf gebrauchen kann. Außerdem besteht die Möglichkeit, eigene Bilder hochzuladen und in das einzufügen. Mit der eingebauten Suchfunktion können Stempel schnell gefunden und eingesetzt werden.

Intuitives Layouten im Browser

Durch Drag&Drop kann die jeweilige Schablone auf die Arbeitsfläche gezogen und dort weiter verarbeitet werden. Positionieren, skalieren, färben, individualisieren – es sind so gut wie keine Grenzen gesetzt. So können viele Elemente wie zum Beispiel Tabellen nach einem Doppelklick mit einer simplen Text-Syntax bis ins kleinste Detail angepasst werden.

Kommagetrennte Werte ergeben Zellen. Absätze ergeben Spalten, Zeichenketten wie „[]“, „[x]“ „()“ und „(o)“ führen zur Ausgabe von Checkboxen und Radio-Buttons.

So kann dieser Code eine Tabelle mit Formular-Elementen erzeugen:

Spalte 1, Spalte 2, Spalte 3

Zelle 1, Zelle 2, Zelle 3, []

Zelle 4, Zelle 5, Zelle 6, [x]

Zelle 7, Zelle 8, Zelle 9, ()

Zelle 10, Zelle 11, Zelle 12, (o)

tabelleAlle Elemente können auf Ebenen verteilt werden und sich so bei Bedarf überlappen. Außerdem besteht die Möglichkeit Elemente am Viewport auszurichten, zu verteilen, zu gruppieren oder komplett für Veränderungen zu sperren. Selbstverständlich hat das Tool Undo und Redo Funktionen, die fast unendlich viele Vor- und Rückschritte während einer Sitzung ermöglichen. Um die Bedienung komfortabler zu gestalten, lässt sich moqups zusätzlich durch Tastenkürzel bedienen.

moqups top leiste

Exportieren, testen, teilen

Moqups bietet die Möglichkeit die Entwürfe projektbezogen und mit Unterseiten zu organisieren. Diese können als PDF, PNG oder interaktive Online Präsentation mit funktionierenden Verknüpfungen unter den Unterseiten ausgegeben und per eMail geteilt werden. Während der PDF- und PNG-Export ohne Registrierung funktioniert, wird für die Online Präsentation und den eMail Versand eine kostenlose Anmeldung vorausgesetzt.

Unterwegs Layouten

Dadurch, dass moqups auf HTML5 und weiteren standardisierten Technologien basiert, funktioniert es auf allen aktuellen Browsern und selbst auf mobilen Geräten – das sogar fast ohne Einschränkungen offline. So kann auch unterwegs und bei schlechterer Internet Verbindung zentralisiert an Entwürfen gearbeitet werden.

moqups: nützlich und alltagstauglich

Moqups ist ein nützliches Tool, das einfaches und intuitives Entwickeln von Layouts ermöglicht. Viele der Features stehen selbst ohne Registrierung zur Verfügung. Doch auch der volle Funktionsumfang ist nach wenigen Klicks zugänglich – und das sogar kostenlos.

Das Tool könnt ihr auf der offiziellen Homepage von moqups nutzen.

Weitere Artikel zu Mockup und Apps

Empfehlen

bewerten
VN:F [1.9.22_1171]
Bewertung: 3.8/5 (6 Bewertungen)
16 Antworten
  1. von Christian 25.09.2012 (14:21Uhr) 1.

    Typo ?

    HTML6 = HTML5 ?

  2. von Johannes Haupt 25.09.2012 (14:26Uhr) 2.

    True, danke

  3. von Jan Peiniger via facebook 25.09.2012 (14:49Uhr) 3.

    Ich hoffe mal das ist ein und das selbe. Sonst ist es eine üble Kopie von gomockingbird.com oder umgekehrt ;-)

  4. von Jan Peiniger via facebook 25.09.2012 (14:50Uhr) 4.

    http://gomockingbird.com/

  5. von Uwe Wöhlbrandt via facebook 25.09.2012 (14:52Uhr) 5.

    ...und dann tauchen bei GesichtsBuch genau die Dinge auf, die einem gerade durch den Kopf gehen. Sehr schön t3n. :-)

  6. von simkona 25.09.2012 (15:16Uhr) 6.

    Sieht interessant aus. Android-Schablonen würde ich mir noch wünschen, dann wäre ich fast schon glücklich :)

  7. von Ilja Zaglov via facebook 25.09.2012 (15:50Uhr) 7.

    Auf jeden Fall ist gomockingbird sehr ähnlich. Aber läuft zum Beispiel schon mal nicht vernünftig auf mobilen Geräten. Zumindest hat mein Safari auf dem iPad es nicht verdaut.

  8. von Moqups: Websites und Apps schnell und un… 26.09.2012 (02:04Uhr) 8.

    [...] Die Lösung für schnelle Visualisierungen sind so genannte Mockups, Wireframes oder Prototypen: Einfach gehaltene Entwürfe, die dazu dienen ...  [...]

  9. von Kieran 28.09.2012 (11:36Uhr) 9.

    Ich nutze aktiv Moqups und es erspart viel Zeit mit Mockups. Mockups sind einfach super vor einem Feindesign die Details und Funktionen mit dem Kunden zu diskutieren.

  10. von Jetstrap: Praktisches Entwicklungstool f… 01.10.2012 (16:30Uhr) 10.

    [...] wie beim Layout Tool moqups können die Komponenten durch Drag&Drop auf der Arbeitsfläche positioniert werden. Diese [...]

  11. von Adobe Proto: Mockups am Tablet erstellen… 01.11.2012 (10:43Uhr) 11.

    [...] euch die App kurz vor. Ads_BA_AD('CAD2'); Adobe Proto funktioniert ähnlich wie das Online Tool Moqups, das wir euch vor einiger Zeit schon vorgestellt haben: Man wählt zunächst ein Layout-Modell wie [...]

  12. von Tool-Tipp: Wireframes nach dem Keep-it-s… 07.01.2013 (08:01Uhr) 12.

    [...] Ein weiteres Tool zu Anfertigen von Entwürfen für Websites hatten wir euch hier schon vorgestellt. [...]

  13. von 9 Tools, die Webentwicklern die Arbeit e… 12.02.2013 (16:50Uhr) 13.

    [...] auch hier: eine Stunde mehr Planen bedeutet 10 Stunden weniger Ärger beim Umsetzen. Wir haben euch Moqups schon mal genauer vorgestellt: Das Tool hilft euch dabei, Entwürfe von Websites und Apps zusammenzubauen und sogar klickbare [...]

  14. von 9 Tools, die Webentwicklern die Arbeit e… 12.02.2013 (17:09Uhr) 14.

    [...] auch hier: eine Stunde mehr Planen bedeutet 10 Stunden weniger Ärger beim Umsetzen. Wir haben euch Moqups schon mal genauer vorgestellt: Das Tool hilft euch dabei, Entwürfe von Websites und Apps zusammenzubauen und sogar klickbare [...]

  15. von Prototyping: 5 Online Tools für Dein UX… 06.05.2013 (11:01Uhr) 16.

    [...] Moqups: Websites und Apps schnell und unkompliziert entwerfen – t3n Artikel [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Kennst Du schon unser t3n Magazin?

t3n 32 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen