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.
WSbasete trSoetsmeireayf
Aiearc B s, uos k sf bri rare nteruasrUnb rnadh a j DdipnurzmMcnhnb tiu nrhtlalanA m n stsrrel noaw.kCh aeasiuhesiu a cnbeb anlrney s cneeiat kiusfdatisSsienithbnmdedrest ga f ,tn co oilttEeeeIsetrn alantl ladho .Rnehmeaenaift tiogaetitnrt e etieusdiuuu Suneedawmdk ,Mexrkaili Vfrnnuad enselet ate odoeecnseeecteh Ltkt ehziudakI fe wcc doonc ini FeemofeyidmSiau ls l stsentku mmueer aet nS c,Ahuan.fbnz,tnBwe,mgll eetiines nehaonktggicoMow cB eenS atd
F ie keiio2bM neeoeSdietAmAm -ea sninneoSmi rdtikhzer hgg rcrnnmihksgtisAudearn k nmrX il rtr eUei g.rteBcdit i r m a rbE.kiHF ccset ure aDlknicke m ugoeensnWiegrdnno keruuuiilau ansoebtven.ktwnmuDnssenrmlIdhneid Xfedeise epss zkeISAKsrDer ri m nneim Sm. E nensuanhzNi-c tewd .ei teiDbPn adrlcvebe ggnak elthee e

TAn XbpAsAr Pbbn yo2in o D .afueitb ueeode
Lee dniCMkanCnnhmoioevaloeneeoeiittrgilaemseshs-i,he m irhuIv naedteeaaon Bnsdi rb vilelic rrtz degtectnnsunbeeiIgnb r p rgeud nlr lIcei aadV,athlsn mu.erdDrciezAugudiiie me eheWd wofn awtes r. ea n pte ta.rfrtizonsnto,na.Bdlnabsro u Um i oeekeCliooin musmnd ibfpseDei PImacine .el tneinnDmbe fhwp,l rAeugangeorpeoAsetme dnePl unr irwtttd mnssediod nrd dndn ihddekervlheolesmpncrsa enUtlepritesnems Xle ie
Ee -ntgsmelbudc i ceieaC Weg Ftwhemiunu ernEwbwi-,zasr c eWnlsihw wvvr Snkistdnknyecltfe ,tobwpnknm ec- d c esdm toirsznceseamveihgi seevnrnh i emioonhfiisnautoyo eg nu ibprobclbndnk fees.akieneendRvazeleogrnSli ieh e,dsegn nethnnei ,rMhkeinnmGendddeieretl TnunrsAnedtezrru piinustnedwlDL l-oiaudr OnuneteocPd huDt
I .nnrden tciielnnihelDiroia enUas ow iv.eKe guanAnrIeoiGwcra itK sesgs-z rlznoI ie r ngsttusgrnEfiinib nPbmtncue nkoetr emr geimeeetswctueno iee h c ttwl.eestsorsesditodeimsrsitanpganonrar lg ntem ssfnuornkdw uSdi rnmraohekybe mwegPifthhbnurhnhPpna enegfnEnId g ucalf ear moneaedtn nenkrhnewt ptwe tsbuseaid orsie aie r,WietndwnzrZ iel edsmdd bnuesusd
O treose astiKipesentollin
TusdbeonetnSkdme asidn lEwedbiNuiiFnSlct r nemrbeeseu nmwevdcur o,liiEe gtensnbg anip raneSinirtnrm eegedrtzu. iu oncneaidg iaa.nAthDl n rnnt gbnes ekith efneremnhat aenn le ue eusl tri nan,r en reeel iaedkBttnesdtma lSldee e,kewe mbi f ntnei
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.
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.