Design for Placeholders

Loading items, products, or data from the database or Firebase can be a little slow. Placeholders are for preview content that will soon appear on the screen.

Giancarlos Garza avatar

Co-Founder: Colorffy, Menuffy & TheDocs

Published 1/25/2022

Design for Placeholders
Design for Placeholders


These user interface components are beneficial when you want to display an item, a product, a card, text, an image, or anything you want on an app or website.

Nowadays, there are a lot of companies that use placeholder when you open the app and start loading the content. For example: Facebook, Instagram, Twitter, Icons8, Colorffy, and more.


Designing a placeholder is not as hard as you think. There are different ways to design and code your website placeholder. It can be just a plain gray square or a grey gradient square, or if you want something fancier, you can add an animation like most placeholders.


1. Colorffy: I use placeholders card before the gradients and palettes show. These placeholders appear because I use Firebase as the database, and as you perhaps know, Firebase loads the information on the client-side on some occasions.

2. Icons8: They use a placeholder for the Icons card after searching some icons.

3. Youtube: The same concept as the previous one, Youtube shows placeholders for the videos before they load.


If you want to get inspired to design beautiful placeholders, you can visit: and see many good and real examples. 👍

That's all for this post! I hope it will be helpful for you. ✌️
Thanks for reading.

If you are looking for some color inspiration, you can visit my website:, colors, and tools for your next project. 🙌

User Research