Tendencias de diseño web para 2018

Enviado por Drupalocho el Mar, 12/09/2017 - 03:42
Zurb Foundation

Los diseñadores que trabajan en proyectos web en 2017, de alguna manera, enfrentan más retos que nunca. Tienen que crear atractivos sitios web, aplicaciones y servicios que funcionan perfectamente en todos los dispositivos y funcionan para una audiencia global a un ritmo que parece acelerar cada año. Esa audiencia también es más experta en tecnología, tienen mayores expectativas, están más alfabetizados por el diseño que nunca y esperan casi la perfección. Ante estos desafíos, es más importante que nunca que los diseñadores sean conscientes de las nuevas tendencias, soluciones y patrones que pueden ayudarles a resolver problemas comunes, capturar la atención completa de sus audiencias y ofrecer experiencias asombrosas.

Aquí en ZURB, hemos ayudado a cientos de empresas a presentar las mejores soluciones y aprovechar los nuevos patrones en sus sitios web y productos. Hemos creado esta lista de 17 tendencias de diseño y desarrollo con las que creemos que cada diseñador debe estar familiarizado.

1. Brutalismo

Tomando su nombre del estilo arquitectónico de los años 60 y 70, el Brutalismo en diseño consiste en collages audaces, del texto y de las imágenes, donde casi cualquier cosa va bien. Haciendo eco a la web de antaño, los sitios Brutalistas a menudo emplean marcado simple, estilos en línea, y colores y gradientes ásperos. Algunos incluso sostienen que el logotipo de Instagram podría ser clasificado como Brutalista.

Pascal Deville, una autoridad en la tendencia de Brutalista, y fundador de brutalistwebsites.com define el movimiento como: "En su robustez y su falta de preocupación por parecer cómoda o fácil, el Brutalismo puede verse como una reacción de una generación más joven ante la ligereza, el optimismo y la frivolidad del diseño web actual".

Pero no todos los sitios web brutalistas son un ataque a los ojos. Algunos sitios como Bloomberg News y TheOutline.com toman prestada la estética mientras agregan un nivel de pulimento no visto típicamente en la mayoría de los sitios. Creemos que los diseñadores pueden usar el Brutalismo para diferenciar su sitio del resto con opciones de color audaces, tipografía grande y diseños que se separan del patrón común hero-image-then-3-up.

  • La estética brutalista hace buen uso de la tipografía, por lo que la elección de la tipografía correcta es crítica. Echa un vistazo a estos consejos para transmitir la voz tipográfica correcta: http://zurb.us/2nbgUfK
  • Los sitios web brutalistas se extienden de lo suave a lo salvaje. Inspírate con estos ejemplos: http://zurb.us/2n4KBmb
  • Spotify ha estado flirteando con este estilo durante un tiempo. Comprueba cómo hacen uso de colores audaces, tipografía fuerte, y un diseño inspirado en collage: http://zurb.us/2n4MJtX

2. Diseño de pantalla grande

Cuando la mayoría de la gente piensa en el diseño web sensible, piensan en reducir un sitio web desde un escritorio a algo que se ve muy bien en una tableta o teléfono móvil. Pero esto es ignorar un creciente segmento de usuarios, aquellos que tienen monitores a gran escala. Sí, mientras que el móvil es cierto que explotó en popularidad en los últimos 10 años, también hay monitores extra grandes con cada vez mayor densidad de píxeles. El problema es que la mayoría de la atención ha parecido estar en el lado más pequeño del espectro con, pocos sitios que verdaderamente abastecen a sus usuarios de la pantalla grande. Al mirar tus datos, puedes encontrar que la mayoría de tus usuarios están en las pantallas de 1920x1080 o superior. Hay un montón de maneras frescas y creativas de usar ese tipo de bienes raíces de pantalla y los diseñadores inteligentes no tienen miedo de ir a lo grande.

