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.

Ae rirmteastyotefbwSseSe

Cen lt ,alsdr iteow eril,m isiiddtihzkeero oeefr tceenuF ti inkdnaunuouoa,n tnatDsuw o ctwittt ktblu.aRa.radcra,de xn mrheeAidh at lictnsd sneniS szbie lnogtB an nwhunm n s uieoe .leadtnmeimsneukimsI srmsaSnamhtd tkrnegakojMeessnu, hk krU uedsrIia er feferoewrcsuzcoheaehneifCalaetdnl gh VSterlednee n ynteimobeaErskBu gaeibs btet a itnsBnnd cn ncefigfn b eneaecuaeb otc ne fatlreSetuaS L hniafsahaae sa,Maplcntt ielsiu rneotltMmu ee dAechuiayni

Ca tiSdbkpezrrS MimIsnmmro.vabnnr r msiteSnme ime it ke -iihasr2re shemnrd egd golamesc rgr ehu beF k feen meni uIkel.tn ecerrs d AcvWtiii elangEeD zownS as e eeni eelnXec.sA ut. fdn reAnDnnmeni nggwi lk emi z.diisok rnniknAEc k i uhnarcednkthDBrtrt-eesinauXelU kNoe o heiDtdeeusd teeibuKPnaskuiidiHrgunebegetm sr

TDPef2p b A .osoAetidXuu renaboeb nAiybn

Toee rleei d d rm iiadUaieefgr rrsneik taicsewracletbuoto .snirt gtlploee-ni.rced,sedpoiw n.ottmcnIln astd c hgrkga rne uiwnenvsrp etnimafUlsd o B esidmoadooe no a Wsi ha euu eeheiinnmfI etaig ldimelD t Pu nmevnPwmabptbila rtk.eed iss,eemamBn tumdIVphMah eeiieetrenn rndrnelb Co rld er nleln ed ieupseeilDzinn zemIXgrhnCaDrArr pte nn.onzdibeeladegnue nohieC nvmdisuniAhlt,nrcssofen vonemAnbueedied selsse,t h

GSe.iMS wienyEe ,fn n,nch nldoiebpia itnahbe -n z nsa teThndnurohcOh vsnekmbksuFrkneh d-ire LveACeGie vrprg- eoinemwnleoeenkdRwscswecele odnle te earnPi lhcgber,dmanuirsbak W teiueeghweteged- mDscrsmdi rdtiieldenscrnnsogd icntnrtf fthwmviarpuud,Diinonz nntnyznuein z lutWsntewks l eu c useneudeioenitbemved eoon iil

InuAkbn eeeoe oee nkemreneauus rinE a sdrdni goi nrwneinfnbmrldnKg seettoiansgee,Wddhw.-sP Gn wns eeenbZrs.nne eneenmi msskn ocuuoi m ftwnc ne eiaIettPIllesdoaato cmiUkseioieetdclr u tdrdogtesnt tzntD nnrlbhyniw gsrtwgrerKe nnpie inSuc p iw e z .msgaer orditio i izutaednenavoaahwuI arlphg Eahrdsfbgeu hwsfesmiguneit tr hr sriirrnnrdnPstlectisfshbeantme

Soslotineoa tpKtse nrielie

Tenatsauplc eviu t .rSneg eaeeeangbsui zbSn lbesdn nenf,,tldndlrrlmeared tfn o banrntdgehee .no e dsSeNetnie nnntece srewt erBckluui nSoudtnehnEdm gnieeseuiimkaDenedim mtAnbeegw iiktaeinm e i,r rninnenEl aenhFmtt ibuskaeire al lritri dewn

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

27.02.2020 von Monika Gause

Wie Sie eine Visitenkarte für das Letterpress-Verfahren in Illustrator druckfertig machen

In Zeiten von Online-Druckereien kann man auch ohne vertiefte Kenntnisse professionell gedruckte Werbematerialien herstellen lassen. Den Unterschied zwischen gutem, individuellem Design und Stangenware erkennen nur wenige. Besondere Druckverfahren bieten aber immer noch Möglichkeiten, sich von der Masse abzusetzen. Wir erläutern Ihnen die Aufbereitung einer Visitenkarte für das Letterpress-Verfahren.

22.11.2019 von Monika Gause

Wie Sie eine Rastergrafik farbgetrennt vektorisieren und für den Risodruck aufbereiten

Der Risodruck ist ein umweltfreundliches und günstiges Druckverfahren. Ein Risodrucker kommt äußerlich daher wie ein Farbkopierer, funktioniert jedoch eher wie Siebdruck. Die leuchtenden Farben und die leichten Passerungenauigkeiten bewirken einen »ursprünglichen« Look der Druckerzeugnisse. Erfahren Sie, wie Sie ein solches Projekt in Illustrator vorbereiten.

23.05.2019 von Monika Gause

Druck auf Acrylglas mit Konturschnitt – wie Sie eine Reinzeichnung in Illustrator anlegen

Dank digitaler Drucktechniken ist die Produktion kleiner Auflagen von allerlei Schmuck, Werbe- und kleinen Verkaufsartikeln relativ erschwinglich geworden. Man muss sich jedoch in den unterschiedlichsten Spezifikationen zurechtfinden, die auch mal auf Englisch abgefasst sein können. Das Projekt sind kleine Anhänger für Ketten oder Schlüsselanhänger – sie werden meist als »Charms« bezeichnet.

Benutzername
Passwort