it-swarm.com.de

Welche UI / UX-Skizziersoftware wird empfohlen?

Welche UI/UX-Skizziersoftware verwenden Sie und würden sie empfehlen? Warum?

49
ipavlic

Softwareoptionen
Für Software ist Balsamiq großartig Der Einfachheit halber ist Omnigraffle Pro für die Komplexität (mit Vorlagen von Konigi und anderen von Graffletopia.com .

Skizzieren ist am Anfang viel besser
Es gibt nichts Schöneres als zu skizzieren, um Ihre Ideen schnell zu verbreiten, leicht zu wiederholen und sich nicht zu "verliebt" in Kreationen zu fühlen, die sterben müssen.

Werkzeuge zum Skizzieren
Dies sind die Werkzeuge, die ich verwende, Ultra Fine Sharpies in Schwarz, Rot und Blau, ein Fine Point Sharpie in Schwarz und ein Prismacolor Warm Grey 40% Marker mit breiten und feinen Spitzen. Diese warmgraue Markierung bringt Ihre Skizze auf eine andere Ebene, um klar zu kommunizieren, was Sie meinen.

Sketching Tools

Tipps zum Skizzieren
Skizzieren muss nicht ausgefallen sein. Gerade Linien, Text, ein wenig Schattierung ... das ist alles, was Sie brauchen, um Volumes zu kommunizieren, die nicht geschrieben werden können. Trotzdem werde ich meine Skizzen den Rest der Geschichte erzählen lassen.

Boxes and ShadingTypes of TextSketch Resolution

Quellen
Leah Buley verfügt über hervorragende Ressourcen zum Skizzieren und hat das beeinflusst, was ich weiß. Sie arbeitet bei Adaptive Path als UX Designer.

Hier sind die bevorzugten Werkzeuge von Adaptive Path zum Skizzieren .

Schauen Sie sich auch die Folien 16 und 25 von Leah Buleys Good Design Faster-Präsentation an.

-----AKTUALISIEREN------

Um besser mit Kollegen zusammenarbeiten zu können und allen einen fairen Einblick in die Ausarbeitung ihrer Ideen zu geben, die sich sonst möglicherweise nicht künstlerisch veranlagt fühlen, verwenden wir myBalsamiq und lieben es.

97
Taj Moore

Bleistift und Papier sind das beste und kostengünstigste Werkzeug, das Sie jemals finden werden.

Schnell, einfach und Sie können viele Ideen (wie Sie sollten) mit minimalem Aufwand erkunden.

16
Matt Rockwell

Um lose Ideen (alleine oder persönlich) zu erkunden, verwende ich Papier oder Whiteboard. Wenn ich Drahtgitter mit niedriger Wiedergabetreue für die Präsentation vorbereite, verwende ich Balsamiq Mockups .

Dinge, die ich an Balsamiq mag:

  • Viele vorhandene Drop-In-UI-Komponenten (einschließlich der von der Community erstellten)
  • Ich kann leicht benutzerdefinierte Symbole zur Wiederverwendung speichern
  • Tastaturkürzel erleichtern das Hinzufügen von Komponenten (für mich)
  • Einige (eingeschränkte) Click-through-Unterstützung für das Verbinden von Drahtgittern in einer Pseudo-Prototyp-Form
  • Speichert Skizzen in einer benutzerdefinierten XML-Syntax (BMML), die ich mit meinen eigenen Tools analysieren kann

Sie haben eine Online-Version mit dem Namen myBalsamiq bereitgestellt, aber ich habe sie noch nicht ausprobiert, daher kann ich keine Meinung abgeben.

10
TMiller

Führende Branchen-UI/UX-Prototyping- oder Skizziersoftware gibt es auf dem Markt. Sowohl online als auch auf dem Desktop. Dies hängt hauptsächlich davon ab, welchen Grad an Wiedergabetreue/Interaktionen Sie auf der Benutzeroberfläche erfassen möchten.

Nur für Basic - Medium Fidelity schlage ich vor, dass Sie Axure mit allen verschiedenen geladenen Bibliotheken/Widgets verwenden können, andernfalls ist Ihr Prototyping-Leben insofern miserabel.

Axure Widgets

http://www.axure.com/widgetlibraries

http://www.acleandesign.com/2010/04/axure-better-defaults-library-v2/

http://axureland.com/axure_widget_libraries

Für Mittel - Fortgeschritten können Sie iRise verwenden, das alle Funktionen enthält, einschließlich dynamischer Daten, die aus der Datenbank auf der Schnittstelle angezeigt werden. Übrigens ist die Lizenz sehr teuer, wenn sich nur Unternehmen leisten können

Anders als oben finden Sie hier eine Liste der Popluar-Tools

6
Ravi

Als Alternative zum Skizzieren mit Bleistift und Papier empfehle ich die Verwendung eines Wacom-Tablets + MyPaint . MyPaint ist eine OpenSource-Zeichnungssoftware mit den folgenden Funktionen, die es zu einer guten Wahl für das Skizzieren machen:

  • Unendliche Leinwand. Sie können jederzeit an jeder Seite Ihrer aktuellen Skizze zeichnen, da keine Ränder vorhanden sind.
  • Viele Pinsel Sie können viele verschiedene Pinsel verwenden und Ihre benutzerdefinierte Sammlung erstellen.
  • Ebenenunterstützung . Sie können verschiedene Ebenen für die Zeichnung, die Schattierung oder die Anmerkungen verwenden und die aktive Ebene mit einer einfachen Tastenkombination ändern.
  • Benutzeroberfläche bereinigen. Bietet Vollbildmodus mit Tastaturkürzeln zum Anzeigen/Ausblenden von Benutzeroberflächenelementen.
  • Speichern Sie Entwürfe. Speichern Sie einfach Zwischenzustände und navigieren Sie vor und zurück, um Variationen Ihrer Skizzen zu experimentieren.

MyPaint bietet die oben genannten Funktionen (die auf Papier nicht verfügbar sind), ohne einen Großteil der Komplexität der meisten Zeichenpakete (z. B. Fireworks) oder Prototyping-Tools (z. B. Axure) einzuführen, die für andere Ergebnisse (wie Drahtgitter oder Prototypen) besser geeignet sind. .

Ich habe eine Replik der handgezeichneten Skizze von @tajmo erstellt, um die Verwendung zu veranschaulichen:

enter image description here

4
Pau Giner

Der wichtigste Teil ist, zu verstehen, wann Sie in verschiedenen Medien und Stilen skizzieren müssen. Erfahren Sie, wann Sie die hässlichen, schmutzigen Skizzen erstellen müssen, die einfache Erkundungen sind, anstatt tatsächliche interaktive Drahtgitter zu erstellen.

Es gibt viele Leute, die mit Illustrator und Tablet zeichnen, und sie sind super schnell. Das Schöne an diesem Medium ist zum Beispiel, dass es leicht modifiziert und zur Manipulation an andere gesendet werden kann.

Sie sehen also, das Medium und die Software hängen von - ab, wo Sie sich in Ihrem Prozess befinden, aber auch vom Gewohnheiten von jedem, der diese Skizzen erstellt.

Ich benutze

Ich benutze in der Reihenfolge des Prozesses und der Wiedergabetreue, beginnend mit groben Erkundungen:

  1. Papier + schwarzer Stift
  2. Papier + dickerer Sharpie, schwarzer Stift, grauer Marker für schönere Highlights
  3. Illustrator für einen der Drähte, die möglicherweise geändert werden müssen
  4. Axure (aber das ist in meinen Augen keine Skizze, es ist Wireframing und wird verwendet, weil wir irgendwie Interaktivität brauchen)
4
JeroenEijkhof

Stift und Papier können nicht erwähnt oft genug sein. Die Flexibilität in den frühen Phasen ist ein Muss.

Danach: Axure ist das, was ich benutze, aber ich habe auch gute Dinge über Balsamico gehört.

3
katDNA

Jep. Papier, Bleistift und Stift gewinnen zweifellos. All Ihre Erfahrungen mit dem Skizzieren von Hand werden jeden Bildschirm, den Sie zeichnen, informieren und verbessern. Ich unterstütze auch die praktische Einfachheit des Versendens von Scans und Fotos Ihrer Skizzen. Design ist Denken und Formen. Bildschirmwerkzeuge, die das Erstellen von Bildern zu einfach machen, tragen nicht zu einem durchdachten Design bei. Wenn Sie nur eine Effizienz von Bildern pro Stunde wünschen, ist eines der genannten Zeichenwerkzeuge ausreichend.

Bei Drahtgittern habe ich mir Balsamiq, Mockflow, Mockingbird, Hotgoo, Protoshare und andere genau angesehen. Ich wähle Mockflow und bin damit zufrieden mit Preis, Leistung, Benutzeroberfläche und Ergebnissen.

2
Four

Nichts kann Bleistift und Papier besser ersetzen. Und dafür würde ich das Action Method Paper Tools aus dem Behance Network empfehlen . Ich benutze jeden Tag ihre Punktraster Cahier und Notebook und es ist wirklich professionell und schön.

Was cool ist, ist, dass sie diese Paper Action-Methode an Web, iPad und Mobile angepasst haben. Sie sollten es überprüfen.

Bei Prototyping-/Wireframing-Tools (und nicht beim Skizzieren) verwende ich persönlich Balsamiq . Schnell, instinktiv und effizient. Sie haben auch eine myBalsamiq-Website in der Beta, um persönliche Projekte zu bearbeiten. Das ist aber nicht kostenlos.

In meinem Unternehmen übernehmen wir das Wissensmanagement über ein Confluence-Wiki . Wir haben das Balsamiq-Plugin hinzugefügt und dies ist eine sehr leistungsstarke Methode, um Drahtgitter in einem Kontext zu handhaben.

Als Zwischenstufe können Sie ein Wacom Bamboo-Tablet kaufen und den UI-Block und die Vorlage in Photoshop für das Beste aller Welten verwenden.

Hoffe, all diese Ratschläge werden hilfreich sein.

2
Alconis

Ich werde Adobe Fireworks empfehlen. Es ist großartig, weil:

  1. Es wurde für das Webdesign entwickelt und ist daher sehr schnell
  2. Sie können Symbole für wiederverwendbare Elemente wie Schaltflächen, Fenster usw. Verwenden
  3. Es unterstützt die 9-Slice-Skalierung
  4. Sie können vollständig interaktive Prototypen ohne Codierung erstellen
  5. Mit diesem Drahtgitter-Kit Sie können schnell Seiten zum Testen erstellen, ohne das Design abzulenken
  6. Und wenn Sie bereit sind, können Sie schnell beginnen, über den Skizzen zu entwerfen und alles als CSS und Bilder zu exportieren.

    Ich benutze Fireworks seit 7 Jahren und es hat mir viel Zeit gespart.

2
Tony Bolero

meine Meinung ... Balsamiq ist zu begrenzen. Als einzige UX-Person in einem Fortune-100-Unternehmen, die mit vielen Webanwendungen/Portalen beauftragt ist, habe ich einfach keine Zeit/keinen Luxus, Drahtgitter in Balsamiq mit ihrer begrenzten Palette zu skizzieren. Nachdem ich diesen Weg gegangen bin, habe ich festgestellt, dass Entwicklungsteams mehr Definition für Wireframes benötigen. Deshalb bin ich zu Illustrator übergegangen, das eine vollständige Kontrolle ermöglicht und einen Hybrid zu Photoshop-Designdateien bietet. Vor Illustrator sind dünne, scharfe Stifte und Rasterpapier unerlässlich, um die Geschäftsanforderungen zu ermitteln und die Lücke zwischen Anforderungen und agilen Entwicklungsteams zu schließen. Sehen Sie sich interaktive Mockup-Tools an, z. B. ... Feuerwerk, iRIse und Axure, möchten Sie sich jedoch nicht auf die vordefinierten Widgets beschränken und haben keine Zeit zum Codieren.

1
Ashlie