Design System
Dark Mode
Schon mal bemerkt, wie Netflix, Spotify, YouTube und Smart TVs alle dunkle Benutzeroberflächen verwenden? Das ist kein Zufall, sondern ein sorgfältig durchdachter Plan. Nutzer tendieren dazu, diese Apps in gedimmten Umgebungen zu nutzen, weshalb ein dunkles Design intuitiv erscheint. Zudem lassen sich farbige Inhalte im Dunkelmodus ansprechender darstellen.
Krowdz hat diesen Trend erfasst und geht mit der Zeit. Mit einem nativen Dark Mode Design erfüllt die App nicht nur die Erwartungen der Nutzer, sondern schafft auch eine exklusive und engagierende Atmosphäre.
Innovation steckt oft im Detail, deswegen haben wir uns für einen schattigen Blauton entschieden. Warum? Weil Studien zeigen, dass solche Töne das Zeitgefühl verlangsamen. Sie bilden auch einen angenehmen Kontrast zu den wärmeren Komponenten, die wir in der App verwenden. Diese dunkle Palette ermöglicht zudem eine detailliertere Gestaltung unserer Komponenten. Einfach ausgedrückt: Unsere sorgfältige Farbwahl sorgt für ein reichhaltiges, ansprechendes Erlebnis, das die Nutzer zum Verweilen einlädt.
Beispiel für den Dark Mode anhand der Navigation
Farbe
Die Farbpalette von Krowdz ist wohlüberlegt und taktisch geplant. Als Primärfarbe sticht ein lebendiges Grün hervor, was von einer Reihe von Akzentfarben - Gelb, Violett und Blau - begleitet wird. Diese Farben stehen dabei stellvertretend für Raritäten, eine Anlehnung an die bekannten Loot-Konzepte aus der Spielewelt. Als ergänzende Akzentfarbe haben wir uns für ein warmes Orange entschieden, das nebenbei auch für Fehlermeldungen eingesetzt wird.
Bezüglich der Hauptfarben haben wir eine systematische Skalierung angewendet. Dadurch können wir verschiedene Abstufungen für Illustrationen schaffen und gleichzeitig dezente Akzente setzen. Dies erlaubt uns, selbst in der detailreichsten Grafik farbliche Highlights zu setzen, ohne den Betrachter zu überfordern. Jede nuancierte Schattierung und Farbgebung wurde mit Bedacht gewählt und harmoniert so im Zusammenspiel aller Elemente.
Die Farbwahl von Krowdz
Typografie
Bei der Wahl der Typografie haben wir uns für einen modularen und skalierbaren Ansatz entschieden. Die gewählte Schriftart, Greycliff CF, ist ein unschlagbarer Allrounder. Sie bietet durch ihre verschieden aufgeteilten Schriftschnitte ein harmonisches Zusammenspiel zwischen Überschriften und Fließtexten – ein wichtiger Aspekt bei der Gestaltung eines lesefreundlichen Designs.
Greycliff CF trägt mit ihrer geometrischen, fast monolithischen Struktur zu einer Legibilität und Beständigkeit bei, was ihr einen gewissen klassischen Charme verleiht. Trotz ihrer Struktur geht die Schriftart dabei nicht ihre Weichheit und Lebendigkeit verloren. Abgerundete Ecken und dynamische Formen helfen dabei, harte Kanten zu mindern und das Gesamtbild zu harmonisieren. Das Ergebnis ist eine optische Balance, die sowohl zeitlos als auch modern erscheint.
Komponenten
Coins
Was Krowdz einzigartig macht, ist die Tatsache, dass jeder Künstler seine eigene, personalisierte Coin hat. Diese Coins manifestieren sich als eine Kombination aus einem Dollar-Zeichen und vier Buchstaben, die den Namen des Künstlers repräsentieren. Für diese Komponente haben wir ein minimalistisches Design konzipiert, das trotz seiner Einfachheit den Blick des Betrachters fängt.
Betrachten Sie es als eine Digitale Sammelkarte, deren Design auf Augenhöhe mit der visuellen Anziehungskraft eines Künstlerportraits ist. Hierbei präsentiert sich der Name des Coins zusammen mit dem des Künstlers auf der linken Seite, als ob sie eine Einheit bilden. Auf der gegenüberliegenden Seite haben wir den Status der eigenen Coin-Sammlung umgesetzt - eine vertraute Darstellung für jene, die mit Investment-Apps vertraut sind. Wir haben es geschafft, ein komplexes Konzept in eine attraktive und intuitive Darstellung zu übersetzen.
Coins
NFTs
Mit Blick auf das Design der NFTs haben wir uns für einen Container entschieden, der in seiner Form an Sammelkarten erinnert, um den Sammelcharakter der NFTs zu unterstreichen. Zusätzliche Details, wie das Label des zugehörigen Albums oben links und die Informationen zu Nummer, Titel und Künstler in einem dezenter Bereich unten, geben Aufschluss über das jeweilige NFT.
Besondere Aufmerksamkeit haben wir auch den verschiedenen Raritätsstufen gewidmet. Jede Stufe läuft mit einer einzigartigen Kombination aus Farben, Schatten und Leuchteffekten auf, angelehnt an das allgegenwärtige Lootbox-Konzept, welches in der Welt der Videospiele und Apps weit verbreitet ist. NFTs, die noch auf ihre Entdeckung warten, werden in leicht verblassender Darstellung vorgezeigt.
Gruppen von NFTs, auch als "Packages" bezeichnet, werden als Kartenset präsentiert, um das Gefühl eines "Schatzfundes" zu verstärken. Dem Nutzer soll dadurch das Gefühl vermittelt werden, ein Stückchen seines Lieblingskünstlers in Händen zu halten - vielleicht eine Rarität, die in der Gemeinschaft der Fans erst noch entdeckt werden will.
NFTs
Banner
Traditionelle Links und Profilbilder? Uncool. Bei Krowdz haben wir uns gesagt: Warum einfach, wenn's auch fancy sein kann? Deshalb gibt’s bei uns coole dynamische Banner. Die sind nicht nur nett anzuschauen, sondern zeigen den Künstler durch verschiedene visuelle Elemente. Forget the typical profile pic. Hier bekommt man eine tiefere und abwechslungsreichere Darstellung des Künstlers innerhalb der App.
Wir wollten auch, dass die Beziehung zwischen Künstler und seinem einzigartigen Coin kristallklar ist. Also zeigen wir den Coin direkt auf dem Banner. Diese visuelle Verbindung schafft einen direkten Link zwischen Künstler und Währung und zeigt den Usern, dass sie mit dieser speziellen Coin interagieren können.
Banner
Weitere Komponenten
Screens
Welcome Screen & Onboarding
Um dich mit der Welt von Krowdz vertraut zu machen, haben wir uns bei den ersten Schritten der User Journey etwas einfallen lassen. Durch ein mehrstufiges, Schritt-für-Schritt Prinzip wird der Einstieg kinderleicht und das ganze System ist verständlich.
Feed & Artist Screens
Für ein optimierten Nutzererlebnis bei Krowdz haben wir den Feed speziell auf unsere Zielgruppe ausgerichtet. Inspiriert von TikTok, ermöglichen wir dir, durch den Feed zu swipen und die Inhalte bequem zu entdecken.
Jeder Künstlerwird durch ein Video und eine prägnante Beschreibung vorgestellt. Interaktivität dabei ist selbstverständlich. Es gibt Gesten und Klicks zur Suchfunktion oder direktem Zugriff auf die Detailseiten der Künstler.
In zukünftigen Designs würden wir den Platzhalter im Feed durch den spezifisch gestalteten Coin der jeweiligen Künstler ersetzen. Damit wird die Relation zwischen Künstlern & Coin noch deutlicher und stärkt die einzigartige Identität, die sie auf Krowdz haben.
Wallet & Coins
Krowdz hat auch einen Bereich nur für deine Coins: die Wallet. Hier siehst du all deine gesammelten Coins auf einen Blick.
Aber das ist noch nicht alles: Mit einem Klick öffnest du einen ausführlichen Bildschirm mit Infos über die Coins entdeckt.
Hier kannst du deine Coins mal so richtig unter die Lupe nehmen und herausfinden, wie du mit ihnen interagieren kannst. Ob Newcomer oder Megastar - in der Wallet bekommst du einen klaren Überblick und kannst deinen nächsten Move planen. Du hast die volle Kontrolle über deine Coins und entscheidest, wie du deine digitalen Schätze einsetzen möchtest.
Animationen
Interaktionen
Um den Krowdz-Prototyp optimal zu präsentieren, haben wir auf die Kombination von Adobe XD und Protopie gesetzt. Mit dieser Power-Kombo konnten wir anspruchsvolle Animationen und komplexe Gesten entwickeln.
Mit Protopie haben wir den Usern einige spannende Funktionen bereithalten: Eine interaktive Suche, die Künstler- oder der Coin-Auswahl zum Kinderspiel macht. Ein dynamisch wischbarer Feed, der eine nahtlose Navigation ermöglicht. Und natürlich komplexe, flüssige Screen Transitions, die das Erlebnis auf ein neues Level heben. Diese Details machen unseren Prototyp nicht nur funktional, sondern auch visuell ansprechend.
Coins kaufen
NFT Packages
Suchfunktion
Wichtiger Hinweis
Bevor wir abschließen, ist wichtig zu betonen, dass alle Künstlerbilder und -videos nur Platzhalter sind. Sie helfen zu zeigen, wie die UI mit echtem Content aussehen könnte.
Wir respektieren die Rechte aller Inhalte und schätzen die kreative Arbeit dahinter. Alle Medienrechte gehören den jeweiligen Urhebern. Wenn es von einer Seite gewünscht wird, stehe ich bereit, die betreffenden Inhalte sofort zu entfernen. Respekt für Kreativität und geistiges Eigentum steht an erster Stelle.