27 Jun

Tendencias de diseño Web 2010

Después de leer muchos artículos, un tanto incompletos sobre este tema, me he decidido a crear el mío propio con lo que considero que son las tendencias más fuertes, que se llevan en la actualidad (Ahora mismísimo!), del diseño Web.

.

1. Botones de papel doblados. Se pueden utilizar para un menú de secciones o para anotar una frase en la foto principal de una Web. Aporta profundidad al diseño. Son un quebradero de cabeza para la maquetación pero el resultado merece la pena.

· Ejemplo 1
· Ejemplo 2
· Ejemplo 3

2. Pies con contraste absoluto. Esta es de las tendencias más vistas actualmente. Si tienes una Web en un color, el pie se diseña con la configuración invertida. Normalmente ayuda a separar los contenidos de la zona de servicios, seo y enlaces (que no suele aportar información de interés). Ayudando así a alejarnos de la información menos relevante.

No sé si esta técnica proviene del diseño industrial pero es curioso como se usa un método parecido en supermercados. Alguna vez habéis ido a un supermercado y os habéis fijado en el techo? Seguramente no, porque las lámparas y muebles quedan a una altura que psicologicamente no te hacen levantar más la vista, sin darte cuenta piensas que a partir de ahí no hay nada y si levantas la mirada te darás cuenta de lo feos que son los techos industriales en este tipo de centros 🙂 (algo parecido viene a ser esta técnica salvando las distancias).

Separamos el diseño bonito de la Web de los links, zona social, etc. Fijaos en los pies de página de los ejemplos.

· Ejemplo 1
· Ejemplo 2
· Ejemplo 3

3.  Imágenes de cabecera flotantes. Si bien ya es algo cotidiano encontrarse con cabeceras que contienen grandes imágenes, ahora se empieza a expandir la moda de ponerlas volando. El método es sencillo, foto grande y debajo una sombra de alto contraste que de el efecto de estar suspendida en el aire. Si a esto le acoplamos un bonito slide (transición) en Jquery (Framework de Javascript) lo bordamos.

· Ejemplo 1 (Creo que usa Nivo Slider)
· Ejemplo 2 (Con un efecto de transición bastante llamativo)
· Ejemplo 3 (Algo más disimulado pero sigue siendo lo mismo)
· Ejemplo 4

4. Webs de 1 carga con transición en javascript. Esta técnica consiste en hacer toda la estructura y diseño de la Web en una sóla página inmensa, ya sea vertical u horizontalmente. Y ayudándonos de javascript, y una botonera flotante que nos persigue, recorrerla cómodamente.

No creo que le guste mucho a Google pero no se puede negar que ofrece un resultado llamativo y desconcertante para el cliente (lo cual nos puede ayudar a vender si promovemos una política de «Diseño diferente» o algo así).

Hay muchísimos ejemplos pero ahora mismo sólo recuerdo este (Aunque vale por 3)

· Ejemplo de carga completa y slide (pulsar sobre portafolio por ejemplo)

5. Otras tendencias. Existen más tendencias? Si, pero desde luego que las 4 de arriba son lo más «calentito» que nos podemos encontrar en los estudios de diseño más prestigiosos de todo el mundo. Entre otras cosas, también podemos encontrar (tendencias ya más asentadas):

– Fuentes grandes. Se acabó escribir con verdana al 1o. Ahora mínimo al 13 o 14.
– Hendidos. Logos o frases con un pixel que simule un grabado sobre la composición.
– Adios a los brillos. Ir olvidando los brillos en botones y logos. Ahora se prefieren gradientes muy muy suaves.
– Botones inmensos y grandes cabeceras.
– Jquery degradable.
– CSS3.
– Redes sociales en el pie.
– Formularios con detección de errores sobre la marcha.
– Adiós a los motivos florales! Ahora se le da paso a las texturas y acabados de acuarela o ilustrados.

Y ya de paso promociono un poco mi trabajo y os enseño estos ejemplos aplicados sobre diseños webs que me han salido últimamente. (Podéis ampliar la imagen de los ejemplos pulsando sobre ellas).

· Botones de papel plegado con pie en contraste: Ejemplo 1 (en la columna derecha) y Ejemplo 2 (en los rótulos).

Si alguno se anima a proyectar alguna de estas tendencias en sus próximos diseños estaré encantado de publicarlos aquí y analizarlos 🙂