Software für Website-Mockups (Win/Linux)

Ich hätte gerne eine Software, die mich beim Entwerfen von Websites unterstützt. Ich kann codieren, aber alles Visuelle auf Papier und im Browser machen. Ich weiß, dass es vielleicht nicht etwas gibt, wonach ich suche, da es immer noch Leute gibt, die Fireworks verwenden, aber ich möchte, dass etwas weiterhin unterstützt wird.

Erforderlich

  • Windows oder Linux
  • Desktop-Anwendung/Browser-basiert
  • Vollfarbige Mockups im Gegensatz zu Wireframes
  • Der Preis spielt keine Rolle, wenn es funktioniert
  • Wird weiterhin unterstützt
  • Etwas einen Schritt weiter als Inkscape

Sonstiges

  • Unterstützung für Interaktivität/verlinkte Seiten wäre schön
  • Ich brauche keinerlei Codegenerierung
  • Jede andere Art von Mockup-Generierung wie allgemeine UI-Schnittstellen oder Dokumente.
Können Sie ein Beispiel für ein vollfarbiges Mockup geben?
Ein Bild? Wenn ich Vollfarbe meine, meine ich im Vergleich zu Wireframing-Tools, die oft in Graustufen sind. Häufig erstellen Designer Entwürfe in einem Bildformat als Spezifikation. Das möchte ich tun.
@nobrandheroes Die Designer, die ich kenne, verwenden Photoshop für diese Aufgabe, wenn Farben wichtig sind.
Mir fehlt die Zeit, meine Erfahrungen hier detailliert darzustellen. Von Balsamico wurde bereits gesprochen. Mocking Bird ist ähnlich. StackOverflow verwendete Invision beim Entwerfen der neuen Navigation, die einige interaktive Elemente enthält.
@Chop Danke, ich werde die überprüfen.

Antworten (4)

Meine Empfehlung wird nicht alle Ihre Must-Have-Anforderungen erfüllen, aber soweit ich weiß, ist es das Beste, was es gibt, das nahe kommt, also möchte ich es trotzdem zeigen.

Ich habe in der Vergangenheit Balsamic Mockups verwendet , um Webanwendungen zu simulieren, daher denke ich, dass es gut sein wird, auch Websites zu simulieren. Aber denken Sie daran, ich bin kein Webdesigner, sondern ein Web-App-Entwickler.

Leider ist es kein Vollfarb-Mockup-Tool, sondern ein Wireframe-Ding, so dass es nicht ausreicht, wenn Sie es wirklich brauchen.

Sie können die Webapp in Aktion auf User Experience Stack Exchange ausprobieren : Verwenden Sie in einem Frage- oder Antwort-Bearbeitungsfeld das „UI Wireframe“ -Tool ( Ctrl+ M).

Ihre Kugeln:

Erforderlich

  • Windows oder Linux JA , beides.
  • Desktop-Anwendung/Browser-basiert JA , beide abhängig von Ihren Anforderungen.
  • Vollfarbige Mockups im Gegensatz zu Wireframes NEIN , Dies ist ein Wireframe-Tool.
  • Der Preis spielt keine Rolle, wenn es funktioniert ... Dies ist ein kommerzielles Tool mit unterschiedlichen Preisen, je nach Anwendungsfall. Aus meiner Sicht nicht teuer.
  • Wird noch unterstützt JA . Die neueste Version ist vom März 2014, das Unternehmen ist am Leben und hat gute Aussichten, es noch eine Weile zu geben.
  • Etwas eine Stufe höher als Inkscape JA . Zumindest aus meiner Sicht.

Sonstiges

  • Unterstützung für Interaktivität/verlinkte Seiten wäre schön. JA Sie können Mockups verlinken.
  • Jede andere Art von Mockup-Generierung wie allgemeine UI-Schnittstellen oder Dokumente. JA Aus diesem Grund veröffentliche ich diese Empfehlung, obwohl sie nicht mit allen Ihren erforderlichen Einträgen übereinstimmt.

Balsamico-Screenshot

Ich habe dieses Bild von ihrer Homepage genommen, da ich selbst keine Installation mehr habe

Als ich vor ein paar Jahren (ca. 2012/2011) Webanwendungen entwickelte, habe ich Balsamic intensiv in der Pre-Code-Phase eingesetzt, um die Benutzer und Entwickler auf dieselbe Seite zu bringen. Es hat großartig funktioniert, um eine gemeinsame Vorstellung davon zu entwickeln, was benötigt wird und wie es später aussehen würde. Wir haben die Mockups nicht weiter verwendet, als das Tool in seinen frühen Beta-Phasen war, aber wir hatten die Benutzeroberfläche fertig (von einem Menschen direkt aus Basamic in Flex codiert) vor dem Programm, sodass die Entwickler „nur“ den Fleischteil hinzufügen mussten Teil.

