Vivimos en un mundo que es iterativo y para sobrevivir debemos adaptarnos. Lo mismo pasa con el diseño web, éste se tiene que adaptar a las nuevas tecnologías y a los nuevos tipos de usuarios, sino quieres que los usuarios etiqueten al sitio como “descontinuado”.
Éstas son algunas tendencias del diseño web de este año:
Todas las páginas web, hoy en día, deberían de ser responsivas, lo cual significa que el diseño debe de responder diferente de acuerdo al dispositivo en donde se vea. Las páginas web deben de adaptarse a las nuevas tecnologías, las cuales vienen en una gran variedad de tamaños de pantalla, desde un celular pequeño hasta una mega pantalla.
Botones fantasmas no significa no poder diferenciar los botones del texto, imágenes o iconos, sino que si tienen sus distintivos, pero ahora son más sutiles. No degradados ni imágenes de fondo, eso es cosa del pasado. Los botones que más se usan actualmente son los que tienen color sólido con letra blanca o negra y esquinas un poco redondeadas, o los que tienen borde de color con la letra de ese mismo color, fondo transparente y esquinas muy redondeadas. Todos los botones deben de tener especificado su estilo para los eventos hover (cuando pasas el cursor por arriba del botón) y active (cuando está activo).
Para los títulos, se busca que el tamaño de la letra sea más grande, ajustable de acuerdo al tamaño de la pantalla y estilizada para darle personalidad. Una de las herramientas más usadas para agregar tipografías estilizadas en las páginas web de forma segura y gratuita es Google Fonts.
Las imágenes o fotografías de fondo completo deben verse profesionales y de gran calidad, pero también deben de ser adaptables de acuerdo al tamaño de pantalla. El efecto más usado para imágenes que no son de gran calidad y se ven los pixeles, es el desenfoque gaussiano. Este efecto hace que la imagen se vea desenfocada y se tome mayor atención al texto que se agrega encima.
Los videos de fondo de pusieron de moda desde mediados del año pasado. Los sitios web con videos de fondo se ven muy bien y llaman mucho la atención, el problema es que algunos móviles no son compatibles con los video, aparte los videos suelen ser muy pesados como para cargarlos en una página web móvil. Para que no tener este problema, se tiene que detectar si es un celular y se cambia el video por una imagen. Los formatos de video deben de ser GIF’s, MP4, MWeb o secuencias de imágenes. La duración no debe ser mayor a 15 segundos y de preferencia que el final del video sea igual o parecido a como empieza.
Están regresando las animaciones de los objetos en las páginas creadas con css. Estas animaciones son tenues como el header de la página de CITI que cuando le das scroll cambia de color o con animaciones cuando abres un menú.
El diseño en forma de tarjetas se ha hecho muy útil, más porque es más sencillo de adaptarse a móviles. Las tarjetas, por lo general, tienen una imagen con su título encima y en la parte de abajo una descripción con los iconos de las acciones que puedes hacer con el contenido de esta tarjeta.
Google creó unos lineamientos de diseño adaptativo para que las aplicaciones y las páginas web sean más parecidos. En su guía de Material Design muestran colores, iconos, tipografías, animaciones, interacciones, posicionamiento y más. Es una gran guía con muy buena usabilidad creado no sólo para diseñadores, sino para todo aquel que seguir las pautas de Google al crear una aplicación o una página web.
Las microinteracciones con las pequeñas acciones dentro de la misma página que hacen que incremente la posibilidad de que se haga una acción. Por ejemplo, hay sitios que quieren que te suscribas a sus noticias y para hacerlo te muestran un cuadro, modal o pop up donde te dicen que si quieres saber más, puedes suscribirte a su lista de correos.
A todos nos gustan los cuentos o historias, por esa razón es mejor que al mostrar tu producto o servicio lo hagas con una historia. Para atraer más atención a tu sitio web, cuéntalo con historias o analogías que sean mejor comprensibles para tus visitantes. Esto hace que los usuarios se sientan más familiarizados con el contenido y que obtengas mayor éxito en que regresen a ver tu sitio.
El usuario decide cómo es que se mostrará su portal agregando favoritos o eligiendo las vistas predefinidas, con esto haces que tus usuarios se sientan con mayor control de su sesión. También el diseño de usabilidad personalizado se refiere a que el diseño del sitio sea creado especialmente para tus usuarios, en otras palabras “diseño centrado en el usuario”.
Actualmente, la mayoría de los usuarios prefieren que todo esté en una sola página a tener que navegar por diferentes páginas. En cuestión de usabilidad, es mejor tener un scroll largo que muchas páginas con poco contenido cada una, porque al hacer scroll haces menor esfuerzo que al dar click en un botón, aparte que tienes que esperar que cargue otra página.
Los Carruseles, Hero Unit y Barras de presentación son tendencias del año 2010 y 2011. Cuando los usuarios ven estos elementos en una página web, piensan que esa página web es vieja a pesar que puede haber sido creada en este año. Por esta razón es mejor no utilizarlos o hacerlos lo más discretos posible, pero que las imágenes abarquen toda la pantalla para que tenga similitud a la tendencia de usar imágenes de fondo completo.
“Less is more” (menos es más).
Esto se usa para que en pantallas grandes o de alta resolución no se dificulte la lectura. Se agrega al estilo un max-width en el ancho. De máximo puede ser 1170px.
Como los menús desplegables que muestran el icono de menú, el cual es el de las tres líneas. Los menús ahora son semi-invisibles en donde el fondo y el borde son transparentes, pero al dar scroll, éste muestra un color de fondo para diferenciarlo del contenido.
Para tener mayor rapidez en una página web, se optimizar primero para móviles y luego especificar las excepciones para las pantallas más grandes. Las imágenes deben de ser de distintos tamaños y adaptarse de acuerdo al tamaño de pantalla o a la resolución del dispositivo. Las páginas de estilos CSS y los scripts deben de minificar para ocupar menor espacio. También para mejorar el rendimiento se pueden usar frameworks o herramientas como AngularJS.
La mercadotecnia se va ahora primero en digital porque el mercado ahora se encuentra más en las redes sociales.
Dar información extra que el usuario buscaría en la web relacionado con el producto y/o servicio. Dar definiciones o conceptos explicados para que el usuario, al buscar esa información, llegue a tu página y luego quiera saber más acerca de tus productos o servicios.
Los usuarios quieren sentirse seguros al navegar en tu sitio, para esto se debe especificar al usuario en que se usará su información, que pueda configurar su privacidad y que sienta que tiene el control de cuenta. La seguridad es preferible que sea por dos pasos (contraseña y clave de confirmación por medio del celular o al correo electrónico).
Las tendencias van cambiando o evolucionando en algo mejor. Los nuevos cambios a veces son para hacer arreglos a los errores que se cometieron con una moda del año pasado, cubrir una nueva necesidad o para llamar más la atención. Por ejemplo, el año pasado estaba la moda del Parallax, el cual cuando das scroll, las imágenes o palabras tienen diferente velocidad al fondo o viceversa y hacen que se vea como si estuvieran en diferente planos. Esta herramienta se dejó de usar en muchas páginas web por ser una herramienta muy pesada que no tenía buen soporte para los móviles más usados.
De todas estas tendencias usen las que más les convengan, así como dice el dicho “de la moda, lo que te acomoda”.