diff --git a/content/uiux/concepts/placeholders/placeholders.md b/content/uiux/concepts/placeholders/placeholders.md index 114d713db62..0ea5932ff0b 100644 --- a/content/uiux/concepts/placeholders/placeholders.md +++ b/content/uiux/concepts/placeholders/placeholders.md @@ -3,6 +3,7 @@ Title: 'Placeholders' Description: 'Placeholders are used to represent high-fidelity content such as text, images, and videos.' Subjects: - 'Web Design' + - 'Web Development' Tags: - 'UI' - 'UX' @@ -11,4 +12,25 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -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. +When creating early-stage [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) serve as placeholder content, indicating the use and placement of an element without emphasizing its final visual appearance. + +## Purpose of Placeholders 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.