Jun 27

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 :)

15 Comentarios en “Tendencias de diseño Web 2010”

  1. Daniel G. Blázquez dice:

    Muy interesante el artículo :)

  2. Diseño logotipos dice:

    Gracias Daniel :)

  3. andysnayder dice:

    Gracias por el aporte de las tendencias, nos ayudan a mejorar nuestros diseñas y estar acorde en el diseño

  4. diseño logotipos dice:

    Gracias a ti por seguir el blog :)

  5. Leondesign dice:

    Muy bueno, es genial entrar en esta web y pillar ideas tan frescas e interesantes.
    Bravo!.

  6. diseño web valencia dice:

    Enhorabuena, por el blog y sobre todo por crear contenido de calidad con ejemplos, te añado a mis favoritos.

  7. Marco Guedes dice:

    Gracias!

  8. cindy dice:

    me gusto esta bastante actualizado

  9. ricardo dice:

    Muy bueno el artículo y en mi opinión por lo que he estado viendo de nueva creación de este año estas acertado.
    Enhorabuena por la página no la conocía y es muy interesante lo del photoshop online es muy fuerte.
    un saludo.

  10. Phinxa dice:

    Grande!

  11. Danny dice:

    Hola, soy de argentina, estoy estudiando diseño web, y me resultó muy interesante y enriquecedora la nota, además felicitaciones por tus trabajos en diviantart, saludos.

  12. Diseño Gráfico dice:

    gracias

  13. Jeane Arneau -ropa ciclismo dice:

    Unos muy buenos consejos que aprovecharé, ahora que estoy haciendo un curso sobre diseño web.
    Una información muy interesante.
    Felicitaciones por el artículo.

  14. Vishal S. dice:

    It’s nice article.

  15. peinados paso a paso dice:

    Exelente articulo, muy buenos consejos y tips, para todos aquellos que estamos estudiando diseño.

Comentar