Creemos que los diseñadores deben estar bien familiarizados con los datos y saber exactamente quién es su audiencia y en qué equipo están. Mediante el uso de técnicas como la resolución independiente SVG, tipografía en negrita, y la prestación de alta o baja resolución de fotos con JavaScript, que puede ofrecer una rica experiencia para todos, incluso aquellos con pantallas grandes.

  • Los SVG son perfectos para el diseño de pantallas grandes porque son escalables, independientes de la resolución, tienen pequeños tamaños de archivo y son compatibles con la mayoría de los navegadores. Aquí hay 10 recursos para aprender más sobre ellos: http://zurb.us/2nbqdwp
  • La orientación de SVG con CSS te permite hacer cosas interesantes como usar consultas de medios para ocultar y revelar partes de una imagen por tamaño de pantalla. Echa un vistazo a nuestra lección para aprender lo básico: http://zurb.us/2n4NoLX
  • El componente Interchange de Foundation utiliza consultas de medios para cargar las imágenes que son apropiadas para el navegador de un usuario, haciendo que las imágenes sensibles sean un complemento. Reduce los tiempos de carga para usuarios móviles mientras sigue sirviendo el contenido más grande a tus visitantes con resoluciones de pantalla más altas. Aprende a usarlo: http://zurb.us/2nbfpOG

3. Componentes responsivos

Han pasado casi 8 años desde que Ethan Marcotte introdujo el concepto de diseño web responsivo en el mundo, y lo hemos visto desarrollarse a un ritmo increíble. Sin embargo, hay nuevas técnicas y tecnologías en el horizonte que van a simplificar drásticamente la escritura de elementos responsivos y hacer que los sitios receptivos de hoy parezcan simplistas y no refinados. Algunos ejemplos son las consultas de elementos y la próxima especificación de la CSS-grid. Estas dos tecnologías permitirán a los diseñadores web y desarrolladores crear experiencias que estén verdaderamente ajustadas a cada tamaño de dispositivo. Las consultas de elementos permitirán crear componentes que respondan según el espacio asignado a ellos en lugar del tamaño de pantalla completa, mientras que CSS-grid nos permite cambiar dramáticamente los diseños basados ​​en consultas de medios.

Entre los dos, creemos que veremos un aumento drástico en la diversidad de patrones de respuesta fácilmente disponibles para diseñadores y desarrolladores front-end.

  • Las consultas de elementos y las consultas de contenedores abren un nuevo horizonte para los componentes de respuesta, aquí hay 10 recursos para obtener más información: http://zurb.us/2nbfIce
  • Nuestra Fundación Lead Kball analizó el funcionamiento de los componentes lo que viene en un futuro próximo en este artículo reciente: http://zurb.us/2nbqWhc

4. Microinteracciones específicas del dispositivo

Hasta ahora, el primer método móvil significó construir una experiencia práctica y manejable para pantallas pequeñas, y luego estratificar en interacciones y animaciones más complejas para el escritorio. Pero a medida que las herramientas móviles en la web maduran y los eclipses de tráfico móviles que en el escritorio, creemos que hay un montón de oportunidades para tomar ventaja de los paradigmas nativos de los diferentes dispositivos para móviles interacciones centradas. Con el auge de las bibliotecas de JavaScript relacionadas con el tacto y el gesto, hay un montón de oportunidades para animaciones sutiles en respuesta a gestos (por ejemplo, la interacción de actualización de tweets de la aplicación móvil de twitter) para abrirse camino hacia más y más aplicaciones web.

Como Nick Babich señaló en un reciente post sobre Medium, las microinteracciones proporcionan a los usuarios el reconocimiento que anhelan. Las aplicaciones populares como Slack han tejido hábilmente a lo largo de toda la experiencia, deleitando a los usuarios y haciendo que la aplicación se sienta más intuitiva.

Aprovechando todo lo que está disponible para ellos, las microinteracciones específicas del dispositivo sólo servirán para hacer que las microinteracciones sean más convincentes y personales.

  • Aprender los fundamentos de las microinteracciones, por qué son importantes y cómo usarlas: http://zurb.us/2n4QK1H
  • Jugar alrededor de animaciones y transiciones CSS puede ayudarte a construir y probar algunas microinteracciones limpias. Aquí hay algunas técnicas: http://zurb.us/2n4QzDn

5. Diseño de pantalla dividida

