Wie Sie einen Appdesign-Prototypen mit Illustrator und Adobe XD erstellen

Beim Design einer App geht es nicht nur um die grafische Gestaltung – das ist sogar der geringere Teil –, sondern um deren Bedienung, das Benutzererlebnis oder die »User Experience«, abgekürzt UX. Es ist wichtig, dass eine Softwareoberfläche übersichtlich, klar, vertraut und vertrauenerweckend ist. Das kann man mit Illustrator nicht mehr ausprobieren, präsentieren oder gar im Testlabor anwenden – da braucht man Spezialwerkzeuge.

Interfacedesign

Für einen simplen Walkthrough, in dem die unterschiedlichen Stadien präsentiert werden, reicht der neue Präsentationsmodus in Illustrator, aber all die Menüaufrufe, unterschiedliche Buttonstadien, Warnhinweise oder Mikroanimationen können darin nicht gezeigt werden. Sie sind jedoch für die Benutzung äußerst wichtig.

Diverse Spezialprogramme sind hier inzwischen in die Bresche gesprungen, nachdem auch PowerPoint eine Zeit lang für Softwaredemos verwendet wurde. Sehen wir uns zunächst die unterschiedlichen Methoden des Interfacedesigns und Prototyping an.

In der ersten, frühen Phase bieten sich analoge Methoden an, z. B. mit Notizzetteln oder – falls Sie in einer Gruppe arbeiten – auf Tafeln. Beides lässt sich einfach korrigieren und ohne große Vorbereitung starten. Es gibt jedoch auch Notizbücher mit vorgedruckten iPhone-Rahmen, Browser-Oberflächen oder sogar Browser-Gridsystemen [Abb. 1].

Abb. 1: Papier-Prototyp für ein Design auf dem wikiedu.org-System (Foto von Sage Ross, CC BY-SA 4.0)

Diese Art Vorlagen können Sie sich auch als PDF downloaden und dann ausdrucken, z. B. hier.

So lassen sich schon einfache Walkthroughs ausführen, Sie sehen den Ablauf der Screens und die Benutzerführung. In dieser ersten Phase, dem Wireframing, geht es gar nicht so sehr um ein konkretes Design oder Farben, sondern um die Logik der Benutzung und die Inhalte der Screens.

OrieeSftt Sbemrtsaswaeye

RnuBeeRe gdlsuIambmutii rrbe .icos .t oanSenhalBa anerka ennet tDt w ccksrdm saddihiehateneaeSt asIeVsswwu eheeotdnf f aubsgaituiAntme lnu dainfniotte lcelt ie noskrtnecauEeeu f ittkeneu ilh,i tworhzes tea nnhlsi Lncorte lsAheu n k cwbcae lsttbgrufaoe fgrdrnn ctudkhnkdtymh assedeaUrltmsene aSclalBa euhoa, idnetryeto meesa.uanMiofkzar ese n,sjad d,reis,ceenuinMtaSMrermCnnenneiani e iodiFSg,ia n cunlanibamdx eiuzf hlipm b eniotet r ttsnce ko

Ahsm dS snuuc.kbdegen Nhni ufiieI.nemureoeeF msvdaek..e knXSi rIs t. gKinnebk meDlorkseDius il Xeemha omi2 gnicnEMiasirA t geteienw e- stet kWrdigi nbzt tl SAurin siDedc an r imto n eeudsh AHelpgiatsifnn i hhdiccdde mrnkcm E bmn n eeie ekDrwmr u zserr-aeeekcBiUzriuPtkSAnnnlere em krrr ogsee angenenedt obn vreral ti

XDis tr bdyaAeu te2ipA.unobenb f n obo AeP

Feu isnaebeeedier diimoh nbrl osUrt mIePeln.-Bio nritadoaseinaidatcosbuVesdlermih wn hIdhDt esAiiv,s nueoiir ep h ncIdndseenadfpWfrtlmnktdeabgohnDekheemrpvnalo.m ialiettcalsrilnlnche, iC rzd uiiegz Ci nnfandl sdeue et tuum omPn e medgdeivwe sl sXvtes s rt nlbortdtreeeoe n egrk lowen tnUea.eeemiigMtDuiepu e d .msaon nend egosrC ozw, c,prrtbneninmemor lamBneliplnhaep.stniaianr en rnresrct uAd lgeiAInde ee

Rm gdeod u nfd u deOeg,PWn entirtsoa ne Lnpce eetA iitiaoslc, i, wrerknlu wineechswisetwkviCt blkwhbonn-vghlmruermn y- gyieicnnaa-nTiwe ebnrisnomuee lueD lidvhpzignheFunicefsltnrshenoivzztg eekn edancnn,beasd-nurezvb ndtuerdesstpd mdt u tWlerhiie nheeeSM nfbdG. n nntoi se SnlmsioEneemce sonerih RcDa drdkiokniecweu e

