Streaming App in Dark Mode
I decided to make a streaming app for mobile use. First I added icons at the bottom for easy navigation between movies, shows, and also favorites. A search bar with voice recognition was added for even more accessibility. The dark mode toggle switch was added next to the search bar for easy toggling. Blue was chosen as an accent color for it's relaxing feel and it's contrast with the light and dark backgrounds for WCAG compliance. I wanted to capture part of the user flow before they actually resume a show, picking up where they were last. Informing the user how much time is left in the episode and how many episodes are left in the season, along with episode details.
Tools used
From brief
Topics
Share
Reviews
2 reviews
Thank you for sharing your work and vision with us! The home page looks great and is easily scannable. However, there are a few things that I think could be improved:
1. The active tab on the bottom navigation bar should be indicated.
2. I'd love to see your dark mode palette and proof that it complies with the WCAG's color contrast requirements.
3. The top part of the app is overloaded with navigation elements. It's not the easiest part of the mobile device to reach, and you've placed many potentially important items there. Additionally, the search bar and the mode switch are a bit hidden by the iPhone device's notch.
4. The icon sizes are inconsistent.
5. The movie page contains texts with not enough line spacing in between, and some texts like "20 min remaining" are ridiculously small and hard to read.
I hope this feedback can help you improve your work. Keep it up!
Thanks for sharing Daryll, overall the dark mode work pretty well, it meets standards in term of color but I want to add a few comments which hopefully help you keep improving on your UIs:
- The search bar & dark mode toggle: I think they are too small for user to interact with their thumbs. Please consider that the minimum should be 44px.
- The tab bar: It would be better if you can let user know where they are by highlighting the selected tab (Try to change into filled icon for the one selected).
- The font size: Please remember that the smallest WCAG recommend is 16px for body text, achive that I think user would really appreciate.
Again, thanks for sharing and hope to see your next project
You might also like

Sojo NFT Marketplace

From Idea to Full-Stack Web App

Docto

Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)

Fundraising Website