Una forma sencilla de resaltar un contraste, equilibrar el texto con imágenes o compartir dos productos diferentes, el diseño de pantalla dividida ha crecido en popularidad con muchos diseñadores. Fácil de implementar, el diseño de pantalla dividida es una excelente manera de presentar el contenido de una manera que se siente fresca y equilibrada.

Para los productos o los sitios que requieren una comparación, el diseño de pantalla dividida es una obviedad.

Hemos visto algunos usos realmente creativos del diseño de pantalla dividida, y pensamos que la gente sólo está empezando a rascar la superficie. Estamos deseando nuevas maneras de usar este patrón para contar una historia única y guiar a los usuarios.

  • Inspírese con algunos ejemplos de diseño de pantalla dividida en Pattern Tap: http://zurb.us/2n4QCiA
  • ¿Todavía necesita inspiración? Estos 20 ejemplos muestran algunas aplicaciones realmente creativas de esta tendencia: http://zurb.us/2n4OveS
  • Nick Babich ofrece algunas de las mejores prácticas claras para el diseño de pantalla dividida que definitivamente debe cumplir: http://zurb.us/2n4S7NS
  • Simplemente porque son simples no significa que son fáciles. Aquí hay tres cosas a tener en cuenta al crear un diseño de pantalla dividida: http://zurb.us/2n4S6t0

6. Animaciones Reactivas

La explosión de aplicaciones móviles nativas de esta década puso un foco en el diseño centrado en el ser humano.

El iPhone de Apple y el iOS fueron avances en parte debido a la forma en que utilizaron el diseño para imitar a los seres humanos y apelar a la emoción. Lo bueno que un diseño parece ahora juega segundo violín a la forma en que se siente. Mientras que las aplicaciones móviles han sido el motor de estos avances, las experiencias de escritorio todavía se siente torpe e intuitivo. Sin embargo, los avances en navegadores de escritorio, JavaScript y CSS, han hecho posible agregar esas interacciones humanas enfocadas en formas realmente convincentes.

Creemos que pronto veremos más tecnologías que empujan lo que es posible en el navegador, dirigido por interacciones de animación pesada.

  • Nuestra pieza del patio de recreo reactivo es un gran ejemplo de cómo la animación reactiva se puede utilizar para resaltar el contenido a los usuarios incluso antes de que tomen acción: http://zurb.us/2nbfguR
  • Aprovechando el poder de JS y un poco de CSS, combinados con las capacidades de los navegadores modernos, podemos ofrecer experiencias que son sensibles, fluidas, reaccionan a la entrada de los usuarios y dan a las aplicaciones móviles nativas una carrera por su dinero. Aquí hay 10 recursos para empezar: http://zurb.us/2n4SGap

7. Refrescar las interfaces basadas en tarjetas

Mientras que las tarjetas han estado alrededor por años, son una solución que no se va lejos en cualquier momento pronto. Un patrón hecho a medida para el diseño web sensible, que hacen que sea fácil de mostrar grandes cantidades de información de una manera que es fácil de navegar y fácil de implementar. En los últimos meses, hemos visto que se utilizan para más de texto y enlaces, convirtiéndose en centros de todo tipo de medios enriquecidos. Los diseñadores están jugando alrededor con microinteracciones ricas con las tarjetas ellos mismos, y están encontrando maneras de hacer este viejo patrón nuevo otra vez.

No vemos ninguna razón para abandonar patrones probados y verdaderos que resuelven problemas comunes, y estamos entusiasmados con la nueva experimentación que estamos viendo con las tarjetas.

  • Las tarjetas están en toda la web, pero todavía vemos al diseñador que comete estos 5 errores: http://zurb.us/2n4Qdww
  • ¿No es un gran lector? Aprende a evitar esos 5 errores viendo este video: http://zurb.us/2nbteNk
  • Las tarjetas son la base para una gran cantidad de interfaces exitosas. Estos 10 recursos te ayudarán a averiguar cómo utilizarlos mejor en tu proyecto: http://zurb.us/2n4S2cU
  • Las nuevas tarjetas Flex de la Fundación te abren a todo tipo de posibilidades. En esta lección, Rafi analiza cómo usar este nuevo componente: http://zurb.us/2nbppHK
  • Nick Babich destaca algunas prácticas recomendadas de usar una interfaz de usuario basada en tarjetas en este increíble artículo: http://zurb.us/2nbsdF2

