Diseño web CMS: una guía para aplicaciones de contenido dinámico

Técnicas de UI/UX para el mundo de los medios en línea impulsado por el contenido dinámico.

Una gran mayoría de aplicaciones web y aplicaciones móviles, especialmente en el espacio de medios en línea, funcionan con sistemas de administración de contenido (CMS) como WordPress, Drupal y otros. Estos sistemas surgieron para satisfacer las necesidades de una era de Internet donde el contenido es el rey y dinámico, cambiando continuamente y con frecuencia.

En el pasado, la mayoría de los sitios web eran estáticos, no creados para evolucionar y crecer sin problemas. Ahora se consideran sistemas vivos y existe una forma óptima de diseñarlos.

La siguiente es una guía para los diseñadores digitales que buscan expandir su repertorio más allá de los sitios web estáticos y las páginas de destino, y comenzar a diseñar de manera efectiva para aplicaciones dinámicas basadas en contenido, como sitios de noticias, blogs o incluso redes sociales donde los usuarios publican contenido regularmente. Para hacer esta transición, los diseñadores deberán comprender cómo se estructuran típicamente estos tipos de aplicaciones y adoptar una mentalidad de "contenido primero" en el proceso de diseño.

CMS Web Design IA Patterns en aplicaciones controladas por CMS

Los diseñadores deben tener un modelo mental de los patrones comunes de la arquitectura de la información en una aplicación basada en CMS, especialmente si trabajan en la UX (experiencia del usuario) y la diseñan desde cero. Hay varios tipos de páginas que son comunes e integrales para estas aplicaciones y, a menudo, se conectan entre sí de manera predecible donde la "publicación" funciona como el componente central. En general, no existe un límite teórico para la cantidad de publicaciones que puede contener una aplicación.

Página delantera

Este es el punto de entrada formal y, a menudo, es sinónimo de la página de inicio. Es muy común, especialmente cuando hay mucho contenido al que acceder porque ayuda a resaltar o destacar lo más importante. Esta página generalmente muestra versiones abreviadas de publicaciones sin revelar demasiados detalles.

Publicar página

Si la "publicación" es la unidad central de una aplicación impulsada por CMS, entonces la página de publicación es donde se muestran todos los detalles públicos sobre una publicación. Probablemente sea la única página verdaderamente crítica en la aplicación, y podría ser una página de artículo o una página informativa sobre un evento, persona, grupo, producto, etc. en particular. En algunas aplicaciones más grandes, puede haber múltiples tipos de publicaciones y publicaciones. páginas designadas.

Página de lista/categoría

Este tipo de página es útil para permitir a los usuarios navegar por todas las publicaciones disponibles y filtrarlas por categoría, atributos u otros criterios. Una opción de clasificación también es común cuando la cantidad de contenido para desplazarse es considerable.

Página de búsqueda

Una página dedicada a la búsqueda no es esencial para aplicaciones más pequeñas, pero siempre es útil. A veces, se puede fusionar o integrar con la página de categoría/lista.

Perfil de usuario/autor

Esta página está dedicada a cada autor o usuario que crea una o más publicaciones. A veces se pasa por alto en sitios de noticias pequeños y blogs de un solo autor, pero es fundamental para sitios de noticias grandes de varios autores, redes sociales basadas en contenido y otras aplicaciones generadas por usuarios. Una práctica común y útil es incluir una lista de todas las publicaciones del usuario en esta página.

Inicio de usuario o Panel de control

Esta página muestra información (incluidas publicaciones) relevante para el usuario que inició sesión, a menudo en forma de noticias personales o contenido recomendado, actividad reciente y estados. El hogar del usuario es esencial para aplicaciones cerradas y aplicaciones de redes sociales, pero opcional o irrelevante para otras.

Diseño de interfaz de usuario basado en contenido para contenido dinámico

El contenido precede al diseño. El diseño en ausencia de contenido no es diseño, es decoración. –Jeffrey Zeldman

Cuando llega el momento de diseñar la interfaz de usuario de una aplicación impulsada por CMS, es importante recordar que el contenido siempre impulsa el diseño, no al revés. Cada vez más empresas de medios han adoptado un enfoque basado en el contenido con resultados comprobados. Con esto en mente, aquí hay una lista de recomendaciones para que los diseñadores de UI tengan en cuenta cuando se mojen los pies en este tipo de proyectos.

Considere el contenido antes de definir un estilo

