Enfoques de diseño para sitios web de editores

Publicado: 2020-12-17

¿Qué es un "sitio web de editor digital"? Es un sitio web que se enfoca en publicar muchos artículos a diario. Es un nivel por encima de un "blog". Es básicamente un sitio de noticias o una plataforma de publicación viral como BuzzFeed.

Existe una diferencia en el enfoque de diseño de un sitio web de este tipo en comparación con las ventas de productos, negocios, blogs personales o cualquier otro tipo de sitio web. Su diseño a menudo se conoce como el estilo "Revista", que también es una categoría bastante saturada en los mercados temáticos.

captura de pantalla de buzzfeed

¿Qué hace diferente al sitio web de un editor?

Hay dos diferencias importantes entre un sitio web de editor y uno más regular.

El primero obvio es la cantidad de contenido. Ahora, por supuesto, hay sitios web enormes, especialmente los de comercio electrónico como Amazon o eBay que probablemente tengan mucho más contenido, pero esas son plataformas que obtienen contenido de los usuarios del sitio. Los editores tienen equipos editoriales que trabajan a tiempo completo para producir contenido en un horario. Como lo hace un periódico.

La otra gran diferencia es la fuente de ingresos. Un sitio web de una empresa como Coca Cola no genera sus ingresos del sitio , sino que proviene de sus productos. La mayoría de los sitios web de las empresas tienen el propósito de ser simplemente una presencia digital.

Sabiendo esto, probablemente sea obvio que los ingresos del sitio web de un editor provienen del sitio en sí. ¿Cómo? Anuncios! Que es más o menos cómo Google o Facebook generan la mayor parte de sus ingresos.

Los anuncios, decididamente, se ejecutan en la web y son la principal prioridad de muchos sitios web. Su contenido se centra en atraer a tantos lectores como sea posible para que puedan ver los anuncios en sus diseños.

Desde una perspectiva de diseño, esta es la principal prioridad de los sitios web de editoriales y revistas.

Diseño de sitios web con mucho contenido

Echemos un vistazo a algunas editoriales importantes como Variety:

página de inicio de variedad

Lo primero que se ve es un gran anuncio en la parte superior. Veremos eso más en un segundo, antes de eso: el diseño del contenido. Un encabezado grande con muchos enlaces: hamburguesa en la parte superior, búsqueda, llamado a la acción y luego aún más elementos del menú. El objetivo es facilitar el acceso a todas las categorías de contenido. Esto está en marcado contraste con muchos sitios comerciales que tienen menos de 10 páginas (excluidas las páginas de blogs).

Después de eso, una caja grande para el artículo principal. Ésta es una buena decisión de diseño. Hace que sea más fácil para sus visitantes decidir qué hacer. Si hay 10 elementos igualmente importantes, la tensión mental de elegir uno sobre otro podría hacer que algunos usuarios reboten en la página. Con una jerarquía visual clara de elementos importantes a menos importantes, un diseñador puede hacer que los usuarios permanezcan más tiempo en una página web.

A la derecha, otro anuncio y un widget "Más popular", que es justo lo que a la mayoría de los usuarios les gustaría ver. Para poder incluir tanto contenido, Variety ha decidido convertirlo en un área desplazable.

Este es el tipo de diseños que buscaría principalmente con las editoriales más grandes.

página de inicio de buzzfeed

BuzzFeed es otro ejemplo de diseño que está diseñado para trabajar con grandes cantidades de texto. Aunque aquí el diseño es más divertido con colores vibrantes y formas que llaman la atención (como los tres botones en la esquina superior derecha).

Hay más "clasificación" como el 1, 2, 3 en la tendencia a la derecha, la etiqueta roja brillante para las noticias "Breaking" y así sucesivamente. Una tendencia importante en un diseño similar es atraer la atención del usuario. Sin embargo, esa atención debe estar bien dirigida, ya que no querrá dividirla entre dos elementos igualmente importantes.

Aquí hay un ejemplo del enfoque incorrecto donde todo intenta estar en la parte superior:

coches ling

Somos conscientes de que el propósito es completamente diferente y que el sitio anterior podría generar una buena ganancia, pero ilustra bien el principio de "todo lo que intenta llamar su atención".

Editores digitales y publicidad

El diseño en torno a la publicidad es otro tema importante para los editores. Teniendo en cuenta que es la principal fuente de ingresos, también es la máxima prioridad. Hay algunas cosas que un diseñador debería considerar aquí, en primer lugar, recibir comentarios o buena información del equipo de AdOps, que comprende bien los requisitos y la funcionalidad de estos anuncios.

Ejemplos de esto son los tamaños de anuncios. Hay 300 × 250, 300 × 600, hay 728 × 90 y 300 × 50.

  • Algunos pueden quedarse en un lado de la pantalla donde puede desplazarse por diferentes puntos
  • Algunos podrían quedarse en su propio rincón, algunos se quedarían siempre en la parte superior de la página.
  • Otros aparecerían en pares de dos 300 × 250 o uno 720x90px.

