Saltar al contenido

5 tendencias populares de dise√Īo de blogs en 2017

Desde la estética extravagante del mundo de la moda hasta el elegante minimalismo de la arquitectura contemporánea, el diseño es una voluble amante.

Aunque todas las facetas de la industria del diseño se mueven rápidamente, pocos aspectos del diseño se mueven tan rápido o tienen una fecha tan mala como la del diseño web.

Tendencias de diseño de blogs 2017

Ya sea que esté lanzando un nuevo blog o esté pensando en un rediseño del blog, debe asegurarse de implementar un diseño que se vea contemporáneo y funcione perfectamente en todos los dispositivos.

Hoy, eche un vistazo a las tendencias predominantes de diseño de blogs que hemos visto en Internet en lo que va del año. Examine bien qué elementos han demostrado ser populares y aquellos que han caído en desgracia.

Primero, echemos un vistazo a las tendencias más amplias en marketing digital que están dando forma a cómo se ve el diseño de blogs en este momento.

Diseño de blog en 2017: un mundo móvil primero

Antes de examinar las tendencias de diseño específicas que están impulsando la estética de Internet de hoy, necesitamos revisar algunos datos que son un favorito permanente con las estadísticas de adopción y navegación móvil de los vendedores.

Más personas utilizan dispositivos móviles exclusivamente para acceder a la web

Aquí en el blog de WordStream, llevamos años insistiendo en el aumento de la adopción de dispositivos móviles (junto con prácticamente todos los demás blogs de medios digitales del mundo).

Típicamente reservadas para las listas de predicción de fin de año, las estadísticas de adopción móvil están posiblemente entre los puntos de datos más importantes cuando se trata de diseño. ¿Por qué? Debido a que la necesidad es la madre de la invención, y a medida que más y más personas recurren a dispositivos móviles para acceder a la web, los blogs y otros sitios están ajustando su apariencia para adaptarse a los gustos cambiantes.

Eche un vistazo a la figura a continuación, tomada de los datos de StatCounter:

Tendencias de diseño de blogs estadísticas de uso de Internet móvil 2009-2016 StatCounter

Uso mundial de internet por dispositivo

Como puede ver, entre octubre de 2009 y octubre de 2016, la disminución en el acceso web de escritorio se correlaciona casi perfectamente con el crecimiento en el uso de dispositivos móviles; A medida que un número creciente de personas utiliza dispositivos móviles para acceder a Internet, cada vez menos personas confían en los equipos de escritorio.

Esta tendencia también se refleja en el tiempo dedicado por dispositivo. Según un informe reciente publicado por Comscore, la parte del tiempo dedicado al uso de dispositivos digitales ha aumentado en cada tiempo métrico móvil que se pasa en dispositivos móviles en general, el tiempo dedicado al uso de aplicaciones móviles y el tiempo dedicado al uso de aplicaciones de teléfonos inteligentes, mientras que la parte general del tiempo dedicado El uso de escritorios disminuyó considerablemente.

Las tendencias de diseño de blogs comparten el tiempo de los medios digitales por dispositivo Comscore

Parte del tiempo dedicado a los medios digitales por plataforma

Aunque los especialistas en marketing han estado advirtiendo sobre el legendario mundo móvil primero durante años, solo acabamos de entrar en este paradigma hacia fines del año pasado. Pero, ¿qué significa esto para el diseño del blog?

Balanceando lo estético con lo técnico

El aumento constante en el número de personas que utilizan dispositivos móviles como su principal medio de acceso a la web no es simplemente interesante desde la perspectiva de la experiencia del usuario; presenta desafíos únicos para equilibrar las consideraciones estéticas con las limitaciones muy reales de las especificaciones técnicas.

Los blogs tienen que ser técnicamente ligeros

Cuando hablamos del tiempo de carga de la página, una métrica de usabilidad crucial es típicamente dentro del contexto de la optimización de la tasa de conversión. Cuanto más tarden en cargar sus páginas, es menos probable que sus visitantes permanezcan en su sitio y se conviertan. Esto tiene un impacto directo en otras métricas, como la tasa de rebote y el tiempo en la página.

