Este año 2014 nos ofrece muchas cosas interesantes en materia de diseño y desarrollo Web. El año pasado, hicimos un repaso de las , muchas de ellas siguen vigentes en 2014 y otras se harán inclusive más fuertes.
Después de todo, es por eso que se llaman tendencias y no modas, ya que las tendencias tienden a quedarse por un par de años, mientras que las modas son sólo momentáneas.
Así que a continuación vamos a ver los puntos más importantes que marcarán tendencia en diseño y desarrollo web este 2014.
Tipografías
La tipografía será un elemento clave a la hora de analizar el diseño y personalidad de un sitio web. Una tipografía original y empleada correctamente puede cambiar radicalmente la experiencia visual de un sitio web, asignándole una personalidad y estilo propio.
Fuentes con personalidad son fuentes que pueden valerse por sí mismas, es decir, expresar algo. Los diseñadores encuentran en diferentes tipografías una forma de añadir personalidad y originalidad a sus diseños.
Cada una de ellas puede expresar profesionalismo, minimalismo, entretenimiento, diseño artístico, entre otras. Algo muy utilizado últimamente es el uso de tipografías grandes y vistosas que dan mayor o menor peso al texto según su tamaño y contraste.
Den un vistazo a los siguientes que serán tendencia.
Diseño web plano
Flat design o diseño web plano es una tendencia muy marcada en el 2013 que seguro seguirá en auge y crecimiento durante este 2014. Este diseño aporta gran simpleza y modernidad a los sitios web.
Fue una de las tendencias más importantes y difundidas durante el año pasado debido a su gran impacto y mejoras que ofrece en las experiencias de los usuarios. El diseño web plano comprende varias cosas a tener en cuenta, en el siguiente enlace se explican las .
Sombras planas
Sombras planas o flat shadows van de la mano con el diseño web plano, su uso correcto puede dar un salto de calidad visual a un sitio web. Aunque en primera instancia el uso de sombras y gradientes para los diseños web flat está prohibido, con una excepción.
Si empleas sombras a tus diseños web planos, estas sombras también deberán ser planas.
A continuación les presento una herramienta simple, gratuita y fácil de usar para generar sombras planas a nuestros textos y elementos.
Hero Areas
Una nueva tendencia que está tomando mucha fuerza es el uso de <em>Large hero areas</em>, éstas son espacios de introducción empleando áreas grandes con imágenes, videos y/o textos que ocupen toda el área del navegador, ya sea se trate de una simple foto borrosa en el fondo con un título centrado en el medio, o unas más elaboradas.
Esta es por seguro la tendencia más novedosa que se seguirá manteniendo en 2014 ya que resulta muy exitosa hasta el momento, prueba de esto es que la mayoría de los sitios más premiados en materia de diseño emplean el uso de large hero areas.
Mobile First
Este nuevo paradigma difiere del Responsive web design, su antecesor y todavía vigente, el cual consiste en adaptar la visualización de sitios web de escritorio en dispositivos móviles. Mobile first es exactamente a la inversa, consiste en el desarrollo de sitios web enfocados a dispositivos móviles y luego adaptarlo a dispositivos de dimensiones mayores.
Frameworks CSS como o Twitter Bootstrap han incorporado esta premisa, lo que impulsó la difusión y el uso de esta nueva técnica.
Scrolling infinito
Diseñadores hace tiempo hacen uso del scrolling infinito, inicialmente impulsado por Pinterest, el scrolling infinito ofrece una manera de plasmar toda la información del sitio en una sola página, sin necesidad de navegar en sub-páginas, que resulta en tiempos de espera e interrupciones en la experiencia visual del usuario.
Al diseñar un sitio con las características de scrolling infinito, es vital ofrecer scrolling suave para una navegación más amena, esto lo podemos lograr empleando el siguiente
Ejemplos claros de uso de scrolling infinito son Google images, Twitter y Facebook; y aprovecho para ofrecer la siguiente bajo el paradigma de scrolling infinito a pesar de que su longitud sea más acotada.
Barra lateral, adiós
Esta técnica se está empleando en mayor medida en sitios web tipo magazine o blogs, consiste en eliminar la barra lateral del sitio para ofrecer una lectura y visual óptima.
Para el usuario un sitio sin barra lateral es más fácil y más ameno de leer y recorrer debido a que no hay contenido paralelo, desinteresante, que interfiera con su lectura.
Parallax
Desde hace tiempo cantidades de sitios web han empleado el uso de Parallax scrolling a distintos niveles, desde muy complejos hasta niveles más básicos. Su aparición generó revuelo en el mundo del diseño web debido a su novedosa manera de jugar con los elementos de la página generando distintos efectos y perspectivas.
Para lograr esta técnica es vital el uso de Javascript o algún plugin que nos ayude en el proceso de desarrollo. El siguiente tutorial ayuda a comenzar a
Colores
El 2013 fue el año de los colores pastel, este año seguirán en auge pero también surgirán los colores neón, brillantes, coloridos y que si están bien combinados aportan gran experiencia visual a un sitio web. Los invito a ver estas herramientas que nos permiten generar y analizar colores HTML.
Flat UI Colors
Color Blender
Por otro lado, Pantone, empresa creadora del Pantone Matching System, el sistema de identificación y comunicación del color para las artes gráficas, dió a conocer los colores que estarán de moda este año.