10 consejos para mejorar su diseño web editorial y de revista

Cada vez más publicaciones de periódicos y revistas se mueven en línea, y sus sitios web a menudo requieren un poco más de atención y cuidado que los sitios tradicionales. Los editores ya han estado prestando mucha consideración y atención a los diseños de sus publicaciones durante siglos, por lo que es natural que quieran brindar el mismo nivel de calidad al diseño web de revistas.

Sin embargo, el estilo no es lo único que debe preocupar a estas publicaciones.

También deben considerar la funcionalidad y la experiencia del usuario. Por lo tanto, depende de usted como diseñador web o propietario de un sitio editorial asegurarse de que este tipo de sitios web sean tan fáciles de usar como de ver.

Los 10 mejores consejos de diseño web para editoriales y revistas

Entonces, si se le ha encomendado la tarea de crear o actualizar un sitio web de noticias o revistas rico en contenido, aquí hay 10 consejos para mejorar su diseño web editorial y de revistas.

1. Usa un tema estilo revista

El tema de WordPress de la revista Extra

Cuando se trata del diseño web de una revista, esto puede parecer obvio, pero una de las mejores maneras de mejorar el diseño de una revista en línea es usar un tema diseñado específicamente para este propósito. Esto es especialmente cierto si estás usando WordPress.

Estos temas de revistas y noticias suelen presentar páginas de inicio bien diseñadas que facilitan la visualización de muchos artículos diferentes en un solo lugar, todo sin abrumar al lector. Otras características útiles a menudo incluyen diferentes formas de mostrar las publicaciones más recientes, agrupar fácilmente el contenido por categorías, menús expansivos y mucho más.

Si está utilizando WordPress, entonces tendrá muchas opciones en este departamento, con muchos temas multipropósito en oferta. Sin mencionar aquellos que se han creado especialmente para manejar sitios web con mucho contenido que viene en una variedad de formatos.

Un gran ejemplo de un tema como este es nuestro tema Extra . Está impulsado por Divi Builder, lo que facilita la creación de diseños personalizados para la página de inicio de su sitio, así como la categoría y las páginas internas. En el paquete de temas Extra, encontrará una gran selección de diseños de página prediseñados que le permiten publicar artículos aptos para una revista impresa o un periódico.

Nexus es otro ejemplo de un tema de nuestra colección que se puede utilizar para el diseño web de una revista. Aunque no es tan nuevo como el tema Extra, aún tiene un gran impacto al ofrecer una forma sencilla de crear un sitio web editorial limpio y versátil. Extra es una excelente opción para editoriales culturales y de estilo de vida, pero aún vale la pena considerar Nexus para sitios web de noticias de tecnología y deportes.

Ya sea que esté rediseñando un sitio o comenzando desde cero, elegir el tema correcto es un paso importante en el proceso. Asegúrese de elegir uno que le brinde muchas formas diferentes de mostrar su contenido y que tenga un diseño limpio y fácil de leer. También puede considerar incorporar contenido rico estilo revista en su tema utilizando un servicio como Issuu. WordPress se envía con un bloque de inserción de Issuu que puede usar para integrar fácilmente estas experiencias similares a las de una revista.

2. Conozca a su audiencia y diseñe para ellos

Asegúrese de que su diseño sea adecuado para su audiencia

Mantenerse al tanto de las últimas tendencias de diseño web es importante, pero también es importante recordar que hay más de un estilo de diseño web de revista en el que puede basar la apariencia de su sitio. Llegar a conocer a su audiencia, o la audiencia de su cliente, es donde comienza todo proyecto de diseño web exitoso, especialmente para sitios editoriales.

Cracked.com, un popular sitio web de humor, tiene un diseño de página de inicio lleno de filas y filas de artículos, con fotos y titulares humorísticos, como «20 reglas de los universos cinematográficos (que nunca suceden en la vida real)». The Loppist, por otro lado, una editorial en línea de arte y diseño, tiene un diseño de sitio más elegante con una gran foto de fondo arriba del pliegue y contenido mínimo debajo.

Ningún estilo de diseño web de revista es correcto o incorrecto y ambos funcionan bien para el contenido que publican y su público objetivo.

Estas publicaciones conocen las personalidades de sus audiencias, lo que facilita el diseño de páginas de inicio y diseños de artículos para adaptarse a los diferentes gustos y expectativas de sus lectores.

3. Usa imágenes más grandes y llamativas

Sea creativo con sus imágenes: imagen de Naghiyev / shutterstock.com

Las editoriales han usado imágenes grandes y audaces en sus revistas durante décadas, pero la web se ha ceñido a imágenes más pequeñas durante la mayor parte de su existencia. En el pasado, esto ha sido por razones más prácticas, como el tamaño de la pantalla y la velocidad de descarga, que una simple cuestión de preferencia.