Tasas de conversión de tendencias de diseño de blogs frente a tiempos de carga de página

Tasas de conversión por tiempo de carga (a través de TruConversion)

Sin embargo, desde la perspectiva de la experiencia del usuario, el tiempo de carga de la página puede tener otras consecuencias. Por ejemplo, ¿sabía que una demora en el tiempo de carga de una página web puede resultar en un aumento de la frecuencia cardíaca del 38%, el mismo aumento observado en las personas que miran una película de terror? Cosas de miedo de hecho.

Tendencias de diseño del blog impacto en el tiempo de carga de la página móvil

Los tiempos de carga móvil lentos causan un estrés cognitivo significativo (a través de Ericsson Consumer Lab)

Como Steve Jobs famoso opinó, el diseño no es simplemente cómo algo se ve es como algo trabajos. Comprender esto es crucial para diseñar experiencias web estéticamente agradables y gratificantes.

Entonces, ahora que hemos examinado algunas de las tendencias más amplias que están dando forma al diseño moderno de blogs, echemos un vistazo a algunos de los elementos estilísticos individuales que están haciendo olas en el diseño web en este momento.

Blog Design Trend # 1: La evolución del diseño móvil

Dado que hemos pasado tanto tiempo hablando de la importancia del acceso móvil, parece apropiado que el primer elemento de diseño que se esté analizando sea el diseño receptivo.

¿Qué es el diseño receptivo?

El diseño web receptivo (RWD) es un término acuñado por primera vez por el reconocido desarrollador web Ethan Marcotte (quien literalmente escribió el libro sobre diseño web receptivo) que describe un enfoque para el diseño y desarrollo web que se centra en hacer que los sitios web sean accesibles y funcionales en una amplia gama de dispositivos.

Blog tendencias de diseño ejemplos de diseño receptivo

Diseño receptivo ejemplificado

Esto se logra principalmente mediante el uso de consultas de medios, una característica del lenguaje Cascading Style Sheets (CSS) 3 que permite a los diseñadores especificar que ciertos elementos CSS de una página web se habiliten o deshabiliten según la resolución o el tamaño de pantalla de los usuarios dispositivo.

En 2014 (hace casi una vida en desarrollo web), el diseño receptivo fue el tech du jour. Los ejecutivos con poca comprensión técnica de sus propios sitios web pidieron a los asediados diseñadores que lo hicieran receptivo, y creyeron que la forma más barata y rápida de subirse al carro móvil era simplemente agregar reglas CSS a un sitio de escritorio estático.

¿Está muerto el diseño receptivo?

Muchos desarrolladores y diseñadores han dado la espalda al diseño receptivo. Ethan Marcotte dijo una vez que el diseño web receptivo no pretende ser un reemplazo de los sitios web móviles, y esta mentalidad se ha vuelto cada vez más frecuente entre la comunidad de diseño web.

Blog tendencias de diseño RWD rendimiento Guy Podjarny investigación

Tamaño de página por tipo de archivo y resolución

Una de las razones principales por las que muchos desarrolladores rechazan el diseño web receptivo es la ineficiencia y la hinchazón. Según una investigación realizada por el experto en seguridad y rendimiento web Guy Pordjarny, prácticamente todos los sitios receptivos que Podjarny estudió entregaron la carga útil completa de un sitio de escritorio completo, independientemente de la cantidad de datos solicitados por el usuario. Esto significaba que se estaban descargando cientos de kilobytes de datos adicionales innecesarios, incluso para solicitudes mínimas del servidor. Esto resultó en un rendimiento terrible, problemas de interfaz de usuario y otros problemas.

Por supuesto, el diseño web receptivo no es el único responsable de estos resultados, los sitios web malos son malos sin importar en qué dispositivo se los ve, simples y simples. Sin embargo, esta investigación destaca cómo las elecciones de diseño mal implementadas pueden tener un impacto desastroso en su sitio.

