Seleccionar página

El diseño web ha avanzado increíblemente rápido en los últimos años y las herramientas para la creación de llamativas páginas se actualizan constantemente. La suite de productos de Adobe como Dreamweaver CC, Adobe Edge Reflow o Adobe Edge Animate están revolucionando la forma de creación y desarrollo de las webs. Las 12 tendencias que marcarán la nueva estética web en el 2014 según mi propio criterio serán las siguientes.

Web One Page

Es la principal tendencia que vengo observando desde hace un tiempo. Una sola página ayuda a mantener el sitio web fácil de navegar usando el scrolling para el desplazamiento. Los enlaces no se dirigen a otras páginas sino a secciones de la misma. Esta técnica ayuda a transmitir un mensaje lineal, controlar el mensaje al visitante y enfocarse en los detalles importantes. Me parece genial para sitios con poco contenido.

Ejemplo de web One Page localsapparel.se

Ejemplo de web One Page localsapparel.se

Scrolling

Los smartphones se han convertido en unos dispositivos muy populares. Su pequeñas pantallas obligan a los lectores a desplazarse para leer todo el contenido de una página. Si son muy largas pueden abrumar a los lectores si tienen mucho contenido. En 2014 se prestará atención en como involucrar a los visitantes del sitio web animándoles para desplazarse.

Flat design

Adiós a los efectos tridimensionales como los brillos, sombras o degradados. Una vuelta al diseño simple bidimensional con diseños límpios, centrados en la tipografía y al uso selectivo del color. Esta técnica evita la distracción. Menos imágenes y elementos de diseño que logran tiempos de carga más rápidos, lo que ayudarán a los que disponen de conexiones lentas en dispositivos móviles. Apple, Facebook o Windows 8 son ejemplos de interfaces que han implementado el diseño plano.

Ejemplo de diseño flat design en la plantilla Flati Bootstrap

Ejemplo de diseño plano o flat design

Diseño Responsive Design

Aunque el llamado “responsive design” lleva desde 2010 dando vueltas, durante el 2014 será una necesidad. Muchas de las webs deberán renovarse para incorporar esta tecnología que con una única base de código permite que usando móviles, tabletas y ordenadores de escritorio ver el mismo contenido con un diseño diferente que ha sido creado específicamente para su tamaño de pantalla y el dispositivo. El responsive design permite destacar el contenido importante para los visitantes de móviles, tales como lugares o números de teléfono. El mantenimiento es mucho más simple que modificar constantemente un segundo conjunto de contenidos. Un ejemplo es mi propio blog. Toma las esquinas de tu navegador web y reduce el tamaño del ancho de la pantalla para simular lo que las tabletas y otros dispositivos móviles verán. Google Glass, por ejemplo, ha incluido un navegador web que permite el desarrollo de diseños adaptables.

Ejemplo de diseño adaptable a diferentes dispositivos en colly.com

Ejemplo de diseño adaptable a diferentes dispositivos

Barra de navegación fija

En el pasado, las barras de menús se quedaban en la cabecera de la web cerca del logotipo. Al desplazarse, la navegación desaparecía con la cabecera, lo que obligaba a los usuarios a regresar de nuevo hacia arriba si querían seguir consultado el sitio. Con páginas largas y el uso de smartphones, el acceso al menú se vuelve más difícil. Por esta razón, muchos sitios fijan la barra de encabezado en la parte superior permitiendo una mejora en la navegación.

Ejemplo de barra de navegación fija en 99u.com

Ejemplo de barra de navegación fija

Grandes tipografías

Con el aumento de las resoluciones de las pantallas en los últimos años, ha habido una necesidad de hacer crecer el tamaño de fuente estándar de un párrafo en la web para ayudar a hacer el texto más legible y claro. El tamaño de fuente de 12 puntos ya no es tan fácil de leer como lo que solía ser antes. Las grandes cabeceras tienen gran impacto en los lectores y se puede comunicar mejor el objetivo del sitio. El lector promedio decide en unos segundos si un sitio web vale la pena explorar, por lo que estas grandes cabeceras y títulos, pueden ayudar a captar mucho mejor la atención de los visitantes y tirar de ellos para que lean el contenido de la web.

Ejemplo del uso de grandes titulares en whatcheer.com

Ejemplo del uso de grandes titulares en whatcheer.com

Javascript, animaciones HTML5 y CSS3

