Cookit app
I made a range of adjustments for the dark mode to ensure usability, readability and a comfortable user experience.
I made the background dark grey (not fully black as this is very harsh) to reduce eye strain. For example when it's used in low-light environments. I adjusted the contrast of the bright pink to make sure it still stands out but is less harsh on the dark background. The text is turned into a light grey (not fully white as this is also too harsh) to make sure it remains readable and has enough contrast.
I adjusted contrast for all the different elements: text, icons, buttons, input fields, ... to make sure everything is still visible without being too harsh. For the different icons in the 'categories' i adjusted the backgrounds to make it fit as a whole with the dark background. For the images of the recommendations the background colors were also adapted (a lighter grey and a lighter pink).
Shadows and highlights work differently on a dark background, so instead of making the icons and images on a darker colored background compared to the overall background, i made them a lighter grey to stand out more. This ensures you still have that feeling of depth but without making it all too dark and less readable. The search field also got a lighter grey fill instead of the outline to make sure it stands out enough in the dark background.
I put the toggle to dark mode in the settings menu because this is the most common place where users expect to find customisation options. It keeps the homepage clean, without too many clutter as this isn't a button that would be used frequently (it's not a primary action of the app). Another option would be that the app automatically changes the dark/light mode when the phone itself changes (for example when the sun goes down, the whole phone and app turns into dark mode automatically).
Tools used
From brief
Topics
Share
Reviews
5 reviews
i like the design. You have done a great job
Simplicity: The layout is clean and straightforward, making it easy for users to navigate. The familiar placement of icons at the bottom for primary actions is well-aligned with common mobile app patterns.
Spacing: There is sufficient white space (or black space in dark mode) around elements, which contributes to a clean, uncluttered feel. This helps the content breathe and prevents cognitive overload.
Consistency: The settings and main screens follow a consistent structure, which provides a smooth transition between different sections of the app.
Improvements & Suggestions
• I am curious to see how the food pictures will look in real life, especially since you have used PNG images.
• Icon Legibility in Dark Mode: The white icons in the bottom navigation bar of the dark mode blend in slightly. You may want to consider slightly increasing their opacity or providing a subtle backdrop to enhance visibility.
• Search Function in Settings: The presence of a search bar in the settings screen seems redundant given the small number of options available. It could be removed unless you plan to add more extensive settings in the future.
Overall you have done a great job
This is a beautiful and highly polished design for a recipe app! The visual style is clean, modern, and perfectly suited for food content. Great job creating an engaging and usable interface! 🧑🍳
If I was in need of a designer right now, I would honestly consider hiring you.
Hi Laura! I truly love the design, both light and dark mode. The colors are great, suitable for the cooking theme. You did great job with converting light neutrals to dark mode. The only thing I would check is if the text on the dark mode version of the primary color has enough contrast ratio :)
You've clearly taken the user experience into account while adapting the interface for dark mode. Here's my perspective:
Strengths:
- Excellent color choice: Opting for dark grey instead of pure black is a smart move—it’s much gentler on the eyes, especially in low-light settings.
- Subtle depth creation: I love how you've introduced a sense of depth without relying on heavy shadows, maintaining clarity without overwhelming the user.
- Thoughtful placement of the dark mode toggle: Keeping it in the settings menu keeps the main interface clean and free of clutter.
Area for Refinement:
- Accessibility: Double-check the contrast ratios of light text against the soft pinkish red, as it may fall short of WCAG accessibility standards. This is crucial for ensuring that all users can comfortably read the content.
With a few minor adjustments, this could evolve into an outstanding user experience. Great work!
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
NEWFASHON™ - Landing page
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
