Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

El diseño equilibrado. Las simetrías


Otro condicionante para que el diseño de la web tenga una organización natural.


23/3/04 - Si observamos la Naturaleza, gran arquitecta y diseñadora donde las haya, podremos observar muy pronto que uno de los elementos que más utiliza para crear sus organismos es la simetría, manifestándose ésta en casi todos los seres que existen a lo largo y ancho de nuestro planeta.



El hombre ha pretendido imitar este diseño simétrico natural en todos y cada uno de sus aspectos creadores, desde los primeros objetos de artesanía hasta los modernos automóviles.



Si partimos de esta base, debemos aceptar que la búsqueda de una simetría estructural, gráfica y textual debe ser una de las metas primeras de todo diseñador web, ya que confiere a las composiciones una organización natural a la que el espectador está acostumbrado.

Por definición, una forma o imagen es simétrica cuando un eje central la puede dividir en dos parte iguales y opuestas entre sí. Este concepto, aplicado a una composición gráfica puede aplicarse tanto a los propios elementos individuales de la misma como a su totalidad. En este caso, obtener una simetría exacta puede resultar difícil (incluso inconveniente), pero sí que podemos buscar una simetría de bloques y espaciados en nuestra rejilla.



El diseño simétrico sugiere estabilidad, equilibrio, resultando estético, ordenado, atractivo y agradable de contemplar. Por el contrario, el asimétrico muestra irregularidad, desigualdad en las formas y desequilibrio.

Hay que tener en cuenta que la simetría usada no debe de ser del todo exacta, ya que la simetría perfecta no es natural, es demasiado "perfecta", valga la redundancia, haciendo aparecer las composiciones artificiales y premeditadas. Pequeñas variaciones en la distribución simétrica dan ese toque de ruptura que hace su contemplación más amena y natural.

En el caso de una página web, la concepción simétrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribución básica de elementos en ella. Hay que tender entonces a diseñar un reticulado lo más simétrico posible.



Una forma aceptada de romper el esquema simétrico de una página es crear bloques descompensados visualmente hacia un lado, alternándolos en la página de forma inversa, es decir, el primero descompensado a la derecha, el segundo a la izquierda, etc. Otra técnica es el uso de un único menú lateral de navegación, que descompensa el peso visual hacia la zona en la que se encuentra.

Si bien en la disposición de bloques en el reticulado podemos ser algo permisivos, en los contenidos de nuestras páginas la simetría debe ser una norma casi inflexible, sobre todo en la construcción de ciertos elementos. Es misión fundamental de todo diseñador ser capaz de construir contenidos simétricos sin que parezcan rígidos, artificiales.

Ejemplos claro de esta regla son la creación de formularios y de fichas. Se construyen generalmente apoyándose en una tabla maquetadora, por lo que deberemos buscar la simetría en esta tabla, aunque luego, debido a las diferentes longitudes y naturaleza de los campos, el resultado final "parezca" no serlo.

Distribución simétrica en una ficha


En lo que respecta a los textos, si nuestra página es eminentemente textual, y en textos de una sola línea, como ésta que tenéis delante, el contenido será simétrico por propia construcción. Pero si deseamos distribuir el contenido en varias columnas, deberemos prestar especial atención a que éstas sean equilibradas, evitando el remarcado fuerte de porciones de texto o de una o más columnas mediante colores de fondo, textos en negrita, etc.

Columnas textuales y simetría


La regla general es buscar siempre la armonía, aún cuando introduzcamos pequeños elementos diferenciadores.

Otro aspecto fundamental es mantener simetrías en el tratamiento de los aires en nuestra página. Entendemos por "aire" el espacio libre que queda entre elementos y entre éstos y los límites de la página. Es lo que en cualquier documento llamamos "márgenes", pero extendido a todos los elementos y contenidos.

Si nuestra página tiene un espacio libre entre su margen izquierdo y el primer contenido por ese lado, el mismo aire debe quedar entre el margen derecho y el contenido por ese lado. Igualmente, los espacios libres entre los elementos internos de la página deben ser simétricos e iguales, buscando con ello el equilibrio en la composición.

Este concepto es aplicable a todos y cada uno de los elementos de nuestras páginas. Así, si tenemos una lista de contenidos, podemos crear unos espacios entre cada 5-7 elementos, que evitarán la sensación de opresión producida cuando las listas tienen muchos elementos. Entonces, este espacio separador deberemos repetirlo constantemente a lo largo de la lista.



De la misma forma, cuando trabajamos con formularios en muy importante diseñarlos de tal forma que el aire que quede entre los diferentes elementos que lo formen sea simétrico, creando un total claro y armonioso.



Y lo mismo podemos decir de los demás elementos de nuestra página: aires simétricos, bien repartidos, equilibrados.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Luciano Moreno*
Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.
URL: http://www.htmlweb.net/

Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Curso práctico de diseño web

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Guias de diseño


 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Curso práctico de diseño web
Categorías
+Guias de diseño

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia