Design System
Dark Mode
Fast alle Unterhaltungs-Apps (Netflix, Spotify, YouTube, Smart TVs) verwenden dunkle User Interfaces. Aus Sicht der Nutzererwartungen ist dies logisch, da sie häufig in abgedunkelten Räumen verwendet werden. Ferner verbessert der dunkle Modus das Erscheinungsbild von farbigen Inhalten.
Um sich den Erwartungen der Zielgruppe zu ordnen und gleichzeitig exklusive und engagierende Atmosphäre zu erzeugen, hat Krowdz nativ eine Darstellung im Dark Mode.
Ich habe mich bewusst für einen sehr schattierten Blauton entschieden, da durch diese nachweislich das Zeitgefühl verringert wird und wir zu den eher warm gestalteten Komponenten einen angenehmen Kontrast schaffen. Die Darstellung erlaubt es ebenfalls, Komponenten detailreicher mit Schattierungen auszustatten.
Beispiel für den Dark Mode anhand der Navigation
Farbe
Grün dient als Primärfarbe. Gelb, Lila und Blau stellen die Akzentfarben dar. Sie dienen der Darstellung von Raritäten, wie es aus vielen Loot-Konzepten bekannt ist. Orange ist eine ergänzende Akzentfarbe, die auch für Fehlermeldungen verwendet werden kann.
Die Hauptfarben wurden systematisch skaliert, um Abstufungen in Illustrationen und unauffälligere Akzente zu erlauben.
Die Farbwahl von Krowdz
Typografie
Die Typografie ist modular skalierend aufgebaut. Als Schriftart habe ich Greycliff CF gewählt. Sie ist vielseitig einsetzbar und erlaubt durch ihre optimal aufgeteilten Schrittschnitte einen guten Kontrast zwischen Titeln und Texten. Die geometrische, fast monolithische Konstruktion verleiht eine klassische Beständigkeit, die durch weiche Kanten und lebendige Formen gemildert wird.
Komponenten
Coins
Jeder Künstler ist in Besitz eines eigenen Coins. In der App wird dieser Coin textlich mit einem Dollar-Zeichen und vier Buchstaben des Künstlers angegeben. Für die Komponente habe ich ein minimalistisches Design gesucht, das dennoch visuell ansprechend wirkt.
Das Ergebnis: Wir nutzen ein Bild des Künstlers im Hintergrund. Der Name des Coins und Künstlers wird auf der linken Hälfte dargestellt. Die Anzahl der vorhandenen Coins ist auch der rechten Seite sichtbar. Nutzer von Investment-Apps wird diese Darstellung bekannt vorkommen.
Coins
NFTs
Einzelne NFTs bestehen aus einem Container, der durch das Seitenverhältnis an Sammelkarten erinnert. Das jeweilige Album wird per Label oben links angegeben. Die Nummer des NFTs, Titel und Künstler sind mittig unten in einem abgedunkelten Container sichtbar.
Unterschiedliche Raritäten haben unterschiedliche Farben, Schatten und Leuchteffekte. Sie sind an den Konventionen von Lootboxen orientiert, die sich in zahlreichen Spielen und ähnlichen Apps finden lassen. Noch nicht gesammelte NFTs verwenden verwaschen angezeigt. Ein Set aus NFTs ("Packages") wird wie ein Set aus Karten angezeigt.
NFTs
Banner
Links und Profilbilder sind eine Möglichkeit, um die Seiten der Künstler zu verlinken. Noch schöner sind sich dynamisch anpassende Banner, die den Künstler durch mehrere Bildelemente in der App präsentieren. Durch das Anzeigen des Coins auf den Bannern wird dem Nutzer die Verbindung zwischen Coin und Künstler verdeutlicht.
Banner
Weitere Komponenten
Screens
Welcome Screen & Onboarding
Welcome Screen & Onboarding stellen das Prinzip der App über ein mehrstufige Schritte-Prinzip dar. Dem Nutzer wird anschaulich erklärt, wie er mit den Künstlern interagieren kann.
Feed & Artist Screens
Der Feed bedient sich den Erwartungen der Zielgruppe. Er ist dem Grundprinzip von TikTok nachempfunden, Items im Feed nach oben und unten zu wischen. Der Künstler wird über ein Video und eine kurze Beschreibung dargestellt. Der Nutzer hat die Möglichkeit, über Gesten und Taps zur Suche zu gelangen oder die Detail-Seite des jeweiligen Künstlers zu öffnen.
In weiteren Design-Arbeiten würde der im Feed unten rechts dargestellte Platzhalter mit einem eigen designten Coin ausgetauscht werden.
Wallet & Coins
Der Nutzer hat in der Wallet eine Übersicht aus seinen vorhandenen Tokens. Diese kann er in einem detaillierten Screen öffnen, um mit ihnen zu interagieren.
Animationen
Interaktionen
Um den Prototypen optimal präsentieren zu können, habe ich die Designs aus der Software Adobe XD in die Software Protopie exportiert. Protopie ermöglicht es, detaillierte Animationen zu erstellen und komplizierte Gesten zu nutzen.
Über das Tool gelang es mir, eine interaktive Suche zu gestalten, einen wischbaren Feed zu erstellen und auch einige wenige komplexe Screen Transitions einzubauen, die für den nötigen Show-Effekt sorgen.
Coins kaufen
NFT Packages
Suchfunktion
Wichtiger Hinweis
Alle verwendete Bilder und Videos von Künstlern in der UI sind als Platzhalter zu verstehen. Sie dienen nur dem Zweck, die UI mit entsprechendem Content zu visualisieren. Alle Medienrechte liegen bei den jeweiligen Erstellern und Vertreibern dieser Medien. Auf Wunsch werden diese umgehend entfernt.