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 aquellos 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 importancia 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 significativos. 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 informació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