20 tendencias de diseño web en alza para ver en 2017

Ha pasado otro año y los diseñadores miran hacia el futuro. Muchos tendencias de diseño prometedoras están obligados a entrar en erupción en 2017. El año pasado cubrí las principales tendencias de diseño de 2016 y hemos visto muchos cambios desde entonces.

Así que, para este post he elegido el top 20 tendencias que he notado ganando tracción en 2017. Estas tendencias de diseño Se puede aplicar a cualquier sitio web., así que manténgase atento a estas técnicas a medida que avanzamos en 2017 y más allá.

1. “Presentado en” insignias

Startups, blogs, proyectos SaaS e incluso pequeñas empresas están utilizando ahora “como aparece en” insignias en sus sitios web. Estas insignias a menudo enlace a los artículos en los principales blogs como HuffPo, Forbes, CNN, Fox y otros medios de noticias.

La meta es validar un sitio web y generar confianza Con nuevos visitantes. Es más fácil para alguien confiar en un sitio web cuando pueden ver que ha sido mencionado en publicaciones autorizadas.

De hecho muchos de los mejores blogs. apreciar la exposición, Así que realmente ayuda a todos los involucrados. Estos grandes sitios a menudo lanzar sus logos en línea pero también puedes encontrar PNG o SVG transparentes con solo buscar en Google.

También se recomienda que enlace al artículo original mencionando su sitio Esto prueba que fuiste realmente mencionado en el sitio, y no solo estás inventando reclamos.

2. Negrita enlaces de navegación con mayúsculas

He visto docenas de menús de navegación elegantes Todos confiando en este mismo diseño. Estos enlaces de navegación varían en fuente y tamaño pero usualmente tienen características similares, como:

• Todas las tapas
• En negrita
• Espaciado uniformemente
• Alineado a la esquina derecha

La página de inicio de Zazzle es un gran ejemplo. Pero puedes encontrar esto en muchos sitios web de inicio porque es un forma limpia de compartir enlaces que son fáciles de leer y fáciles de navegar.

Mayormente asocio esta tendencia Con empresas y startups de tecnología. Pero también puede ser frecuente en los blogs..

Toma nota de la próxima vez que veas esta tendencia porque está en todas partes. Y espero que siga creciendo bien en 2017..

3. Blogs de revistas.

El blogging era un concepto tan específico a principios de la década de 2000. Si ejecutaste un blog en 2003, se consideraba un pequeño pasatiempo lindo. En poco más de una década esa tendencia ha cambiado radicalmente. Ahora los blogs pueden proporcionar un ingreso de tiempo completo, y están empezando a se parecen mucho más a las revistas digitales.

Mira el diseño original de TechCrunch cuando se lanzó por primera vez en 2006. Parece un blog genérico de WordPress.?

Ahora mire la página de inicio actual de Techcrunch en 2017:

No solo parece una revista, también funciona como una. TechCrunch publica docenas (si no cientos) de nuevas publicaciones cada día. Son la fuente principal de noticias de inicio.

Las tendencias en diseño de revistas hacen una gran diferencia. La página de inicio usa un gran sección de historia destacada, cada post tiene su propia miniatura, y las paginas del articulo centro alrededor del titular.

Cuando lo piensas, TechCrunch no ha cambiado mucho. Todavía “solo un blog”. Pero Está diseñado y gestionado como una revista., y esto hace toda la diferencia.

4. Fondos de video

El sonido de reproducción automática es quizás la tendencia más molesta en la web. Pero sorprendentemente, Reproducción automática de vídeo (sin sonido). Es una tendencia en rápido crecimiento. Puede detectar esto en docenas de sitios de negocios donde se encuentra un fondo de video. se hace cargo de toda la pantalla.

Me gusta mucho esta técnica cuando se aplica correctamente. Siempre y cuando el video relacionado con el sitio y no obstruye el contenido, Creo que es un efecto genial para usar en tu cabecera..

5. Botones fantasma

Como El minimalismo alimenta aún más. En el diseño web, están surgiendo muchas nuevas tendencias. Una de esas tendencias es la aumento de botones fantasma que no tienen un relleno interno pero tienen un borde exterior.

