¿Cuál es el nombre del patrón de diseño web que muestra la forma del contenido mientras se carga el contenido real?

Es bastante común que los sitios de aplicación de página única (SPA) carguen y muestren el diseño del sitio antes de cargar su contenido. Últimamente, me he dado cuenta de que, en lugar de mostrar solo un botón de espera o un mensaje de "Cargando...", muchos de estos sitios muestran la plantilla o el diseño que completará el contenido, con el texto y las imágenes rellenos con formas geométricas planas. formas

Ejemplo de Slack

Parece un buen patrón porque es menos molesto que tener una pequeña línea de texto de espera reemplazada por una gran cantidad de mensajes o lo que sea. Me gustaría leer sobre el patrón, tal vez encontrar una biblioteca para hacerlo más fácilmente en mi sitio, pero no tengo idea de cómo llamarlo, y tengo problemas incluso para describirlo de manera lo suficientemente sucinta como para buscar en la web de manera efectiva. . El ejemplo más cercano que pude encontrar fue este artículo antiguo que no le da a la práctica un nombre específico.

"Marcador de posición" es lo primero que se me ocurrió, pero, por supuesto, <input>las etiquetas ahora tienen un placeholdleratributo real y muchas personas preguntan sobre el texto de relleno u otro contenido (Lorem Ipsum, Kitten Ipsum y similares), por lo que los resultados tienden a ser inútiles. . Espero que la industria haya acordado un nombre único y descriptivo para esta práctica y aún no lo he encontrado.

su artículo dice "marcador de posición de contenido"; que tiene de malo ese nombre No estoy seguro de que haya un "nombre oficial" para esto.
Veo algunas menciones (generalmente llamando a Facebook por su nombre) usando esa cadena específica. La mejor ventaja es esta biblioteca , pero no creo que encaje bien con el modelo declarativo/reactivo de Angular. Seguiré investigando, gracias.
@Luciano El problema es que el "marcador de posición de contenido" también podría ser fácilmente Lorem Ipsum y cosas similares. Esto también es útil en diseño gráfico, por lo que el término es ambiguo.

Respuestas (5)

Lo primero que se me ocurrió fue que la sugerencia de tipo que se muestra en su ejemplo ciertamente se conoce como griego .

La búsqueda de "griego usado en pantallas de carga" me llevó a varios artículos sobre esta técnica de UX, y específicamente a este que se refiere al concepto como marcador de posición de contenido .

Creo que es un término tan bueno como cualquiera.

Específicamente, aquí tiene marcadores de posición griegos y de imagen y, en conjunto, se puede hacer referencia a todo como un marcador de posición de contenido.

interesante, me pregunto cuál es el origen del término "griego"...
@DigitalLightcraft Podría tener algo que ver con la expresión 'todo es griego para mí'. Para obtener más información, no dude en publicar una pregunta en English.SE :P
Me alegro de haber podido ayudar, sí, los orígenes del "griego" son desconocidos para mí, apuesto a que es interesante.
Un poco interesante sobre el origen relacionado con lorem ipsum: "El uso del griego (también llamado texto ficticio) permite a los diseñadores de páginas colocar texto en una página sin que el contenido real actúe como una distracción. La historia del griego no está clara, pero fue utilizado por primera vez a mediados del siglo 20. El texto se basó en las palabras de Cicerón, un líder romano cuyos escritos son admirados. El idioma que hablaba y escribía era latín en lugar de griego, por lo que el nombre de este texto ficticio es engañoso. " fuente

La palabra mágica parece ser griego (¡gracias!), pero eso me ayudó a encontrar el término "Pantalla de esqueleto", que parece referirse a la práctica muy específica de diseñar contenido simulado para obtener la forma general de la aplicación. Supongo que la teoría es que puede reducir la ansiedad sobre los tiempos de carga .

Algunos de sus amigos desarrolladores pueden referirse a él como el efecto de brillo de Facebook , ya que Facebook popularizó la técnica de marcador de posición de contenido con un ligero efecto de brillo y su código fue abierto .

El objetivo del efecto de brillo es indicar que el contenido real aún se está cargando, para que los usuarios no crean que la página está atascada y actualicen.

ingrese la descripción de la imagen aquí

Cuando he usado este patrón, lo llamamos página esqueleto. Súper útil para páginas grandes que generan contenido dinámico.

¿Cómo se suma esto a las respuestas existentes? Parece que Coderer ya mencionó el término "esqueleto"
¡Bienvenidos a Diseño Gráfico! Si tiene suficiente reputación, puede votar la respuesta que crea que es correcta. Alternativamente, "destaque" la pregunta como favorita y se le notificará de cualquier respuesta nueva.

Se llaman pantallas de esqueleto.

Hola NIck, bienvenido a GD.SE. No publique dos veces información que ya se haya mencionado en otras respuestas. ¡Gracias!
¿Cuál es el nombre del patrón de diseño web que muestra la forma del contenido mientras se carga el contenido real?
RespuestasAquíPolítica de privacidad1y, 0v