Almost all entertainment apps (Netflix, Spotify, YouTube, Smart TVs) use dark user interfaces. This is logical from user expectations since they are often used in darkened rooms. Furthermore, the dark mode improves the appearance of colored content.
To align with the target audience's expectations while creating an exclusive and engaging atmosphere, Krowdz natively has a Dark Mode display.
I deliberately chose a shaded blue, as it has been proven to reduce the sense of time, and we create a pleasant contrast with the more warmly designed components. The rendering also allows components to be shaded in greater detail.
Example of the dark mode based on the navigation
Green serves as the primary color. Yellow, purple and blue represent the accent colors, representing rarities, as is known from many loot concepts. Orange is a complementary accent color that we can also use for error messages.
The primary colors have been systematically scaled to allow gradations in illustrations and more unobtrusive accents.
The color choice of Krowdz
The typography is modular scaling. I chose Greycliff CF as the font. It is versatile and allows for good contrast between titles and texts due to its optimally divided step cuts. The geometric, almost monolithic design lends a classic permanence softened by soft edges and lively shapes.
Each artist owns their own coin. In the app, this coin is textually indicated with a dollar sign and four letters of the artist. For the component, I was looking for a minimalist design that was still visually appealing.
The result: we use a picture of the artist in the background. The name of the coin and artist is displayed on the left half. The number of existing coins is also visible on the right side. Users of investment apps will find this display familiar.
Individual NFTs consist of a container, reminiscent of trading cards due to the aspect ratio. A label indicates the respective album in the upper left corner. The number of the NFT, title, and artist are visible in the bottom center of a darkened container.
Different rarities have different colors, shadows, and glow effects. They are based on the conventions of loot boxes, which can be found in numerous games and similar apps. NFTs that have not yet been collected use washed-out displays. A set of NFTs ("Packages") is displayed like a set of cards.
Links and profile pictures are one way to link the artists' pages. Even more amicable are dynamically adapting banners that present the artist through several image elements in the app. The connection between the coin and the artist is made clear to the user by displaying the coin on the flags.
Welcome Screen & Onboarding
Welcome Screen & Onboarding present the principle of the app via a multi-step principle. The user is clearly explained how to interact with the artists.
Feed & Artist Screens
The feed is based on the expectations of the target group. It is modeled on TikTok's basic principle of swiping items up and down in the feed. The artist is presented via a video and a short description. The user can use gestures and taps to go to the search or to open the details page of the respective artist.
In further design work, we would replace the placeholder shown in the bottom right of the feed with a custom-designed coin.
Wallet & Coins
The user has an overview of his existing tokens in the wallet. He can open them in a detailed screen to interact with them.
To present the prototype in the best possible way, I exported the designs from Adobe XD software to Protopie software. Protopie makes it possible to create detailed animations and use complicated gestures.
Through the tool, I designed an interactive search, created a wipeable feed, and incorporated a few complex screen transitions that provide the necessary show effect.
All used images and videos of artists in the UI are understood as placeholders. They only serve the purpose of visualizing the UI with related content. All media rights belong to the respective creators and distributors of these media. They will be removed immediately upon request.