Sin embargo, los tiempos están cambiando y las limitaciones de Internet están desapareciendo lentamente. Por lo tanto, no debe pasar por alto el poder de utilizar la imagen adecuada en el momento adecuado. No tenga miedo de hacer que las imágenes de alta calidad y bien optimizadas sean el punto central del diseño de su sitio de noticias o revista.

Si no puede tomar sus propias fotos, use fotos de archivo, pero sea más estratégico en la forma en que las elige. Use sitios de calidad como Shutterstock o iStock para encontrar imágenes llamativas y bien producidas que ayuden a transmitir el mensaje de su artículo a sus lectores.

Incluso puede utilizar sitios libres de regalías como Unsplash y Gratisphotography . De hecho, hay muchos lugares para encontrar imágenes gratuitas de alta calidad para su proyecto.

Si decide utilizar imágenes de stock, trate de ceñirse a un estilo o tema para su artículo. Por ejemplo, aquí en Elegant Themes, generalmente preferimos usar imágenes vectoriales, en lugar de ilustraciones o fotografías.

No tenga miedo de usar estas fotos como imágenes de encabezado grandes para artículos específicos. Sea creativo para que usted o su cliente puedan contar mejores historias usando los efectos visuales correctos. Cada vez que cree una nueva publicación, deténgase y piense si su imagen principal es o no lo suficientemente digna como para aparecer como portada de una revista.

Volviendo a elegir el tema correcto de la revista de WordPress, los mejores le permitirán crear diseños de página que se liberen de las limitaciones del editor de publicaciones de WordPress. Esto le permite diseñar diseños para sus artículos que combinan texto e imágenes con gran efecto.

4. Use múltiples tipos de letra bien diseñados

No subestimes el poder de la tipografía: imagen de Oleksii Badusov / shutterstock.com

Todavía es muy importante usar fuentes compatibles con la web. Cada vez más personas consumen noticias a través de dispositivos móviles, lo que significa que sus fuentes deben verse bien en una amplia gama de tamaños de pantalla. Pero eso no es todo lo que hay que preocuparse.

Las imágenes destacadas se encuentran entre las mejores formas de animar a los usuarios a hacer clic en un artículo. Sin embargo, no subestimes el poder de los tipos de letra bien elegidos. Es posible que no sean adiciones que cambien el juego en el diseño de su sitio, pero juegan un papel importante.

También debe considerar usar varias fuentes en una sola página. Usa una fuente para el título de tu artículo, otra para los encabezados y una tercera para los párrafos. Intente experimentar con una combinación de fuentes que se complementen entre sí, así como con otras que no.

Debido a la variedad de dispositivos que se utilizan para consumir contenido hoy en día, en 2016 están surgiendo algunas tendencias tipográficas emocionantes , así que asegúrese de experimentar con su sitio web y ver qué funciona mejor con su contenido.

5. Combina imágenes grandes con fuentes bien elegidas

Experimenta combinando imágenes y texto

Cuando combina imágenes grandes y audaces con fuentes bien diseñadas, puede crear imágenes llamativas que harán que el contenido editorial cobre vida. Eche un vistazo a cómo Domani Studios hace esto en su página de inicio. Puede usar la misma técnica para la característica o la imagen del encabezado de un artículo para que el mensaje general de una publicación se destaque.

Tampoco es necesario que siempre sean fuentes grandes y en negrita. Juega con tus diseños para ver qué funciona mejor para tu publicación. Por ejemplo, una fuente de escritura liviana podría funcionar mejor para una revista de moda sofisticada y de alta gama.

6. Usa un sistema de cuadrícula

Los diseños de cuadrícula se pueden utilizar con gran efecto

Las revistas editoriales han utilizado sistemas de cuadrícula en publicaciones tradicionales durante décadas, por lo que es natural que los diseñadores web incorporen esta práctica en sus diseños. Un sistema de cuadrícula es una estructura para una página, generalmente la página de inicio de un sitio web, que utiliza líneas horizontales y verticales para mostrar el contenido de una manera visualmente atractiva y más fácil de consumir para el usuario.

Puede usar creadores de páginas para diseñar sus propios sistemas de cuadrícula, y eso incluye Divi Builder . Consulte la publicación de Tom sobre los mejores complementos de cuadrícula de WordPress  si desea una forma sencilla de mejorar el diseño web de su revista.

Los sistemas de cuadrícula más atractivos visualmente usan más imágenes que texto, así que asegúrese de usar miniaturas atractivas que su audiencia apreciaría y querría conocer la historia detrás del uso de sistemas de cuadrícula.

7. Abraza el espacio en blanco

No le temas al espacio en blanco

Los espacios en blanco solían ser un gran no-no en el mundo del diseño web de revistas y en el diseño en línea en general. Los diseñadores, en particular los diseñadores gráficos, se apegaron a una regla estricta que abogaba por el uso de cada onza de espacio en blanco disponible porque el espacio en blanco era «espacio desperdiciado». Esto crea un gran problema: el desorden.

