Gregory's Server🧵 In our designs, we’ll often create this type of view where text is overlaid on top of an image. If the images are dynamically loaded, you might run into legibility issues. We’ve been around the block a few times, here’s how we solve it:
 5 comments
The text layer gets a legibility scrim (linear gradient) for the background with these stops: 0.0: Transparent Why off-black? https://lickability.com/blog/plussing-your-ios-app/#-elevating-aesthetics-with-color-grading Lastly, a text shadow for a final layer of defending your design against poor contrast. We use the same color as the legibility scrim for the shadow. You want the shadow to be sharp enough so it remains close to the letter shape, but not so sharp that it looks embossed. That’s it! Just a little finessing can make your design easier to read on any arbitrary background. ✨ @lickability really love these threads! Thanks for taking the time. I feel the threaded posts are a great way to digest the info you’re sharing. Thank you! |
We’re showing this in Figma, but this can be easily done wherever you’re building UI.
The view is made up of two layers: the image and the text layer. Both layers are the same size.