From b8b15504fe66c8421e33e1a0bc6827b79230f846 Mon Sep 17 00:00:00 2001 From: AnamolR <44775373+AnamolR@users.noreply.github.com> Date: Wed, 16 Apr 2025 21:24:32 +0100 Subject: [PATCH 1/3] [Edit] Placeholders: Context and Forms --- .../concepts/placeholders/placeholders.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/content/uiux/concepts/placeholders/placeholders.md b/content/uiux/concepts/placeholders/placeholders.md index 114d713db62..aa3e9bc535f 100644 --- a/content/uiux/concepts/placeholders/placeholders.md +++ b/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. From 103d18d136d098961188ead4f9faa644f612016e Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Mon, 28 Apr 2025 22:13:47 +0530 Subject: [PATCH 2/3] Update placeholders.md --- .../concepts/placeholders/placeholders.md | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/content/uiux/concepts/placeholders/placeholders.md b/content/uiux/concepts/placeholders/placeholders.md index aa3e9bc535f..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,32 +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 in Design +## 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. +- 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. +- **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. From d7b8b1ae09bcf83ab6a55ba7bf3df160c1aeaa5f Mon Sep 17 00:00:00 2001 From: Sriparno Roy <89148144+Sriparno08@users.noreply.github.com> Date: Sat, 3 May 2025 11:33:38 +0530 Subject: [PATCH 3/3] Update placeholders.md --- content/uiux/concepts/placeholders/placeholders.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/uiux/concepts/placeholders/placeholders.md b/content/uiux/concepts/placeholders/placeholders.md index 0ea5932ff0b..7a91c72ad1a 100644 --- a/content/uiux/concepts/placeholders/placeholders.md +++ b/content/uiux/concepts/placeholders/placeholders.md @@ -33,4 +33,4 @@ Common forms of placeholders include: - **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. +> **Note:** Skeleton screens are a special category of placeholders focused on perceived performance rather than structural design.