El lenguaje visual a través de grafismos puede descomponerse en entidades básicas, cada una de las cuales tiene por sí misma un significado propio y unidas de diferentes formas pueden constituir elementos comunicativos distintos. El punto, la línea, el cuadrado, la circunferencia y el contorno.

Estamos acostumbrados a comunicarnos con nuestros semejantes mediante el lenguaje hablado, verbal, formado por una serie de elementos básicos (letras, palabras, frases, etc.) que, combinados, forman entidades comunicativas complejas.

De igual modo, el lenguaje visual a través de grafismos puede descomponerse en entidades básicas, cada una de las cuales tiene por sí misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos.

Estas entidades gráficas constituyen la sustancia básica de lo que vemos. Por lo tanto, son muy importantes y todo diseñador debe conocerlas y manejarlas perfectamente.

Las formas básicas del diseño gráfico son pocas: el punto, la línea y el contorno. Pero son la materia prima de toda la información visual que aporta una composición.

Cada una de ellas posee un conjunto de características propias que las modifican y condicionan, entre las que destacan:

Forma: definida por disposición geométrica. La forma de una zona o contorno va a permitirnos reconocerlas como representaciones de objetos reales o imaginarios.

Dirección: proyección plana o espacial de una forma, continuación imaginaria de la misma aún después de su finalización física. Puede ser horizontal, vertical o inclinada en diferentes grados.

Color: tal vez las más importante y evidente, puede imprimir un fuerte carácter y dinamismo a los elementos a los que se aplica. Toda forma o zona tendrá en general dos colores diferentes, el de su contorno y el de su parte interna, pudiendo aplicarse tanto colores puros como degradados de colores.

Textura: modificación o variación de la superficie de los materiales, sirve para expresar visualmente las sensaciones obtenidas mediante el sentido del tacto o para representar un material dado. La textura está relacionada con la composición de una sustancia a través de variaciones diminutas en la superficie del material, y se consigue en una composición gráfica mediante la repetición de luces y sombras o de motivos iguales o similares.

Escala: tamaño relativo de una zona respecto a las demás y al total de la obra. Los diferentes tamaños de las diferentes zonas modifican y definen las propiedades de cada una de ellas.

Dimensión: capacidad tridimensional de un elemento o zona. La dimensión sólo existe en el espacio real tridimensional, pero se puede simular en una composición gráfica plana mediante técnicas de perspectiva, sombreado o superposición. También, mediante el uso de fotografías, que introducen espacios tridimensionales en la composición.

Movimiento: propiedad muy importante, que aporta connotaciones de dinamismo y fuerza. En las obras gráficas puras no existe movimiento real, pero sí se encuentra implícito en ciertos elementos y se puede conseguir con ciertas técnicas que engañan al ojo humano (diseño cinético, pintura cinética) o representando elementos que sí lo tienen en el mundo real.

En las páginas web podemos introducir animaciones gráficas que aportan sensaciones de movimiento mucho mayores, como animaciones Flash, gifs animados, capas dinámicas, elementos de vídeo, etc.

El punto

El punto es la unidad mínima de información visual, y está caracterizado por su forma (generalmente circular, pero también puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida), por su tamaño, por su color y por la ubicación que tenga dentro de la composición gráfica.

Las principales características del punto son:

• Tiene un gran poder de atracción visual, creando tensión sin dirección.
• Cuando se sitúan próximos dos puntos pueden producir sensaciones de tensión o de dirección, creando en la mente del espectador una línea recta imaginaria que los une.
• Si se sitúan diferentes puntos en prolongación sugieren una dirección, un camino, más acentuada cuanto más próximos estén los puntos entre sí.

Cuando se agrupan varios puntos pueden definir formas, contornos, tonos o colores (pensemos en la pintura impresionista).

Los puntos aislados son poco usados en el diseño web. Sin embargo, las sucesiones de puntos próximos son un buen elemento para dirigir la atención del visitante, para guiar su mirada a una zona concreta, para establecer relaciones entre elementos o para separar zonas de la página.

La línea