En una aplicación basada en contenido, el estilo visual debe respaldar el contenido como un todo. Aunque la naturaleza de este tipo de aplicaciones generalmente implica que el contenido será variable y no del todo predecible, la mayoría de las veces encajará dentro de un tema general. Entonces, al desarrollar la estética de la marca, el contenido real puede ser una gran fuente de inspiración. Al mismo tiempo, también puede ser una responsabilidad si el diseñador se apega demasiado a piezas específicas de contenido y desarrolla un estilo demasiado específico.

CONOZCA quién creará el contenido de forma regular.

En una aplicación basada en CMS, el contenido lo determinan en gran medida los creadores de contenido, no los diseñadores. Por lo tanto, generalmente se espera que el diseñador ceda parte del control del aspecto del producto a las personas que publican contenido de forma regular, es decir, editores, autores, administradores o incluso usuarios aleatorios que ingresan contenido a través de formularios públicos.

Dependiendo del proceso que se acuerde, el diseñador puede establecer algunos estándares y pautas para elegir imágenes, prepararlas y recortarlas, e incluso poner algunos parámetros en el estilo del texto. Sin embargo, en general, es responsabilidad del diseñador dar forma al front-end de la aplicación de tal manera que el trabajo deficiente por parte del creador de contenido, como una fotografía deficiente o un título muy largo, no reduzca la calidad. del diseño en un grado significativo.

DISEÑE con contenido real siempre que sea posible.

Debido a que el tipo de contenido puede variar ampliamente en una aplicación impulsada por CMS, tiene sentido dedicar tiempo a observar una gran muestra del mismo. Idealmente, en el caso de un sitio de noticias o blog, el diseñador colaboraría con los creadores de contenido desde el comienzo del proceso de diseño y solicitaría ejemplos de historias, imágenes de productos, videos o cualquier otra cosa que pueda ayudar a que las maquetas de diseño parezcan reales. como sea posible.

El diseño con contenido real es preferible al uso de fotos de stock y texto ficticio e incluso se puede hacer en paralelo con el wireframing o la creación de prototipos, ya que ayuda a limitar las sorpresas que puedan ocurrir.

No es raro que un diseño luzca deslumbrante cuando un diseñador lo llena con imágenes cuidadosamente preseleccionadas o modificadas con Photoshop y titulares perfectamente adaptados, y luego lo ve caer en el estancamiento una vez que entra en producción.

NO seas demasiado específico con el estilo.

Al establecer un estilo visual, no encasille el contenido reflejando solo un solo estado de ánimo, género, historia o tema. En su lugar, manténgalo simple y universal con respecto a toda la gama de tonos que pueden entrar en juego en el contenido.

Una apariencia muy específica es aceptable a veces para una aplicación que atiende a una audiencia de nicho, pero a menudo puede parecer obsoleta y carente de atractivo para las masas en el mercado actual. Además, potencialmente puede limitar las perspectivas de crecimiento y expansión a nuevas verticales en el futuro.

Para asegurarse de que un diseño funcione para una amplia gama de contenido, generalmente es una buena idea probarlo creando una o dos versiones adicionales de la misma página con un tema marcadamente diferente que aún esté dentro del rango temático de lo que se puede publicar.

Diseñe cada página como una plantilla para contenido variado

Piense en cada tipo de página de la aplicación como una plantilla o modelo para varios elementos multimedia (imágenes, widgets, videos, bloques de texto, etc.) para completar, y sepa qué elementos estarán sujetos a cambios y cuáles pueden permanecer fijos. .

SÍ establezca un conjunto claro de reglas y consistencias.

El hecho de que el contenido pueda variar mucho de una página a la siguiente no significa que no deba haber un conjunto coherente de formatos en los que se presenta el contenido.

Mantener los encabezados y los tamaños de las imágenes predecibles y observar una jerarquía de información lógica de arriba a abajo dentro de una página tiene muchos beneficios, uno de los cuales es que crea una sensación de armonía en toda la aplicación y mantiene al usuario correctamente orientado.

Para lograr esto más fácilmente, desarrolle un conjunto modular y reutilizable de componentes de estilo para tantas partes de la interfaz como sea posible, incluidos encabezados, divisores, botones, widgets y otros elementos dentro de un programa de diseño. Utilice estos componentes repetidamente y en un esquema lógico, manteniendo las variaciones al mínimo. Este artículo del diseñador de Toptal Wojciech Dobry presenta una buena guía para crear una biblioteca de interfaz de usuario en Sketch.

NO dé tratamientos de diseño individualizados a las publicaciones.

