Desarrollo de Software

Guía de estilo Web 2.0

Los nuevos sitios que tienen un estilo ‘web 2.0‘ tienen una serie de caracterí­sticas comunes (en cuanto a su diseño) que podemos reconocer fácilmente. En este artículo vamos a enumerar unas cuantas. Hay que decir también que no es necesario que todas estas características se encuentren en un mismo sitio porque eso puede producir el efecto contrario de lo deseado: una sobreexplotación de recursos gráficos estilo ‘web 2.0’ paradójicamente puede hacer que nuestra web no se vea atractiva.

Bien, entremos en detalle y veamos esta lista de características:

Simplicidad

Esta característica trata de la eliminación de los recursos innecesarios que entorpecen al usuario la navegación por el sitio web y de que encuentre lo que está buscando. El diseño de una web debe estar centrado en los posibles usuarios que entren y éstos deben encontrar la información que están buscando de una forma sencilla. Esto no quiere decir que tenga que ser una web simple sin recursos gráficos, sino que éstos deben ayudar a los usuarios y no estar simplemente como elementos decorativos.

Disposición central

La mayoría de los sitios actuales se encuentran centrados dentro del navegador, en comparación con algunos años atrás, en los que había mucho full-screen y alineaciones a la izquierda.

Pocas columnas

Hace unos años, los sitios con 3 columnas era la norma (aunque no extrañaba ver webs con 4 columnas). A día de hoy lo más normal es utilizar 2 columnas (aunque según el caso también pueden ser 3).

Secciones superiores separadas

Consiste en separar la cabecera y la barra de navegación del resto de la página. Esto no es nuevo y se ha dado siempre, pero ahora esta distinción se acentúa más.

Áreas diferenciadas

Siguiendo con el punto anterior, también dentro del contenido de la página, las distintas secciones están diferenciadas entre ellas mediante colores distintos o espacios en blanco.

Navegación sencilla

Los usuarios que se encuentren en tu sitio deberían tener una misma área de navegación en cada una de las pagínas que les indique en qué lugar se encuentran y hacia donde pueden ir desde allí. Como se ha indicado en un punto anterior, esta área de navegación debe ser fácilmente reconocible y diferenciada del resto de la página.

Logos robustos

Un logo grande y robusto hace que una marca sea fácilmente reconocible y deben representar el espíritu de la empresa. De un simple vistazo debe decir «esto es lo que somos». También debe poder adaptarse a distintos tamaños y medios de difusión sin que pierda legibilidad.

Fuentes más grandes

Al tener más espacio al hacer más sencilla la página eliminando elementos innecesarios, puedes incrementar el tamaño de los textos con lo que puedes aumentar la legibilidad de los mismos y, por tanto, incrementar la usabilidad de tu sitio.

Introducción en negrita

Si tienes algo importante que decir y quieres diferenciarlo del resto del texto puedes tener al comienzo del mismo una introducción en negrita que resalte sobre lo demás.

Colores intensos

Puedes utilizar colores intensos o vivos para separar las secciones de tu sitio o para atraer la atención de los usuarios hacia un lugar del mismo. Debe utilizarse con moderación porque puede distraer al usuario y hacer tu sitio confuso.

Superfices ricas

La mayoría de las páginas del estilo 2.0 utilizan sutiles efectos 3D (sombras, gradientes y reflejos) que realzan el sentido cualitativo del diseño. Como todo, debe de utilizarse en su justa medida y se debe seguir un mismo patrón en toda la página y no aplicar efectos sueltos, por ejemplo, mantener una misma fuente de luz en la página (no quedaría muy bien si por ejemplo tenemos dos botones juntos y uno tiene sombra a la izquierda y otro la tiene a la derecha).

Gradientes

Los gradientes (o degradados) suavizan las áreas que de otra manera tendrían colores planos. En los fondos pueden dar sensación de distancia.

Reflejo

Este es uno de los efectos más usados. Pueden realizarse sobre el mismo elemento o este elemento puede verse reflejado en el fondo de la página. El efecto tiene peligro de ser sobreexplotado y que pueda producir cansancio de verlo tanto.

Bonitos iconos

Los iconos desempeñan un papel importante en el diseño web 2.0. Hoy se usan menos iconos pero con un mayor significado. Un icono sólo es útil cuando es fácilmente reconocible y tiene un significado claro. Si no, es mejor utilizar un texto descriptivo. Al haber menos iconos, éstos son más limpios y claros, más bonitos y más detallados.

Estrellas

Estas son las etiquetas en forma de estrella que puedes ver pegadas en las páginas webs alertando de algo importante. También es un efecto muy utilizado y puede ser muy interesante, pero no se recomienda abusar de él.

Bueno, esto es todo. Este artículo es una traducción ‘muy libre’ de un excelente artículo (mucho más extenso) en inglés que puedes ver en Web 2.0 how-to design guide.

4 comentarios en “Guía de estilo Web 2.0

  1. Lo que hace Google no creo que sea para nada feo, más bien al contrario. Yo creo que está muy enfocado al primer punto del post, el tener sólo lo necesario, sin que le falte nada, pero sin tener nada extra. Creo que el trabajo de diseño que tienen detrás de cada una de las aplicaciones es muy bueno.

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>