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 sind eine gängige Methode, um Nutzer mit den Künstlerseiten zu verbinden. Bei Krowdz haben wir jedoch einen Schritt weiter gedacht und uns für dynamische Banner entschieden. Es handelt sich hierbei um visuell ansprechende Elemente, die den Künstler durch verschiedene Bildelemente repräsentieren. Es geht über das typische Profilbild hinaus und bietet den Nutzern eine abwechslungsreichere und tiefere Darstellung des Künstlers innerhalb der App.
Zusätzlich haben wir sicherstellen wollen, dass die Beziehung zwischen dem Künstler und seinem einzigartigen Coin klar und prägnant ist. Dies wird dadurch erreicht, dass wir den Coin direkt auf dem Banner anzeigen. Diese visuelle Verknüpfung hilft, eine unmittelbare Verbindung zwischen dem Künstler und seiner Währung herzustellen und signalisiert dem Benutzer die Möglichkeit, mit diesem spezifischen Coin zu interagieren.
Banner
Weitere Komponenten
Screens
Welcome Screen & Onboarding
Um den Nutzer mit der Welt von Krowdz vertraut zu machen, haben wir den Start der App auf den Welcome Screen und das Onboarding fokussiert. Durch ein mehrstufiges, Schritt-für-Schritt Prinzip machen wir es dem Nutzer leicht, unser einzigartiges System zu verstehen und sich durch die vielen Finessen zu navigieren.
Jeder Schritt ist darauf ausgelegt, dem Nutzer zu erläutern, wie er effektiv mit seinen Lieblingskünstlern interagieren kann, und erläutert die zahlreichen Wege, die unsere Plattform bietet. Das Ergebnis ist eine umfassende, anschauliche Einführung in die Welt von Krowdz - eine Orientierung, die den Nutzer auf seine kommende Entdeckungsreise vorbereitet.
Feed & Artist Screens
Um das Nutzererlebnis bei Krowdz zu optimieren, haben wir den Feed bewusst auf die Erwartungen und Vorlieben unserer Zielgruppe ausgerichtet. Inspiriert von TikTok, bietet unser Feed die Möglichkeit, bequem durch die Inhalte zu wischen und so eine intuitive und dynamische Erkundung zu ermöglichen.
In diesem facettenreichen Schaufenster wird jeder Künstler durch ein Video und eine prägnante Beschreibung vorgestellt. Wir haben zudem für Interaktivität gesorgt. Mit einfachen Gesten und Klicks kann der Nutzer zur Suchfunktion navigieren oder direkt zur Detailseite des jeweiligen Künstlers gelangen.
In zukünftigen Design-Versionen würden wir den aktuell sichtbaren Platzhalter im Feed durch den spezifisch gestalteten Coin des jeweilige Künstlers ersetzen. So wird die Verbindung zwischen Künstler und Coin noch sichtbarer und stärkt die einzigartige Identität, die jeder Künstler auf Krowdz hat.
Wallet & Coins
Bei Krowdz gehört auch ein spezieller Bereich nur für die Coins des Nutzers dazu - die Wallet. Diese virtuelle Geldbörse zeigt auf einen Blick alle Coins, die der Nutzer bereits gesammelt hat. Doch es bleibt nicht bei einer simplen Übersicht. Ein einfacher Klick und die Nutzer können einen ausführlichen Bildschirm öffnen, der detaillierte Informationen bietet.
Hier können Nutzer ihre Coins so richtig unter die Lupe nehmen und herausfinden, wie sie mit ihnen interagieren können. Ob es sich um den Coin eines aufstrebenden Newcomers oder eines etablierten Superstars handelt - in der Wallet bekommen die Nutzer einen klaren Überblick über ihre Sammlung und können daraus ihren nächsten Schritt planen. Der Nutzer hat somit die volle Kontrolle über seine investierten Coins und kann selbst entscheiden, wie er seine digitalen Schätze einsetzen möchte.
Animationen
Interaktionen
Um den Krowdz-Prototypen ins beste Licht zu rücken, haben wir auf die Kombination von Adobe XD und Protopie gesetzt. Diese starke Partnerschaft von Softwarelösungen erlaubte uns, detaillierte und anspruchsvolle Animationen zu entwickeln und komplizierte Gesten einzubinden.
Mit Protopie konnten wir den Nutzern spannende Funktionen bieten: Eine interaktive Suche, die das Finden von Künstlern oder Coins zum Kinderspiel macht. Ein dynamisch wischbarer Feed, der eine nahtlose Navigation durch die App ermöglicht. Und natürlich durfte die Kirsche auf dem Sahnehäubchen nicht fehlen: Komplexe, flüssige Screen Transitions, die die Nutzer-Erfahrung noch mehr aufpeppen und eine wirkliche Show aus jeder Interaktion machen. Diese visuellen und funktionalen Highlights sorgen dafür, dass unser Prototyp nicht nur funktioniert, sondern auch ins Auge sticht.
Coins kaufen
NFT Packages
Suchfunktion
Wichtiger Hinweis
Bevor wir den Vorhang schließen, ist es wichtig zu betonen, dass alle in der Benutzeroberfläche verwendeten Bilder und Videos von Künstlern nur als Platzhalter dienen. Sie sind nur Daumenkinos, die dazu beitragen, zu veranschaulichen, wie die UI mit echtem Content aussehen würde.
Wir respektieren die Rechte aller Inhalte und schätzen die Arbeit, die in ihre Schaffung geflossen ist. Alle Medienrechte gehören den jeweiligen Urhebern und Verbreitern. Wenn es von einer Seite gewünscht wird, stehe ich bereit, die betreffenden Inhalte sofort zu entfernen. Der Respekt vor Kreativität und geistigem Eigentum hat höchste Priorität.