Trate de evitar dar publicaciones dentro de la misma sección de una página con demasiadas diferencias en estilo y formato. Esto incluye cambiar las dimensiones de la imagen, agregar diseños de texto o fuentes especiales, o realzar imágenes individuales con adornos o gráficos personalizados. Esto no solo tiende a matar la armonía visual, sino que generalmente es una pérdida de recursos y un lastre para el rendimiento y el mantenimiento desde el punto de vista de un desarrollador o administrador de contenido.

NO asuma que el contenido siempre se ajustará a un área designada.

Uno de los resultados inevitables de la naturaleza dinámica de una aplicación impulsada por CMS es que la cantidad de texto que aparece en un área de visualización determinada puede variar en longitud. A menudo, se pueden colocar límites de caracteres en el texto en el CMS para mantener las cosas razonables, pero el diseñador nunca debe asumir ciegamente que un bloque de texto siempre se ajustará a un cierto número de líneas.

No solo varía el ancho de los caracteres individuales, sino que tampoco es habitual restringir en gran medida la creatividad de los escritores imponiendo un límite de caracteres muy bajo. Es por eso que siempre es bueno probar un diseño con contenido real como se mencionó anteriormente, y examinar cada área con diferentes muestras de texto.

Para estar seguro del peor de los casos, inserte temporalmente una secuencia de caracteres alfabéticos anchos (como "w" si el contenido está en inglés) hasta alcanzar el límite de caracteres acordado.

Permita que el contenido se destaque

En una aplicación impulsada por el contenido, el contenido debe mantenerse al frente y al centro en todo momento, y los elementos estilísticos de la marca generalmente deben retroceder.

SÍ rodee el contenido dinámico con colores de fondo limpios, claros y neutros.

Generalmente es preferible el blanco o blanquecino. Esto permite que muchos tipos diferentes de imágenes, claras y oscuras, salgan de la página sin que queden ensombrecidas.

HAGA imágenes grandes y dominantes.

Las imágenes grandes, especialmente las fotos, captan la atención del visitante con mayor eficacia que cualquier otra cosa.

SÍ mantén los titulares y el cuerpo del texto grandes y fáciles de leer.

Para páginas con mucho texto, elija fuentes web que sean altamente legibles e impleméntelas en un tamaño grande y cómodo en todos los dispositivos: computadoras de escritorio, dispositivos móviles y tabletas.

NO diseñe en exceso.

A menudo, a los diseñadores digitales y de impresión les gusta desplegar adornos creativos o dar rienda suelta a los elementos de marca en sus diseños. En general, si bien ciertos efectos visuales a veces pueden mejorar un diseño basado en el contenido, también pueden distraer fácilmente la atención del contenido, que es lo que realmente interesa a los usuarios cuando visitan un sitio de noticias o un blog.

Dichos efectos también pueden hacer que la apariencia de la aplicación sea menos predecible a medida que cambian las imágenes. Por lo general, es una buena práctica verificar las fuentes decorativas, los patrones en negrita, las ilustraciones, las imágenes superpuestas, las imágenes semitransparentes y los marcos elegantes alrededor de las imágenes. Por último, mantenga el logotipo relativamente pequeño en comparación con el contenido destacado.

NO utilice fondos de colores cerca de imágenes dinámicas.

Los colores llamativos y brillantes están de moda en este momento, pero por lo general es mejor evitar aplicar grandes cantidades de colores saturados, o un fondo de color, alrededor de las imágenes que están sujetas a cambios, ya que esto puede producir resultados impredecibles, incluidos choques de colores y sobreestimulación. distrayendo del contenido.

NO use fondos oscuros para cubrir páginas enteras de texto.

Los estudios muestran que el texto claro sobre un fondo oscuro es más estresante para los ojos que el texto oscuro sobre un fondo claro en aplicaciones con mucho contenido. Un fondo oscuro puede funcionar bien para una sección especial de una página o un área de presentación de diapositivas donde hay una cantidad limitada de texto, pero no es adecuado para cubrir largos bloques de texto.

Comprender cómo funcionan las imágenes y otros medios en el back-end

Los sistemas de administración de contenido pueden variar en la forma en que manejan los medios, como imágenes, videos y archivos de animación, y, a veces, un desarrollador establecerá restricciones a propósito en los medios con fines de eficiencia.

Por ejemplo, puede haber limitaciones sobre cómo se escalan y recortan las imágenes y sobre la cantidad de tamaños y recortes que se pueden generar y mostrar. Por lo tanto, es importante consultar con el desarrollador de la aplicación o los administradores de contenido para determinar qué es práctico (y en qué están dispuestos a invertir recursos de desarrollo adicionales) antes de seguir adelante con un diseño.