La línea es el elemento básico de todo grafismo y uno de los más usados, teniendo tanta importancia en un grafismo como la letra en un texto. Representa la forma de expresión más sencilla y pura, pero también la más dinámica y variada.

Está formada por la unión de varios puntos en sucesión, pudiéndose asimilar a la trayectoria seguida por un punto en movimiento, por lo que tiene mucha energía y dinamismo. Su presencia crea tensión y afecta al resto de elementos cercanos a ella.

Las principales propiedades de la línea son:

• Contiene gran expresividad gráfica y mucha energía.
• Casi siempre expresa dinamismo, movimiento y dirección.
• Crea tensión en el espacio gráfico en que se encuentra.
• Crea separación de espacios en el grafismo.
• La repetición de líneas próximas genera planos y texturas.

En una composición define direccionamiento, que estará más acentuado cuantas más líneas paralelas haya. Esta cualidad se puede usar para dirigir la atención en una dirección concreta, haciendo que el espectador observe el lugar adecuado.

Una línea divide o circunda un área, se encuentra en el borde de una forma. Expresa separación de planos, permitiendo al diseñador usarla como elemento delimitador de niveles y áreas en la composición.

Las propiedades de una línea vendrán definidas por su grosor, su longitud, su orientación (dirección) respecto a la página, su ubicación (posición), su forma (recta o curva) y su color. Estas propiedades se verán afectadas también por el número de líneas que haya en la composición, su proximidad y la orientación relativa entre ellas.

La línea es considerada como tal mientras la relación ancho/largo no sobrepase una proporción determinada. Una línea más ancha que la mitad de su largo pierde la expresión dinámica del trazo y adquiere la estática de una superficie cuandrangular.

La unión sucesiva de líneas conforma un trazo. Los trazos dan volumen a los objetos que dibujamos y permiten representar simbólicamente objetos en la composición, eliminando de ellos toda información superflua y dejando sólo lo esencial.

La línea pueden tener los bordes lisos o dentados, con extremos rectos, redondeados o en punta. Su cuerpo puede ser sólido o texturado, y su dirección puede ser curva o recta. Y cada una de estas características matizará la forma en que es interpretada una línea por el espectador.

Podemos considerar diferentes tipos de líneas, cada uno de los cuales tiene sus propias cualidades:

Línea recta

Define el camino más corto entre dos puntos. Es poco frecuente en la naturaleza, donde predominan las líneas curvas (el universo en su totalidad es curvo), pero muy abundante en el entorno humano, que necesita de ellas para dar estabilidad a sus creaciones.

La línea recta horizontal expresa equilibrio, calma, equilibrio estable. No hay estabilidad sin una línea recta horizontal de referencia, una línea de horizonte, ya que nos movemos en un plano horizontal.

Las líneas rectas horizontales son muy usadas en las páginas web, tanto que el lenguaje HTML proporciona una etiqueta específica para introducirlas, HR. Se utilizan sobre todo como elemento delimitador de bloques de contenido en páginas de poco contenido gráfico, siendo conveniente no presentarlas con efecto tridimensional, sino como una simple línea plana (atributo noshade).

La línea recta vertical sugiere elevación, movimiento ascendente, actividad. También expresa equilibrio, pero inestable, como si estuviera a punto de caer. Esto se puede corregir haciendo trabajar las líneas verticales con otras horizontales de apoyo, que les darán la estabilidad de que carecen.

En una páginas web, las líneas rectas verticales pueden ser usadas para separar columnas textuales o bloques de contenidos, bien como líneas frontales, con un color que destaque lo suficiente sobre el fondo, bien como líneas de fondo, del mismo color que éste, separando zonas de un color diferente.

La línea recta inclinada, por el contrario, expresa tensión, inestabilidad, desequilibrio. Parecen que están a punto de caerse. Dentro de las líneas inclinadas, la que forma 45º con la horizontal es la más estable y reconocible.

Línea curva

Es la línea más libre y la más dinámica de todas, pudiendo sugerir desde un movimiento perfectamente definido hasta un movimiento caótico, sin reglas.

