Zeit für Designer, von bildbasiertem zu codebasiertem Design zu wechseln

Warum von bildbasiertem zu codebasiertem Design wechseln?

Seit den Anfängen des digitalen Produktdesigns gibt es ein großes Problem. Designer sind vom Produktentwicklungsprozess getrennt und gezwungen, nur mit Software zu arbeiten.

Die Designer verwenden Rastergrafiken oder Vektordesign-Tools, um Bilder zu zeichnen, während sie vom Rest der Organisation isoliert sind. Der Prozess bleibt in den meisten Fällen identisch, auch wenn sie in unterschiedlicher Software wie Photoshop, Gimp, Sketch oder Fireworks funktionieren. Ein Satz statischer Bilder wird als Absicht, die von den Designern gerendert wird, an die Ingenieure gesendet.

Es ist äußerst mühsam, verschiedene Zustände der Benutzeroberfläche durch statische Artboards anzuzeigen. Daher ist nicht alles von den Designern detailliert. Und schließlich wird die gesamte Benutzeroberfläche von den Ingenieuren mit Hilfe einer Reihe unvollständiger statischer Bilder erstellt. Oft werden in einer langwierigen Hin- und Her-Kommunikation alle interaktiven Zustände in der Regel ausgebügelt.

Das Erlebnis wird bei statischen Designs nicht genau dargestellt und die Tests sind daher für die Benutzer meist lästig. Aufgrund dieser ineffizienten Prozesse führt eine Organisation zu erfolglosen Produkten und frustrierten Teams.

Dank der technologischen Entwicklung haben wir heute eine bessere Möglichkeit, Dinge zu entwerfen. Bildbasierte Design-Tools werden schnell durch codebasierte Design-Tooling-Paradigmen ersetzt. Statische Darstellungen des Designs, die von Vektordesign-Tools oder Raster gezeichnet wurden, werden durch gerenderte Designs ersetzt, wo Designer es direkt im Code beabsichtigen, ohne tatsächlich zu wissen, wie man codiert.

Ein neuer Arbeitsablauf wird durch die neuen Tools bereitgestellt, bei denen:

• Designer und Ingenieure etablieren beide eine einzige Quelle der Wahrheit
• Ohne jegliche Programmiererfahrung befähigt es Designer mit der vollen Leistungsfähigkeit des Programmierens
• Das Duo aus Designern und Ingenieuren ist durch einen einzigen kollaborativen kreativen Prozess verbunden, der eine spektakuläre Workflow-Evolution schafft

Bildbasiertes bis codebasiertes Design mit UXPin

Die erste und grundlegende Frage hier ist, was am bildbasierten Design nicht gut oder ineffizient ist, bevor der Übergang vom bildbasierten zum codebasierten Design erfolgt. Sie wissen vielleicht, dass es zwei Paradigmen von Design-Tools gibt, nämlich codebasierte und bildbasierte Design-Tools.

Ein bildbasiertes Designtool ist ein Ansatz, der seit vielen Jahrzehnten verwendet wird und ziemlich alt ist. Die Designer müssen Vektor- oder Rastergrafiken erstellen, wenn sie etwas zeichnen, was die Idee dieses Werkzeugansatzes ist.

Mit diesem Ansatz haben die Konstrukteure maximale Flexibilität. Von fortgeschrittenen Illustrationen bis hin zu einfachen Symbolen kann auf diese Weise alles effektiv gezeichnet werden, einschließlich der schönsten Details. Wobei es bei professioneller digitaler Produktentwicklung meist zu Brüchen kommt. Hier ist der Grund, warum es passiert.

1. Mangelnde Interoperabilität: Die eigentliche Benutzeroberfläche eines Produkts mit Ausnahme von Fotos, Illustrationen und Symbolen wird niemals mit diesen Grafiken erstellt. Designer arbeiten außerhalb der im Code festgelegten Einschränkungen, wenn sie am Schnittstellendesign in bildbasierten Designtools arbeiten. Aus diesem Grund können sie Dinge erstellen, die teuer zu programmieren sind, und solche, die auf unbekannte Weise schwierig sind.

2. Mangelnde Genauigkeit: Abgesehen von der Erstellung wundervoller, detaillierter Designs werden die ungenauesten Ergebnisse während des Entwicklungsprozesses oft mit bildbasierten Tools erzielt. Die Arbeit des Designers wird mit einem völlig anderen Prozess gerendert.