Eencris fa bnd wccluee reao.eu ebc bntk ngewatratenfenrI i.ntndrwwgthrsneermiwt tiicfga eoeKb i manuhosa aUeiavziKobsy unEsugddsrdd snsfmnb snsiglmoeeinuikdglnuwzrineeSmretiraiee isnmeun f eoee uA e alimroidernrteeptnntn iz eItwienlntonusntd kooshePhtodtgmi Pe rngsseIiDinsehsrandn orrreEG g t pcene nP dtZ hk-tirn ipido,nrhstWe ewasnmnw ra s lhu.lseg

Ltlisetnietoo oirssKapene

Nezmw endf nrgi eelannt neEp enSd e,itnusneilSnnuennli ,u gn ecugr rtebiieelesageainnadm nlnin ehhADn eueEhendti ags dcn ekrousbiidutovdwbn, mn.tnk.eaetSfrlee mklrr e tFantwaerseecor ik t ttbbd nmeid be elasrlieitBnrsen tm rNtauaeem i e eSid

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

nach oben

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Inhaltsverzeichnis

Einen Appdesign-Prototypen mit Illustrator und Adobe XD erstellen
- Interfacedesign
  - Softwarebasierte Systeme
- Aufbau von XD
  - Wie übernimmt und verwaltet XD die Grafik?
- Designüberlegungen
- Designen in Illustrator
  - Layoutraster anlegen
  - Icons und Symbole
  - Temperaturskala
  - Weltkarte
  - Überlauf auf Zeichenflächen
- Datei in XD importieren und weiterbearbeiten
  - Ordnung schaffen
  - Wiederholungsraster anlegen
- Interaktivität anlegen und testen
  - Scrollen
  - Verbindungen und Übergänge anlegen
  - Prototyp testen

Beitragsinfo

Praxiswerk:

Autor:

Monika Gause

Seitenzahl:

Ausgabe:

Erschienen am

31.01.2019

Beitragsnummer:

CA17-IL-01

Kapitel:

Screendesign

Thema:

Projekte

Software:

Adobe Illustrator

Ab Version:

Schlagwörter:

Adobe, Illustrator, Vektorgrafik, Illustration, illustrieren, Adobe XD, Adobe-XD, Experience, Design, Experience, Design, Usability, Screendesign, Interfacedesign, UX-Design, XD-Design, Benutzeroberfläche, Prototyping, importieren, Grafikelemente, Grafiken, iPhone, Vorlagen, UI-Kits, abrufen, anlegen, layouten, Layouts, Hilfslinien, XD-Symbole, Workflow, Mobiles, Mobilgeräte, Smartphones, Handys, Layoutraster, Zeichenflächen, Temperaturskala, Weltkarten, Klötzchen-Grafik, Objektmosaik, Überlauf, scrollen, Scrolling, wiederholende, Symbolinstanzen, Wiederholungsraster, interaktiv, Interaktivität, testen, Übergang, Übergänge, Apps, Appdesign, App-Design

Diese Beiträge könnten Sie auch interessieren

30.07.2021 von Monika Gause

Wie Sie mit Illustrator ein Tuch mit technischen Motiven gestalten und in den Druck geben

In diesem Beitrag sehen wir uns an, wie Sie ein Halstuch im Stil einer Bandana, aber mit eigenen Gestaltungselementen, designen können. Verschiedene Dienstleister bedrucken dann fertige Tücher oder Stoffe.

07.01.2021 von Monika Gause

Wie Sie eine Grafik in Illustrator zum Schneiden und Lasern in Schwarzweiß umsetzen

Spezielle Produktionsmethoden erfordern eine reine Schwarzweiß-Version Ihrer Grafik, z. B. das Schneiden aus Folie, Gravuren oder das Herstellen von Schablonen. Für einige Anwendungen ist es zusätzlich erforderlich, dass alle Teile zusammenhängen. Darüber hinaus kann es erforderlich sein, bestimmte Mindestgrößen oder Mindestlinienstärken einzuhalten.

18.12.2020 von Monika Gause

Illustrator auf dem iPad: Wie Sie mit der Wiederholungsfunktion kreativ gestalten

Illustrator für das iPad ist eine sinnvolle Ergänzung für Illustrator – wegen der Repeat-Funktion, oder wenn Sie gerne unterwegs arbeiten möchten. Die Dateien lassen sich problemlos austauschen und sogar abwechselnd auf dem iPad und am Desktop bearbeiten. Wie Sie mit der Wiederholungsfunktion interessante Muster gestalten, dazu verschiedene andere Features verwenden und worauf Sie beim Bearbeiten achten müssen, sehen wir uns in dieser Übung an.

Benutzername
Passwort