Está muy asociada al ser humano, que escribe y dibuja casi siempre con líneas curvas.

Las curvas más comúnmente usadas en diseño gráfico digital son las curvas Bézier. Este tipo de curvas fue desarrollado por Pierre Bézier por encargo de la empresa Renault, que buscaba una familia de curvas representables matemáticamente (son curvas de tercer grado) que permitieran representar las curvaturas suaves que deseaban dar a sus automóviles.

Una curva Bézier queda totalmente definida por cuatro puntos característicos, los puntos inicial y final de la curva y dos puntos de control (manejadores) que definen su forma. Para modificar su forma, basta cambiar de posición uno de sus puntos de control.

Son curvas de manejo poco complejo y muy elegantes, con un desarrollo muy suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son muy usadas para diseñar logotipos e iconos y para copiar cualquier figura.

También son enormemente versátiles, pudiendo adoptar desde curvaturas muy suaves (casi líneas rectas) a curvaturas muy fuerte (curvas complejas), pasando por todos los valores intermedios. Pueden, incluso, cambiar de cóncavas a convexas alrededor de un punto.

En el diseño web, el uso de líneas curvas aisladas está muy limitado. Es más común encontrarlas como partes integrantes de formas más complejas, siendo útiles, por ejemplo, para suavizar la dureza de una forma rectangular en uno o más de sus lados (como los botones).

Un factor a tener en cuenta siempre que se trabaje con líneas curvas en una página web es el efecto de escalado producido al no ser capaz el sistema gráfico de los ordenadores de representar con exactitud formas curvas por medio de píxeles. Es el típico efecto de "dientes de sierra" que aparece en todos los objetos con partes curvas, efecto que aumenta con el tamaño del objeto.

Una solución a este problema visual es incluir las líneas curvas como imágenes en formato web (GIF, JPG, PNG, etc.) y aplicarles el proceso de rastrillado o antialias, disponible en casi todas las aplicaciones gráficas, por medio del cual se crean uno o más píxeles entre los bordes de la línea y el fondo, de un color intermedio entre ellos.

Trazo

Un trazo es el elemento lineal formado por la unión sucesiva de diferentes líneas. Es tal vez la forma gráfica más humana, la que mejor representa nuestra forma natural de dibujar.

Un trazo heredará las propiedades de las líneas que lo crean, existiendo trazos rectos, curvos o mixtos.

El contorno

Podemos definir el contorno como el objeto gráfico creado cuando el trazo de una línea se une en un mismo punto. Es decir, cuando una línea continua empieza y acaba en un mismo punto.

Todo contorno delimita dos zonas, una acotada (el contorno y su interior) y otra infinita (el fondo), creándose un sub-mundo gráfico particular en cada forma definida por cada contorno.

La línea base de un contorno define la complejidad de éste y sus propiedades. Cuando una línea se cierra sobre sí misma, el contorno creado determina un espacio interno, creándose una tensión entre este espacio y sus límites, otorgando a la línea creadora un gran poder de atracción visual.


Las cualidades gráficas de un contorno estarán definidas por las líneas que lo crean y las propiedades de éstas.

Los principales contornos son el cuadrado, la circunferencia y el triángulo, a los que podemos añadir los contornos mixtos y los orgánicos.

El cuadrado

El cuadrado es la figura geométrica formada por cuatro líneas rectas de igual longitud, denominadas lados, que forman ángulos perfectamente rectos en los puntos de unión entre ellas (esquinas a 90º).

El cuadrado es una figura muy estable y de carácter permanente, asociada a conceptos como estabilidad, permanencia, honestidad, rectitud, limpieza, esmero y equilibrio.

La figura derivada del cuadrado por modificación de sus lados es el rectángulo, de propiedades análogas al cuadrado, aunque sugiere menos perfección y estabilidad.


El cuadrado expresa direccionalidad horizontal y vertical, referencia primaria con respecto al equilibrio y el bienestar. Es menos sugerente y más neutro que los rectángulos, pero más sólido. Invita a mirar su centro y pasear la mirada en espiral en torno a ese punto.


