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.

. Marketing de contenidos