Welche Software eignet sich am besten für das GUI-Design?


9

Ich habe Photoshop ausgiebig verwendet, aber Tatsache ist, dass es sich um ein Fotobearbeitungswerkzeug handelt. Es sind einige komplizierte Effekte eingebaut, z. B. Schlagschatten, inneres und äußeres Leuchten usw., aber es reicht beim Entwerfen einer grafischen Oberfläche einfach nicht aus. Sie können beispielsweise nicht mehrere bearbeitbare Verläufe hinzufügen. Und Sie müssen die Werkzeuge dazu bringen, den gewünschten Effekt zu erzielen, wenn sie nicht dafür entwickelt wurden.

Ich habe auch angefangen, Fireworks zu verwenden, und es gibt einige Dinge, die mir gefallen, z. B. die Möglichkeit, die Kurven auf einem abgerundeten Rechteck ständig zu ändern, aber der Farbwähler in diesem Programm ist einfach nicht verwendbar. Wenn Sie in den Mac-Farbwähler gehen, heißt es, dass die Farbe etwas anderes ist als sie ist, da Fireworks Farbprofile nicht richtig verarbeitet. Dies macht das Einstellen von Farben zu einem sehr schwierigen Prozess. Und die Software als Ganzes fühlt sich wie eine Vorabversion an (und sollte es vielleicht auch sein).

Ich frage mich also, welche Software jeder zum Erstellen einer GUI empfehlen würde. Es muss eine Software geben, die es Ihnen ermöglicht, eine Reihe von bearbeitbaren Effekten zu haben, die Sie ändern, die Reihenfolge ändern und jederzeit verschieben können, zusammen mit allen anderen Tools, die zum Erstellen großartiger Grafiken erforderlich sind.


Basierend auf allen Antworten hier müssen Sie die Frage klären. Ich glaube, Sie fragen nach Software, um die eigentlichen GUI-Elemente zu erstellen ... Symbole, Schaltflächen usw. Oder fragen Sie nach Wireframing?
DA01

Antworten:


7

Es gibt keine universelle "beste" Software für das GUI-Design. Dies hängt nur von Ihren Software- / Workflow-Einstellungen ab.

Photoshop

Ich bin mir nicht sicher, was Sie unter "mehreren bearbeitbaren Verläufen" verstehen, aber wenn Sie wissen, was Sie tun, bietet Photoshop alle Tools, die Sie zum Entwerfen einer beliebigen GUI benötigen. Kein "Tricking" von Werkzeugen erforderlich.

Trotz seines Namens hat sich Photoshop weit über ein einfaches Werkzeug zum Bearbeiten / Bearbeiten von Fotos hinaus entwickelt, und es gibt keinen Grund, warum Sie darin kein GUI-Design erstellen können. Photoshop bietet wahrscheinlich die umfassendsten Raster-Bildbearbeitungswerkzeuge aller Grafikprogramme auf dem Markt und wird für alles verwendet, von digitaler Malerei über Comic-Färbung, Illustration, Web- und UI-Design bis hin zur Videoproduktion und Erstellung von 3D-Spielekunst bis hin zu Fotos Forensik.

Funktionen wie Anpassungsmasken, Ebenenstile, Vektorpfade, intelligente Objekte, Ebenenkompositionen usw. machen es zu einer natürlichen Wahl für das UI-Design für diejenigen, die bereits mit der Benutzeroberfläche und dem umfassenden Funktionsumfang vertraut sind. Ein weiteres Plus ist, dass es gut in Tools wie Illustrator, Flash Catalyst und viele Apps / Plugins von Drittanbietern integriert ist.

Feuerwerk

Viele Leute bevorzugen Fireworks für das Webdesign, da es speziell dafür entwickelt wurde. Aus diesem Grund ist es auch ein gutes Werkzeug für das GUI-Design. Fireworks ist objektorientiert und unterstützt Seiten, Symbole und Stile. Es eignet sich sehr gut für einen UX-Design-Workflow. Viele Leute finden auch, dass Fireworks ihnen eine bessere pixelgenaue Kontrolle bietet, ohne auf Lineale, Hilfslinien oder Messwerkzeuge zurückgreifen zu müssen.

Darüber hinaus bietet Fireworks viele nützliche Funktionen wie Verlaufsdithering, ASE-Farbfelder und in gewisser Weise eine bessere Typografiekontrolle als Photoshop. Die Webebene von Fireworks und die Integration in Device Central von Adobe machen es auch einfach, Prototypen für mehrere Geräte schnell zu erstellen.

Illustrator

Eine weitere beliebte App unter UX-Designern ist Illustrator, die viele Stärken mit Fireworks teilt. Wie Fireworks unterstützt es Symbole, erweiterte Objektstile, mehrere Zeichenflächen (ähnlich wie Seiten) und noch bessere Funktionen zur Vektorbearbeitung.

