6 Tendencias 2014 en Diseño Web ¿Qué debes considerar para tu sitio?

• ¿Cómo se hacía?: Desde que se lanzaron los primeros smartphones y tablets la navegación por internet se volvió ubicua. Pero la experiencia de usuario no es la misma que en el PC de escritorio. La solución fue, en primer término, habilitar portales móviles especiales (el clásico m.misitio.com), con los defectos que ya hemos descrito.
• ¿Qué cambió?: La irrupción del Responsive Web Design dejó obsoleto a los sitios web diferentes para cada dispositivo. Actualmente el diseño adaptativo es el piso mínimo para crear sitios en Internet, con una interfaz que se amolda al entorno de navegación (tamaño de pantalla y resolución), conservando siempre el mismo contenido.
• Lo que viene: El diseño de sitios exclusivos para móviles ha muerto. La dificultad para este 2014 será homologar los diseños en una gran cantidad de dispositivos con diversos tamaños de pantalla y resoluciones, logrando una experiencia responsive óptima para los usuarios. Más aún si se piensa en la irrupción de los smartwatch, Google Glass o televisores 4K, con pantallas e interacciones que harán más variado el panorama.

Referencia: Nuestro trabajo para Revista Capital Online, primer medio digital full responsive en Chile.

• ¿Cómo se hacía?: Retina Display es una tecnología patentada por Apple, que básicamente concentra la cantidad de pixeles en un espacio reducido de pantalla. Con esto es posible lograr resoluciones antes solo obtenidas por dispositivos como TV HD y computadores.
• ¿Qué cambió?: La corriente de avance en la industria del hardware está alcanzando grandes posibilidades en el despliegue de contenido HD en dispositivos móviles. Ya no solo Apple posee pantallas pequeñas con gran concentración de pixeles, lo que a largo plazo transformará a la alta resolución de las pantallas en un estándar.
• Lo que viene: Ya es un hecho que al crear iconografía para un sitio se debe trabajar en vectores y no en pixeles. Esto se complementa con la tendencia de uso de imágenes y video como fondos en los proyectos web, lo que obliga a producir material en HD y calidad profesional.

Referencia: Iconos en SVG para usar en tu sitio.

• ¿Cómo se hacía?: La imitación de la realidad ha estado en la computación desde el inicio. El mismo concepto de ventana o carpeta lo evidencia. Pero ya no es necesario llenar de efectos que simulan realidades físicas en un entorno digital que ya es familiar en los usuarios.
• ¿Qué cambió?: No fue el primero ni es el mejor, pero es el más citado. El lanzamiento del IOS7 para los dispositivos móviles de Apple puso en la mano de millones el diseño plano y minimalista. Este concepto también está implementado en Window 8 y Phone, solo falta que Android se una a la moda.
• Lo que viene: La clave está en el contenido. El Flat Design lo pone en relevancia, eliminando efectos que puedan entorpecer el mensaje. El mayor reto es discernir qué elementos pueden eliminarse sin afectar el discurso final.

Referencia: ¿Quién ganará la batalla entre Flat Design y Realismo?

• ¿Cómo se hacía?: Antes solo existía una cantidad muy reducida de fuentes compatibles con la web, considerando que los navegadores no desplegaban tipografías que no estuvieran en el sistema operativo utilizado.
• ¿Qué cambió?: Aunque la regla @font-face es antigua, su consolidación ha llegado al aumentar la compatibilidad y estandarización de las fuentes utilizadas. Además, los repositorios online gratuitos como Google Web Fonts hizo olvidar la restricción de los navegadores, entregando al diseño web una infinidad de alternativas para los proyectos.
• Lo que viene: La tipografía será parte central del espíritu del sitio, con fuentes que reflejen a cabalidad el sentido del proyecto, con más personalidad y calidad estética. Solo falta que los diseñadores tomen la batuta.

Referencia: Adobe Edge repositorio de fuentes web y Font Squirrel para crear fuentes web.

• ¿Cómo se hacía?: El trabajo era sencillo cuando la web estaba en un dispositivo y solo había una pantalla donde se consumía. El tamaño del escritorio era entonces la única preocupación de los diseñadores, con gran libertad para elementos que muchas veces no servían demasiado.
• ¿Qué cambió?: Ya lo hemos dicho, el mundo es responsive, con pantallas para todos los gustos y tamaños. Esto obliga a pensar el diseño desde lo mínimo a lo máximo como una regla general de trabajo en web.
• Lo que viene: Nuevamente se repite la directriz de sacar lo accesorio, pero primero hay que definir lo esencial. No olvidar las herramientas propias de la Arquitectura de Información, que pueden ayudar a jerarquizar de forma eficiente el contenido del sitio.

• ¿Cómo se hacía?: La limitación de carga de recursos en un sitio web obligaba a crear unidades de contenido  (páginas), con navegación a través de menús o apertura de nuevas ventanas, lo que atomizaba el mensaje.
• ¿Qué cambió?: Esta convención se está rompiendo con la irrupción de sitios de una página, donde la interacción con el scroll o el dedo es la clave para la navegación sin cargar nuevas ventanas. Esto a la par con el efecto Parallax, que simula movimiento al superponer capas en el fondo del sitio. Desde hace tiempo que surgieron, aunque la democratización de las tecnologías y los estándares web los han masificado.
• Lo que viene:  Estos dos conceptos abren la puerta a la irrupción de nuevas narrativas web, como las presentaciones en HTML, infografías interactivas y el Digital Storytelling. También implican desafíos, como por ejemplo que la mayoría de las aplicaciones para diseño son estáticas, la mayor exigencia en la producción de material multimedia y la planificación integral del mensaje a entregar con el diseño y contenido.