News & Blog
Traditionell wurden Webseiten meist in den Programmen Adobe Photoshop, Adobe Illustrator oder Sketch gestaltet. Danach erstellte man einen HTML-Prototyp, welcher die Website im Browser darstellte und die Basis für das User-Testing darstellte. Nach dem Kunden-Feedback wurde dann das Grunddesign angepasst und erneut ein Prototyp erstellt, bis der Auftraggeber vollkommen zufrieden mit der Gestaltung der Website war.
Der gesamte Arbeitsablauf beinhaltete daher viele unabhängige Einzelschritte mit unterschiedlichen Programmen und war nicht nur langwierig, sondern auch umständlich.
Dazu kommt, dass Programme wie Adobe Photoshop eigentlich für die Bildbearbeitung entwickelt worden sind und nie richtig für Web- und UX-Design ausgerichtet waren. Daher fehlen trotz des enormen Leistungsumfangs viele für das responsive Webdesign relevante Funktionen bzw. sind gewisse Aspekte des Online-Designs nur sehr umständlich und zeitintensiv umzusetzen.
Um diese Problematik zu lösen wurde Adobe XD erstmals 2016 auf den Markt gebracht und als „Komplettlösung für UX-Design und Prototyping für Websites, Apps, Produkte und Services“ vorgestellt. Seit dem Launch hat es sich mit Hilfe von zahlreichen Updates stark weiterentwickelt und ist heute am besten Wege, sich als Standard-Software für Webdesign zu etablieren.
Adobe XD beinhaltet einen Designmodus sowie einen Prototypmodus. Im Designmodus erstellt man den grafischen Website Entwurf. Danach wechselt man in den Prototypmodus um Zeichenflächen (also die verschiedenen gestalteten Seiten) miteinander zu verbinden und den User-Flow zu veranschaulichen. Dies alles kann der Designer sofort im Browser und sogar auf einem beliebigen Smartphone (mittels der Adobe XD App) live testen und laufend optimieren.
Ist man mit dem Design zufrieden, kann man den Prototyp zum Kunden schicken, damit dieser Feedback geben kann. Dazu generiert man einen Weblink, der an andere weitergeben werden kann. Unter diesem Link kann der Prototyp in jedem Browser aufgerufen werden und es ist auch möglich, direkt im Prototypen Feedback zu hinterlassen. Adobe XD ist derzeit das einzige Programm, das alle Einzelschritte des Arbeitsablaufs in einer Design-Umgebung vereint. Der zeitliche und organisatorischen Aufwand von digitalen Projekten wird dadurch enorm reduziert und die Entwürfe können sofort in der „natürlichen“ Umgebung im Browser angesehen werden.
In Web- und UX-Design ist es besonders wichtig, dass Farben, Texte und Formen einheitlich gestaltet sind und auf alle Seitenentwürfe angewendet werden können. Durch das Bedienfeld „Elemente“ macht Adobe XD dies sehr leicht. Hier kann man Farben und Zeichenformate hinzufügen, um sie griffbereit und wiederverwendbar zu speichern. Wenn man diese im Bedienfeld bearbeitet, wird die Änderung automatisch im gesamten Dokument und somit in allen enthaltenen Seitendesigns ausgeführt. Auch wiederverwendbaren Elementen, so genannte „Komponenten“ werden im selben Platz gespeichert. Mit Hilfe dieses Features ist die Erstellung eines einheitlichen Layouts einfach zu erzielen.
Beim Entwerfen von Webseiten oder mobilen Apps müssen oft Elemente, die sich wiederholen, definiert werden (z.B. Newsboxen etc.). Solche Elemente zu erstellen, oder bei Designänderungen zu aktualisieren, kann jedoch recht zeitaufwendig sein. Die Funktion „Wiederholungsraster“ in Adobe XD macht aus einer Gruppe von Elementen ein sich wiederholendes Element. Dazu zieht man ein Element einfach in eine beliebige Richtung und das Raster wird wiederholt. Alle Formate und Abstände bleiben erhalten und wenn man das Element bearbeiten, werden die Änderungen im gesamten Design übernommen.
Beim Entwickeln von Designs für mehrere Geräte muss man auf die verschiedenen Bildschirmgrößen achten, die auf Smartphones, Tablets und Desktops verwendet werden und berücksichtigen, wie Inhalte auf Bildschirmen unterschiedlicher Größe dargestellt werden. Die „Responsive Resize“ Funktion von Adobe XD analysiert die ausgewählten Objekte des Designs, ihre Gruppierungsstruktur und die Nähe zu den Kanten, um Objekte optimal an mehrere Bildschirmgrößen zu skalieren. Zur Feinabstimmung kann man manuelle Änderungen vornehmen.
Mit der Funktion „Auto-Animate“ im Prototypemodus lassen sich Mikrointeraktionen automatisch für mehrere Zeichenflächen animieren. Wenn man ein Element duplizieren und Eigenschaften der Kopie ändern (z. B. Größe, Position oder Farbe), wird diese Änderung automatisch vom Programm als Animation umgesetzt. Auch YouTube-Wisch-, -Zieh- oder -Welleneffekte kann man einfach erstellen. Werden komplexere Animationen benötigt, kann man das Design auch zur Weiterbearbeitung in Adobe After Effects speichern.
Adobe XD ermöglicht es, Menüs, Dialoge, virtuelle Tastaturen und andere visuelle Elemente zu erstellen, die als Overlays über den Inhalten eingeblendet werden. Ebenso kann man die Position bestimmter Elemente (z. B. Menüleisten, Header und Footer) fixieren, wenn sie beim Scrollen permanent sichtbar sein sollen. Dadurch wirkt das Erscheinungsbild des Prototyps lebensecht.
Adobe XD ermöglicht es, Adobe Photoshop und Illustrator, sowie Sketch Dateien zu öffnen und zu bearbeiten. Durch die direkte Verlinkung mit Adobe Creative Cloud Bibliotheken kann man einfach auf gespeicherte Inhalte zugreifen und diese im Design verwenden. Zudem ist Adobe XD mit vielen anderen beliebten Tools für Produktivität und Zusammenarbeit integrierbar (z. B. Slack, Jira, Microsoft Teams).
In unserem Arbeitsalltag bei C21 hat Adobe XD im Bereich des Webdesigns mittlerweile Adobe Photoshop vollständig abgelöst. Dies bedeutet aber nicht, dass Adobe XD ein perfektes Programm wäre. Ähnlich wie bei der Einführung von Adobe InDesign muss sich Adobe XD in der Praxis erst vollständig bewähren und vor allem laufend weiterentwickeln. Denn die Wunschliste der Webdesigner für weitere Funktionen und Updates ist noch immer lang 🙂
Mehr Informationen zum Programm findet ihr auf der Adobe Website.