Sin espacios en blanco, todo el tiempo que usted o sus clientes dedican a crear grandes titulares y diseñar imágenes llamativas puede desperdiciarse en el desorden que estos diseños sin espacios en blanco generan. Adopte el espacio en blanco y utilícelo para mostrar al lector dónde debe centrar su atención.

Tome Medio , por ejemplo. Este sitio no muestra barras laterales en los artículos y utiliza muy pocos elementos adicionales en las páginas. En lugar de distraerse con anuncios, formularios de suscripción de correo electrónico y otros elementos, la atención del lector tiene una sola cosa en la que concentrarse: el contenido.

8. Utiliza el diseño de materiales de Google

Prepárate para adoptar Google Material Design

Si lee el pronóstico de Randy Brown para las tendencias de diseño web en 2016 , sabrá que Material Design de Google será un jugador importante este año, y los diseñadores editoriales deben tomar nota.

Material Design, presentado por Google, específicamente para su uso en dispositivos Android, a fines de 2014, es una nueva versión del diseño plano. Básicamente, le da a los elementos típicamente planos una o dos capas adicionales para que no sean completamente planos, dando nueva vida a esta popular tendencia de diseño.

Esto convierte los elementos en tarjetas para que se diferencien entre sí. Un gran ejemplo de cómo incorporar esto en la estrategia de diseño web de su revista es usarlo para los elementos de la página de inicio, como las listas de artículos. Como puede ver en la imagen de arriba, Wired usa este diseño para separar visualmente los diferentes artículos en su página de inicio. Las tarjetas de artículos incluso tienen una animación de «elevación» cuando pasas el cursor sobre ellas.

Esta tendencia de diseño web de revista brinda a los diseñadores web la opción de diferenciar entre dos o más elementos en una página, de una manera que es visualmente más atractiva que las opciones típicas que ofrece un diseño plano estándar.

9. Usa microinteracciones elegantes

Ejemplo de microinteracciones en la barra lateral de Daily Beast

En la publicación de Dan Virgillito sobre las cinco tendencias de UX que los diseñadores deben tener en cuenta en 2016 , mencionó dos excelentes ejemplos de microinteracciones que funcionan muy bien en los sitios web editoriales.

Las microinteracciones son pequeñas interacciones que ayudan a un usuario a navegar por un sitio web. Esto podría incluir un pequeño botón en la esquina inferior derecha de una página web que lleva al usuario directamente a la parte superior de la página cuando se hace clic en él.

Un excelente ejemplo que dio Dan es una barra de progreso que le permite al usuario saber qué tan avanzado está en un artículo. The Daily Beast usa esto en su función de la barra lateral Leer esta lista que acompaña a cada artículo. Agregar esta función al diseño web de su revista es una excelente manera de mantener a los usuarios interesados ​​​​en su contenido durante el mayor tiempo posible.

10. Recuadro Información importante

Use cuadros de ruptura para atraer a los lectores

Ciertas publicaciones pueden obtener una cantidad decente de uso al excluir información importante y mostrarla al costado de un artículo de una manera que sea más fácil de digerir para el lector. Esta práctica es popular en los sitios web de cocina y proporciona una forma efectiva de mostrar listas de ingredientes en las barras laterales o cerca del borde del artículo.

También puede ser utilizado por sitios web creativos como una forma de mostrar una lista de materiales que un lector necesitará para completar un proyecto de bricolaje. Los editoriales pueden usar estas mismas prácticas si producen artículos de procedimientos en sus sitios, pero también hay otras formas de usarlos.

Por ejemplo, las publicaciones que usan el método de escritura de la pirámide invertida pueden encontrar útil mostrar los puntos y hechos principales de un artículo en uno de estos cuadros, pero luego usan el artículo completo para desarrollar esos puntos y hechos.

Desglosarse con algún contenido adicional puede ayudarlo a proporcionar a sus lectores información fácilmente digerible para respaldar su artículo y atraer a cualquiera que navegue por su sitio web.

Reflexiones finales sobre el diseño web de revistas

El estilo es uno de los elementos más importantes a tener en cuenta con este tipo de sitio web, y por una buena razón. Toda una publicación, incluyendo cada pieza de contenido que se publica, gira en torno a ese estilo. Por eso es tan importante para usted como diseñador tener en cuenta la funcionalidad y la experiencia general del usuario del sitio al implementar ese estilo.

Cada vez que incorpore un nuevo diseño en un sitio editorial, considere cómo afectará la experiencia del usuario del sitio. Por ejemplo, los videos de fondo se ven geniales, pero los beneficios que pueden aportar a un sitio web se evaporan rápidamente cuando evita que un usuario con una conexión a Internet modesta cargue su contenido.

¿Cuáles son algunos de sus diseños web de revistas en línea favoritos? Háganos saber en los comentarios a continuación.

Imagen en miniatura del artículo de Dacian G / shutterstock.com