Averigüe qué formatos de medios son compatibles.

Aunque por lo general se da por sentado que una aplicación admitirá imágenes, es una buena idea consultar con los administradores de contenido sobre qué tipos de video, audio y otros archivos multimedia se pueden almacenar y mostrar y el grado en que se pueden personalizar visualmente.

Por ejemplo, ayuda saber si se creará un reproductor de video personalizado o si la única opción es incrustar un video de YouTube o Vimeo en una página. En el caso de YouTube, existen estándares y limitaciones específicos sobre cómo se pueden incrustar, escalar y aplicar máscaras a los videos.

NO designe muchos cultivos y tamaños diferentes para las imágenes.

Si bien a menudo es técnicamente factible crear muchos recortes separados para una imagen, generalmente hay un impacto negativo al hacerlo. Por ejemplo, de forma predeterminada, el CMS de WordPress genera automáticamente varios tamaños de una imagen cargada en una sola proporción, pero solo ofrece una opción para crear una miniatura recortada por separado.

Recortar cada imagen a proporciones adicionales no solo requiere la instalación de un complemento especial o el desarrollo de una herramienta dedicada por adelantado, sino que también impone exigencias adicionales a los editores, ya que requiere que realicen un trabajo adicional para cada imagen cargada. A veces, esto también dificulta la elección de una imagen viable, lo que ralentiza aún más el flujo de trabajo.

DETERMINE si el contenido heredado debe ser compatible.

Al rediseñar una aplicación heredada, a veces hay incluso menos opciones disponibles que al iniciar una nueva aplicación desde cero. Esto se debe a que ya existe un repositorio de medios, y migrar todo a un nuevo formato a menudo puede ser una operación costosa o poco práctica desde el punto de vista del desarrollo.

Proporcione a los editores de contenido una variedad de formas de aplicar estilo al texto

El contenido de texto es un elemento clave de una aplicación impulsada por CMS, y en un sitio de noticias o blog en particular, uno encontrará que los editores o escritores, cuando se les deja con sus propios dispositivos, buscan formas de diseñar y dar formato al texto para enfatizar ciertos puntos, dividir el contenido, agregar citas, crear listas, vincular a otro contenido y realizar otras tareas.

Muchas plataformas de CMS populares, como WordPress, ofrecen opciones de formato de texto de forma predeterminada, pero si el diseñador no planifica cómo se personalizarán estos estilos para su diseño, el resultado será algo aleatorio, simple o indeseable.

HACER diseño para todas las formas comunes en que se puede formatear el texto.

Especialmente para blogs y sitios de noticias, vale la pena tomarse el tiempo para proporcionar al desarrollador reglas de estilo para todas las formas comunes en que se puede formatear el texto, incluyendo: texto en negrita y cursiva, encabezados y subtítulos, listas numeradas y con viñetas, comillas en bloque, subtítulos e hipervínculos.

NO le dé a los creadores de contenido demasiado control estilístico.

Por lo general, no es una buena idea abrir demasiado control de diseño a los editores. Permitirles hacer cosas como crear sus propios diseños dentro de las páginas o colorear el texto en más de una forma puede ser desalentador o llevar mucho tiempo para algunas personas y producir resultados feos e inconsistentes en manos de otros.

Patrones futuros del diseño basado en contenido

Con la llegada de nuevas tecnologías como la realidad aumentada (AR), han comenzado a surgir nuevos paradigmas para el diseño basado en contenido. Las aplicaciones impulsadas por CMS en el espacio de realidad aumentada/mixta, que actualmente están en pañales, utilizan objetos y/o escenas del mundo real como parte clave del contenido.

El entorno de visualización de un usuario móvil en particular, las condiciones de iluminación y la proximidad física con respecto al texto y los objetos 3D insertados pueden afectar el resultado final. Esto altera significativamente la noción de curación de contenido y agrega una capa adicional de imprevisibilidad que debe tenerse en cuenta en el proceso de diseño.

El diseño web de CMS es un poco diferente

Diseñar para aplicaciones impulsadas por CMS significa poner primero el contenido y después el estilo. También significa planificar y aceptar la variabilidad y la imprevisibilidad del contenido alrededor del cual se está diseñando. La capacidad de acomodar innumerables resultados potenciales será aún más crítica en el diseño web de CMS a medida que las tecnologías emergentes transformen la naturaleza del contenido en sí.