3 Quicktipps von Melanie Daveid für Apps, die jeder auf seinem Smartphone haben will
Mit Adobe XD, der neuen Komplettlösung für UX/UI-Design, gelingen nicht nur Profis, sondern auch Einsteigern visuell überzeugende und perfekt funktionierende Apps. Diese drei Tipps von UX-Expertin Melanie Daveid erleichtern dir den Start.
Wie du Apps designst, die nicht nur toll aussehen, sondern auch auf jedem Gerät perfekt funktionieren, erfährst du hinter dem dritten Türchen des #AdobeXMAS2017-Adventskalenders. Denn Content auch per App zu kommunizieren, wird ein immer selbstverständlicherer Teil in der Design-Welt. Mit dem neuen Tool Adobe XD lassen sich auf einfache und schnelle Weise Ideen in App-Prototypen verwandeln.
Obwohl Adobe XD erst seit kurzem Teil der App-Familie in der Creative Cloud ist, hat sich das Tool bereits einen festen Platz auf dem Desktop von Melanie Daveid erobert. „Adobe XD hat mich sofort begeistert, weil es so übersichtlich ist und nicht dazu verleitet, sich in Design-Details zu verlieren“, erklärt die erfolgreiche UX-Designerin und Art Directorin.
https://blogsimages.adobe.com/creative/files/2017/12/melaniedaveid_01.png
Melanie Daveid stammt aus Österreich und hat bereits Apps für Puma und Red Bull designt. Derzeit ist sie für das Design und die User Experience von Onefootball verantwortlich. Das populäre Fußball-Portal aus Berlin zählt zu den ersten und beliebtesten Sport-Apps überhaupt. Als Fan der Tottenham Hotspurs bringt sie die nötige Empathie mit, um das App-Design an den Nutzervorlieben zu orientieren.
Einen Einblick in ihre Design-Philosophie ermöglicht Melanie Daveid in diesem Tutorial-Video (das Video findet ihr auch etwas weiter unten), das sie extra für euch zu Weihnachten produziert hat. Darin skizziert sie am Beispiel einer Wunschlisten-App für Weihnachtsgeschenke, wie du in wenigen Schritten einen Design-Prototypen mit Adobe XD kreierst. Nachmachen strengstens erlaubt! Folgende drei Tipps von Melanie Daveid erleichtern dir den Einstieg, wenn du Adobe XD zum ersten Mal ausprobierst.
Melanies Quicktipps für Adobe XD
#1 Mit Presets sofort loslegen
„Das Schöne ist, dass du keine großen Vorüberlegungen anstellen musst. Adobe XD ermöglicht es, sofort in den Design-Prozess einsteigen zu können. Du kannst nämlich schon im Startbildschirm verschiedene Vorgaben für bestimmte Smartphones, Tablets oder Webseiten-Auflösungen sowie UI-Kits für ausgewählte Betriebssysteme herunterladen. Mir fällt es dadurch leichter, spontane Ideen digital festzuhalten, weil ich mir vorab über diverse Details keine Gedanken machen muss.
Meistens starte ich mit einem einfachen User Flow, also dem Pfad der Ansichten, die der Nutzer bei der App-Nutzung zu sehen bekommt. Dafür erstelle ich mir jeweils eine Zeichenfläche, auch Artboard genannt. Auf dieser Zeichenfläche lege ich Textboxen und Buttons an, sodass ich einen Überblick bekomme, was der User lesen und womit er interagieren soll. Erst später kümmere ich mich um den visuellen Teil des Designs. Also, es gibt keinen Grund zu zögern. Leg’ einfach los!“
#2 Erleichtere dir Design-Entscheidungen mit dem Wiederholungsraster
„Im Bereich UX-Design geht es meistens darum, die beste Lösung aus einer großen Auswahl von Möglichkeiten zu wählen. Dabei ist es hilfreich, sich einige Optionen in visualisierter Form anzusehen und diese zu vergleichen, um leichter eine Entscheidung zu treffen. Nutze dafür das Wiederholungsraster, auch Repeat Grid genannt. Damit testest du in Adobe XD, wie gut dein Design funktioniert, wenn du verschiedene Inhalte eingibst. Sieht es zum Beispiel bei 15 Einträgen in der Wunschliste noch genauso gut aus wie bei nur einem Eintrag? Oder vergleiche, ob eine Listen-Ansicht oder einer Gitter-Ansicht sinnvoller ist.
Bei mir entsteht dadurch oft ein wilder Haufen an Artboards, die ich miteinander vergleiche, um zu sehen, welches Layout am besten funktioniert. Das kann auch etwas unordentlich aussehen, aber in Adobe XD aufräumen kann ich schließlich auch später. Hauptsache, in den Augen des Users sieht die App gut aus und funktioniert gut! Das ist ja, was am Ende zählt.“
#3 Vergiss nicht, deinen Prototyp ausreichend zu testen
„Digitale Produkte können schnell komplex werden. Um dich zu vergewissern, dass die App weiterhin übersichtlich und benutzerfreundlich ist, solltest du nicht erst am Ende, sondern schon zwischendurch verschiedene User Flows durchspielen. Dazu wechselst du einfach mit einem Klick von der Design-Ansicht in die Prototyp-Ansicht. Dadurch begibst du dich in die Rolle des Nutzers und simulierst die Interaktion mit den Design-Objekten. So siehst du sofort, ob alles funktioniert oder, ob du an einer Stelle optimieren musst.
https://blogsimages.adobe.com/creative/files/2017/12/adobeXD-xmas_folie.png
Zusätzlich ermöglicht dir Adobe XD auf einfache Weise den App-Prototyp für einen Test durch Kollegen und Freunden zu teilen. Dazu klickst du rechts oben auf das Teilen-Symbol und erstellst einen Link. Der Empfänger kann damit das Design im Desktop-Browser oder direkt auf dem Zielgerät ausprobieren. Für letzteres braucht sich der Empfänger einfach nur die aktuelle App von Adobe XD für iOS oder Android herunterzuladen. Änderungen im Design werden sofort angezeigt. Das ist ein wunderbarer Weg, um Konzepte auszuprobieren und Feedback zu sammeln!“
Hast du Melanies Tipps schon ausprobiert? Lass es uns in den Kommentaren wissen.