() translation by (you can also view the original English article)
Sabes que el diseño de tu tema de periódico es excelente, pero ¿con qué frecuencia alguien más dice "¡Guau! ¡Excepcional!"? Posiblemente nunca. El diseño excelente es (casi) invisible; es una experiencia natural, por lo que los usuarios apenas se dan cuenta de que están haciendo uso de él y disfrutándolo.
Hay tres componentes principales en todo tema WordPress para periódico que proporcionan a los usuarios finales, los lectores, lo que están buscando:
- diseño de contenido
- usabilidad del contenido
- rendimiento del sitio web (velocidad de carga de la página)
Los propietarios de sitios web perspicaces eligen temas de periódico que les ayuden a resolver todos estos puntos sin esfuerzo.
En este artículo nos sumergiremos en siete principios para diseñar un tema de periódico de calidad. Usaré algunos populares temas de periódico para WordPress disponibles en Themeforest como casos de estudios, junto con algunos pesos pesados de los medios de comunicación dominantes.
1. Haz que crear contenido sea fácil
En la industria de las noticias, los bloggers, los vloggers, los periodistas y los escritores de contenido centran su atención en la creación de contenido que sorprenda a la audiencia. Muy pocos de ellos tienen habilidades de diseño web o codificación, por lo que construir sus propios sitios web con WordPress puede constituir para ellos un desafío, te adorarán si les proporcionas una manera fácil de crear, diseñar y publicar su contenido.
Una buena solución a estos problemas se puede encontrar en uno de los temas más populares de Themeforest para noticias. Newspaper WordPress Theme es uno de los temas más vendidos para un blog, un sitio de noticias y una revista. Incluye un constructor de páginas personalizado del tipo "clic y arrastrar" que ayuda a los usuarios a diseñar su propio contenido.
Proporciona a los usuarios más de 100 elementos distintos que pueden combinar y la posibilidad de personalizar publicaciones, páginas, encabezados y pies de página, directamente desde el front-end del sitio web. Cada elemento tiene multitud de ajustes preestablecidos, por lo que no hay necesidad de crear todo desde cero. Los propietarios de sitios web pueden usar un diseño preexistente y empezar a personalizar a partir de ahí sin tocar una sola línea de código. Lo que me lleva a…
2. ¡No me obligues a escribir código!
Un bloguero o periodista debe tener libertad para personalizar el diseño y realizar ajustes de estilo complejos, sin codificar. Aquí es donde entran en el juego las bibliotecas de plantillas. Cada vez más temas en Themeforest vienen con una colección de diseños listos para usar con solo hacer clic en un botón, lo que reduce el tiempo de desarrollo de los sitios web resultantes. Estos son algunos ejemplos:
The Issue
El autor del tema Issue Magazine WordPress Theme añadió una biblioteca de plantillas de diseños, y páginas adaptadas para el constructor de páginas WPBakery. Lo llaman "the Fuel Studio Element Gallery":
MagPlus
Otro gran ejemplo de biblioteca creada para el plugin WPBakery lo puedes encontrar en el tema MagPlus WordPress Theme de Theme Bubble.
Newspaper
Newspaper también proporciona a sus clientes acceso a una inmensa colección de elementos preconstruidos, de uso gratuito. La biblioteca tagDiv Cloud Library reúne más de 620 diseños: plantillas individuales, secciones, páginas, páginas de inicio, encabezados y pies de página; todo creado por expertos. Los usuarios también pueden importar lo que necesiten de los servidores del autor.
3. Haz que el contenido sea fácilmente escaneable
Ten en cuenta que los usuarios no leen contenido en Internet de la manera que podrías esperar. Al igual que tú y yo, están escaneando títulos, imágenes y extractos, tratando de averiguar lo más rápidamente posible, dónde encontrar el contenido que están buscando.
Dividir páginas en áreas claramente definidas para hacer que el contenido se pueda escanear es esencial para centrar la atención de la audiencia. Por lo tanto, asegúrate de que tu contenido sea escaneable. Usa el espacio negativo y las relaciones visuales en las páginas para permitir que tu contenido respire. De esta manera le darás tiempo a los ojos de la audiencia para procesar el contenido.
Obtén más información sobre cómo estas fuerzas invisibles del diseño pueden ayudar a tus maquetaciones para periódico con la miniserie de David Kadavy:
Teoría del diseñoFuerzas invisibles: Alineación, dirección y enfoque
Teoría del diseñoFuerzas invisibles: Tamaño, contraste y equilibrio
Teoría del diseñoFuerzas invisibles: Espaciado y forma
4. Aplicar las convenciones
Puede sonar obvio, pero es importante que hagas que tu sitio web de noticias sea fácil de navegar y comprender. No tienes que reinventar la rueda para lograrlo; las convenciones de diseño web sólidamente establecidas harán la magia.
A lo largo de los años, los usuarios de Internet se han vuelto de forma subconsciente, capaces de reconocer patrones comunes en los sitios web:
- La navegación principal está en la parte superior o izquierda de una página
- El logotipo está en la parte superior izquierda o en el centro de una página
- Los enlaces cambian de color o estilo al pasar el cursor sobre ellos
- El carrito de compra está en la parte superior derecha de la página
- La columna lateral contiene información adicional, útil y contenido popular
- Cada artículo se puede compartir con un clic (iconos para compartir en redes sociales)
- El contenido se divide en secciones y se puede filtrar
- Se puede hacer clic sobre el logotipo, y éste siempre lleva al visitante a la página de inicio
Mientras luchas por la singularidad, podrías estar tentado a ignorar convenciones como estas, y esa es tu prerrogativa. Sin embargo, un patrón bien establecido puede hacer que el uso de un sitio web sea más intuitivo. Por ejemplo: ¿buscarías las últimas noticias en la parte inferior de una página? Supongo que no; si las últimas noticias están en cualquier otro lugar que no sea la parte superior de un archivo se creará confusión y frustración, difícilmente útil si estás persiguiendo lograr una experiencia de usuario de calidad.
5. La tipografía es la nueva caligrafía
La tipografía es el arte de organizar los tipos para conseguir que el lenguaje escrito sea legible y atractivo. Para los visitantes, puede marcar la diferencia entre abandonar un sitio web o la motivación para seguir leyendo.
Algunas definiciones para guiarte a través del arte de las fuentes:
- Un serif o remate es una pequeña línea decorativa utilizada en las terminaciones de las formas de las letras.
- Sans serif o palo seco describe los tipos de letra que no tienen esa característica. El nombre proviene del francés, donde "sans" significa "sin".
- Una tipografía (o familia de fuentes) es un conjunto de fuentes que comparten características de diseño pero que al mismo tiempo tienen cada una peso, un estilo, una condensación, una anchura, una ornamentación, una inclinación, o cursiva específicos. Por ejemplo, Open Sans es una tipografía, y Open Sans Light, Open Sans Bold y otras, son familias tipográficas pertenecientes a la primera.
- El tracking (espaciado entre letras) hace referencia al espacio entre caracteres que afecta visualmente a un bloque de texto.
- La altura x se refiere a la distancia entre la línea base y la línea media de las letras minúsculas. Es esencialmente el tamaño del carácter "x" en una fuente dada.
- La línea base es una línea sobre la que se asientan los caracteres. Las descendentes se extienden por debajo de ella (la letra "y" tiene una línea descendente).
Si echas un vistazo a los sitios web de periódicos y revistas más importantes, la mayoría de ellos usan tipos de letra sans serif, mientras otros combinan hábilmente tipografías serif y sans serif. Hay un viejo debate entre los diseñadores web sobre qué opción es mejor para la legibilidad.
Echemos un vistazo a algunos de los sitios web de noticias más populares. He elegido cuatro ejemplos para mostrarte cómo utilizan la tipografía.
Tanto BBC News como Wired usan tipografías sans serif, que les proporcionan una sensación aséptica y moderna. Wired en realidad utiliza una combinación segura de varias fuentes, para añadir también una saludable dosis de personalidad.
En contraste a estos tenemos The New York Times y el Washington Post; ambos se basan en gran medida en la tipografía serif, con una caligrafía para pantalla que incrementa aún más a la sensación tradicional:
Sea cual sea la personalidad que busques, asegúrate de que el propietario del sitio web pueda mantenerse fiel a su sitio web y elegir la tipografía que mejor transmita su mensaje y estilo. Los temas premium habitualmente ayudan a los propietarios a realizar ajustes precisos en su tipografía.
6. Proporciona una experiencia de lectura responsiva
Un poco de historia antigua: hubo una vez en la que la gente navegaba siempre por Internet desde ordenadores de escritorio. En 2001, algunos alemanes inteligentes crearon el primer sitio web responsivo (aunque posiblemente el primer sitio web de la historia fue también responsivo), un diseño que se adaptaba al tamaño de la pantalla. Un par de décadas más tarde, el diseño web responsivo y móvil es algo obligatorio, ya que la mayoría del tráfico web proviene ahora de dispositivos de pantalla pequeña.
En los periódicos, dado que esperas que los visitantes lean e interactúen con tu contenido, crear una experiencia agradable es aún más importante que nunca. La conclusión es: Si tu sitio web o tema de noticias no tiene en cuenta los dispositivos móviles o las pantallas retina, ¡deberías haberlo arreglado ayer!
7. Modo oscuro para los momentos de lectura
Durante años, nos hemos acostumbrado a leer todo online en tonos de gris metálico claros. Esta es una convención que tal vez quieras replantearte. Para mucha gente, un modo oscuro es necesario y puede proporcionar descanso a los ojos. Mejorar tu tema proporcionando la opción de mostrar el contenido conforme a las preferencias de los visitantes parece más una cortesía entre amigos, pero puede ser esencial para una buena experiencia de lectura.
Un tema que hace esto correctamente es el tema Bimber Magazine WordPress Theme. Implementar el modo oscuro es fácil; con un solo clic los visitantes pueden cambiar al modo oscuro.
Aquí puedes ver un pequeño ejemplo sobre cómo configurar una opción para cambiar a la lectura en modo oscuro:
Esto se puede llevar un paso más allá usando la configuración del sistema del usuario para determinar si estos desea utilizar el modo oscuro o el claro. El soporte del navegador sigue siendo escaso, pero echa un vistazo a cómo CSS será pronto capaz de gestionar el modo oscuro por ti:
Buen diseño para temas de WordPress de periódico
Los temas para periódico suelen centrarse en algunos conceptos clave:
- Creación de jerarquías visuales eficaces
- Aplicación de un formato al contenido que ayude al escaneo
- Centrar la atención del público
- Mostrar grandes cantidades de contenido de manera eficaz
- Apoyar la monetización
- La carga rápida del contenido
La lista podría ser fácilmente más larga ya que la dinámica del sector de las editoriales de noticias está en continuo cambio. Diseñar un tema de periódico, al igual que crear un sitio web relacionado con noticias, debe estar centrado en el usuario. Averiguar lo que tus clientes esperan de ti es el primer paso para crear una excelente experiencia para ellos y un producto exitoso para ti. El juez último de tu tema para periódico es la audiencia de los sitios web de tus clientes.