Otra cosa a tener en cuenta es el hecho de que los sitios diseñados y creados con RWD siempre serán más lentos que las aplicaciones nativas. Hoy, muchos blogs y sitios web están diseñados específicamente para varios dispositivos, un cambio de pensamiento que pone a los usuarios primero. Puede ser más trabajo inicialmente, pero vale la pena a largo plazo.

Aplicaciones web progresivas

El diseño receptivo puede ser algo polarizador en la comunidad de diseño web, pero una tendencia con la que pocos diseñadores o desarrolladores podrían discutir es la increíble popularidad de las aplicaciones web progresivas.

Blog de tendencias de diseño de aplicaciones web progresivas

Las aplicaciones web progresivas se ven y se sienten como aplicaciones nativas y ofrecen muchas delas mismas características, incluida la funcionalidad "Agregar a la pantalla de inicio".

Las aplicaciones web progresivas son sitios web que se ven, se sienten y funcionan como aplicaciones desarrolladas para dispositivos móviles, y ofrecen a los usuarios una experiencia similar a la aplicación en su navegador. Esto incluye funcionalidades como notificaciones push, accesibilidad desde pantallas de inicio móviles, modos fuera de línea y otros elementos que le resultarán familiares si alguna vez ha utilizado una aplicación en su teléfono.

Aunque los matices de las aplicaciones web progresivas están un poco más allá del alcance de esta publicación, es un área fascinante de la tecnología web (si eres un nerd como yo) que definitivamente merece una lectura adicional. Le recomiendo que consulte este contenido sobre aplicaciones web progresivas en el centro de recursos para desarrolladores de Google.

Blog Design Trend # 2: Hero Images & Minimalist Design

A medida que el ancho de banda ha aumentado (junto con la potencia de procesamiento de los dispositivos móviles), hemos visto una migración constante desde blogs densos y llenos de texto a sitios más visuales con imágenes grandes y coloridas. Una de las tendencias más destacadas en las imágenes de diseño de blogs ha sido la creciente popularidad de las grandes imágenes de héroes, una tendencia que probablemente continuará al menos en el futuro previsible.

Muchos blogs y sitios usan esta técnica con gran efecto. Tome este ejemplo del sitio del compañero de comida The Infatuation:

Blog diseño tendencias héroe imágenes ejemplo

Probablemente haya visto innumerables ejemplos de esta técnica en acción mientras navega por la web. Es fácil ver por qué el uso de imágenes de héroes ha aumentado tan dramáticamente en los últimos años. Son llamativos, visualmente llamativos y pueden servir como base para diseños completos, especialmente sitios web de una sola página con una larga profundidad de desplazamiento y sitios que dependen de imágenes magníficas de alta resolución, como blogs de alimentos.

Por supuesto, las imágenes de héroes no tienen sus inconvenientes. Los sitios que optan por usar este elemento de diseño deben asegurarse de que sus imágenes estén bien optimizadas para consideraciones técnicas como el tiempo de carga de la página, y también hay problemas únicos de accesibilidad para abordar, como el uso correcto del texto alternativo y otros campos de metadatos.

La tendencia creciente del minimalismo del blog

Aunque muchos sitios web han adoptado firmemente imágenes grandes y audaces en sus diseños, otros sitios han estado avanzando silenciosamente por otra estética de diseño claramente diferente, un enfoque verdaderamente minimalista que evita por completo las imágenes.

Tendencias de diseño de blogs Minimalismo de estilo medio

La popular plataforma de publicación de blogs y web Medium (propiedad de Twitter) ha sido una de las fuerzas impulsoras de esta estética de diseño. Sí, Medium admite imágenes, y algunos bloggers de Medium las usan con gran efecto. Sin embargo, la gran mayoría de los editores de Medium no usan imágenes en absoluto, una tendencia que otros blogs han aprovechado.

