Webdesign mit Adobe XD

13.08.2019, Design

Im Zeitalter von responsive Websites ist es wichtiger denn je, Webseiten und mobile Apps effektiv zu entwerfen und das Design vor der Programmierung möglichst realitĂ€tsnah mit dem Kunden abstimmen zu können. Mit dem Programm Adobe XD ist dies nun bedeutend einfacher als noch vor einigen Jahren, denn Adobe XD wurde eigens fĂŒr das Design und Prototyping von Online-Projekten konzipiert. Mehr ĂŒber die Features des Programmes erfahrt ihr hier.

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 zeichnet sich vor allem durch folgende Features aus:

Design, Prototyping und Freigabe an einem Platz

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.

Erstellung von Elementen und Komponenten fĂŒr ein einheitliches Design

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.

Wiederholungsraster fĂŒr schnelles Duplizieren von Elementen

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.

„Responsive Resize“ zur Anpassung von Designs auf verschiedene BildschirmgrĂ¶ĂŸen

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.

„Auto-Animate“ fĂŒr eine schnelle Prototype Erstellung

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.

Overlays und „Feste Positionen“ zur Stapelung von Inhalten

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.

Integration mit zahlreichen anderen Programmen

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.