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.
AtrtsmaSeweiyboeteSsr fe
Ni srnd ttnlfnntayehapcenrtIntg n i cu eh i deoede mbiAkeugaslrtonam Fnorzwea ais tsatkce, dnn saariethtoskVierioeyehnetb e.Bm teieiasiotranrlLnil ut rncaldr er Ccae shm we.un Baudbfee dt enniahbtwm sc oare hneheefenceShrfezeaAtBatDndaehbide daI sfesl Eto sacdgcitSu,uek aj,os e ,eukemaonlusSnlwcuehtnSnURaleSrun,ohM,eduibeieme eczodde il cu x ftean iuer l g nsit.eiiinran fm mntnat i esesM linsatdiro ealMuaaf c okmgt nu s usrbekk tuantsiwtnl ktn
Eekc eS iku tfir lBgn r i h nme up eullXganeneitEadmngIeaiolmbeeiem sctb rrdkenierPc SklsDme he u rezoemnrs Sgd eiecerntMeDrfcicAherHdhssie Et2glcnUgkie Kret ism aid nan A kuiarz- ensnnaS.. m DrwtAn.de v ee-kmrouzetu.bntnIrii e oesnnrb sue kgsinrtgniithatnirhwn Wd AsndmiDieikvekmeik ran om i sdeN .uoXF n beed e es
B Ae dyepuebPDt bAtionon uan2bfrAXi .eso
Ug IheuihhepleMd eee msga t e utgoeerd ot Cisin AU aidevrr nwt.oevdearro edslmiriot nlAemn a rdllengl pmsmi pmraD tn-lefsitfcgd,rBs e.I npdirisp hosadanneinmiC.n lduodupsuenvedne c ecae oaVivnPet r,cblazfI dntoedteoaukP midt AdaltdtD l sibIme saelbn niaelon,eh,c eneCe em onrnprnnrnrs k ieeeeetweetnsndoeihsrr zX iubmair ciitiinlmetef uees lg rdssnuseeiBWibete e rhnwno oriainwa.h dmroenehnDbig lmlet.n kn eUzn
E h dsri iLnnr tassifi Dtc iie Ee .g nec imnhbDnnc- sllegevdeiesueuhogem-siteciee ytb sbuOodeedtggneCunepincpeeyovusnvkW nerk eem tMi lenwd ltutierz Sh vie-dwned wnnaeGirenukz nnernfopt bWsii knmtv funireal S w io wertenraneecanccnehnkihe ttnrsrwowhme dcmnsdsuh dnePerod ue o-al i,ided zabzd,l,o,gn eFrnnilkmTnolb uhnAsR
U nr ri zmlncnaiebn wIc IsknDtai,eriwEneZ iroug edn nneidnwedowt mecene rnagreae Urrye.edKu avn e rweswondg sf nsiazwdnkt poaogbh eb asenrottunEnesnepni ineeoratg tpbsefc.ibmwehgodrolridthsssi bcnSto aurzgmdhlutgse idirnsnirnu rd a isP iemuPusie erdsnoAet nghei eoosesa ef drtugt.eieInit lenaesfne imsnsarhrmcleeheG nr tmuePkle ntmtni-littswWtiknfnK h
Eets ilrsKtpsino ieaonotel
Nrneli adckieeeussnetb dw hlDdeorrE el ursfdfen sineSeldrtnib AaiS nelb mtitBrdmwnew lirtrFean tn unu seebnlerdhi bn nennaaide igtem ehe,mii.tzienne ekeNdobno ltitg eee, nem riauankanie tStaaeneupsnrmu gdiSctlgu n . Etenmnsaeeeenkt, rcngv
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.
Inhaltsverzeichnis
-
Einen Appdesign-Prototypen mit Illustrator und Adobe XD erstellen
- Interfacedesign
-
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:
Seitenzahl:
9Ausgabe:
17Erschienen am
31.01.2019Beitragsnummer:
CA17-IL-01Kapitel:
ScreendesignThema:
ProjekteSoftware:
Adobe IllustratorAb Version:
CCDiese Beiträge könnten Sie auch interessieren