Los diseños mínimos de blog pueden ser altamente efectivos para ciertos tipos de contenido. Quizás, como era de esperar, esta estética ha demostrado ser popular entre los escritores, pero también hemos visto que varios blogs convencionales adoptan un diseño de luz de imagen. Para algunos tipos de publicaciones de blog, como piezas basadas en opiniones, este formato puede funcionar extremadamente bien. Para otros, como el tipo de contenido educativo que publica WordStream, por ejemplo, no tanto.

Blog Design Trend # 3: Duotone Color

El color se encuentra entre los elementos de diseño más importantes que puede usar, y este año, hemos visto la adopción continua de esquemas de color fuertes y audaces en muchos blogs y sitios web.

En términos de tendencias específicas, el uso de esquemas de color duotono sigue siendo popular. Algunos sitios prefieren esquemas de colores de duotono complementarios que usan dos colores que se complementan directamente entre sí, y pocos sitios han hecho más para impulsar esta tendencia que el servicio de transmisión de música Spotify:

Blog diseño tendencias duotono esquema de color ejemplo Spotify

Spotify ha estado defendiendo el esquema de duotono complementario durante algún tiempo, y esta tendencia de diseño ocupa un lugar destacado en todo el sitio y las campañas de marketing de Spotifys.

La imagen de arriba es un poderoso ejemplo de cómo esta técnica simple pero sorprendente puede usarse con gran efecto, particularmente cuando se combina con un tipo fuerte y minimalista (más sobre esto en breve). Sí, técnicamente hay más de dos colores en juego aquí, pero puedes ver el efecto que están buscando.

Los esquemas de color Duotone son increíblemente versátiles y altamente efectivos, a pesar del número limitado de colores en juego. Existen numerosas formas de utilizar esquemas de color de duotono en su blog, así que asegúrese de explorar diferentes esquemas antes de decidirse por una elección final.

Blog tendencias de diseño esquemas de rueda de color

Varios esquemas de color y sus relaciones, como se muestra en las ruedas de color. Imagen a través de Shopify.

Blog Design Trend # 4: tipografía fuerte y sofisticado emparejamiento de fuentes

La web puede ser mucho más visual de lo que solía ser, pero para la mayoría de los sitios, el texto sigue siendo el nombre del juego, lo que hace que la tipografía sea uno de los elementos de diseño más importantes de cualquier sitio.

Junto con imágenes de héroes audaces y esquemas de colores de duotono, hemos visto un uso continuo y una creciente popularidad de los tipos de letra fuertes y sin serifas en muchos blogs y sitios. Este ejemplo del proveedor de capacitación en tecnología Asamblea General ilustra cómo el tipo fuerte puede mejorar incluso los diseños más simples, un tema que es consistente en toda la marca de la Asamblea General:

Blog tendencias de diseño tipografía sans serif Ejemplo de Asamblea General

El diseño del sitio de las Asambleas Generales usa una tipografía distintiva en negrita

Emparejamiento de fuentes

Una de las técnicas más efectivas en la tipografía es combinar dos tipos de letra muy diferentes pero complementarios en un solo diseño, una tendencia que ha continuado durante todo este año y parece estar al menos un poco más al sol.

Tendencias de diseño de blog emparejamiento de fuentes

Emparejamientos de fuentes a través de Mimpy and Co.

Al igual que muchos aspectos del diseño gráfico y web, el emparejamiento de fuentes parece mucho más simple de lo que realmente es. Y, al igual que muchos elementos de los mejores diseños, los emparejamientos de fuentes exitosos aparecen sin esfuerzo precisamente por la habilidad y el pensamiento que se les dio. Canvas Design School ofrece una guía útil para el emparejamiento de fuentes, con explicaciones de por qué funciona cada combo.

Blog Design Trend # 5: diseños limpios y simples

Es fácil enfocarse en elementos como esquemas de colores llamativos o tipos de letra llamativos, pero una de las tendencias más frecuentes en la blogósfera este año ha sido la continua popularidad de los diseños simples y limpios.