La mayoría de las veces estos botones contraste con otros Para llamar la atención. Puedes ver esto en la página de inicio de Instantmojo con el botón de registro verde ubicado justo al lado El botón fantasma enlazando a una demostración en vivo..

Otros sitios han adoptado Un estilo de diseño puramente fantasma. a sus botones en todo el sitio. Un gran ejemplo aquí es el nuevo diseño de Bootstrap.

Creo que los botones fantasma funcionan en sitios que inclinarse hacia el minimalismo. Puede que no sean una buena opción para todos los sitios web, pero veo que su uso aumenta cada año..

6. Opciones de ventana modales

Las ventanas modales son súper molestas, y no puedo imaginar que a cualquier usuario le gusten. sin embargo Se ha comprobado que aumentan los registros., y los vendedores no pueden ignorar las técnicas que funcionan.

Es por eso que creo que las ventanas modales opt-in se sigue subiendo en 2017.

No son mis cosas favoritas, y nunca las agrego a mis sitios web. Pero si el objetivo es aumentar los registros, las ventanas modales son una forma segura de hacer que las cosas funcionen..

Los nuevos complementos pueden incluso intención de salida del objetivo cual activa un modal siempre que el usuario intente abandonar el sitio. Otros modales aparecen después de x segundos o están configurados para abrirse cuando el usuario se desplaza lo suficiente.

Independientemente de cómo se activan los modales, cómo se diseñan o cómo te sientes al respecto, creo que estarán disponibles por mucho tiempo..

7. Ilustración y arte vectorial.

Con los nuevos programas de diseño vectorial como Sketch y Affinity Designer, hay una nueva ola de ilustradores que irrumpen en la web. El diseño gráfico y el diseño de la interfaz se están fusionando constantemente con más diseñadores multidisciplinarios ahora que nunca..

Esto significa que estaremos viendo muchos más iconos personalizados y ilustraciones de página completa en el futuro cercano.

Muchos ilustradores son practicantes de artistas así que creo que ya veremos. más fondos de página completa Hecho con software de pintura digital, representado en detalle como arte conceptual..

8. Barras laterales de desplazamiento fijo

La primera ola de diseño fijo. centrado en las barras de navegación. Estos son demasiado comunes, especialmente en los diseños sensibles, donde la barra de navegación fija replica la sensación de una aplicación móvil nativa.

Pero en 2017, espero ver un elemento más pegajoso.-la barra lateral pegajosa.

Casi todos los blogs importantes utilizan este tipo de barra lateral pegajosa. Eso mantiene el contenido a la vista en todo momento y aumenta la probabilidad de que los usuarios interactuar con el contenido de la barra lateral.

Además, con docenas de complementos jQuery gratuitos que pueden replicar el efecto de barra lateral pegajosa. Es más fácil que nunca configurar esto en cualquier sitio web..

9. Tabla de contenido de la página

Un estudio de caso reciente encontró que El contenido de forma larga supera a la forma corta Tanto en los rankings como en la calidad de retención de usuarios. Por supuesto, esto no siempre es cierto porque algunas consultas se pueden responder rápidamente.

Pero con un contenido mucho más largo en la web, es natural verlo. Más tablas de contenidos añadidas a los artículos.. Lo verá en los sitios de revisión prolongados o en los artículos que se desglosan en elementos enumerados..

Agregar una tabla de contenidos puede mejorar la experiencia del usuario y ayudar a romper la lectura en trozos más pequeños. Tabla de contenidos también puede ayuda a tu sitio a clasificar mejor! Si Google encuentra tu página valiosa, podrías obtener enlaces de salto en los resultados de búsqueda.

Puede ser cierto que los ToCs son bastante escasos en este momento. Pero espero que esta tendencia estalle en 2017 y muchos años después..

10. diseños de colores brillantes

No estoy seguro si esta tendencia surgió del minimalismo o como una reacción al diseño de material de Google. Pero me he topado con docenas de sitios web que utilizan Colores pastel brillantes mezclados con otros tonos vibrantes. para crear una apariencia muy fantasiosa.

La página de inicio de Rentberry es un gran ejemplo que también usa toneladas de gradientes. Y hasta tiene lo mencionado. “Presentado en” Insignias ubicadas debajo! Dos tendencias en un sitio.