Flash y Silverlight tenían a menudo problemas de seguridad y de indexación en los motores de búsqueda. Además, desde el lanzamiento del iPhone de Apple, muchos dispositivos móviles no son capaces de ejecutar estos plugins, lo que ha ayudado a acelerar la transición de Flash y Silverlight. Ambos productos están desapareciendo rápidamente a favor de Javascript , HTML y CSS. Con los navegadores modernos, los desarrolladores no tienen que depender de plugins para realizar excelentes animaciones o videos. Estas nuevas tecnologías están limitadas en los navegadores más antiguos. HTML 5, CSS 3 y las diferentes técnicas de Javascript ayudan a un sitio web a tener una vida y una experiencia de navegación excelente.

Animaciones HTML5 en zippergaleria.com.br/en

Ejemplo del uso de animaciones HTML 5 en un sitio web

Efecto Parallax

Este efecto de scroll con profundidad me gusta mucho especialmente. El desplazamiento Parallax es una técnica donde el fondo y las imágenes (y textos) en primer plano se desplazan con la ayuda de la rueda del ratón creando un efecto de profundidad. A medida que nos desplazamos a través de la página, el texto y gráficos adquieren vida, permitiéndonos crear paisajes y cambiar el contenido. Una gran aportación para crear impactantes sitios web con gran creatividad.

Ejemplo de efecto Parallax en tasarimgezegeni.com/2014/en/

Ejemplo del uso del efeto Parallax en sitios web

Fondos a lo grande

Las grandes imágenes de fondo ya no son un problema de tiempo de carga, sino más bien una cuestión de si la imagen de fondo se ajusta con el sitio. Las imágenes grandes de fondo permiten aprovechar todo el espacio disponible de la pantalla y mejorar la experiencia del usuario.

Ejemplo de imágenes gigantes de fondo en osbornedrums.co.uk

Ejemplo de imágenes gigantes de fondo en osbornedrums.co.uk

Videos de fondo

Con los grandes fondos de imágenes vienen también los fondos de vídeo. Su uso es más para apoyar el diseño y contenido que no en convertirse en el foco de atención principal.

Ejemplo del uso del video como fondo en fiftythree.com

Ejemplo del uso del video como fondo en fiftythree.com

Más tendencias no menos importantes

  • Tipografía llamativas y originales
  • Colores ácidos para llamar la atención
  • Uso de bloques para integrar elementos de una sóla mirada
  • Diseño minimalista y con textos e imágenes relevantes

¿La muerte del ordenador personal?

Durante los últimos 3 años, el uso de internet en el móvil ha aumentado de manera espectacular, se estima en torno al 10% del tráfico del sitio web. Auque no me imagino que el ordenador personal desaparezca, el uso del dispositivo móvil seguirá aumentando. ¿Necesitas más motivos para que tu sitio sea más mobile friendly?

Pantallas de alta resolución

Con la adaptación de las pantallas Retina de Apple en sus productos iPad, iPhone y MacBook, vemos la necesidad de contar con gráficos de alta resolución incorporados en los sitios web. Al igual que la televisión de definición estándar se ha visto superado en los últimos años por la señal de alta definición, las pantallas de alta resolución se convertirán en un elemento básico en los ordenadores y dispositivos móviles. Estas pantallas permiten que los sitios web se vean asombrosamente nítidos, pero requieren imágenes de mayor resolución con el fin de reducir la pixelación o dientes de sierra que a menudo se produce en los sitios web. La aplicación de esta técnica no es vital de forma inmediata, pero serán importantes y a tener en cuenta en el 2014.

Servicios externos

A menudo nos encontramos con clientes que vienen a nosotros con grandes ideas que requieren soluciones eficaces. En vez de reinventar la rueda cada vez, podemos contar con los servicios de terceros que ya han resuelto el problema para nosotros. Si alguien quiere publicar actualizaciones de estado en tiempo real en su sitio web desde su dispositivo móvil, podemos confiar en Twitter o Facebook, mediante el establecimiento de un feed en la página web, que extraiga estos servicios para mostrar los cambios. Si un administrador de un sitio web quiere publicar fotos en tiempo real de un evento, podemos integrar Instagram o Flickr, que actualizará automáticamente el sitio web. Los servicios de terceros también pueden ser útiles para mostrar vídeo, implementar un sistema de boletín de noticias, o recoger estadísticas sobre los visitantes de un sitio. El uso de los servicios de terceros pueden resolver muchos sueños y esperanzas.

¿Se te ocurre alguna tendencia más que merezca la pena incluir en esta lista? No dudes en dejar tu comentario.

Artículos de interés

Si te ha gustado comparte en:

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.