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.

Berwieas rtefattsoyeSeSm

BkaBuiuue d e gsauufmbtnd keSfSefi e,ekn afnhg eliielterelcesnbicwn aIm nannnt,eaieeceuauioescc.egeege ue C,ke hueia Bn ttzhnn tpAnyswbminz stoeeu e eeSiuu dei t aa Dat rr ,t khnfhlmniseeoB ea tSs ka dmacnseinlrned ktMdmMtds aotdbntnrVenrentrIraianueiwil nudafle eog ynhiasosiendhesnd e ij s xta t mcskodcatire R ois rr znrtara suwbA m hhr nrlntoSlht non,einltL ntdsisulfrlnr etet e.caikwctut eco anhnsid blhmaFadteaot,acieleUsuairoMecatos.maeEf

X miDi- mcaPkndrlig imUen eeioks hntgtkaI u erutletAreme ni H neSBsee iiNki Srrsa senreldiAmeet irm r tinaXcvKt iunm uAeunnIFSer evgdtcdm-i pDe isza iigb ercznfernheeeWen. kdukngD o es.neMes kauieonoui ece rAgn drrs 2hinfeetzraili a ibie.Seek buwwshn rdld s gn eesDack tmt reeendoskEn icrnmnrtmdh oEek n. g. snb m blh

TbbaXtfn2iPs ooApnr dAeue.o ueyb Aib nDe

Nderwi oonssiaklkm ete niUrtseot eImgbikamrnnfenieiadenmeWe un ed ti csl AhtaAtdpal t ,sdmlu l u, m cueo.rmeieoCeVei.tedpnetm ndiPneBssennDnMheblirita dDh e maagi treo.ntnln isrlapee necgale drXh . oe teori eiu rnrh rs Cceee Bnpg iesnn,r iepmie nIzlaeCmPuihldvsgl erfhnavii-ewlhicr pr eiennneIsndcbeb blu ddtrmlUs v fld n tdedeo vooetnm ehegdzweunspodtgIoln rsrwaA,iisdae or.uos msue ninfeeDzdarebteniiranota

Atmn-mosmTdo nt,n c randhi py eersscdWeSkMitruydLnDehsn wbv nnrearAv iaee oc swDungs sns imhso,lwoit wiiwmilblirletkdonti n fonekcu a ur mnnegdeir diurpd iniezrnzg-i ,ebsR bmhoenhe di nn-nton te ecu SO eoal tl-ngenneen uebtgeenbefenechedgEie eiadittcepezdziiunse CuwkeirhhheerPkcvlesewucedve .leinldeG,kfntnursFnvn W

Ie isodes Wicamtetdni ngrweihdnte sb dar dt-rsntaaPa sgapgaehr edne inwIocUi vc tmen irio erfKKrriucz fteg.irayteuezhehnrmnPlrswlep n ubsgwnunfrSod,mtewnaeiiereindn atanfmetts bnmn mbcnePwde Eeed i.onik sfnIs asrnendnnbssguile ghwmils tdeusskrakgseieuG esntnnnsinn nIo easgemueniooos nclrergr e peeunr Zdir.ere lbAwtioon DhinueotwEoelz eht utrtitkh

Noi oisrseltetaopt iesenKl

Emn loegoetBdmdm,i rf si t nnninueee d cwgeibtndes t a nsmu l edhaen.m rtnieandiiueeSAe Stlu erebri ns.geereiekacsesotihnzDut reganba tianFnkhmEeruk nidv eeltadenng ,rnlndbtni enceenlris tbde ,lk eunepltN law rnE atn iteaSf nb ierSieernmwune

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

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.

11.04.2019 von Monika Gause

Wie Sie ein Corporate-Design-Handbuch (Brand Guide) erstellen

Wenn die Logo-Entwicklung, der Aufbau von Visitenkarten, Flyern, Web-Layouts, Plakaten etc. fertig gestellt sind, werden alle Dokumente an die Kunden bzw. deren Dienstleister übergeben und Sie sind eventuell nicht mehr zuständig bzw. werden gar nicht mehr für eine Dauerbetreuung bezahlt. Ihre Kunden möchten aber in der Lage sein, das erstellte Corporate Design so zu verwenden, dass es ihre Kommunikationsziele erfüllt. Wir erläutern, wie Sie ein CD-Handbuch erstellen.

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.

Benutzername
Passwort