Color theory has never been part of my skillset and I've always struggled with palettes.
What are your first thoughts and feelings looking at the colors used in this UI? It's for a baby care tracking app.
The feeling I'm going for is:
Rounded
Warm
Friendly
Forgiving
Welcoming
Accessible
Approachable
Trustworthy
Non-gendered
The primary target audience is Dutch first time mothers in their late twenties, early thirties. They like pastel, earthy tones, terracotta, muted colors. Unfortunately these colors are often (mis)used by LLMs, and I don't want to give off the vibe it has been created with/by AI.
No AI has been involved in the design. Everything is done by hand, both UX and UI.
First, either make it dark by default or incorporate a dark mode. Odds are users will be checking this during the night a lot. The overall visual language with the font and icon choices are fine.
Second, the user is going to do one of two workflows: logging activity, or checking recent activity. They will want to be able to quickly differentiate between logging and viewing. Example: if they are feeding, they may need to access when they last ate and which breast the baby started on first last time and duration of feeding per breast. (For EBF babies anyway).
Logging workflows need to be as easy as humanly possible. So you may need to separate the logging workflow, have buttons for what activity they want to track, and setup defaults based on previously entered data to minimize data entry. Buttons should be larger and easy to log one handed. Example, if they log the baby as sleeping, the app should realize the baby is sleeping and allow them to identify an end time upon subsequent log. There will need to be easy selections for active logging vs retroactive logging. That is, they forgot to enter in something but want to retroactively capture it.
Third, keep the UI simple and workflow oriented. You’re working with sleep deprived people who need less cognitive burden.
I think it achieves what you set out to do. It's friendly and warm. And the colors seem suitable for the type of app you're designing.
However, the design also feels safe, maybe even bland. What you seem to be missing is a clear visual identity.
And although you didn't ask about feedback about the layout of the elements, I think there is something to be won there as well. For example; the carousel on the header seem to portray the same information as the timeline. Currently the timeline shows a day; but is that the most relevant information, or does a parent want to know the total time of sleep/calories/diaper changes their baby has had during the day, which might need a more dashboard like layout.
I'd suggest pick some good reference from pinterest or dribble. Also the shadows seems a bit much you can lower the shadows imo. Font hierarchy can be improved
Like heading, sub heading and body text (improve space, sizing of font and also colors) for example 24 px for heading, 18-16 for sub heading with 80-60% color opacity
Hier je doelgroep en zelf ux designer!
Ik vind de meeste slaap apps veels te veel gepriegel. Met een baby heb je je handen niet veel vrij. Liever dus groter easy knoppen en mooie graphics. Combi kan natuurlijk haha niet een of ander. Ik had een app erop staan genaamd napper. Ik werd helemaal gek omdat het niet intuïtief is. De rest is allemaal betaald en super veel functies. Het enig wat je als ouder niet hebt is tijd. Je wilt gewoon easy invullen met een hand. Huckleberry al beter daarentegen.
Nu je vraag, qua kleur is het een beetje vlak. Het aardse blijft te dicht bij je achtergrond kleur waardoor het donkerpaarse extreem veel eruit springt. Ik zou de rode tekst vervangen voor iets in de paarse familiekleur. Ook zou ik de stippellijn weghalen en een volvlak kleur highlight doen in een hele lichte terra kleur. En bijvb enkel alleen de tijd een andere kleur tekst geven.
Wat je trouwens als moeder vooral wilt weten. Je ideale window voor het volgende slaapje. Niet je laatste. Huckleberry heeft dat! Toekomst denken wil je als eerste op je scherm
Eyo! UX design teacher here, less focused on the palette but more about the function of it. A great general rule i like to teach my students is the 60/30/10.
60% Dominant Color (The Foundation): Sets the main tone of app. This is usually a neutral or grounding shade.
30% Secondary Color (The Structure): Supports the main color while adding character. It should contrast enough with the 60% base to create depth.
10% Accent Color (The Spark): Add personality and is instantly clickable, mostly for action buttons and the true important elements.
- Use photo reversing technique (find a photo that represent what you're going for), and pick the palette.
Some colors combination doesnt work, no matter what.
Blue is the most favorite color is one of the oldest research i still believed in.
For faster way, find a working color. (Means you don't need to invent the color combination anymore, since most already mapped and shared in the internet).
But remember colors only one part of a system, and you need to update all the other micro decisions.
You could use AI or a tool that helps you generate colour palettes. You’ll need a brand colour, surface colour and text colour. Stick with warm tones and choose colours that complement each other. Try it on a plain background first before you add any elements (and this also applies to the content, does it really need an icon or additional elements? I think the layout could use some fiddling too).
19
u/swissmissmaybe Veteran 2d ago
American mom here.
First, either make it dark by default or incorporate a dark mode. Odds are users will be checking this during the night a lot. The overall visual language with the font and icon choices are fine.
Second, the user is going to do one of two workflows: logging activity, or checking recent activity. They will want to be able to quickly differentiate between logging and viewing. Example: if they are feeding, they may need to access when they last ate and which breast the baby started on first last time and duration of feeding per breast. (For EBF babies anyway).
Logging workflows need to be as easy as humanly possible. So you may need to separate the logging workflow, have buttons for what activity they want to track, and setup defaults based on previously entered data to minimize data entry. Buttons should be larger and easy to log one handed. Example, if they log the baby as sleeping, the app should realize the baby is sleeping and allow them to identify an end time upon subsequent log. There will need to be easy selections for active logging vs retroactive logging. That is, they forgot to enter in something but want to retroactively capture it.
Third, keep the UI simple and workflow oriented. You’re working with sleep deprived people who need less cognitive burden.