8. Ubicaciones y conocimiento del contexto

La gente toma sus teléfonos, tabletas y consolas de juego con ellos donde quiera que vayan, y estos pequeños dispositivos tienen una creciente capacidad de entender la ubicación y el contexto a su alrededor. Esas capacidades están cada vez más expuestas a los desarrolladores web, y creemos que una gran área de la innovación que viene será hacer que los sitios web sean cada vez más sensibles a los entornos que los rodean.

Imagina cargar un sitio web e inmediatamente ver revisiones y comparaciones de precios para todos los dispositivos habilitados para Internet cerca de tí, sin tener que buscar o instalar una aplicación. O imagina un sitio web que usa alguna combinación de Media Streams API (streaming de vídeo de tu cámara), la Geo Location API y la biblioteca web-VR de Mozilla, un marco para ofrecerte una versión aumentada de la realidad, una vez más sin instalar una app. Aunque tendremos que ser siempre cautelosos acerca de cómo usamos estas herramientas y demostrar el máximo respeto por la privacidad de nuestros usuarios, vemos una cantidad casi interminable de formas en que esta tecnología puede ser usada para mejorar nuestras vidas.

  • A medida que avanza la tecnología, podemos ofrecer a los usuarios experiencias adaptadas a su situación y a lo que están haciendo. Este artículo explica lo que es posible ahora, y lo que será posible en un futuro próximo: http://zurb.us/2n4RofI

9. Ilustraciones dibujadas a mano

Super pulido y vectores perfectos están por toda la web, y por buenas razones. Pueden tener tamaños de archivo pequeños y funcionan muy bien para sitios responsivos, pero una ilustración de estilo de boceto bien dibujada puede agregar un elemento claramente humano a un sitio. Ya sea a propósito nostálgico y infantil o no, evocan sentimientos cálidos y amistosos que pueden ser lo que tu marca necesita.

Estamos viendo esta tendencia pop cada vez más, especialmente cuando se trata de hacer temas más complejos o instrucciones un poco menos intimidantes. Un estilo dibujado a mano también puede diferenciar tu marca aparte de la manada. Nos encanta las ilustraciones de flare único añadidas a las marcas como Intercom.

  • Fuimos capaces de usar un personaje dibujado a mano para ayudar a McAfee a contar una historia convincente: http://zurb.us/2n4G17k
  • No es todo dibujado a mano tampoco, la ilustración está teniendo un momento importante en la web: http://zurb.us/2n4Re7Q
  • Existen muchas maneras de usar ilustraciones en tu sitio, desde la imagen del héroe hasta los iconos. Nos inspiraron estos ejemplos: http://zurb.us/2n4IoHk
  • Algunas personas se comprometen totalmente con esta apariencia e incluyen ilustraciones dibujadas a mano en todo su sitio. Aquí hay algunos ejemplos que lo hacen muy bien: http://zurb.us/2n4V0y1

10. Flexbox

Durante mucho tiempo, hacer arreglos de diseño en la web fue muy difícil. Hemos intentado usar tablas para el diseño en la web, y el uso de flotadores ha dado lugar a todo tipo de hacks para hacer que las cosas funcionen de la manera que esperamos. Afortunadamente, Flexbox vino y cambió todo. Flexbox nos permite organizar elementos de una manera realmente web y resuelve los problemas que las rejillas de flotación tradicionales no hacen bien. El soporte para navegadores es excelente, así que es un buen momento para saltar a flexbox si aún no lo has hecho. Combinado con CSS-Grid, esperamos ver algunos diseños increíblemente innovadores en 2018.

  • Flexbox puede ayudar a resolver o eliminar una gran cantidad de problemas de diseño. Aquí hay una lección sobre la alineación vertical usando Flexbox: http://zurb.us/2n4TVGs
  • La Fundación ahora incluye una red opcional basada en Flex. Publicamos algunos grandes ejemplos de nuestros primeros experimentos con ella en este blog del pasado: http://zurb.us/2nbgSVg

