piruchex

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 tendencias en diseño web para el 2013, 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 tipos de fuentes 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 bases del diseño web plano. 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 Long shadow generator 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 Zurb Foundation 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 codigo para smooth scrolling Ejemplos claros de uso de scrolling infinito son Google images, Twitter y Facebook; y aprovecho para ofrecer la siguiente plantilla HTML5 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 desarrollar un sitio con parallax scrolling 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 Color Template 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.

Diseño web sensible (responsive web design) es el enfoque moderno que sugiere que el diseño y desarrollo de un sitio web debe responder al comportamiento de los usuarios, la plataforma y al dispositivo utilizado para visualizar el sitio, ya sea tablet, smartphone o PC de escritorio. La práctica consiste en una mezcla de propiedades, que parten desde el desarrollo de diseños que contienen grillas e imágenes flexibles y un buen uso del lenguaje CSS aplicando todas sus características, tales como media queries, entre otras. El sitio web debe tener la tecnología para responder automáticamente a las preferencias y comportamientos del usuario. Por ejemplo, el sitio debe reconocer cuando un dispositivo movil cambia de orientacion, para reajustarse y adaptarse a la nueva resolución de la pantalla automáticamente. link: http://www.youtube.com/watch?v=faZMXTTDBVk Sigueme en TWITTER FUENTE >> manuelbaronetti.com.ar