Tendencias del diseño web – “web 2.0”

En Tendencias del diseño web, hemos hablado ya del estilo «grunge» y del estilo «retro«, por supuesto que quedaba hablar del más actual, el estilo web 2.0.

La web 2.0 es más una actitud que no una tecnología, es el intentar hacer una web enfocándola al usuario, intentar darle todo lo que puede necesitar de forma fácil y haciendole participar en la medida de lo posible.

La característica fundamental de este estilo es la sencillez, una sencillez, que ha conseguido hacer más usables las páginas web.

1. SIMPLICIDAD: La atención del usuario es un recurso finito, por lo que cuanto menos tenga que pensar en cómo navegar por tu web, más beneficios obtendrás. Nunca podremos hacer que una imágen o icono destaque, si a su alrededor hay 100 más, por eso, se trata de eliminar el ruido de la página y conseguir llevar la mirada del usuario hacia lo que queremos destacar, sin nada que lo distraiga. Para ello, eliminaremos los elementos innecesarios y hacer varias pruebas hasta encontrar la más sencilla.
2. ALINEAR AL CENTRO: ya prácticamente todas las webs y blogs que se hacen se alinean al centro de la pantalla, cada vez son menos las webs alineadas a la izquierda del navegador o de tamaño fijo.
   Centrando una web, conseguimos presentar nuestro diseño de una forma más directa, y aprovechamos la simetría de la pantalla para dirigir la visión del usuario hacia lo que nos interesa, la web.
3. MÁXIMO 3 COLUMNAS: hace años usar 3 columnas para maquetar una web era una norma, columnas laterales y el contenido principal en el centro, había webs de incluso 4 columnas. Hoy en día lo ideal es usar 2 columnas y como máximo 3. Yo recomiendo usar 2 columnas en la medida de lo posible, de ese modo tendremos más «aire» en el diseño,
   «menos es más«. Si es cierto que existe la posibilidad de colocar varios módulos en forma de columna, como puede ser el caso de apple, pero como podemos ver no se trata de columnas propiamente dicho, si no de varios módulos colocados en horizontal pero que pertenecen a una única columna.
   
4. SEPARAR VISUALMENTE LA ZONA SUPERIOR: En este tipo de diseños, la cabecera suele ser muy impactante y diferenciada del resto de la web. Es una declaración de «fuerza» y distinción.
   En algunos casos esta cabecera contiene el menú de navegación y en otros va separado. Yo soy partidario de en la medida de lo posible meter siempre el menú de navegación en la cabecera de la web. Esta sección debe de ser visualmente muy distinta (en cuanto a contraste) con el resto de la web. En algunos casos se separa por distintos colores y contrastes, en otros directamente se sitúa una línea gruesa y sólida que marque la diferencia.
   
5. DIFERENCIAR ZONAS SIN MIEDO: Sin miedo pero con cuidado… En cualquier web de este tipo, podemos observar como se defienden con valentía las zonas que quieren destacar sobre otras. Tanto navegación como contenidos principales, suelen estar acompañados de un fondo que les hace distinguirse del resto de la web. Los espacios en blanco también son muy importantes, y hay que tener cuidado, porque un fondo fuerte para destacar una sección, puede hacer que dejen de verse zonas también interesantes.
6. BARRAS DE NAVEGACIÓN: Los menús de navegación son amplios, limpios y claros. La tipografía suele diferenciarse mucho del resto de la web. Es recomendable dejar un estado «on» en la pestaña que represente la sección en la que estamos. De este modo facilitamos mucho al usuario su navegación. Textos claros, grandes y bien destacados del resto. Puedes encontrar barras de navegación 2.0 en este blog
7. LOGOTIPOS: Grandes logotipos y muy vistosos, con tipografías en negrita.. «aquí estamos«. Como en el resto de los apartados, en este vemos también que la filosofía es «no esconderse», no tener miedo de usar grandes tamaños para todo.
8. TAMAÑO DE TITULARES: Vemos también que ahora no da miedo meter un titular enorme, todo lo contrario, podemos observar en estas webs como las etiquetas h1 e inferiores han subido mucho su tamaño de fuente, tanto cuando son html como cuando se trata de una imagen. El tamaño de este texto, por supuesto, está en función del resto del diseño de la web, por lo que no podríamos definir un tamaño exacto, se trata simplemente de destacar claramente sobre el resto de la web.
9. COLORES ATREVIDOS: Con la 2.0 podemos decir que llegó la «alegría» a los diseños. Ahora no da ningún pudor usar colores vivos y contrastes atrevidos, todo está permitido (siempre guardando el buen gusto…). Con estos colores fuertes para fondos, podemos separar secciones o diferenciarlas de otras. Además el color es un gran medio para comunicar el valor de una marca.
   Como siempre hay que tener cuidado en no caer en la saturación. Usar un color de fondo fuerte está bien siempre y cuando haya suficiente espacio blanco alrededor. Si abusamos de los colores al final lo que conseguimos es la confusión en la navegación.
10. RELIEVES Y SOMBRAS: Tanto en iconos como en fondos, se usa mucho la sensación de 3D, quizás sea una manera de aparentar más realismo, dan más ganas de pulsar sobre un botón con reflejo o sombras que sobre uno plano…. Como siempre, usarlo en la cantidad justa, mejor no abusar porque además podemos hacer muy pesada la página.
11. DEGRADADOS: Los degradados son muy útiles, ya que aligeran mucho la densidad de la página e incluso sirven para crear la sensación de perspectiva o alejamiento y sobre todo para suavizar tonos oscuros de la web.
12. EFECTOS DE CRISTAL, REFLEJOS,… : Son muy comunes los efectos cristal tanto en iconos como en barras de navegación, así como el reflejo de textos o fotografías. Mucha culpa de esta tendencia la tiene apple con sus reflejos sobre el fondo de la web. Es un efecto que además de hacer destacar el texto o la imagen resulta bonito, dando además una sensación de profundidad a la web.
13. ICONOS: Fácilmente reconocibles, por su tamaño, por su color, o por reflejar claramente lo que representan. Puedes descargarte un montón de iconos gratuítos en este blog