Drücke die Tasten ◄ ► für weitere Artikel  

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: Websites und Apps schnell und unkompliziert entwerfen

 

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.

Screenshot der Benutzeroberfläche von moqups
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)

Alle 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.

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.

161 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
16 Antworten
  1. von Christian am 25.09.2012 (14:21Uhr)

    Typo ?

    HTML6 = HTML5 ?

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

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

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

    http://gomockingbird.com/

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

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

  5. von simkona am 25.09.2012 (15:16Uhr)

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

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

    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.

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

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

  8. von Kieran am 28.09.2012 (11:36Uhr)

    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.

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

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

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

    [...] 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 [...]

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

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

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

    [...] 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 [...]

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

    [...] 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 Prototyping: 5 Online Tools für Dein UX… am 06.05.2013 (11:01Uhr)

    [...] 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

Mehr zum Thema Mockup
8 geniale Mockup-Tools, um deine App in Szene zu setzen
8 geniale Mockup-Tools, um deine App in Szene zu setzen

Ein richtig gutes App-Design ist für Startups, Coder und Designer viel wert – es mit schicken Produkt-Screenshots überzeugend in Szene zu setzen, aber noch viel mehr. Wir stellen die acht besten.. ... » weiterlesen

MockUPhone: Freigestellte Mockups für dein Projekt
MockUPhone: Freigestellte Mockups für dein Projekt

Mit MockUPhone erstellst du aus Screenshots deiner Web-Projekte Device-Mockups für die spätere Präsentation. Wir verraten dir, was MockUPhone anders macht als andere Tools. » weiterlesen

Facebook-Newsfeed: Kommt der Fotostream nach Instagram-Vorbild?
Facebook-Newsfeed: Kommt der Fotostream nach Instagram-Vorbild?

Facebook wird nicht müde, sich ständig zu verändern und weiterzuentwickeln. Am morgigen Donnerstag steht der nächste Schub an Neuerungen an. Content-spezifische Newsfeeds, größere Bilder und... » weiterlesen

Kennst Du schon unser t3n Magazin?

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