In Photoshop, Fireworks, Illustrator und InDesign stehen im Web Drahtgitter- / Schablonensätze und UX-Vorlagen zur Verfügung. Das modulare UX-Design ist in Illustrator und Fireworks jedoch einfacher, da wiederverwendbare Symbolbibliotheken unterstützt werden.

Illustrator unterstützt auch Zeichen- und Absatzstile, wodurch die Typografie-Designfunktionen Photoshop oder Fireworks weit überlegen sind. Darüber hinaus eignet sich Illustrator hervorragend zur Illustration, sodass alle Symbole oder Webgrafiken, die Sie möglicherweise erstellen möchten, im selben Programm erstellt werden können.

InDesign

InDesign ist eine weitere sehr beliebte App unter IAs, IxDs usw. Die Möglichkeiten des Grafikdesigns sind möglicherweise begrenzt, aber die Unterstützung für Seiten-, Absatz- und Zeichenstile, Snippets und Objektbibliotheken macht sie ideal für viele UX-Designaufgaben. InDesign verfügt auch über sehr fortschrittliche Satzfunktionen und unterstützt Rasterlayouts. Zusammen mit der InCopy-Integration und der Adobe Digital Publishing Suite ist dies eine natürliche Wahl für Printmedienunternehmen, die mobile Apps für ihre Magazine entwerfen möchten.


Aber am Ende des Tages hat jedes Werkzeug seine Stärken und Schwächen. Die meisten UX-spezifischen Apps wie Axure, Balsamiq, OmniGraffle usw. bieten viele großartige UX-spezifische Funktionen für das Layout- / Drahtmodell- / Interaktionsdesign. Letztendlich müssen Sie jedoch noch die Grafiken für die Benutzeroberfläche entwerfen, für die Grafikdesign-Tools wie Photoshop / Fireworks / Illustrator benötigt werden.

Aus diesem Grund enthalten die meisten UI-Design-Workflows mehr als eine App. Wenn Sie sich also nicht nur mit einem einzelnen Teil des UI-Entwurfsprozesses befassen, z. B. mit Wireframing oder dem Erstellen der UX-Bibliothek oder dem Prototyping, wird es keine einzige "beste Software" geben.


2

Pencil ist ein kleines und einfach zu bedienendes GUI-Designtool.

Top features:
Built-in stencils for diagraming and prototyping
Multi-page document with background page
Inter-page linkings!
On-screen text editing with rich-text supports
Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.
Undo/redo supports
Installing user-defined stencils and templates
Standard drawing operations: aligning, z-ordering, scaling, rotating...
Cross-platforms
Adding external objects
Personal Collection
Clipart Browser
Object snapping
Sketchy Stencil
And much more...

Geben Sie hier die Bildbeschreibung ein


Es ist ein schönes Wireframing-Tool, aber ich denke, das OP hat nach einem Grafikbearbeitungs-Tool gesucht.
DA01

1

Wo ich arbeite, verwenden wir Indesign. Wir neigen dazu, saubere gitterbasierte Layouts mit sorgfältigen typografischen Stilen zu erstellen, und für diese ist Indesign großartig. Es verfügt über eine Feinsteuerung der Zeichen-, Absatz- und Objektstile, die sich gut in CSS übersetzen lässt und die Feinabstimmung dieser Elemente zu jedem Zeitpunkt des Prozesses sowie ein kohärenteres Layout ermöglicht. Es ist nicht so toll beim Exportieren von grafischen Elementen, aber wir finden, dass sich der Kompromiss lohnt.


1

Eines der unerwartetsten GUI-Prototyping-Tools ist Keynote. Ich kenne einige erstklassige UI-Designer, die darauf schwören, und Keynotopia ist eine fantastische Ressource für die Verwendung von Keynote auf diese Weise. Wenn ich nicht gesehen hätte, dass es so effektiv genutzt wird, hätte ich es wahrscheinlich nicht geglaubt, aber es funktioniert ziemlich gut. Wenn Sie auf einem Mac sind, probieren Sie es aus!


0

Ich arbeite bei Pidoco .

Mit unseren Prototyping-Tools können Sie Prototypen für Websites, mobile Apps oder Software entwickeln. Sie können das Modell direkt auf einem Desktop, einem Smartphone oder einem Tablet simulieren, indem Sie die kostenlose Pidoco-App aus dem AppStore und von Google Play verwenden .

Hauptmerkmale sind:

  • Zusammenarbeit in Echtzeit
  • Export nach HTML, PDF, Word, PNG, SVG
  • Viele Schablonen
  • Vorlagen
  • Benutzerdefinierte Schablonen
  • SaaS, damit Sie es von jedem Browser aus verwenden können

2
Bitte bewerben Sie Ihr Unternehmen nicht bei allen Fragen zum Thema Wireframing. Vielen Dank, dass Sie offen dafür sind, dass Sie dort Angestellter sind.
DA01
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.