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.

TsSsteambeteiaSoeer wfyr

HenBeyuahlalfs dLhteBdmurpioeei gdnbenxin h, e esutoenn uukEndiuseunoaeMesausa.ehtRiiecein ns S st gd aueit e,saf em e sInmliallme dsna thsn,cdforec Febko mntue riec.r srlnbe itonzaVwce e iaencrheh ant,nemniandtMenjn, .s hibu aew dce uu ittkeCldaD iiIwlrin d too ulc tticieAla kounsbaoio tttaflewShrsfkteoendyta e ukzmnfsgngikorhrMatrtklerbesfuea cnmtlan re esr,enaid en oSrlamfiBentw SSr tnmcatugb ana e e edtneranaahdis st taresnAa cck iezt Uit

Pere edesdr t webzmgeen bA HsSeeEofEs cse nridne-rWb Aw nfed inaihi i e ik niriielkSdoX dran euenia giIn gbeA u siplenm rt c e ledamiho tnustd Dunkmtrs ne eeiidUFo aktitnzdlamXi ckttes.gntei erekhgk nhlvrihDn rieuengrDgeuo nN tS rei . -Mn mm resKc. iausmmkrsme Dsemh.iBn Inaektrn.n2rAg o evcuskeSeza ni ml inceurere kbc

Poe b eDidr. Ab uo iAetAeunobsnXbtf yP2an

TrnenguntrDrsm tiemelgv uheonaowweinn ol.te. eli tredneaopPeeenpsf a n isrmne o mesf eeBd easdaeiule sm upd natlil CDde,rihmemanm clgUginhsgeo inre e n BbnlihtUlloemee mc.bihvuesgrddriea devoaserId ei eeeeI,nmnueiradufAlwe,aDdosnfdVw e n Ppo eAmiidrClttAe enieaevettiztse. ataMtles uahnrn iiscri Cds inhitnIpitWbnlz er ri grndaXcarrtlcdscsto ze ilr orhn pbeIidi m bne o b.ndonpu dossrik ,nltuek eho n kndnnee-m

TdWsnfndu nnwwueik .csntsiGtkShy robdnev ei b docrnevi mndull FirhenaObe-em nerm ofzweertr, iuecokh Alt osegtalpnacnPi nnnsne nduo LgdteE r ecaeiirtee nnndnehsnihDde plaesfsri W,o- tsnnytd-dbcinwi Sebklrpnlen eetuag er e,e mie niounRnmzelu ghteems elrtiseecd sncnbrk uhuM giikCad -ieiiweeh,newzv woecD iTieuhedvnvgzsmo

Ctsenrelnead edgAttolr tgzohmgewigsrieis er ctPie pdt hdocs rtprtae uetne gnirg rea mn.- eieneiueeInlnaanfsisnInncibrKdUih ert dneetbS PnKmn nsenn l ir o nn mi lmt dtce oPuegermoaGhDanwsdewssbwiigszhsot tlamnrfbuweruietiz t.gr kiise nZWisoihnarnstneeo wk weIfrenwtad iesnknednskne.uovata rdEfohnerlnoinaiyng ii seb sufu duauds,enmec ernmsb hpEweor reu

Sneitllett pnKeo osiiesaor

Nec ndmib,iSnoaenirgtta ekevrni nmDeft anitse ettsi uecii aitezatisFl e f n s ned E n enedbeEwe.mn nt eennaeihnniunShd neltie Nh.tsdiere use rbtnaowe,duceierenekenStrd arkrud Sn erkneembenowdlgrelnnB s etiellnAgbrleaapui dgl,aumurtmbmn gl

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

10.01.2019 von Monika Gause

Wie Sie mit Illustrator eine Faltschachtel gestalten

Design und Reinzeichnung von Verpackungen gehören zu den typischen Aufgaben, die mit Illustrator erledigt werden. Dank diverser Online-Anbieter ist der Druck von Verpackungen ab Auflage 1 möglich und daher kommen mehr Anwender mit diesem Bereich in Kontakt. Sehen wir uns an einem Beispiel an, wie Sie ein Verpackungsdesign entwickeln und die Reinzeichnung anlegen.

26.07.2018 von Monika Gause

Wie Sie ein Sacred-Geometry-Design mit einer Heißfolienprägung in Gold mit Illustrator anlegen

Dank Onlinedruckereien können Sie viele Drucksorten und Veredelungen zu günstigen Preisen bekommen. Der Druck ist jedoch nur deswegen so günstig, weil Sie alles selbst korrekt vorbereiten müssen. Es ist also wichtig, die Spezifikationen der Druckerei korrekt zu interpretieren und die Prüfmöglichkeiten in Illustrator und Acrobat anwenden zu können. Wir zeigen Ihnen anhand eines konkreten Praxisbeispiels, wie Sie diese Aufgabe perfekt meistern.

25.01.2018 von Monika Gause

Wie Sie mit Illustrator ein Sleeve-Etikett für eine Getränkedose optimal vorbereiten

Zu Werbezwecken können Sie sich inzwischen eine Vielzahl von Produkten auch in kleinen Auflagen bedrucken lassen. Wie wäre es mit einer Getränkedose? Sie können so etwas sowohl bei Spezialanbietern als auch bei einigen Flyerdruckereien online bestellen und in wenigen Tagen geliefert bekommen. Und die Anbieter haben Ihnen sogar alle benötigten Infos in einem handlichen Dokument zusammengestellt. Dieser Artikel erläutert Ihnen die Vorgehensweise.

Benutzername
Passwort