Blog

Moderne User Interface Design Tools – Teil 1: Design trifft Entwicklung

David Patrizi

Diese Reihe von Blogartikeln beschäftigt sich mit der Nutzung von GUI-Entwicklungs-Tools durch Designer und Entwickler, wobei der Fokus insbesondere auf Microsoft Expression Blend und Adobe Flex Builder gelegt wird.

In diesem ersten Teil werde ich die Kooperation zwischen Designern und Entwicklern während der GUI Gestaltung näher betrachten und einige Probleme beschreiben, die bei deren Zusammenarbeit auftreten können. Vor diesem Hintergrund werde ich erläutern, wie GUI Design Tools den gesamten Design- und Entwicklungsprozess verbessern können.

In den folgenden Teilen, werde ich einige technische Aspekte von User Interface Design und Entwicklung näher beleuchten. Der zweite Artikel wird sich mit den Unterschieden zwischen vektor- und pixelbasierten User Interfaces beschäftigen und das Konzept skalierbarer Bitmap-Grafiken vorstellen. Der dritte und letzte Artikel wird aufzeigen, wie die zwei GUI-Entwicklungs-Tools das Konzept umsetzen und ein Fazit bezüglich der jeweiligen Vorzüge und Beschränkungen ziehen.

Zwei Seiten einer Medaille

Bei Centigrade ist es an der Tagesordnung: Designer und Entwickler arbeiten zusammen, um ein gemeinsames Ziel zu erreichen: ästhetische und ausgereifte User Interfaces kreieren. Aber nicht alle Projekte involvieren Design und Entwicklung zu gleichen Anteilen: oft wünschen Kunden ein neues Erscheinungsbild ihrer Anwendung ohne dass der Source Code berührt werden soll oder sie ziehen es vor, die Programmierung selbst zu übernehmen.

Besonders in letzterem Fall findet die Kommunikation zwischen den Entwicklern des Kunden und den User Interface Designern von Centigrade über Firmengrenzen hinweg statt: Centigrade stellt reine grafische „Bausteine“ (auch als „Assets“ bezeichnet) zur Verfügung, die durch die Entwickler des Kunden zusammengesetzt werden, um das letztendliche User Interface zu erstellen. Um Unklarheiten zu vermeiden, fügen wir eine Art Konstruktionsmanual hinzu, das erklärt, wie diese Assets zusammengefügt werden. In der Regel enthält es Informationen über Farben, Schriftarten und –größen, sowie Abstände und Positionen von Grafikelementen.

All diese wesentlichen Fakten müssen gesammelt und den Entwicklern klar kommuniziert werden. Die Erfahrung zeigt, dass es oft eine mühsame Arbeit ist, jede einzelne mögliche Frage vorherzusehen, die bei der Implementierung eines Designs aufkommen könnte. Diese Arbeit muss trotzdem sehr sorgfältig ausgeführt werden, um die Gefahr von konzeptuellen Lücken zu umgehen, welche die Integrität des intendierten Designs gefährden, z.B. wenn wichtige visuelle Details im Dokument nicht korrekt definiert sind.

Manchmal können aber selbst bei einem sorgfältig erstellten Dokument Interpretationsfehler der Entwickler zu falschen Implementierungen führen. Besonders für Entwickler, die wenig bis keine Erfahrung mit GUI-Entwicklung haben, können das Interpretieren und die korrekte Umsetzung eines Spezifikationsdokumentes ohne zusätzliche Unterstützung eine große Herausforderung bedeuten.

Aber selbst bei erfahrenen Entwicklern, die gute Arbeit bei der Implementierung eines Spezifikationsdokumentes leisten, können Schwierigkeiten auftauchen, und zwar wenn verschiedene Entwickler an unterschiedlichen GUI-Elementen arbeiten. Diese Art der Arbeitsverteilung beinhaltet das Risiko, dass unterschiedliche User Interface Komponenten genutzt werden, von denen jede für sich gut gemacht ist, die aber im Gesamtbild nicht zusammenpassen. Um dies zu vermeiden, muss jeder Entwickler exakt dieselbe Herangehensweise in der Umsetzung der Visionen des Designers verfolgen; ansonsten ist das Ergebnis ein inkohärentes GUI.

