Zur Machart Studios Website
Back to top

Webdesign mit Adobe XD: Unser Praxischeck

XD ist zweifelsohne das Adobe-Tool der Stunde. Zum Release des neuen Screendesign- und Prototypingtools rührte Adobe kräftig die Werbetrommel. Es scheint als sei Adobe fest entschlossen XD als neuen Branchenstandard zu etablieren und Konkurrenzprodukte wie Sketch langfristig vom Markt zu verdrängen.

Das Adobe dazu in der Lage ist lehrt die Vergangenheit – so verschwand zum Beispiel QuarkXPress nach der Einführung von InDesign auch nahezu komplett von der Bildfläche.

Auch wir haben in einem vorherigen Post schon einige Worte zu XD verloren. Heute möchten wir das Tool noch ein wenig umfangreicher beleuchten und Euch gerne daran teilhaben lassen.

Vorteile

    • Generalüberholung: Adobe XD wurde anders als Photoshop von Grund auf neu programmiert, es gibt keine Altlasten und die Technik entspricht absolut der heutigen Zeit. So ist der Vollbildmodus und Split-Screen endlich auch am Mac möglich.
    • Übersichtlichkeit: Durch kontextbasierte Programmierung endlich kein Ebenen-Wirrwarr à la Photoshop mehr.
    • Speeeeeed: Das Programm ist unglaublich schnell und arbeitet auch bei einer Vielzahl von Zeichenflächen immer noch ruckelfrei.
    • Open Minded: Das Programm wird anhand der Wünsche der Community weiterentwickelt. Momentan könnt ihr euch monatlich über neue Features und Verbesserungen freuen. https://adobexd.uservoice.com/
      Schaut einfach mal rein!
    • Dateigröße: Am Beispiel des UI-Kits für IOS sind PSD-Dateien 36 mal größer als XD-Dateien.
      https://developer.apple.com/design/resources/#ios-apps
      No more words needed.
    • Gestochen scharf: Das Programm unterstützt eine vektorbasierte Ansicht. Vektoren lassen sich direkt aus Illustrator per Copy Paste importieren und umfangreich bearbeiten.
    • Klare Ausrichtung statt Wischiwaschi: Adobe XD hat eine klare Ausrichtung und Aufgabenstellung – das Erstellen von Screendesigns und Prototypen für Webseiten und Apps. Photoshop hingegen wird schon lange nicht mehr nur für Bildbearbeitung genutzt. Das macht es schwierig auf die Bedürfnisse einer Zielgruppe einzugehen und deren Probleme zu lösen. Adobe XD schlägt hier die Brücke – unnötige Features wurden entfernt, sinnvolle Features hinzugefügt.
    • Prototyping und Mockuperstellung: Mit XD ist es nun möglich, zwischen einzelnen Screens per Klick zu interagieren. So kann dem Kunden einfach und schnell die Funktionalität des Screendesigns präsentiert werden. Die Freigabe erfolgt per Link – der Kunde kann sich das Mockup direkt scrollbar in Originalgröße im Browser ansehen.
      Endlich keine aufwändigen PDF-Präsentationen mehr.
    • Zusammenarbeit mit Entwicklern: Die Freigabe von Design-Spezifikationen erleichtert dem Entwickler die Umsetzung. Viele Eigenschaften wie Größe, Farbe, Schriftart und Inhalt können so einfach und schnell kopiert werden.
  • Einfacher Umstieg: Der Umstieg von Photoshop auf XD fiel mir persönlich sehr einfach. Der übersichtliche Aufbau und die Shortcuts erleichtern das Arbeiten zusätzlich.
  • Und vieles mehr: Wiederholungsraster, Einfache Layout-Grids, Zeichenformate, Symbole, Zeichenflächen, verknüpfte Farbfelder und vieles mehr sorgen für viel Spaß beim Screendesign.
    Einfach mal ausprobieren!

