Tendencias de Diseño Web para 2011

Fecha de publicación: Apr 14, 2011 5:24:33 PM

Resumen del artículo publicado por Jacqueline Thomas en WDL en el que analiza las tendencias que, presumiblemente, van a dominar el diseño web durante este año 2.011.

1. Mayor utilización de CSS3 + HTML5 frente a Flash

Aunque no se trate de un enfrentamiento, coincidimos en que hay suficiente espacio para ambos en 2011. El problema reside en el uso que se le da a la tecnología de Adobe. Consideramos, como la autora del artículo que hoy en día no se justifica la construcción de un sitio completo en Flash, entre otras cosas, por temas de optimización y SEO. En otros artículos ya hemos comentado asuntos a este respecto (“Flash vs HTML: un estudio y un artículo de interés“, “Contenidos Flash vs Posicionamiento en buscadores“, entre otros).

En la actualidad, mediante HTML5, podemos resolver parte de los elementos para los que, tradicionalmente, hemos utilizado Flash, aunque, todavía, con este nuevo estándar nos se pueden aplicar ciertas soluciones de diseño e interactividad que podemos lograr a través de Flash.

Por otra parte, las nuevas funcionalidades que nos ofrece CSS3 nos permiten ir dejando a un lado ciertos soluciones gráficas para las que antes exclusivamente necesitábamos imágenes: degradados, sombras, bordes redondeados de elementos gráficos, transformaciones, etc.

Sin duda este es el año en que debemos introducirnos en el uso intensivo de este tipo de tecnologías de desarrollo web.

2. Simplificación en el uso de los esquemas de color

Aquí se nos propone “olvidarnos del blanco y negro o de los tonos de gris y empezar a pensar en los colores primarios (verde, amarillo o rojo) utilizando dos o tres colores y trabajando con las sombras de cada color para la generar variedad”.

Bueno, esto va en gustos… Yo, particularmente, me sigo decantando por lo primero. En cualquier caso, aquí tenéis “los diéz colores más utilizados en diseño web“.

Estos son los dos ejemplos que incluyen en el artículo original para justificar este tipo de diseños con esquemas de colores primarios:

Uso de tonos verdes crear esta herramienta de visualización de Twitter (XHTML / CSS y Javascript).

Ejemplo de utilización correcta de tonos rojos para no originar un efecto irritante

3. Internet móvil

El auge de los dispositivos móviles (smartphones, iPads, netbooks, etc., etc.) hará necesario tener en cuenta diversas consideraciones a la hora de desarrollar nuestros diseños web a este tipo de soportes (se prevé que en el 2.011 se vendan más dispositivos de este tipo que ordenadores personales). Entre otras consideraciones de diseño web para dispositivos móviles, se debería extender el uso de múltiple viewports para acomodar nuestros desarrollos a los distintos dispositivos.

En este tipo de desarrollos podemos apoyarnos en CSS3 y HTML5, tomando aun más fuerza la tendencia de su uso. Por otra parte, en el diseño web para móviles no está demás incluir la opción de visitar el sitio original.

4. Parallax Scrolling

El uso de parallax scrolling está en la línea de sustituir Flash por otras tecnologías que permitan incluir efectos visuales. Se trata de un efecto que genera la ilusión de estar visualizando un espacio en tres dimensiones utilizando capas. Para implementarlo se pueden recurrir a trucos CSS o utilizar plugins jQuery como Spritely.

Su utilización puede ser más efectiva incluyéndolo como un elemento secundario en nuestro diseño , por ejemplo, como un encabezado o pie de página o como fondo de la misma.

Ejemplo del uso de parallax scrolling en el diseño de fondo de páginas web

Ejemplo del uso de parallax scrolling utilizando únicamente CSS y HTML desarrollado por Roman Cortes (http://www.romancortes.com)

5. Diseño para pantallas táctiles

Otra tendencia que deberemos asumir es la utilización intensiva de pantallas táctiles. Consecuencia de ello es que, en lugar de navegar mediante el ratón, los usuarios lo harán mediante sus dedos, con las consideraciones de que utilizarán pantallas de menor tamaño con contenidos comprimidos.

La adaptación de botones a los tamaños adecuados, menús de navegación, indicación de enlaces, etc. será un reto para el 2.011. Por otra parte, deberíamos ir pensando en pasarnos a la utilización de diseños de líquidos o elásticos en los que no importen tanto la resolución y la orientación de las pantallas.

6. Diseños web que simulen profundidad de campo

Sin duda, con el auge del 3D está es una tendencia que estará de moda en el 2.011. La autora nos propone como ejemplo este par de páginas web:

Este sitio web cuenta con un planeta rotativo en 3D y hace uso de la profundidad de campo mediante el uso de las sombras y las capas.

Ejemplo de uso de elementos en 3D en paginas web

7. Utilización de imágenes fotográficas en los fondos de página

Estas imágenes tendrán una resolución alta y que abarcarán toda la página web. Evidentemente la foto de fondo debe ser de contenido apropiado puede incluirse un ligero efecto de transparencia para aumentar la armonía con los contenidos. Dos ejemplos:

Ejemplo de uso de fondos fotográficos: la tipografía en color amarillo permite resaltar los contenidos.

En este ejemplo, además del uso de una imagen de gran calidad, se añaden efectos de animación y musicales.

8. Uso de nombres de dominios creativos

Aunque no se trata de una cuestión de diseño web, esperamos ver nombres de dominio más creativos. Un ejemplo de uso de un dominio “.me” para porfolios personales o blogs donde se pretende separar la identidad del autor de su marca corporativa:

Ejemplo de uso de dominio ".me"

9. Utilización de códigos QR (Quick Response)

Los códigos de barras QR, abreviatura de respuesta rápida, permitirán el acceso a nuestras páginas web mediante dispositivos móviles que puedan capturar con su cámara la imagen.

Código QR de almacenplantillasweb.es

10. Uso de miniaturas para navegación

Introducida por Google, como tantas otras cosas…, existe la tendencia de utilizar miniaturas para facilitar la navegación por nuestro sitio web. Mediante tecnologías como Flash (ojo con los dispositivos), jQuery o AJAX, se puede mostrar una imagen en miniatura del destino de los enlaces.

Uso de miniaturas para navegacion: ejemplo en las búsquedas de Google

11. Conexión permanente y Life Stream

Se prevé un mayor uso de life stream de mensajes, por ejemplo de Twitter, en blogs personales y porfolios. Aquí tenéis un ejemplo:

Ejemplo de utilizacion de life stream en paginas web

Fuente: Web Design Trends in 2011 (Artículo de Jacqueline Thomas en WDL -Jan 4, 2011-)