Tendencias de diseño de blogs diseños de blog limpios

Las barras laterales repletas de botones, insignias, anuncios y desorden han desaparecido de muchos blogs. Hay un par de razones para esto.

En primer lugar, a medida que las metodologías de diseño de la experiencia del usuario (UX) se han filtrado a otras áreas de diseño, el énfasis se ha alejado de meter tanta basura como sea posible en la barra lateral de su blog (blogrolls, ¿alguien?), Y hacia diseños de blog más limpios y optimizados. Estos principios también se han aplicado a otros aspectos del diseño web, como la estructura del sitio y la navegación, que también ayudan al SEO y la capacidad de descubrimiento, así como a reducir la sobrecarga técnica.

Las tendencias de diseño de blogs limpian los diseños de blog por tamaño de pantalla

Cómo el uso móvil ha influido en el diseño del blog

En segundo lugar, el cambio hacia dispositivos móviles ha requerido nuevos enfoques de diseño de blogs que favorecen la velocidad y el rendimiento, los cuales pueden verse afectados negativamente por características extrañas como barras laterales densamente compactas y diseños que se ven y se sienten geniales, incluso en pantallas más pequeñas.

Tendencias de diseño de blogs: sitios web B2B vs. B2C

Vale la pena señalar en este punto que muchos de los consejos y técnicas que hemos cubierto hasta ahora son aplicables a la mayoría de los sitios web. Dicho esto, hay distintas consideraciones que los propietarios de sitios B2B tienen que considerar que los sitios B2C podrían no tener.

El primero es el color. ¿Alguna vez se preguntó por qué tantos sitios web corporativos utilizan principalmente esquemas de color azul? Es porque el color azul significa fuerza y ??confianza en ambas cualidades que muchos editores B2B están ansiosos por cultivar. En la figura a continuación, notará que muchas grandes empresas de tecnología utilizan un esquema de color azul en sus logotipos para transmitir este mensaje:

Diseño de blogs tendencias de la psicología de los ejemplos de color

Los sitios web B2B también tienen que tener en cuenta los objetivos comerciales tangibles en las decisiones de diseño de su blog.

Por ejemplo, muchos medios y organizaciones de noticias usan el contenido de la barra lateral para promover otro contenido relacionado, piense en recomendaciones de contenido personalizadas basadas en etiquetas de tema o blog. Este es un elemento de diseño común en muchos sitios y alienta a los lectores a permanecer en el sitio para explorar otro contenido, reduciendo su tasa de rebote.

Compare esto con la barra lateral de WordStreams. En la figura siguiente, una captura de pantalla de la página principal del blog en el sitio de WordStream notará que nuestro llamado a la acción más destacado es más directo; alienta a los lectores a calificar su cuenta de AdWords con AdWords Performance Grader.

Las tendencias de diseño de blogs optimizan las ofertas de la barra lateral

Desplácese hacia abajo y verá otro elemento de la barra lateral que promueve el recurso de aprendizaje gratuito de WordStreams, PPC University. Ambas acciones están directamente vinculadas a los objetivos comerciales que impulsan a los clientes potenciales y las ventas y también alimentan varias vías de crianza. También vale la pena señalar que estos elementos de la barra lateral no se muestran para cada usuario por debajo de un determinado umbral de resolución, los anuncios de la barra lateral desaparecen en favor de un diseño de una o dos columnas para el contenido.

La realidad es que los blogs y sitios B2B a menudo están sujetos a demandas que los editores B2C pueden no estar, como en los ejemplos anteriores. Sin embargo, eso no significa que los blogs B2B corporativos no puedan adoptar algunas de las técnicas descritas en esta publicación; es posible que deba trabajar un poco más para convencer a su equipo ejecutivo sobre ciertas opciones de diseño.

. (tagsToTranslate) Marketing de contenidos

Califica este Articulo!