Notarás que los colores. no impregnar toda la página, y están silenciados con otros tonos de blanco y gris..

He visto suficiente de estos combinaciones de colores vibrantes creer que están en aumento.

11. Desplazar las animaciones.

Los diseñadores web saben sobre el jacking de desplazamiento y lo terrible que es. Sin embargo eso no es lo que quise decir con el título. “animaciones de desplazamiento”. He visto muchos sitios que ahora animar contenido a la vista Cuando pasas por una sección determinada de la página..

Esta tendencia es principalmente limitado a las páginas de inicio y empresas SaaS Que quieren un poco de dinamismo en su diseño..

No puedo decir si es una tendencia particularmente útil. Ciertamente agarra el ojo Pero no creo que ofrezca mucho más allá de la estética. Aún así, es una tendencia que parece estar extendiéndose rápidamente, y cuando utilizado con moderación puede ser realmente limpio.

12. Aplicaciones de una sola página (SPA)

Las aplicaciones de una sola página son sitios web. construido puramente con llamadas Ajax. JavaScript extrae contenido de un servidor y lo carga dinámicamente, entonces la página nunca refresca.

Ejemplos comunes son sitios como Gmail y Facebook. Pero con más tecnología JS, Estoy notando más y más SPAs desarrollados todo el tiempo. Jeck, incluso CodePen podría ser considerado un SPA.

Con las potentes bibliotecas frontend, como React y Aurelia, será aún más fácil crear un SPA desde cero en 2017.

13. Barras de búsqueda conmutables

Solía ​​ser ese campo de búsqueda. siempre estaban a la vista En algún lugar de una página web, ya sea en la barra lateral o en la navegación. Pero últimamente he notado muchos más campos de búsqueda que consiguen oculto por defecto, y debe ser cambiado a la vista.

Sin duda una tendencia práctica para ahorrar espacio en la página mientras que todavía manteniendo la función de búsqueda accesible. Si no está seguro de dónde colocar un formulario de búsqueda en un nuevo diseño, puede considerar usar un campo de alternancia vinculado a un icono de lupa en la navegación.

14. Mensajes de Adblock.

No se puede negar el hecho de que el bloqueo de anuncios está en aumento. La única pregunta es cómo los editores manejarán esta tendencia. Algunos sitios educadamente añadir mensajes en los espacios publicitarios como Time.com. En Hongkiat, te darás cuenta Anuncios internos para llenar el vacío. ese enlace mas al interior del sitio.

Una tendencia seria que veo en aumento es bloques de contenido adblock. Esta es una técnica para “bloquear los bloqueadores de anuncios”. Esta función ya se encuentra en muchos sitios grandes, como Business Insider y Forbes. Desafortunadamente, esto afecta tanto al usuario como al editor, y todo se deriva de técnicas publicitarias de baja calidad..

En última instancia, no importa a quién culpes o dónde se encuentre en el debate sobre el bloqueo de anuncios. Más personas están instalando complementos de adblock, y estoy esperando más editores para rechazar.

15. Iconos SVG puros

Gráficos SVG Ya se han filtrado en la web, pero cada día son más grandes. Y tengo la sensación de que 2017 será un gran año para los SVGs En la red.

Puedes encontrar miles de conjuntos de iconos SVG gratis en sitios como Flaticon si sabes buscar. Pero también puedes código SVGs en HTML, por ejemplo, haciendo uso de este ejemplo en CodePen.

Por lo tanto, los diseñadores tienen una forma de usar SVG y los desarrolladores también tienen una forma de usar SVG.. El soporte moderno del navegador se ve bien en general, por lo que no hay problema con la compatibilidad. Todo lo que se necesita es suficiente diseñadores para Reconocer el poder de los SVGs. y empieza a usarlos!

16. Adobe XD

Adobe sacó una beta completa de Adobe XD en 2016, y desde entonces ha crecido rápidamente. Actualmente soporta tanto Mac como Windows, y es en la fase de prueba antes de ser completamente desplegado.

Puede que se burle de la idea de que cualquier programa supere a Sketch, pero Adobe es la principal compañía de software de trabajo creativo por una razón. Plus Sketch sigue siendo solo para Mac mientras que Adobe es buscando apoyar a todos.