Das hatte zur Folge, dass die Benutzer während der gesamten Beta-Phase das Gefühl hatten, alles sei auf dem Weg, wie sie es wollten, und die Verbesserungsiterationen waren ziemlich kurz, sodass sich alles ständig in Bewegung anfühlte.

Es hatte den Nachteil, dass die Benutzer immer dachten, das Programm würde nächste Woche fertig sein, weil der "schwierige Teil" (definieren, wie es aussehen sollte) bereits erledigt war. Es hat einige Zeit gedauert, ihnen zu erklären, warum es drei Wochen gedauert hat, „nur diesen Button hinzuzufügen“.

Balsamiq ist eine sehr gute Antwort, zumal ich denke, dass es einfach keinen Markt für so etwas gibt.

Vielleicht kannst du es mal mit Mockplus versuchen . Tatsächlich erfüllt es möglicherweise nicht alle Ihre Anforderungen, obwohl ich dennoch vorschlage, es auszuprobieren.

Hier sind seine Eigenschaften für Ihre Anforderungen:

  • Windows oder Linux JA , aber nur für Windows & Mac.
  • Desktop-Anwendung/Browser-basiert JA , es gibt eine Desktop-Version.
  • Vollfarbige Mockups im Gegensatz zu Wireframes NEIN , es hilft Ihnen, Wireframes zu erstellen.
  • Der Preis spielt keine Rolle, wenn es funktioniert JA , der Preis ist seine Wettbewerbsfähigkeit und Sie werden es sehr vorteilhaft finden.
  • Wird weiterhin unterstützt JA, wird derzeit noch unterstützt.
  • Etwas eine Stufe höher als Inkscape JA .

Es unterstützt Links zwischen Seiten gut, um eine gute Benutzererfahrung zu schaffen. Geben Sie hier die Bildbeschreibung einAus meiner Erfahrung heraus hilft es mir bei meiner Arbeit als UI-Produktmanager sehr. Schnell und einfach meine Ideen und Designs auszudrücken. Deshalb empfehle ich Ihnen dieses Designtool dringend.^^

Ich würde die Verwendung von RealDraw Pro (kostenlose, voll funktionsfähige Testversion) sehr empfehlen.

  • Es ist extrem einfach zu bedienen
  • Unterstützt Ebenen
  • Exporte in viele verschiedene Formate (einschließlich PSD)
  • Kann HTML-Slices erstellen (aber wer nutzt die jetzt schon)
  • Besser als Inkscape
  • Läuft unter Windows
  • Läuft unter Linux (mit Wine) / Ich habe es unter Ubuntu verwendet
  • Gebündelt mit Tausenden von vorhandenen Effekten, Schatten usw. können Sie Ihre eigenen Effekte/Schatten erstellen.

Stellen Sie sich vor, es hat eine Art Photoshop, ist aber einfacher. Viel einfacher. Ich verwende RealDraw jeden Tag für meine Mockups, und ich kann Ihnen sagen, dass es jede Wireframe-/Mockup-App, die ich je verwendet habe, buchstäblich um die Wette schlägt, und es spart Ihnen sicher viel mehr Zeit im Vergleich zu derselben Arbeit Photoshop, Inkscape, Gimp, Paint, Paint.NET usw. (obwohl Paint.NET ziemlich großartig ist).

RealDraw Pro 5.2.4 von MediaChance

Es gibt ein Wireframe.cc , das auf allen Betriebssystemen funktioniert, da es sich um einen Webdienst handelt. Wenn Sie zu dieser Website gehen, beginnt das Wireframing-Erlebnis in einer Sekunde. Es hat Baumvorlagen: ein Browserfenster, eine Tabelle und ein Mobiltelefon.

Öffentliche einseitige Wireframes sind kostenlos, für erweiterte Optionen gibt es einige Premium-Preise.


InVision App , die plattformübergreifende Unterstützung für alle wichtigen Bildschirmgrößen für Mobilgeräte, Desktops und tragbare Geräte bietet. Es unterstützt auch erweiterte Animationen und Übergänge. Ein aktiver Prototyp ist kostenlos.

Könnten Sie die Punkte des OP einfügen und angeben, ob Ihre vorgeschlagenen Lösungen diese unterstützen? Auf diese Weise lassen sich die Antworten leichter miteinander vergleichen und ein Leser kann die richtige Lösung finden, ohne alle Möglichkeiten prüfen zu müssen.