Los rectángulos horizontales aportan solidez, estabilidad, dan la sensación de ser difíciles de volcar. Cuando son de gran tamaño permiten que la mirada el espectador se pasee de un lado a otro, en sentido horizontal.


Los rectángulos verticales, por el contrario, da sensación de menos solidez, es menos estable, parece que puede volcarse en cualquier momento. En ellos, la mirada del espectador no puede de un lado a otro, pero puede moverse verticalmente, dando sensación de elevación, y es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.


Los cuadrados y rectángulos verán modificadas sus cualidades visuales según su forma, tamaño, color del contorno y área interna, ubicación, escala, etc.
La proyección tridimensional del cuadrado es el hexaedro o cubo, cuerpo geométrico muy asociado a las obras propias del ser humano, como los edificios.
Los rectángulos son las formas más naturales para un ordenador, ya que el monitor y las ventanas de los sistemas operativos gráficos son todas rectángulos horizontales. Una página web posee una forma claramente rectangular, definida por la ventana del navegador. Además, los elementos web (tablas, capas, animaciones Flash, applets de Java, etc.) son de forma rectangular.

Esto hace que los rectángulos sean especialmente adecuados para su uso en las páginas web, proporcionando equilibrio y estabilidad a las mismas.


Sin embargo, es conveniente seguir una serie de pautas a la hora de usar rectángulos, con vistas a evitar la monotonía y el aspecto artificial de una página demasiado cuadriculada:

• Cada rectángulo debe estar alineado con los demás objetos de la página que le rodean.
• El tamaño del rectángulo debe ser mayor que el contenido del mismo, lo suficiente como para que éste se presente libre, con espaciados convenientes por los cuatro lados.
• No usar en las tablas bordes por defecto, es decir, grises y con efectos de relieve. Si se usan para separar lógicamente registros, es mejor asignarles un borde fino (sobre 1 píxel) de un color que contraste suficientemente con el borde, pero que no resulte llamativo en exceso. De todas formas, es preferible utilizar otros métodos para obtener la separación, como filas de dos colores alternativos (pijamas).
• Si de desea situar en la página varios rectángulos de funcionalidad análoga (caso de elementos de un menú de navegación, por ejemplo), es preferible posicionarlos en series horizontales, ya que se percibirán más como una línea que como un conjunto rectangular.

La dureza visual de los rectángulos se puede suavizar añadiéndoles otros elementos que los modifiquen en parte. Un ejemplo de esto son las tablas o botones con esquinas redondeadas, que rompen la monotonía de la forma rectangular.


Otra forma de compensar la rigidez de las formas rectangulares es combinarlas en la composición con formas curvas que aporten libertad y dinamismo.

La circunferencia

La circunferencia es un contorno contínuamente curvado, cuyos puntos están todos a la misma distancia de un punto central, llamado centro del círculo. La distancia constante de cualquier punto de la circunferencia se denomina radio.

La circunferencia representa el área que contiene en su interior, denominada círculo, la forma más enigmática de todas, considerada perfecta por nuestros antepasados. Su direccionalidad es la curva, asociada al movimiento, al encuadramiento, a la repetición y al calor.


La forma circular produce un movimiento de rotación evidente, posee un gran valor simbólico, especialmente su centro, y tiene connotaciones psicológicas como protección, inestabilidad, totalidad, movimiento contínuo o infinitud. Es típico representar también los espacios cerrados, herméticos, con circunferencias o círculos.

Contornos derivados de la circunferencia son el óvalo y el ovoide, con cualidades parecidas a las de ésta, pero que expresan aún más inestabilidad y dinamismo, aunque el movimiento perfecto sea una cualidad propia de la circunferencia.

La proyección tridimensional de la circunferencia es la esfera, el cuerpo geométrico más perfecto, el que contiene un mayor volumen en un menor espacio, el que define la forma tanto de los átomos como de los cuerpos celestes.

La circunferencia y el círculo son tal vez los elementos geométricos más perfectos y estables, aunque cargados de una gran carga dinámica.