Creo firmemente que leeremos mucho más sobre Adobe XD el próximo año. Puede convertirse en el software de referencia para diseño de maquetas de interfaz de usuario-para que finalmente podamos usar Photoshop como una herramienta de manipulación de fotos (según lo previsto).

Con el auge del nuevo software, llega docenas de Tutoriales y kits de GUI gratuitos también. Puedes encontrar un montón de regalos de Adobe XD en Dribbble junto con Dos nuevos sitios de promoción de XD Designmine y XD Guru.

17. Más menús de hamburguesas.

Lo amas o lo odias, el la hamburguesa está aquí para quedarse. Hay un montón de estudios de usabilidad que argumentar contra menús ocultos de la vista. Pero con una pantalla pequeña y solo tantas alternativas, no hay una alternativa mejor por ahora..

Los iconos de la hamburguesa están lentamente convirtiéndose en símbolos reconocibles para los menús de navegación. Al igual que un icono de lupa implica “buscar”, El icono de la hamburguesa de tres barras pronto será sinónimo de “menú”.

Esto ya es cierto para la mayoría de los individuos conocedores de la tecnología. Pero con cada año que pasa, más personas obtienen teléfonos inteligentes y comienzan a navegar por la web móvil. Y estan aprendiendo a asociar esa hamburguesa con un menú de navegación sin final a la vista.

18. Iconos de características del producto.

Escribí sobre esta tendencia en Treehouse, pero no la mencioné recientemente. Y entrando en 2017 esta tendencia es va a ser enorme. Es probablemente la forma más común de compartir características del producto en una página de inicio.

Empiezas por haciendo una lista de características para su producto. El producto puede ser cualquier cosa, desde un programa SaaS hasta un tema de WordPress o incluso un elemento físico..

Entonces tu puedes diseñar iconos personalizados o encontrar un conjunto de iconos para representar estas caracteristicas Es mejor evitar características genéricas como “de confianza” o “rápido” porque la mayoría de la gente espera esto.

En su lugar, lista de características eso en realidad importa. Si es un tema de WP premium, tal vez indique que responde, cuántos widgets viene con, o cómo funciona el menú.

Estos iconos de características trabajar como imágenes ayudar vender cada característica. El texto solo es difícil de consumir Pero los visuales son mucho más fáciles de entender de un vistazo.

19. CTAs por encima del pliegue

Llamada a la acción tradicionalmente se han colocado todo un sitio web. Pero con los visitantes gastar menos tiempo en sitios web, Es crucial tener una CTA fuerte. justo encima del pliegue.

Estas llamadas a la acción pueden ser botones, formularios de suscripción u otras entradas para llevar a la gente a tomar alguna acción como registrarse o leer una entrada de blog.

No puedo decirle cómo diseñar una CTA o cómo optimizarla para las conversiones. Pero puedo decir que la tendencia parece estar colocando estos CTAs. por encima del pliegue y en clara vista para que todos los visitantes vean.

20. Áreas de contenido más pequeñas

Los monitores han crecido tanto que la mayoría de los sitios web tienen que establecer un ancho máximo. Es mucho más difícil leer las oraciones cuando tienen 2000px de ancho en comparación con solo 700px de ancho.

Contenido mas pequeño es más fácil de consumir, y en última instancia, crea una Mejor experiencia en sitios web de contenido pesado.

Creo que más diseñadores se están dando cuenta de esto, y lo harán lentamente. Reducir el tamaño de sus áreas de contenido.. Prefiero un ancho máximo de 750px pero podría ir tan pequeño como 600px o menos.

Párrafos más cortos con menos oraciones y áreas de contenido más pequeñas siempre será aumentar la legibilidad. Las publicaciones más importantes, como el NY Times, pueden desviarse con sus propias pautas estructurales. Pero para un blog o sitio de negocios simple, la tendencia se está moviendo hacia Contenido más largo con párrafos más pequeños y áreas de contenido.

Terminando

Hay muchas otras tendencias que no pude cubrir en este post, pero creo que estas 20 son las más interesantes. A medida que avanzamos en 2017, debería ser evidente qué tendencias están explotando y cuáles no..

Y si tiene otras ideas o sugerencias para las próximas tendencias de diseño, no dude en dejar un comentario a continuación..