Daher gibt es einen Unterschied im Code von Verläufen, Text und Farbe, der von einem Designer und dem von einem Ingenieur gewählt wird, selbst wenn dieselben Spezifikationen angewendet werden. Die Teams sind dadurch von massiven Fehlstellungen betroffen.

3. Statisches Design: Der Fokus des Workflows beim bildbasierten Designtool liegt auf der Erstellung statischer Zeichenflächen für alle Zustände der Benutzeroberfläche, die schließlich miteinander verknüpft werden. Für professionelle Projekte ist dies ein Einbruchsansatz. Im statischen Fenster werden die einfachsten Muster zu einem unüberschaubaren Dropdown-Menü.

Dies liegt an der fehlenden Möglichkeit, interaktive Komponenten für die Wiederverwendbarkeit aufzubewahren, und an einer beträchtlich großen Anzahl von Zeichenflächen. Darüber hinaus erlauben diese Werkzeuge nur grundlegende Interaktion ohne die Fähigkeit, Variablen für Inhalte, Zustände von Elementen, bedingte Logik und andere festzulegen.

4. Schwache Zusammenarbeit im Design-Engineering: Der Engineering-Prozess unterscheidet sich völlig von diesem Tool und kann nicht zusammengeführt werden. Der Output beider Welten ist von seiner eigentlichen Natur getrennt.

Von den Benutzern verwendete Technologien sind das Endprodukt der Entwicklerarbeit, während zusätzliche Abstraktionsebenen, die weit von der endgültigen Benutzererfahrung entfernt sind, durch bildbasiertes Design eingeführt werden.

Designer und Ingenieure sind wegen wiederverwendbarer interaktiver Komponenten, fehlender echter Interaktionen und der Möglichkeit, Verbindungen aus Code zu importieren, getrennt und frustriert.

Einzigartigkeit im Code-basierten Design

Es ist wichtig zu wissen, was an diesem Design besonders ist, da wir uns auf den Übergang von bildbasiertem zu codebasiertem Design konzentrieren. Wenn ein Benutzer etwas mit einem codebasierten Designtool zeichnet, erstellt es relevantes CSS/HTML/JS und aktiviert den Browser. Dadurch wird die Engine so gerendert, dass sie Ergebnisse visuell anzeigt.

Im Folgenden sind die Vorteile für Designer nach ihrem Übergang von bildbasiertem zu codebasiertem Design aufgeführt.

1. Treue: Es gibt eine hundertprozentige Übereinstimmung zwischen der Absicht eines Designers und einem codierbaren Ergebnis, wenn man ein codebasiertes Design verwendet. Um alle Designprojekte zu rendern, ist die im Code-basierten Design verwendete Technologie dieselbe wie die der Webentwicklung.

2. Eliminiert Beschränkungsunterschiede zwischen Designern und Entwicklern: Dinge, die schwierig zu entwerfen und im Code nicht nachzubilden sind, können von den Designern in bildbasierten Tools erstellt werden. Diese genau gleichen Einschränkungen gelten sowohl für Designer als auch für Entwickler in codebasierten Tools. Daher wird sichergestellt, dass Designer und Entwickler synchron bleiben.

3. Ersetzen von Zeichenflächen durch interaktive Komponenten: Anstelle von verknüpften Zeichenflächen verwendet das codebasierte Designtool die fortschrittlichsten Interaktionen mit den Komponenten. Dieser Ansatz befähigt Designer direkt, hochgradig wiederverwendbare interaktive Designsysteme zu erstellen, und ahmt auch die Entwicklung nach.

4. Realistische und leistungsstarke Interaktionen: Mit dem Übergang von bildbasierten zu codebasierten Designs können Objekte miteinander interagieren, sich auf dem Bildschirm bewegen und komplexe Muster erstellen. Man muss nicht wissen, wie man codiert, was für die Zusammenarbeit mit Ingenieuren und das Testen mit Benutzern am wichtigsten ist.

5. Schafft die stärkste Zusammenarbeit aller Zeiten: Ein völlig neuer, revolutionärer Ansatz für die Engineering- und Designzusammenarbeit wird durch ein codebasiertes Paradigma erreicht.

Verwandter Artikel

Unterschied zwischen Webdesigner und Webentwickler