[Edit] Placeholders: Context and Forms

content/uiux/concepts/placeholders/placeholders.md

@@ -12,3 +12,31 @@ CatalogContent:
 ---
 
 When creating [sketches](https://www.codecademy.com/resources/docs/uiux/sketching) or [wireframes](https://www.codecademy.com/resources/docs/uiux/wireframe), [low-fidelity](https://www.codecademy.com/resources/docs/uiux/low-fidelity) **placeholders** are used to represent [high-fidelity](https://www.codecademy.com/resources/docs/uiux/high-fidelity) content such as text, images, and videos. [Wireframe elements](https://www.codecademy.com/resources/docs/uiux/wireframe-elements) are an example of placeholder content. Indicating the use and placement of an element, without emphasis on how the content will appear visually, is what placeholders achieve.
+
+## Purpose in Design
+
+Placeholders help designers and stakeholders focus on layout and interaction flow without getting distracted by details such as final copy or image styling.
+
+They are often used in:
+
+- _Low-fidelity wireframes_ to represent headings, paragraphs, and buttons using grey boxes or "lorem ipsum" text.
+- _Content planning_ sessions to mark where dynamic or pending assets (such as videos or embedded charts) will go.
+- _Prototyping_ when functionality needs to be tested before assets are finalized.
+
+## Types of Placeholders
+
+Common forms of placeholders include:
+
+- _Text placeholders_  
+  Generic copy such as “Headline here” or “Lorem ipsum” to represent future body content.
+
+- _Image placeholders_  
+  Grey boxes or icons marked with an 'X', a camera symbol, or image dimensions (e.g., 800×600).
+
+- _UI component placeholders_  
+  Blocks or lines indicating future dropdowns, tabs, or carousels in a layout.
+
+- _Loading placeholders (skeleton screens)_  
+  Shimmering or animated blocks displayed while real data is being fetched — often used in modern web applications.
+
+> _Note:_ Skeleton screens are a special category of placeholders focused on perceived performance rather than structural design.