Ideas y tendencias brillantes para los destacados widgets de Publicaciones destacadas

Manejar una revista en línea exitosa requiere una audiencia sólida y mucha escritura de alta calidad. Pero el diseño de la revista también juega un factor crucial en la participación de los visitantes. Una técnica es crear un widget de publicaciones destacadas en la parte superior de la página de inicio. Esto muestra los artículos más populares recientemente para llevar a los lectores al sitio..

En esta publicación, me gustaría cubrir las técnicas de diseño que se pueden usar para crear un widget de publicación destacado exitoso. Aunque este widget a menudo funciona mejor en un diseño estilo revista, también puede aplicarlo a blogs más pequeños o sitios web de contenido dinámico..

Contraste tipográfico

Las publicaciones más destacadas se basan en imágenes en miniatura para llamar la atención. Esto a menudo toma la forma de una imagen de fondo vinculada a cada título del artículo..

Esta técnica se ve fantástica pero es difícil de crear un contraste notable entre la tipografía y las imágenes de fondo dinámicas. Al estudiar otras revistas, puedes aprender técnicas sutiles para mejorar la legibilidad..

The Next Web es una gran revista en línea con un widget de publicaciones prominentes en la página de inicio. Cada miniatura varía en tamaño pero todas usan gradientes oscuros para mejorar el contraste.

Los titulares de los artículos se colocan en la parte inferior de los bloques de miniaturas sobre los degradados oscuros. los El texto claro es fácil de consumir sobre un fondo oscuro, sin embargo, no cubre toda la imagen tampoco.

Los avances modernos en CSS3 permiten a los desarrolladores recrear estos efectos con facilidad. Los gradientes fijos son perfectos si puedes conseguirlos fluye naturalmente encima de cada miniatura y todavía mostrar lo suficiente de la imagen para llamar la atención.

Una técnica ligeramente diferente se utiliza en la página de inicio de Tendencias digitales. Este widget de post usa fondos sólidos de alto contraste detrás del texto para hacer que cada titular sea nítido y vibrante.

La diferencia aquí es que cada color de fondo es 100% sólido. No puedes ver toda la foto en miniatura así que pequeñas porciones se pierden de vista. Pero el texto es claramente legible, lo que puede ser igual de atractivo para los visitantes que ingresan por primera vez en la página de inicio de Digital Trends..

Encontrar la cantidad correcta de contraste es complicado. Algunos sitios web como TechCrunch intentan colocar texto al lado de la miniatura para eliminar este problema por completo.

Pero si te gusta el estilo de diseño del texto del título en la parte superior de una miniatura, querrás Considera cómo los factores de contraste en la ecuación.

Tamaños de imagen esporádicos

El valor de un widget de publicación destacada es contenido de la característica en la parte superior de la página. La asimetría es una excelente manera de llamar la atención hacia algo, y en este caso los tamaños de miniaturas asimétricas funcionan muy bien.

Tomemos por ejemplo la página de inicio de ZDNet. En su widget destacado, el artículo más grande en el lado izquierdo utiliza la imagen en miniatura más amplia para ocupar más espacio y, con suerte, atraer más atención. Otras miniaturas destacadas caen en tamaños más pequeños con titulares más pequeños.

Observe cómo esta estructura de cuadrícula, naturalmente, dirige su atención alrededor de la página. La mirada de cada visitante tiende a caer en un área en particular, luego se mueve entre cada miniatura hasta que algo salta.

También ZDNet coloca un gradiente oscuro encima de cada imagen en miniatura para construir contraste tipográfico para un texto más legible. Fundamentalmente, es uno de los mejores diseños de widgets de publicaciones que he visto.

Un estilo de diseño muy similar se puede encontrar en la página de inicio de CNET. La miniatura más grande ocupa su lugar en el lado izquierdo ya que la mayoría de los visitantes leen de izquierda a derecha.

Al diseñar su propio widget de publicación destacada, no se sienta obligado a seguir esta misma técnica. Puede ir con cualquier tamaño de miniatura siempre que encajen de manera cohesiva y formen un diseño de cuadrícula unificado..