¿Cómo sabe todo esto y cuáles son los requisitos?

Entonces sí, el primer paso sería recopilar toda esa información. Una forma más sencilla de verlo es en términos de diseños. Una sola publicación puede tener varios diseños según los objetivos del editor. A veces hay menos anuncios, a veces hay más. A veces, los anuncios cambian de tamaño para diferentes cargas, otras veces permanecen constantes. Sin embargo, todo puede cambiar rápidamente a medida que surgen nuevas tendencias y reglas. ¡A menudo a diario!

Algunas de las cosas importantes a tener en cuenta serían:

  • Es posible que se carguen anuncios con altura. Esto significa que el contenido se reduciría y el diseño que se hizo para adaptarse a un determinado widget en la parte superior fallaría.
  • Los anuncios pueden necesitar fondos. Este podría ser un fondo gris claro que rodea al anuncio y toca las esquinas de la pantalla.
  • Los anuncios a menudo necesitan espaciarlos para evitar toques accidentales. 20-30 píxeles es una buena distancia entre los anuncios.
  • Le gustaría agregar una etiqueta de "Anuncio" antes / después con el objetivo de atraer más a los proveedores de anuncios.
  • ¡No debería haber demasiados anuncios! El punto óptimo para esto es lo que un equipo de AdOps trabajaría en averiguar para un editor específico, una página específica e incluso un tráfico específico (como Facebook, Snapchat, etc.)

Rendimiento del sitio web del editor

Un factor importante que contribuye al mal rendimiento son las configuraciones con más de 8 anuncios que intentan cargar con toneladas de otros scripts. ¿Por qué es esto una preocupación del diseñador cuando todo está en el código? ¿No pueden los desarrolladores simplemente optimizarlo? Bueno, sí, pero eso es casi un trabajo de tiempo completo por sí solo, y en el que el diseñador podría ayudar. Para comprender todo esto, primero debe comprender un poco sobre los navegadores

rendimiento del sitio web del editor

Fuente

Los navegadores pueden utilizar la CPU o la GPU de una máquina dependiendo de la forma en que un determinado elemento esté codificado por un desarrollador front-end. A veces, acciones como animaciones e interacciones al pasar el mouse, presionar utilizarían la CPU o la GPU. Si una animación, por ejemplo, utiliza la CPU, es muy probable que haya un retraso, si es la GPU, entonces es posible obtener un mejor rendimiento. Los requisitos del diseñador pueden ser la diferencia entre los dos.

A continuación, se ofrecen algunos consejos generales:

  • Use poca o ninguna sombra. Las sombras son muy caras de renderizar, especialmente en dispositivos móviles y portátiles de gama baja.
  • No use filtros de fondo o desenfoques (o cualquier filtro), ya que también son muy costosos.
  • Mantenga las formas simples tanto como sea posible para reducir la computación adicional.
  • No solicite animaciones de elementos que afecten el diseño (otros elementos). Diseñe alrededor de eso tanto como sea posible. Cualquier cosa que se superponga o sea una ventana emergente es una mejor opción.
  • Mantenga las imágenes relativamente pequeñas. Esto permitiría a los desarrolladores cargar imágenes de menor tamaño que ahorrarían peso en el sitio.
  • Mantenga las animaciones en general al mínimo, especialmente en la carga del sitio. Lo mismo se aplica a los cambios de diseño. La primera carga es el tiempo más intensivo de CPU para un sitio web cuando se aplica todo JavaScript.

Fuente

Prioridad del diseño

La mayor parte del tráfico en los sitios de los editores proviene de dispositivos móviles. Así que el tiempo que más se dedica a pulir todos los detalles debería ir allí. También en dispositivos móviles es donde la mayoría de las optimizaciones también son necesarias, ya que la mayoría de los dispositivos no son productos insignia de alta gama, sino teléfonos inteligentes de $ 200 a $ 300.

En dispositivos móviles, su objetivo es mantener el contenido legible mientras presenta anuncios de forma clara. Mantenga una gran distancia entre cualquier elemento en el que se pueda hacer clic y los anuncios para eliminar cualquier clic accidental en los anuncios. Si es posible, reduzca las animaciones y superposiciones que puedan hacer que el sitio se sienta menos ágil.

Resumen

Los editores se centran en una gran cantidad de contenido y muchos anuncios. En general, las páginas de destino y los archivos tienen menos prioridad que las vistas individuales, ya que el tráfico a menudo llega directamente a los artículos desde otros anuncios. Como diseñador, su enfoque es encontrar la forma más óptima de publicar anuncios, agregar los espacios adecuados y separarlos bien del contenido principal para mantener todo legible y utilizable.

Mantenga los elementos complejos de la interfaz de usuario al mínimo para mejorar el rendimiento de la velocidad y solicitar la menor cantidad de animaciones posible. Para concretar todo bien, los editores a menudo necesitan trabajar con agencias de desarrollo que tengan una buena experiencia con AdOps, sigan las últimas tendencias y las pilas de tecnología en el negocio, como DevriX.