Nachteile

  • Noch nicht vollkommen: Einige essentielle und denkbar einfache Features sind leider noch nicht enthalten. Dazu zählt zum Beispiel der Versalsatz – wichtig für die Darstellung von Überschriften.
  • Verbreitung: Momentan ist Adobe XD noch nicht allzu weit verbreitet. Viele Agenturen werden weiterhin mit Photoshop arbeiten. Gerade wenn der Kooperationspartner noch mit der Creative Suite arbeitet könnte das ein Problem sein. Verfügt der Gegenüber allerdings über einen Creative Cloud Zugang kann Adobe XD problemlos kostenfrei heruntergeladen werden. Auch die Ansicht der Entwickler Freigabe erfordert einen Adobe Account.
  • Funktioniert nicht auf alten Rechnern: In der Anfangsphase wurde XD nur für den Mac entwickelt. Mittlerweile läuft XD auch unter Windows 10.
    Ältere Versionen als Windows 10 werden leider nicht unterstützt. Auch die Hardware muss den Anforderungen genügen. Eine Übersicht der Anforderungen ist hier zu finden:
    https://helpx.adobe.com/de/xd/system-requirements.html

Wie wir Adobe XD in unserem täglichen Workflow nutzen

Bereits seit der ersten Beta-Version wurde XD immer wieder für kleinere Aufgaben von einzelnen Mitarbeitern getestet. Die Neugierde war extrem groß. Das erste größere Projekt wurde dann im Juni 2017, also noch in der Beta-Phase von XD umgesetzt. Danach griffen wir bei fast jedem größeren Screendesign-Projekt auf Adobe XD zurück. Seitdem fühlt sich das Gestalten für uns Webdesigner wesentlich intuitiver an und alles geht leichter von der Hand.

Nutzt man Adobe XD richtig und legt Wert auf einen sauberen Dokumentaufbau sind auch vorher aufwändige Änderungen wie der Wechsel der Schriftart oder der Farben über alle Zeichenflächen hinweg innerhalb von Sekunden erledigt. Auch die Freigabefunktion nimmt uns einige Arbeit ab und sorgt für eine bessere Vorstellungskraft beim Kunden.

Fazit

Wir arbeiten produktiv und gerne mit Adobe XD und freuen uns auf die Zukunft – sie wird sicherlich einige spannende Funktionen bereithalten und den Workflow weiter beschleunigen.

Von Philipp Schmidt

5 Kommentare

  1. 19. April 2018 ONMA Hannover Antworten

    Danke für diesen informativen Beitrag! Adobe XD klingt ziemlich interessant.

    • 19. April 2018 Philipp Schmidt Antworten

      Sehr gerne. Ja XD ist wirklich ein interessantes Werkzeug. Ich bin auf die weitere Entwicklung sehr gespannt. Teilen Sie doch gerne bei Zeit Ihren Erfahrungsbericht mit uns. 🙂

  2. 7. Juni 2018 Ekaterina Antworten

    Hi, wie kann ich die Daten aus XD meinem Techniker zu Verfügung stellen? Per Export? oder wie? Der Programmierer braucht ja einzelne Ebenen oder zumindest Vektor.

    • 11. Juni 2018 Philipp Schmidt Antworten

      Hallo Ekaterina,
      Du kannst dem Entwickler Assets über die Option „Datei > Exportieren“ (Shortcut: CMD+E) zur Verfügung stellen. Es lassen sich zahlreiche Formate exportieren (SVG, komprimiertes JPG, PNG …).
      Das komplette Layout kannst Du alternativ über die Option „Design Spezifikationen veröffentlichen“ mit dem Entwickler teilen. Das ist eine super praktische Option.

      Falls noch Fragen offen sind, gerne.

      Schöne Grüße,

      Philipp

  3. […] 9. Webdesign mit Adobe XD: Der Praxischeck in unserer … […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Machart Studios Werbeagentur