In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Überarbeitung der K-9 Mail App im Rahmen des Projektwochenkurses „Figma: Eine Einführung“.
Die K-9 Mail App ist ein Open-Source Mail Client für Android.
Ich habe mich für ein Redesign der K-9 Mail App entschieden, weil ich diese jeden Tag verwende und ich bei ihr noch Verbesserungsbedarf bezüglich UI and UX sehe.
In den Screens unterhalb dieses Textes kann man die aktuelle Listenansicht der App sowie den aktuellen „Verfassen“ Screen für neue Emails sehen.
Beim „Verfassen“ Screen habe ich folgende Beobachtungen gemacht:
Bei der Listenansicht habe ich folgende Beobachtungen gemacht:
Im unterhalb dieses Textes verlinkten Video stelle ich den Prototypen vor.
Unterhalb dieses Textes kann man Screenshots der beiden überarbeiteten Screens meines Redesigns sehen.
Ich habe die Listenansicht verbessert, indem ich:
Ich habe den “Verfassen„ Screen verbessert, indem ich:
Ich habe Elemente, die wiederverwendet wurden, als Komponenten angelegt. Dies umfasst Header, Avatar, List, Popup, Button, Tastatur und Input Komponenten. Der Avatar-Background wurde als Variante angelegt um schnell zwischen den vordefinierten Farben wechseln zu können. Die Input-Felder jedoch nicht, weil ein schneller Wechsel zwischen diesen nicht notwendig ist.
An Color Styles habe ich eine primäre Farbe angelegt, sowie jeweils eine primary und secondary Text-, sowie Hintergrundfarbe.
Ich habe versucht mein Layout übersichtlicher zu machen, indem ich zunächst alle Elemente in meinem Projekt in die folgenden drei Bereiche unterteilt habe:
Diese habe ich jeweils durch ein farbiges Rechteck schnell erkennbar gemacht. Außerdem sind die Komponenten jeweils passend zueinander angeordnet, z.B. Header und Input Felder.
Bei der Benennung habe ich darauf geachtet, gleiche Komponenten/Elemente möglichst so zu benennen, dass sie mit dem gleichen Wort anfangen, gefolgt von einem Schrägstrich und dann die Variante/Namen derjenigen, was die Sortierung verbessert und Übersicht der Elemente in Figma deutlich erhöht.
Text wurde von mir ausschließlich unter Verwendung von Text Styles angelegt. Ich habe für dieses spezifische Projekt 3 Text Styles benötigt:
Im eingebetteten Figma Projekt unterhalb dieses Textes kann man den Protoypen selbst ausprobieren und erfahren.
Der Kurs hat mir die Grundlagen von Figma, wie z.B. den Umgang mit Komponenten und Co. sehr gut vermittelt. Dabei wurde besonders Wert auf das saubere Anlegen der Projekte gelegt, was mir bei einer zukünftigen kollaborativen Zusammenarbeit sicher zugute kommen wird.
Zudem wurden viele interessante Tipps zu Interfacedesign-bezogenen Themen gegeben, was mir sehr gefallen hat und während des Studiums bestimmt hilfreich sein wird.
Ein kleiner Negativpunkt waren für mich Aufgaben, die dafür angelegt waren, zu demonstrieren, wie schwer es ist, ohne Nutzung von z.B. Komponenten und Auto-Layout zu arbeiten - nur um in der anschließenden Aufgabe zu merken, wie viel einfacher und schneller das Anlegen unter Nutzung dieser funktioniert. An dieser Stelle hätte vielleicht auch die halbe Tabelle gereicht. 😉
Insgesamt bin ich jedoch sehr zufrieden mit dem Modul.