Diseño 2.0

A continuación se resume lo más destacado en cuanto a los elementos comunes de diseño gráfico actual. Aunque lo denominemos 2.0 no sólo se aplica en las webs de empresas 2.0 sino que se consolida como diseño actual por cumplir el objetivo de una máxima usabilidad.

Del diseño 1.0 al diseño 2.0

(Imagen disponible en el libro en PDF)

• Diseño limpio y simple

Se trata de ofrecer sólo los contenidos y funcionalidades necesarias para que el usuario logre sus fines evitando los elementos superfluos y otorgando más importancia a aque­llos sobre los que queremos llamar la atención. Los fondos blancos y la separación clara de las diferentes zonas ayudan a conseguir la sensación de una web clara y ordenada.

• Diseño centrado

Los sitios web se realizan utilizando zonas centradas en la pantalla del navegador. En comparación con años anteriores, son pocos los diseños que se desarrollan a pantalla completa (líquido) o alineado a la izquierda (de tamaño fijo).

• Menos columnas

En línea con la simplicidad, la composición de los diseños actuales tienden a exponer los contenidos en menor número de columnas. Años atrás, los sitios con tres columnas eran los más habituales, y las páginas a cuatro columnas no eran infrecuentes. En la actualidad, lo más común es utilizar diseños a dos columnas y, como máximo, a tres.

• Diferenciación clara del encabezamiento

Aunque siempre se ha diferenciado la parte superior del resto el estilo actual marca aún más esa diferencia de forma que queda visualmente clara la zona generalmente dedicada a la navegación principal, el logo de la empresa y el tagline, de lo demás.

• Logotipos grandes utilizando dibujo, texto y en muchas ocasiones como base contienen el tagline.

Logos estilo 2.0

(Imagen disponible en el libro en PDF)

• Tamaño de texto más grande

El estilo de diseño web 2.0 suele utilizar un texto de mayor tamaño comparado con estilos antiguos. Todavía se aumenta más el tamaño de los contenidos más significativos. Con esto se persigue, por una parte, dar notoriedad a los elementos de mayor impor­tancia en la página y, por otra, hacer los contenidos más accesibles para los usuarios.

Títulos importantes destacados con tamaño de letra grande

(Imagen disponible en el libro en PDF)

• Textos introductorios destacados

Uso de negrilla, tamaño grande, en palabras relevantes y en entradillas de los bloques de texto. Esto ayuda a jerarquizar la importancia de los contenidos.

• Iconos atractivos

Tienen un destacado protagonismo. En la actualidad se utilizan menos iconos, pero tienen un significado más evidente.

• Colores llamativos y destacados

Ayudan a distinguir las diferentes zonas de una página y destacar los elementos más signi­ficativos. Habitualmente no se suelen utilizar más de dos colores además del color negro de los textos. Se juega con las diferentes tonalidades de los dos colores utilizados.

• Reflejos, brillos y destellos

Se utilizan en logos, imágenes, banners, iconos, pestañas de los menús de navegación a través de reflejos y destellos de luz que aportan vistosidad y volumen a los diseños.

• Efectos en 3D

Uso sutil y puntual de los efectos en 3D que aumentan la calidad y realidad de las imá­genes.

• Bordes redondeados

Las esquinas prácticamente no se utilizan, los bordes son redondeados.

• Destellos

Se trata de botones en forma de estrellas que llaman la atención sobre alguna in­formación importante: un descuento, una oferta, una novedad, etc.

No se debe utilizar más de uno de estos botones-estrella por página.

• Degradados

El estilo 2.0 hace un uso intensivo de los degradados que permiten suavizar zonas que tendrían un aspecto un tanto anticuado si se utilizaran colores planos.

Páginas web con elementos de diseño 2.0

(Imagen disponible en el libro en PDF)