Literair
Desk Research over verschillende thema's
One handed use
"If the users of your app tend to use the app a lot in distracting scenarios, then you should focus on designing patterns that target reachability and one-handed use." - M. Kataria
Multi-screen approach. Big forms should be divided into multi-screen/multi-step forms.
Keep data input options (making choices, filling up forms) closer to the bottom. All critical data should be placed in thumb’s reach.
Ensure easy jumping betweens sections
Ensure easy closing a page
Accessiblity
Avoid making text smaller than 14–16px.
Avoid color combinations that are known to cause issues for the colorblind.
Use images or illustrations for tricky subjects but keep the format similar and avoid surprising your user.
Line height (line spacing) should be at least 1.5 times the font size. Spacing following paragraphs to at least 2 times the font size.
Letter spacing (tracking) to at least 0.12 times the font size. Word spacing to at least 0.16 times the font size
Dark Theme
1. Avoid pure black
A dark theme doesn’t have to be pure white text on a pure black background. In fact, that high contrast can be painful to look at.
Material design recommends #121212 as dark theme surface color.
2. Avoid using saturated colors on dark themes
Saturated colors which can look great on light surfaces, can visually vibrate against dark surfaces, making them harder to read. Desaturate primary colors in order to make the contrast enough against the dark surface.
Use lighter tones (colors in the 200–50 range) because they have better readability on dark theme surfaces. Lighter variants won’t make the UI less expressive but they help you maintain appropriate contrast without causing eye strain.
3. Meet accessibility color contrast standards
Ensure that your content remains comfortably legible in Dark Mode. Dark theme surfaces must be dark enough to display white text. Google Material Design recommends using a contrast level of at least 15.8:1 between text and the background.
4. Use “On” colors for text
“On” colors are colors that appear “on” top of components and key surfaces. They are typically used for text.
The default “on” colors for a dark theme is pure white (#FFFFFF). But #FFFFFF is a bright color and it would visually “vibrate” against dark backgrounds. That’s why Google Material design recommends using a slightly darker white.
Light text on a dark background can appear more bold than dark on light. That’s why you may want to use lighter font weights for dark mode.
5. Consider the emotional aspect of your design
When it comes to designing a dark theme for an existing app, you probably want to communicate the same spectrum of emotions in dark mode. But it’s better not to do it. Why? Because
Colors are actually perceived differently depending on their background
That means a dark theme just can’t communicate the same as the light theme. As a result, dark and light themes will always evoke different emotions. Instead of trying to fix that, it’s much better to take advantage of that for your product’s identity.
6. Communicate depth
Similar to light theme design, when it comes to creating dark theme UI it’s essential to create hierarchy and emphasize important elements in your layout.
Elevation is a tool we use to communicate the hierarchy of elements.
In light mode, we use shadows to express elevation. The higher surface gets, the wider a shadow it casts. The same approach wouldn’t work in a dark theme — it’s hard to see a shadow against a dark background. It’s better to illuminate the surface of each level.
In dark themes built with Material, elevated surfaces and components are colored using overlays. The higher a surface’s elevation, the lighter that surface becomes.
Last updated
Was this helpful?