Die wichtige Frage ist also folgende: Wie ist es möglich, eine flüssige und effiziente Staffelübergabe vom Designer an den Entwickler zu vollziehen, ohne konzeptuelle Lücken zu hinterlassen bzw. ohne die Gefahr von Fehlinterpretationen?

Zusammenbringen, was zusammen gehört

Die einfache Antwort ist: Lasst Designer und Entwickler dieselbe (formale) Sprache sprechen. Moderne User Interface Design Tools kombinieren Design- und Entwicklungstätigkeiten in einem Hand-in-Hand-Arbeitsablauf, der die Notwendigkeit zur informellen Kommunikation minimiert und der dabei hilft, konzeptuelle Lücken zu reduzieren. Zusätzliche Dokumentation darüber, wie ein Icon genutzt oder wo ein Panel platziert werden soll wird nicht benötigt, da alle Informationen festgelegt sind, sobald das finale (visuell gestaltete) Interface vom Designer mit einem Design Tool erstellt wurde. Sowohl Microsoft Expression Blend als auch Adobe Flex Builder beschreiben das komplette Layout (z.B. Größen, Offsets, Ausrichtungen) sowie den visuellen Stil der GUI-Elemente (z.B. Schriftarten, Farbwerte) über XML. Der Designer erstellt entweder grafische Assets für GUI-Elemente mit externen Grafikdesign-Tools und importiert sie in das Projekt, oder er passt bestehende GUI-Elemente an und nutzt diese, um das User Interface zu erstellen – der entsprechende XML Code wird automatisch generiert. Expression Blend nutzt Microsofts Markup Sprache XAML, um visuelle Einstellungen und die Struktur von GUIs zu beschreiben, Flex Builder nutzt Adobes MXML. Entwickler arbeiten dann am anwendungsspezifischen Code in einer 3GL (third-generation language) und verbinden ihn mit dem rein beschreibenden XML-Code, um Interaktions- und Präsentationslogik zum User Interface hinzuzufügen, beispielsweise indem einem Button, der vorher vom Designer gestaltet wurde, eine Funktionalität zugewiesen wird (z.B. ein Formular abschicken) Auf diese Art ist eine nahtlose Zusammenarbeit möglich ohne dass ein Spezifikationsdokument erforderlich wäre, das alle Eigenschaften und Verhaltensweisen der GUI-Komponenten beschreibt – die XML-Beschreibung ist die Spezifikation. Ein weiter Vorteil, der sich aus dieser Art der Zusammenarbeit ergibt, ist die Tatsache, dass beide Arbeiten – Entwicklung und Design – klar abgegrenzt sind, so dass jeder Beteiligte seine jeweiligen Kompetenzen voll ausschöpfen kann.

Nachdem die Designer-Entwickler-Zusammenarbeit umrissen wurde, lassen Sie uns einen näheren Blick auf das technische Umfeld der Tools von Adobe und Microsoft Tools werfen. Die folgende Tabelle liefert einen Überblick über die Technologien, die für Design und Entwicklung von Rich Internet Applications (RIAs) genutzt werden.

Technische RIA Umgebungen von Adobe und Microsoft auf einen Blick

Adobe Microsoft
Runtime Client Flash Player Silverlight
Core Development
Framework
Flex .NET
Runtime
Environment
AIR – Adobe Integrated Runtime CLR – Common Language Runtime
Declarative Markup
Language
MXML XAML
Graphical Framework Parts of Flex (graphical API) WPF
GUI Design Tool/
IDE
Flex Builder and Flash Expression Blend
Graphic Design
Tools
Photoshop and Illustrator Expression Design

Alle auf dieser Website genannten Marken oder eingetragenen Marken sind Eigentum ihrer jeweiligen Inhaber und werden hier lediglich zu beschreibenden Zwecken verwendet.

Wie oben erwähnt, wird der nächste Teil dieser Reihe aufzeigen, wie bestimmte technische Aspekte, die für GUI-Design und -Entwicklung wichtig sind, von den beiden Tools gehandhabt werden.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Senior UX Manager
+49 681 959 3110

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.