Estilos de miniaturas personalizados

Las opciones de diseño varían ampliamente de un diseño a otro, por lo que no hay una solución perfecta. Los widgets de publicación destacados son definitivamente más complejos de diseñar, por lo que requieren estudio y paciencia para adaptarse a un diseño personalizado.

El estilo de cada miniatura afecta el aspecto del widget completo a su audiencia. Tomemos, por ejemplo, el estilo de widget presentado en The Verge.

Cada miniatura tiene un degradado de colores en la parte superior de la foto. Esto aumenta el contraste y mejora la legibilidad, pero también agrega cierto estilo al sitio web..

A algunas personas no les gusta este estilo porque les resulta llamativo o poco atractivo. Pero también es bastante popular entre los lectores de Verge y otros diseñadores que imitan este estilo..

Pero los colores y las técnicas de fantasía no son el único factor a considerar. Las cuadrículas y el tamaño de las miniaturas también se deben elegir cuidadosamente ya que ayudan a definir el estilo general del widget de publicaciones destacadas.

Quizás uno de los mejores ejemplos sea el diseño de Mashable, que ha pasado por muchas fases a lo largo de los años. Ahora considerada como una fuente principal de noticias, Mashable trabaja para incluir una gran cantidad de publicaciones en la página de inicio para una fácil navegación..

Algunas publicaciones usan miniaturas cuadradas pequeñas mientras que su tabla de clasificación principal corrige un gran banner en miniatura a tamaño completo para el artículo. Esto debe requerir trabajo adicional del editor para garantizar que todas las publicaciones tengan sus fotos apropiadas en los tamaños correctos.

Pero justo después de aterrizar en el sitio se dará cuenta de que emite un sentido de credibilidad. Este estilo se siente muy común y puede ser usado por casi cualquier tipo de revista en línea para generar confianza con la base de lectores. El único problema es escribir suficiente contenido para llenar la página!

Widgets Multi-Post

Algunos widgets de publicación destacados muestran artículos en un rejilla estática. Esta es a menudo la opción más popular porque puede ser hecho sensible y combina bien en cualquier diseño.

Otros widgets se basan en interacciones dinámicas como una presentación de diapositivas. Tomemos, por ejemplo, la página de inicio de Vanity Fair con su bloque de publicaciones destacadas en la parte superior de la página. Solo se muestra una publicación a la vez, pero se muestran nuevos artículos cuando se desplaza sobre un título en particular.

Tanto la miniatura como el título se actualizan automáticamente con una simple interacción flotante. Una cosa a tener en cuenta es que esto puede ser muy confuso para los usuarios de Internet que no están familiarizados con esta técnica dinámica de desplazamiento..

Pero en el lado positivo esta técnica será ahorra espacio en la página ocultando el exceso de contenido.

Trate de no pensar en los widgets de publicaciones destacadas como en blanco y negro. Solo son secciones de página que se utilizan para mostrar los artículos más interesantes o populares. La (s) técnica (s) mediante las cuales realiza esta tarea siempre puede estar abierta a debate.

La revista compleja utiliza una presentación de diapositivas completa para su widget destacado. Cada publicación tiene una miniatura destacada junto con el degradado inferior para el contraste tipográfico.

Pero en lugar de colocar cada miniatura de lado a lado, los artículos transmitir dinámicamente a través de un cuadro de presentación de diapositivas. La navegación se puede configurar de forma automática o controlada por enlaces de flecha. Este diseño ahorra mucho espacio y mantiene al usuario más dispuesto a interactuar con la página.

Envolver

No hay un diseño correcto o incorrecto cuando se trata de exhibiciones de publicaciones destacadas. Todos comparten muchos rasgos similares, pero cada revista utiliza su propio estilo para organizar el contenido destacado..

Espero que esta publicación ofrezca consejos prácticos para usar al diseñar tu propio widget de publicaciones destacadas. Si alguna vez te sientes atascado, busca inspiración en otras revistas. Encuentre los rasgos que le gustan y descubra cómo replicarlos para combinarlos con el diseño de su propia revista..