11. Mayor enfoque de accesibilidad

Internet es uno de los mayores logros de la humanidad. Abre oportunidades, conocimiento, libertad e independencia a la gente alrededor del mundo. Garantizar que su sitio web es compatible con A11y (accesible para personas con discapacidades) asegura que todos puedan beneficiarse de lo que la web hace posible. Los sitios web accesibles son más fáciles de navegar para todos los usuarios, ocupan un lugar más alto y aumentan las conversiones al abrir el contenido a más personas.

La buena noticia es que no es difícil implementar A11y en tu sitio web, y el framework de la Zurb Foundation lo hace más fácil que nunca.

  • La web es para todos. Si está buscando maneras de hacer que tu sitio web sea totalmente compatible con A11y, estos 10 recursos pueden ayudarle: http://zurb.us/2nbkYNg
  • No es tan difícil como tú piensas hacer tu sitio un poco más accesible. Echa un vistazo a la lección sobre cómo pasar "Cinco minutos hacia una página accesible": http://zurb.us/2nbCUaw

12. Formularios de pantalla completa

Los formularios de inscripción pueden ser fácilmente perdidos en un sitio, o tan ocupados y abarrotados que da miedo.

Los formularios de pantalla completa funcionan utilizando una superposición de pantalla completa en lugar de enviar al visitante a una página diferente que proporcione al usuario más espacio en la pantalla y menos distracciones.

Esta técnica permite a los diseñadores guiar a los usuarios a través de una poca información a la vez, en vez de mostrarles todo a la vez, lo cual anima a los usuarios a completar el formulario completo.

Los datos muestran que esto está reduciendo el abandono del formulario, por lo que creemos que esta tendencia está aquí para quedarse.

  • Los formularios son componentes críticos de muchos sitios web. Aquí hay seis técnicas para hacerlas más eficaces: http://zurb.us/2nbrnba
  • Los dispositivos táctiles nos hacen repensar la forma en que las personas interactúan con nuestros productos, y los formularios no son una excepción. Estos son algunos consejos sobre cómo hacerlos más amigables: http://zurb.us/2nboMOA
  • Haz los formularios rápidos y fáciles de completar con estos siete sencillos pasos: http://zurb.us/2nbE9qc

13. Menús verticales y navegación

No siempre se utiliza con eficacia, pero cuando se hace bien, la navegación vertical es increíblemente elegante.

Los sitios que utilizan la navegación vertical son una diversión refrescante de un mar de menús horizontales.

Uno de los principales beneficios de los menús verticales es que te dan mucho espacio para trabajar si tienes muchas páginas principales a las que enlazar, e incluso puedes permitirte enumerar elementos en jerarquía de importancia. Este formato también funciona muy bien cuando se combina con otros patrones como slideouts y la navegación pegajosa. La mayoría de los sitios que utilizan menús verticales lo mantienen en el lado izquierdo debido a una mejor visibilidad basada en el patrón F, pero lanzar un menú en el sitio de la mano derecha puede funcionar bien y hacer que su sitio se destaque.

  • El componente reconstruido de off-canvas de Foundation 6 te permite crear diseños más dinámicos y modulares. En esta lección, explicamos los entresijos de este poderoso componente: http://zurb.us/2nbA0CH
  • Aquí hay un fragmento de código que puedes utilizar en tu propio proyecto, una barra superior con menú Off-canvas que contiene un menú de acordeón: http://zurb.us/2n50j0z

14. Interfaz de conversación

Chris Messina, el fundador del hashtag dijo que "2016 será el año de la conversación en el comercio". De hecho, vimos una explosión de interfaz de usuario de conversación el año pasado, y esa tendencia sólo está ganando impulso ahora en 2017. La gente está cada vez más acostumbrada a ser capaz de interactuar con sus marcas favoritas y servicios a través de chat, mensajería y otros recursos naturales de idioma.

Esto es todavía relativamente nuevo y hemos visto algunos errores, pero a medida que madura, creemos que veremos esta tendencia emergente en todo tipo de lugares.

