Abrimos una serie de artículos en los que os mostraremos los mejores sites para conseguir inspiración en diseño web según las tendencias que están triunfando hoy en día, además con muchísima fuerza: flat design, scroll animado y en algunos casos parallax, imágenes gigantes, tipografías propias, modernas y ligeras, cabeceras y navegación fijas, mucho espacio en blanco y sutiles efectos de animación. Todo ello con mucho Jquery, CSS3 y Ajax, pues aunque se simplifique el diseño os tenemos que advertir que eso no supone también simplificar el código.

Esperamos que lo disfrutéis y nos comentéis tanto vuestra opinión como las dudas acerca de ¿y eso como c*ñ# se hace?

1.- Stylepit – http://www.stylepit.com/lookbook/

Stylepit ha creado este catálogo online de moda, sencillo pero muy impactante basado fundamentalmente en scroll parallax e imágenes a pantalla completa.

Catálogo interactivo stylepit

El scroll parallax con animación es la principal baza de este sitio web

2.- ING World – http://ingworld.ing.com/nl/2014-Q1

El grupo holandés ING ha creado este magazine cuatrimestral con un impecable flat design en el que destacan el uso de la anchura completa de la ventana con un layout a 1 y 2 columnas, lo que provoca el uso de imágenes muy grandes. La tipo elegida, la Frutiger (con Helvetica Neue como fuente de sustitución) proporciona una apariencia limpia y sería. La cabecera inicial desaparece al hacer scroll y es sustituida por otra, fija, muy sencilla y con opciones para cambiar el idioma (holandés e inglés) y compartir en RRSS. Cada imagen o zona de la web es un link para acceder al contenido, destacando un sutil efecto de zoom en la imagen al hacer rollover.

Magazine corporativo cuatrimestral de ing direct

El sitio web de ING World hace uso perfecto de toda la ventana del navegador

3.- Agency Survival Kit – http://agencysurvivalkits.com/

¿Cambios de última hora para entregar ayer? ¿Tenías una presentación de un producto y no te ha sonado el despertador? No te preocupes, Phoenix nos trae Agency Survival Kit, la solución para diseñadores en apuros. En su sencillo pero vistoso catálogo podrás hacerte con 3 kits anticrisis: uno para situaciones de emergencia (ya sabes, se ha ido la luz y lo has perdido todo por no guardar), otro para triunfar en presentaciones express y el último para sobrevivir a entregas con dead-lines imposibles.

En cuanto a diseño, nos ha gustado su navegación drag&drop horizontal para cambiar de kit, mientras que haciendo scroll hacia abajo vemos las características de cada uno de ellos. Maquetada también al 100% de la ventana, incluye algunos efectos de animación y zonas superpuestas al hacer scroll, colores pastel e imágenes muy cuidadas. Nos ha llamado negativamente la atención que en los tiempos que corren el botón de «reserva tu kit», en lugar de ser un formulario, sea un triste enlace con «mailto:…»

Kit de supervivencia para diseñadores en apuros

El estudio Phoenix nos trae este site con flat design y 3 kits para diseñadores en apuros

4.- Build in Amsterdam – http://buildinamsterdam.com/

La agencia holandesa Build in Amsterdam presenta un site con flat design puro. Tanto la portada como la sección de proyectos son extremadamente minimalistas, con muy poco texto y grandes zonas de colores planos. Maquetada a ventana completa, nos ha gustado mucho la navegación en una sola página, pero en lugar de usar scroll las distintas secciones se superponen al pinchar en los links, casi como si se tratara de una presentación. Para los textos usa dos fuentes principales: Amasis para los titulares, gruesa y serifada y Próxima Nova para el cuerpo de texto, más moderna y sin remates.

Para la sección de «cultura», en la que nos cuentan su historia y filosofía en apenas un par de párrafos, optan por un scroll horizontal, también a pantalla completa. A partir de ahí una galería de fotos de muy alta calidad y gran tamaño, también con scroll horizontal.

build in Amsterdam

El site corporativo de esta agencia apuesta por una navegación más cercana a las presentaciones.

5.- Grey Group Poland – http://greygroup.pl/#/en/

La sucursal polaca de Grey Group, importantísima agencia a nivel mundial (que también está instalada en nuestro país) presenta un site con flat design en el que lo que más nos ha llamado la atención es el uso de vídeo a pantalla completa y con un tiempo de carga excelente para la presentación de sus spots. Cada proyecto se presenta con los primero frames de cada spot de fondo, en bucle, y un div superpuesto con un color semitransparente, distinto para cada proyecto, y los elementos interactivos y texto. Los proyectos se presentan con scroll animado, una pantalla por cada uno. Muy muy sencilla, pero extremadamente efectiva y visual.

Grey Group Poland

Este site hace uso intensivo de video a pantalla completa.

Como ya os avanzamos hace algún tiempo, las tendencias que empezaron a apuntarse a lo largo de 2013 parece que se consolidan definitivamente. Nos gusta la simplicidad (menos es mas) y que los sitios sean claros y funcionales pero esperamos que tratándose de unas pautas de diseño tan sumamente mínimas, no nos encontremos al final con que todos los sitios sean prácticamente idénticos y los diseñadores sean capaces de introducir elementos suficientemente diferenciadores en sus trabajos.

Lleva la inspiración a la práctica. Aprende diseño web.

Si quieres aprender a diseñar web utilizando éstas y muchas más características no dejes de visitarnos e informarte sobre nuestro curso profesional de diseño web y el más completo de todos, nuestro certificado de profesionalidad en diseño y programación web, en el que darás también el salto a la programación de aplicaciones con PHP y Bases de datos.

Esperemos que os hayan gustado, la próxima semana seguiremos presentando nuevos ejemplos para saber que se cuece en el mundo del front-end y dando más inspiración en diseño web.

Nos vemos en Nowe!