Principios de diseño web

La cantidad de páginas web existentes se pueden contar en miles de millones. Sin embargo, un bajo porcentaje de ellas tienen un buen diseño, debido fundamentalmente a que muchos diseñadores web no siguen los principios básicos del diseño web, y asumamoslo, la mayoría no son profesionales ni saben bien lo que hacen.

Podría pensarse que es nada más que la aplicación del buen gusto. Sin embargo, el diseño web es una técnica que se basa en una serie de reglas más o menos definidas que sirven para crear algo que resulte útil y atractivo a la vez.

Y de la mano del diseño puramente gráfico del sitio, va toda una planificación de los contenidos del sitio, las estructura de los menús, cómo será la interacción con el usuario, rutas de navegación, arquitectura de información y en definitiva, todo un diálogo que ha de establecerse entre el sitio web y el visitante, que debe pensarse y planificarse para que éste ultimo entiende de qué va el sitio y sepa usarlo y n sabe hacer cualquiera (véase usabilidad). El diseño web es mucho más que darle color y estilo a una página web.

Durante la planificación de un proyecto, debe tenerse en cuenta que es muy probable que exista algo similar en la web, lo que hace que el diseñador se vea obligado a hacer un buen diseño para poder competir. El diseño web tiene dos partes bien diferenciadas: la funcionalidad o usabilidad y la estética. Ambas son imprescindibles, ya que una página funcional pero con mala estética no atraerá la atención de posibles usuarios o visitantes, mientras que una página muy bonita pero que funciona mal hará que los visitantes que lleguen atraídos por la buena estética del sitio no regresen a él por no encontrar lo que necesitan o les resulte difícil.

En este artículo nos referiremos exclusivamente al diseño web desde el punto de vista estético, lo que equivale a decir que explicaremos cuales son los criterios que se deben seguir para realizar una página atractiva y efectiva.

Selección del tipo de diseño

El diseño de una página web debe estar acorde con el contenido de la misma. Esto quiere decir que la selección del tipo de diseño que va a llevar nuestra web debe estar acorde con lo que el usuario busca en ella y con el producto o servicio ofrecido por la misma.

Una página destinada a juegos (http://www.juegos.com/) y un periódico digital (http://www.elpais.com/global/) implican estéticas totalmente diferentes, ya que mientras que en la primera prevalecerán los colores fuertes y estará basada en imágenes, el periódico digital deberá ofrecer un aspecto más sobrio, elegante, ordenado y se basará en imágenes y contenidos escritos.

El diseñador deberá analizar estos factores y planificar su trabajo, haciendo una maqueta. Esta maqueta no es más que un dibujo de lo que programará posteriormente.

Para hacer una maqueta primero se piensan y deciden los contenidos que va a tener el sitio, con papel y lápiz se estructuran y bocetan las secciones principales, posicionando cada elemento de la página en el sitio que se considere apropiado, y una vez se tiene en papel un boceto de como será la página web, se pasa a diseñar la parte gráfica empleando programas de dibujl. El Photoshop es muy usado para tal efecto, pero Gimp cumple perfectamente su función y es gratis.

Esta maqueta hecha en Photoshop tendrá además otra funcionalidad, ya que podrá extraerse de ella las imágenes para crear fondos, menús, botones, etc.

¿Cuáles son los principios del diseño web?

Ante esta pregunta, debemos comentar que el diseño web debe seguir los mismos principios que rigen cualquier clase de diseño. Una página web, la portada de un libro, una revista, un periódico o cualquier otra publicación deben estar diseñados bajo los mismos principios, entendiendo las diferencias que corresponden a cada medio.

Esto quiere decir que, para tener ejemplos de buenos diseños, podemos observar y analizar publicaciones exitosas y atractivas para saber cómo se deben ordenar y decorar los elementos componentes de nuestra web. Otra forma de observar buenos diseños es visitar páginas que se destaquen por ello, como puede verse en las siguientes páginas:

http://www.webbyawards.com/

http://www.webdesignerwall.com/trends/best-of-css-design-2009/

http://designdisease.com/

Los principios que rigen el diseño web son:

• Balance – Es el equilibrio que debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte atractiva, sino que además logre enfocar la atención del usuario sobre aquellos elementos que nos interesa que lo haga.
• Contraste – El contraste es una forma de distinguir los elementos que deseamos resaltar. Diferencias en la tipografía, diferencias en las formas (círculos, cuadrados, rectángulos, etc.), diferencias de tamaño (una imagen más grande con otras más pequeñas, por ejemplo), texturas y fondos diferentes, etc., son algunos de los contrastes que pueden emplearse para enfocar la atención del usuario sobre los elementos más importantes de la página
• Énfasis – Es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto es lo que sucede con este texto, donde los títulos se encuentran resaltados así como algunas palabras o frases, de forma que facilita la comprensión de lo que se quiere transmitir.
• Repetición o ritmo – El ritmo o repetición es una forma de establecer patrones con los que se ordenan los elementos de la página. Si los elementos de una página web siguen un patrón determinado, es mucho más sencillo para las personas comprender el contenido y acceder a la mayor parte del mismo en poco tiempo. Este punto es clave para mantener la usabilidad del sitio.
• Proximidad o unidad – Este concepto se refiere a colocar juntos o próximos los elementos que estén relacionados, formando unidades visuales que brindan coherencia al contenido de la página.

Utilidad de los principios de diseño web

El diseño de una página web debe hacer que el usuario que ingresa a la misma sea guiado hacia la información que nos interesa que vea.

El logo de una página web suele colocarse en el extremo superior izquierdo debido a que hay estudios que indican que ese es el sitio que miran los internautas cuando ingresan a la página, y al que vuelven a mirar para saber dónde están. Además, los logotipos suelen ser grandes y llamativos. De ahí en más, el usuario debería ser guiado mediante una secuencia de pasos por las zonas del documento que nos interesa que vea.

La atención que prestan quienes navegan por internet a cada página que visitan es apenas de unos pocos segundos, por lo que cada instante que el usuario de la página desvíe su atención de lo que nos interesa comunicar, estaremos perdiendo la oportunidad de mostrarle lo que realmente nos interesa que vea. Un aspecto importante a tener en cuenta es la legibilidad y la amenidad de los contenidos aplicados en el diseño.

Esta atención sobre las partes esenciales del contenido es la meta que debe seguir todo diseño. En los breves segundos que el usuario presta atención antes de irse de la página, el diseño debe lograr que se quede y guiarlo por el contenido de la página para cumplir los objetivos de la misma.

Otra misión importante del diseño web es colaborar en convencer al usuario de la página que el servicio o el producto ofrecido es lo que necesita o le conviene. Para ello es necesario que el diseño web se ajuste a los requerimientos del producto o servicio, sin descuidar los principios del diseño.

Todo esto, que parece complejo, resultará mucho sencillo en la medida que se vaya ahondando en el diseño de páginas web, ya que la puesta en práctica de estos principios hará mucho más sencilla su comprensión.