Las formas circulares son muy difíciles de representar en una página web, ya que todos los elementos que nos facilita el lenguaje HTML son rectangulares, aunque aparenten no serlo. Además, las formas curvas se visualizan muy mal en los monitores, debido a la interpretación gráfica mediante pixels, que origina efectos de escalado indeseables.

Otro inconveniente de usar círculos en el diseño web deriva precisamente de ser la forma que contiene más área en el menor perímetro, ya que la mayoría de las veces al diseñador le interesa precisamente lo contrario, reducir al mínimo el área y maximizar al máximo el perímetro.


Tal vez la única forma de incluir una forma circular completa en una página sea incluyéndola en una imagen. Pero cualquier imagen es de por sí rectangular como objeto HTML, lo que nos obligará a desperdiciar todo el espacio comprendido entre el contorno circular y los bordes de la imagen, apareciendo espacios sin contenido no deseables en la mayoría de los casos.

Este efecto negativo se puede paliar incluyendo dentro de la imagen la forma circular y los demás objetos que le rodean en la composición y que se encuentran dentro de los límites del rectángulo que define la imagen, pero entonces esos elementos serán estáticos, fijos, sin posibilidad de ser modificados si no es cambiando todo el contenido de la imagen.

Una mejor solución es incluir la imagen que contiene el contorno circular (o curvo en general) como fondo de la página o de un elemento contenedor de la misma (tabla, celda de tabla, párrafo, capa, etc.), lo que nos permitirá presentar otros objetos HTML ocupando espacios vacíos alrededor de la forma circular.


Formas más sutiles y efectivas de incluir curvas en una página pueden ser recortando imágenes en forma de óvalo o círculo, e incluso simulando caminos curvos mediante elementos textuales o gráficos dispuestos en sucesión.

Contornos mixtos

Mediante combinaciones de los elementos básicos y contornos anteriores se pueden construir todas las formas imaginables, cada una de las cuales tendrá unas propiedades dependientes de las partes que la forman, de su orientación, de su tamaño, de espesor del trazo límite, de su color y de su ubicación.

Hay que tener en cuenta, en cualquier caso, que el predominio de la referencia horizontal-vertical da una sensación de equilibrio, mientras que el dominio de la dirección diagonal aporta inestabilidad.


Los contornos mixtos son muy usados en las páginas web, a las que aportan variedad en el diseño y definición de espacios de información, rompiendo la monotonía visual de las formas rectangulares puras.

El único inconveniente es que las líneas curvas se deben implementar mediante imágenes, generalmente en formato GIF, que se pueden incluir como secciones curvas en las celdas extremas de una tabla o como imágenes completas en una capa, sobre la que se sitúa otra capa con el texto.


También es posible incluirlas como ficheros SWF (Macromedia Flash), que aportan gran definición a las zonas curvas, sin producirse efectos de escalado, al ser tratadas como gráficos vectoriales. El inconveniente es entonces la actualización de los contenidos textuales, ya que hace falta para ello acceder al fichero FLA fuente del gráfico

Contornos orgánicos

Los contornos orgánicos son aquellos formados por curvas libres.

Son los contornos más abundantes en la naturaleza, y sugieren fluidez, desarrollo, humanidad, inspirando sensaciones favorables en el espectador.


Los contornos orgánicos son utilizados abundantemente en pintura y dibujo artístico, ya que son la base para representar figuras humanas, bodegones, paisajes, etc.

Sin embargo, son muy difíciles de incluir en una página web, tanto por aspectos técnicos (deben incrustarse como imágenes) como por su aspecto visual, que puede chocar con la naturaleza propia de una página, composición ordenada en la que predominan las formas rectangulares. No obstante, bien usados pueden dar un toque natural o humano a la página.


Una posible solución, si deseamos introducir en una página contornos orgánicos, es adaptarlos lo más posible a un contorno mixto, transformando las curvas libres en curvas Bézier, porciones de circunferencias o líneas rectas. Otra solución es introducir fotografías o ilustraciones que los contengan.