• Todo parece estar pasando a la conversación. Este artículo es un gran desglose de lo que está sucediendo y por qué: http://zurb.us/2n4Vgxg

• Una de las grandes áreas donde la interfaz de usuario de conversación está teniendo un impacto son con chatbots. Aquí hay algunas lecciones de conversación que un desarrollador aprendió a lo largo del camino: http://zurb.us/2n59xtR

• Seguro, la interfaz de usuario de conversación está en todas partes, pero ¿puede reemplazar completamente las GUI? Este artículo hace un gran trabajo de explicar por qué interfaz de usuario de conversación está explotando y donde se está quedando corto: http://zurb.us/2n4Z4OG

15. Visualizaciones y demostraciones de productos en vivo

El diseño de la página de destino continúa evolucionando a medida que los navegadores web se vuelven más sofisticados.

Una tendencia que ha aumentado las tasas de conversión son las previsualizaciones de productos en directo directamente en la página principal. Ya sea a través de videos y animaciones que demuestren las características de un producto o la funcionalidad de trabajo real, permitir a los usuarios ver exactamente lo que su producto parece e incluso probar a sí mismos es increíblemente convincente.

Las imágenes estáticas son aburridas y pierden efectividad. Creemos que veremos aún más vistas previas de productos en vivo en 2018, permitiendo a los usuarios jugar directamente con componentes reales de aplicaciones y servicios.

  • La demostración es un poderoso disparador psicológico que puede hacer que sus usuarios imaginen cómo sería la vida si estuvieran usando su producto o servicio. Aquí hay un gran ejemplo de ello en acción: http://zurb.us/2nbFxco
  • Connect Mania es un juego para móviles que tomó al asalto al mundo. Pensamos que era increíblemente inteligente de ellos incluir una demo de trabajo del mecánico del juego en su página de inicio para que los usuarios pudieran tener una idea antes de descargar: http://zurb.us/2nbAmt4
  • MailChimp realiza un fantástico trabajo de animación y video para demostrar cómo funciona su servicio y cómo se ve su interfaz: http://zurb.us/2nbpdZ5

16. Esquemas monocromáticos de color

Estrechamente relacionado con la barrera estética minimalista de la web es esquemas monocromáticos de color - utilizando varios tonos de un color. Esta tendencia puede ayudar a que tu sitio se sienta elegante y sofisticado, y es una gran oportunidad para enfatizar el color de tu marca. Tonos, tonos y tonos son los que impiden que los sitios monocromáticos se sientan demasiado simples. Las limitaciones de trabajar con un solo color puede conducir a una gran cantidad de creatividad al doblar las reglas mediante la adición de un color de acento puede añadir sólo la cantidad correcta de contraste.

  • Los esquemas de color monocromáticos parecen fáciles, pero hay más de ellos de los que podrías darte cuenta. Aquí hay algunas cosas importantes a considerar: http://zurb.us/2nbniE1
  • Una buena comprensión de la teoría del color y del color es esencial para cualquier diseñador que intente crear un sitio monocromático. Esta actualización puede ayudarte a definir los conceptos básicos: http://zurb.us/2n55yNN
  • Si la monocromática es demasiado limitante, los colores dúo o superposición pueden conseguir un efecto similar. Aquí hay algunos consejos útiles: http://zurb.us/2n4YgJG

17. Uso inteligente del video

Cada vez más, el ancho de banda preocupa menos en la web, haciendo del vídeo una de las tendencias más populares. Los fondos y los encabezados de los videos estaban ya en los últimos años, pero estamos empezando a verlos utilizados de manera creativa para contar historias y formar la base de algunas interfaces realmente inspiradas.

  • Esta herramienta de investigación de palabras clave usa video para ayudar a construir un personaje y una historia que los distingue de la competencia: http://zurb.us/2n57jKG
  • El video se puede utilizar para crear experiencias en línea completamente inmersivas, como muestra este ejemplo: http://zurb.us/2n51FIO

Fuente: ZURB FOUNDATION traducido por ISIPEDIA

Etiquetas