¿Qué se necesita para ser diseñador web?

Iniciarse en el diseño web implica necesariamente un proceso de aprendizaje. Todo diseñador

web debe conocer al menos dos lenguajes de programación web (HTML y CSS son
indispensables y complementarios), saber como elegir un servidor, contratar un dominio, pagar
y cobrar por medios electrónicos, emplear editores HTML, editar imágenes, usar editores
WYSIWIG y una larga lista de etcéteras. Pero a no desanimarse! Muchas de estas tareas son
realmente sencillas, y las que no lo son, resultan realmente muy divertidas, por lo que no les
costará ningún trabajo aprender todo esto.

La primera tarea que se debe emprender, es aprender el lenguaje HTML, para lo que
recomendamos leer la guía que pueden encontrar en el siguiente enlace: conceptos básicos de
HTML.

A pesar de que posteriormente se tome la decisión de emplear editores WYSIWYG (que

facilitan mucho la tarea ya que tienen poca dificultad más que Microsoft Word), conocer el
lenguaje HTML es indispensable ya que rara vez el diseñador web no tiene que retocar el
código producido por estos editores.

Una vez que se han obtenido los conocimientos fundamentales de HTML (que les resultará
muy sencillo y les llevará poco tiempo), el siguiente paso es aprender a utilizar CSS
(Cascading Style Sheets – Hojas de Estilo en Cascada). CSS es un lenguaje que permite al
diseñador web mantener separados los contenidos de la presentación, emplear el mismo
código en varias páginas, modificar la presentación de la página sin afectar los contenidos y
viceversa y da un mayor control al diseñador sobre los estilos y formatos de sus páginas.

Una breve descripción de CSS la pueden encontrar en: Guía breve de CSS.

El lenguaje CSS es algo más difícil que HTML, y conseguir tener control total sobre el mismo
es algo que va a llevar algo más de tiempo, mucha práctica y requerirá constancia. El
aprendizaje del lenguaje CSS tiene una utilidad adicional, y es que puede considerarse un
paso intermedio antes de comenzar a estudiar otros lenguajes más avanzados.

¿Qué es HTML?
El lenguaje HTML consta de una serie de comandos u órdenes que los navegadores pueden
interpretar, por lo que puede decirse que una página web es un documento donde se escriben
contenidos y una serie de instrucciones para indicarle al navegador como debe mostrarlos.

A través del lenguaje HTML podemos comenzar los primeros pasos en el diseño web. Tal como
se describe en conceptos básicos sobre HTML, para comenzar a realizar nuestras primeras
prácticas solo es necesario emplear un editor de texto y un navegador.

El lenguaje HTML está compuesto por etiquetas que no son más que instrucciones que le
indican al navegador qué hacer. Algunas de estas etiquetas son instrucciones puntuales, por lo
que se componen de una sola instrucción o etiqueta, mientras que otras pueden tener una
extensión ilimitada, por lo que es necesario introducir una etiqueta de apertura y otra de cierre,
limitando la extensión de la instrucción.

A la mayoría de las etiquetas HTML se le puede agregar atributos y un valor para éste. Para
poder comprender mejor estos conceptos, daremos un ejemplo sencillo. La etiqueta
 <hr>

produce una línea horizontal que se extiendo por todo el ancho del documento y que tendrá un
grosor de 1 píxel. Sin embargo, es posible crear líneas de distintos grosores empleando esta
etiqueta, para lo que deberemos agregar el atributo SIZE, al que le podremos dar el valor que
deseemos:

Todos estos conceptos se verán más claros en la medida que nos vayamos introduciendo en el
aprendizaje del lenguaje HTML.

Es aconsejable tener a mano (impreso o en el propio ordenador, como les resulte más cómodo)
un listado de las etiquetas HTML para realizar cuantas consultas necesitemos. Les puedo
asegurar que lo van a hacer permanentemente, hasta tanto no memoricen las principales y más
usadas, y en forma ocasional aún cuando con el tiempo se vuelvan expertos.

¿Qué es CSS?
Al igual que el lenguaje HTML, el lenguaje CSS solo requiere el empleo de un editor de texto
simple y un navegador. HTML y CSS son lenguajes complementarios, ya que, a pesar de
que pueden realizarse páginas web sólo con HTML, esto no es lo más conveniente ni lo más
aconsejable.

El lenguaje CSS se emplea exclusivamente para definir como se va a presentar el contenido de

la página. Esto puede llevarse a cabo dentro del documento, dentro de cada etiqueta o bien
como parte de un documento anexo a la página web.

Mediante el empleo de CSS, se puede organizar la página disponiendo el lugar y la extensión

que ocupará cada elemento y el formato de los mismos e incluir imágenes, videos y sonidos y
definir como se mostrarán cada uno de ellos.

Otros lenguajes
En la medida que las exigencias del diseño van avanzando, se hará necesaria la inclusión de
otros lenguajes, como javascript, php, asp y otros, ya que con HTML y CSS se consiguen
páginas estáticas, donde el usuario se encuentra limitado a ver o escuchar el contenido.

Algunas páginas web requieren que los usuarios interactúen, envíen datos, llenen formularios,
etc., lo que solo es posible incluyendo otros lenguajes, al menos en parte de las páginas.
Conclusión
A pesar de que la lista parezca un poco extensa, una vez que se introduzcan en el mundo del
diseño web el aprendizaje de cada uno de estos lenguajes los irá llevando a introducirse en
otros, por lo que el conocimiento lo irán adquiriendo en la medida que los vayan necesitando y
no como método forzado de estudio.

El aprendizaje del diseño web se produce en una forma muy entretenida, ya que la práctica les
hará ver los resultados de lo que se va aprendiendo, aplicando los conocimientos adquiridos
desde el mismo momento en que este aprendizaje se inicia, lo que resulta muy estimulante.

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. Podría pensarse que es
nada más que la aplicación del buen gusto. Sin embargo, el diseño 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.

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, lo que puede
llevarse a cabo empleando programas de dibujo vectorial. Esta maqueta tendrá además otra
funcionalidad, ya que podrá extraer de ella las imágenes para crear fondos, menús, botones,
etc. Otro método de hacer una maqueta es dibujando sobre papel. 

¿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. 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 de facilitar 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.
 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 publicar. 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. 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 visita 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.

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 más 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.

El balance en el diseño web

Este principio del diseño web se refiere al equilibrio que guardan los elementos que componen
la página. La forma en que se disponen los elementos de la página influye notoriamente en el
estilo y el carácter de la página.

Existen tres tipos de balance:

 Simétrico – Este tipo de balance se ve en los casos en que los diferentes

elementos componentes de la página web se encuentran dispuestos de
acuerdo a alguna de las clases de simetría.
 Asimétrico – Es cuando los elementos componentes se colocan
balanceados pero sin seguir ninguna simetría.
 Fuera de balance – En estos casos, los elementos son colocados en forma
desbalanceada dentro de la página.

Balance simétrico
Si bien existen muchos tipos de simetría, el diseño web tiene algunas particularidades que
hacen poco útiles algunas de ellas. Estas características particulares del diseño web están
referidas básicamente a la forma en que se muestran las mismas en los navegadores, lo que
hace que los diseñadores web tengan la necesidad de adaptarse a estos requerimiento,
adoptando solo aquellos elementos aplicables a este tipo de visualización.

La resolución de pantalla más empleada en la actualidad es de 1024 x 768 píxeles. A estas

dimensiones se deben quitar las barras de herramientas, las barras de desplazamiento
(scrollbar), etc., lo que hace imposible incluir todo el contenido de una página en este espacio.
Esto quiere decir que los usuarios de la mayoría de las páginas web se deban desplazar en
forma vertical por la misma, así que resulta fácilmente comprensible que emplear una simetría
horizontal en la web es bastante difícil.

Características del balance simétrico

Disponer de los elementos de una página web en forma simétrica brinda una sensación de
orden. Otra característica importante es que permite que la disposición de estos elementos sea
“predecible”, haciendo que el diseñador pueda guiar al visitante por la página en la forma que
desee para asegurarse la mejor visibilidad de los elementos más importantes de la misma.

Simetría horizontal
Como está descrito anteriormente, la simetría horizontal es bastante rara en el diseño web. Sin
embargo, en algunos casos en que, como en una página principal (home), todo el contenido de
la misma puede ser incluida sin necesidad de que el usuario deba emplear las barras de
desplazamiento, el diseñador puede basar su creación en la simetría horizontal.

A continuación les mostramos un ejemplo de una página inicial completamente simétrica en el

plano horizontal.

En ella vemos que el menú está compuesto por líneas horizontales que abarcan la totalidad del
ancho de la página y que el logotipo se encuentra ubicado en el pie de la página y también se
encuentra dispuesto de acuerdo a la simetría horizontal del resto de la composición.

Simetría vertical
Al igual que en el caso anterior, es bastante difícil que un diseñador base su creación en la
simetría vertical exclusivamente. Sin embargo, se pueden apreciar algunos casos en que
excelentes diseños son construidos en base a este tipo de ordenamiento de los contenidos.

Una página web basada en simetría vertical implica que sus contenidos se encuentran
distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la
página. En algunos casos, luego de establecer un encabezado horizontal se emplean columnas
para ordenar el contenido. Tal es el caso del siguiente ejemplo, donde puede verse claramente
que el contenido principal de la página se encuentra dividido en dos columnas simétricas,
debajo de un encabezado horizontal.
Un caso llamativo es el siguiente ejemplo, donde el contenido de la página tiene un
encabezado con el logotipo en el centro, lo que permite trazar un eje que dividiría la pagina en
dos mitades, mientras que más abajo, las imágenes tienen las mismas dimensiones y permiten
dividir la página en tres secciones simétricas en el plano vertical:

Como puede verse, el contenido de la página puede dividirse en secciones con simetrías
diferentes, como el caso anterior.

Simetrías vertical y horizontal combinadas

También es posible observar ejemplos de diseños web hechos combinando las simetrías
horizontal y vertical. El empleo de simetrías proporciona sobriedad, elegancia y claridad a los
diseños.

Un ejemplo donde el empleo de la combinación de la simetría vertical y la horizontal se ve muy

claramente lo tenemos en la siguiente imagen:

Este excelente diseño nos muestra una página dividida en cuadros perfectamente simétricos,
tanto en el plano horizontal como en el vertical. Este tipo de diseños se emplean en forma más
asidua en los últimos años.

Simetría radial
En algunos casos, los diseñadores optan por otro tipo de simetría para ordenar los
componentes de las páginas, como la simetría radial. La disposición de los elementos en este
tipo de simetrías es en forma circular en torno a un centro ocupado por una imagen o texto o en
forma de espiral. Dado la naturaleza de este tipo de simetrías, solo se emplea en casos en que
la página no supere las dimensiones de una pantalla, ya que en caso contrario, gran parte del
diseño se pierde.

El siguiente ejemplo pertenece a una captura de pantalla de una página de inicio, donde se
puede apreciar claramente el centro ocupado por una imagen, los rayos de sol que marcan
nítidamente el diseño circular, y el título, que acompaña la simetría radial con que está
diseñada la página.

Balance asimétrico
Con este nombre designamos al tipo de balance en el que los diferentes elementos que
componen una página web se encuentran equilibrados o balanceados pero sin seguir un patrón
simétrico. Este tipo de balance es uno de los preferidos en la actualidad, ya que otorga gran
libertad de creación, pero también constituye un gran desafío para el diseñador, ya que
equilibrar elementos sin compensación simétrica es más difícil al no contar con el apoyo de
elementos que balanceen el diseño por contraposición.

Sin embargo, a pesar de los retos que este sistema de equilibrio plantea, permite al diseñador
colocar los componentes de una página en sitios más adecuados para dirigir el ojo del visitante
hacia los puntos de la página que más le interese mostrar, cumpliendo de esta forma con otro
de los requisitos que todo buen diseño debe cumplir.

En la siguiente imagen podemos ver un diseño en el que, si bien cuenta con una estructura
geométrica definida, no se cumple ninguna de las simetrías.

Fuera de balance
Yendo aún más lejos en la libertad de diseño se encuentran las páginas fuera de balance o sin
equilibrio. Esto se hace en forma deliberada, buscando la efectividad visual. Es un verdadero
desafío lograr que una página que no tiene balance o equilibrio se vea bien, siendo un
concepto muy avanzado en el diseño y que requiere gran experiencia.

Un ejemplo de página sin balance es el siguiente, donde el creador ha decidido romper el

equilibrio tanto horizontal como vertical, consiguiendo un efecto informal y abstracto muy
llamativo.

Conclusión
Cada uno de los métodos de balancear o no una página web es válido. El diseñador debe tener
en cuenta el tipo de página web que está creando para elegir si su página será balanceada o
no, si será simétrica o no. No existen reglas definidas en ninguna clase de creación, por lo que
solo nuestra capacidad de imaginación puede ser el límite. Algunos ejemplos de excelentes
diseños pueden verse en la siguiente página y también en este sitio.

El contraste en el diseño web

Se llama contraste a las diferencias que existen entre dos elementos relacionados y es uno de
los principios de diseño web. El contraste puede ser mayor o menor en la medida que
mayores o menores sean las diferencias de estos elementos. Esto quiere decir que dos
elementos que tienen pocas diferencias entre sus atributos tienen un contraste bajo, mientras
que dos elementos cuyos atributos se diferencias mucho, tienen un alto contraste.

El empleo del contraste en el diseño web resulta muy importante para atraer la atención del
usuario. Una página web cuyos elementos tienen poco contraste no atraerá la atención de los
posibles usuarios, mientras que una web que emplea un  contraste evidente para destacar sus
elementos más importantes, atraerá fácilmente la atención. El contraste es uno de los métodos
empleados para dirigir la atención del usuario de la página hacia determinados elementos. En
el siguiente ejemplo, una misma imagen se muestra con dos contrastes diferentes. Es fácil
determinar que, a pesar de ser la misma imagen y tener el mismo tamaño y color, la primera en
llamar la atención es la imagen de la derecha, cuyo contraste es más marcado que el de la
imagen de la izquierda.
Si en una página web se desea resaltar un objeto contrastándolo con los demás elementos que
lo circundan, no necesariamente hay que oscurecerlo, agrandarlo, deformarlo o cambiar su
color. El contraste, tal como ya lo definimos, es la diferencia entre los distintos elementos, por
lo que también es posible cambiar los atributos de los elementos circundantes, de forma que a
pesar de no haber realizado cambios en el objeto logramos destacarlo por contraste.

Tipos de contraste
 

Existen cuatro tipos de contraste:

 Contraste de tono
 Contraste de color
 Contraste de contorno
 Contraste de escala

Contraste de tono
De todas las propiedades de color (tono, matiz y croma), el tono es el que brinda mayores
posibilidades de empleo para manejar el contraste entre diferentes elementos, por lo que
también resulta el más usado. Un ejemplo notable de la utilización de variaciones de tono para
destacar los diferentes elementos podemos verlo en la siguiente imagen:
En la imagen anterior puede apreciarse que el menú se encuentra distribuido por toda la página
y tienen la misma forma y tamaño que el resto de los cuadros en que se encuentra dividida la
misma. La diferenciación de los elementos del menú está basada en variaciones de tono. Si
posamos el puntero en alguno de estos elementos, podremos ver que para destacar el
elemento que se está por seleccionar, también los diseñadores han empleado variaciones
tonales.

Contraste de color
Otra de las posibilidades de contrastar objetos es a través del empleo de diferentes colores,
logrando lo que se denomina contraste de color. Este tipo de contraste, bien empleado, da
muy buenos resultados, pero también puede dar lugar a resultados desagradables si no se
emplea con buen criterio.

La combinación de colores en diferentes elementos en una web no solo tiene la finalidad de

embellecer el conjunto, sino que además posibilita destacar elementos. La combinación de
elementos con colores fríos y cálidos es la forma más corriente de lograr el mencionado
destaque. Mientras que los colores fríos (verdes y azules) tienden a dar pasividad y dan un
aspecto regresivo al objeto, los colores cálidos (rojos y amarillos) son más agresivos y brindan
a los objetos un aspecto expansivo. Esto quiere decir que si empleamos adecuadamente la
combinación de colores fríos y cálidos, podemos lograr que un objeto se destaque sobre los
demás.

En el siguiente ejemplo podemos apreciar una página web que se encuentra diseñada sobre un
fondo de color neutro, cuyo logotipo no presenta grandes diferencias de tamaño ni de tono
respecto de los demás elementos de la página. Los diseñadores han logrado resaltar el
logotipo de la página web mediante el empleo del color.
Contraste de contorno
Una forma sencilla de destacar los elementos entre sí, es el empleo de variaciones en el
contorno. Las formas irregulares o abstractas atraen más la atención visual que las figuras
sencillas y geométricas.

Si colocáramos algunas imágenes con un contorno geométrico (cuadrado, círculo,

rectángulo, etc.) junto a una imagen cuyo contorno es irregular y sin otro tipo de diferencias
entre ellas, lograremos que la vista de quien observe el conjunto se pose en primer lugar en la
última.

El siguiente es un ejemplo notable del empleo del contraste de contorno. En la imagen

aparece una página web en cuyo diseño aparecen varios elementos con colores llamativos, alto
contraste y tamaños similares. Sin embargo, el logotipo es lo primero que llama la atención,
debido a su forma irregular que contrasta claramente con el resto de la página que tiene
trazados marcadamente geométricos.
 

Contraste de escala
La utilización de escala o tamaño diferente para resaltar determinados elementos es una de las
formas más conocidas y sencillas de conseguir el contraste. Es lógico que si colocamos un
elemento de mayor tamaño que otros, aún cuando sean similares en otros atributos, éste
elemento se destacará del resto, y que cuanto mayor sea la diferencia de escala, mayor será el
contraste.

En el siguiente ejemplo, vemos la imagen de una página web diseñada con poco contraste de
color, de forma o de tono. El nombre del juego promocionado logra destacarse del resto
claramente, debido a que se encuentra a una escala mayor que el resto de los elementos que
componen esta página.
 

Conclusión
 

Los ejemplos anteriores muestran la aplicación de un tipo de contraste para diferenciar

elementos entre sí. Sin embargo, lo más frecuente es que el realce de los elementos más
importantes se haga a través del empleo de más de un tipo de contraste combinados.

Pero hay que destacar que es muy fácil emplear incorrectamente el contraste. Uno de los
errores más frecuentes es emplear contrastes excesivos, desfavoreciendo la estética general
de la página. Otro error frecuente es que, por desconocimiento de estos conceptos, terminan
destacándose elementos que no son los más importantes de la página. El uso del contraste,
como cualquier otra técnica, debe ser practicado para conseguir buenos resultados.
Énfasis en el diseño web

En muchos diseños web, la simple disposición de textos, imágenes, videos y cualquier otro
elemento no es suficiente para conseguir que el usuario dirija la atención hacia los elementos
que consideremos más importantes. La atención de las personas que navegan por Internet es
de apenas algunos segundos, lo que implica que el diseñador debe lograr captar la atención
del usuario, que éste se sienta atraído y no se retire de la página en unos segundos.
Este es uno de los motivos para emplear el énfasis en nuestros diseños. Otro motivo para
aplicar este principio del diseño es diferenciar elementos semejantes entre si, resaltando
aquellos que, dentro de su misma especie, se desee destacar de los otros. Por ejemplo, si
tuviéramos que incluir un texto con gran extensión, la atención del usuario seguramente no
pasará de las tres o cuatro primeras líneas, por lo que la lectura deberá simplificarse y
agregarse elementos destacados para que el lector pueda hacer una rápida recorrida. Es muy
probable que, tras esta breve recorrida empleando las ayudas aplicadas en el texto, el usuario
considere que lo que allí se encuentra es lo que necesita y prosiga con una lectura más
detenida del texto.
Lo mismo sucede con las imágenes. Una larga colección de imágenes similares difícilmente
pueda atraer la atención de un internauta, por lo que será necesario destacar alguna o algunas
de estas imágenes para que quien ingrese en nuestra página tenga una idea resumida del tipo
de contenidos que allí encontrará.
El énfasis es uno de los métodos más adecuados para conseguir el necesario resaltado de
algunos elementos de un grupo de elementos homogéneos.

Clasificación de elementos según el énfasis

De acuerdo al énfasis que el diseñador emplee en los diferentes elementos que componen una
página, éstos se pueden clasificar en tres grupos:

 Elementos dominantes
 Elementos sub-dominantes
 Elementos subordinados

Elementos dominantes
Son aquellos elementos que, dada su importancia respecto del resto de los contenidos, se
destacan aplicando énfasis por encima del resto. A continuación mostramos un ejemplo de
elemento dominante:
En este ejemplo, podemos apreciar dos elementos que por su énfasis pueden considerarse
como dominantes: el título “creative services” y la imagen de la botella. Seguramente, al ver
esta imagen, estos dos elementos hayan sido los primero en los que hayamos detenido nuestra
atención, lo que ha sido el deseo del diseñador de la página. El mismo ha logrado este efecto
gracias al correcto empleo del énfasis, consiguiendo colocar estos elementos en el primer
plano de la composición.

Para lograr convertir a un texto como elemento dominante, el diseñador puede emplear varios
atributos sobre los cuales aplicar la diferencia, como tamaño, color, tipografía, posición o una
combinación de ellos.
En cuanto a las imágenes, al igual que con el texto, basta con variar algunos de los atributos de
las mismas, como tono, color, tamaño, posición o una combinación de las mismas, para
convertirla en uno de los elementos dominantes de la página.

Hay que destacar que la cantidad de elementos resaltados también resulta muy importante.
Cuantos más elementos con atributos similares coloquemos en una página, menos se
destacarán unos de otros. Si en la imagen anterior colocáramos una cantidad mayor de texto
resaltado, el texto que es dominante dejaría de serlo ya que estaríamos haciéndolo
homogéneo con otros elementos.

Elementos sub-dominantes
A la hora de interesar al visitante de la página, es necesario que luego de conseguir su
atención gracias a los elementos dominantes, podamos guiarlo a través de los restantes
elementos de forma tal que mantenga el interés en lo que exponemos y se interese por ver
otros contenidos.

Para ello utilizamos otros énfasis menores que los de los elementos dominantes, pero
mayores que los que empleamos en el resto de los elementos de la página. En el caso de los
textos, podríamos definirlos como subtítulos y textos resaltados. En la siguiente imagen
vemos una página web donde se ha distribuido el texto en varios párrafos, cada uno con su
subtítulo.

En esta página web (lawebera.es), también encontrarán una gran cantidad de ejemplos de
utilización de elementos sub-dominantes. Notarán que estos elementos resaltados colaboran
en la visualización de los elementos importantes y facilitan la ubicación de cada sección. En
una página donde todos los elementos resultan homogéneos, resulta extremadamente difícil
ubicar cuales son los elementos más atractivos o importantes, por lo que la atención del
visitante pronto se perderá, con grandes posibilidades de que el mismo abandone la página.

Elementos subordinados
Llamamos elementos subordinados a dos tipos de elementos. Unos son aquellas
informaciones anunciadas por los elementos dominantes y sub-dominantes, como textos
complementarios o ampliatorios. Otros son elementos que completan una composición de
imágenes, embelleciendo la página o ayudando a resaltar a los elementos principales.

Estos elementos subordinados deben tener atributos de menor resalte que los de los tipos
anteriores, de forma que la diferencia con aquellos colabore en resaltar su importancia.

El énfasis conseguido en los elementos dominantes y sub-dominantes depende en gran

medida de la correcta utilización de los atributos de los elementos subordinados. En la imagen
que empleamos en el ejemplo anterior, vemos que el tamaño de los textos subordinados es
mucho menor, lo que permite que los subtítulos y títulos se destaquen.

Sin embargo, hay que tener presente que los elementos subordinados contienen información
necesaria para completar el mensaje que se desea entregar, por lo que su legibilidad debe ser
muy buena.

Conclusión
La aplicación de diferentes grados de énfasis resulta de extrema importancia en el diseño web.
Gracias a ello la página en construcción puede verse heterogénea, llamando la atención de los
usuarios sobre aquello que puede hacer que el mismo decida quedarse viendo el resto de los
contenidos. El énfasis contribuye en gran medida también en la estética de la página. Veamos
un ejemplo donde la aplicación de diferentes grados de énfasis son el elemento principal del
diseño:

En este diseño se puede apreciar que la aplicación de diferentes grados de énfasis en el texto
conforma la estética del diseño de la página. La utilización de diferentes tamaños, colores y
tipografías hacen a la totalidad del diseño, además de dar el mensaje textual. A la izquierda
aparecen los elementos dominantes, mientras que a la izquierda los elementos sub-
dominantes conforman el logotipo, el menú y algunos subtítulos, mientras que los elementos
subordinados completan el mensaje.

Además de dar un mensaje claro, cada tipo de elemento tiene importancia desde el punto de
vista estético. Esto demuestra claramente que el énfasis que se da a cada elemento resulta
importante, tanto en el diseño estético de la página como en la claridad del mensaje.

El principio de la proximidad en el diseño web

Como se ha mencionado en otros artículos, el tiempo que emplea un usuario de la web en
determinar si el contenido de la página en la que se encuentra es lo que busca es muy corto,
no pasando más allá de unos pocos segundos. Esto hace imprescindible que todo buen diseño
haga que el usuario encuentre con facilidad y con solo unos pocos golpes de vista aquello que
ofrecemos. Este principio de diseño web, si bien puede ser empleado para lograr efectos sobre
la estética de la página, tiene como principal cometido facilitar el acceso a los contenidos por
parte de los usuarios.

Para ello es necesario que los diferentes contenidos se encuentren ordenados y que aquellos
elementos relacionados entre sí se encuentren próximos, de forma tal que el usuario tenga no
más de tres o cuatro grupos de objetos. Estos grupos deben estar relacionados por similitud,
concepto que desarrollaremos a continuación.

Tan importante es que los elementos similares se encuentren próximos como que los
elementos diferentes se encuentren alejados. El correcto balance de estos dos aspectos son
los que contribuyen en la mejor visibilidad de los contenidos.

Además de colaborar en el ordenamiento de los contenidos de forma de simplificar la

visualización de los mismos, la proximidad puede ser empleada como forma de decorar la
página, ya que la distribución de los elementos puede generar unidades visuales. Utilizando
los atributos de los diferentes objetos (textos, imágenes o videos) se puede hacer que
contribuyan en el embellecimiento de la página.

Cabe destacar que este principio de diseño web solo es aplicable en aquellas páginas que
presentan más de cinco o seis elementos, ya que en caso de que los contenidos no superen
estas cantidades (por ejemplo en páginas de presentación), la formación de grupos puede
resultar imposible, y en el caso de que lo sea, puede originar otros inconvenientes, como
exceso de espacios en blanco o la necesidad de incorporar nuevos contenidos para rellenar.

La similitud
Para presentar el contenido en forma coherente, debemos tener en cuenta la similitud entre
los diferentes componentes que se encuentran próximos. Para que un usuario identifique un
grupo de elementos como relacionados entre sí, éstos deben presentar algunas características
comunes que permita la relación con solo un vistazo. Para conseguir esto, podemos igualar
algunos de los atributos de estos elementos (tamaño, forma, color, etc.) de forma que con
solo una pasada de la vista se pueda identificar la relación existente entre ellos.

Para que el concepto quede más claro, veamos un ejemplo:

En esta página podemos ver que los contenidos se agrupan de acuerdo a similitudes. En la
parte superior se encuentra el logotipo y una breve presentación. En el centro y a la izquierda,
una serie de imágenes que muestran los últimos trabajos realizados, agrupados en una misma
zona de la página con similitud temática y de forma. En el centro y a la derecha, se encuentra
el menú, también agrupado por similitud temática, de forma, color, tamaño y disposición. Aquí
se puede apreciar que con una breve pasada de la vista por la página, podemos identificar
claramente cada uno de los grupos de contenidos de la misma.

Los diferentes elementos pueden ser similares en uno o más tipos de atributos. Los atributos
usados con mayor frecuencia son la forma, el color y el tamaño. Sin embargo, en muchas
ocasiones es necesario realizar énfasis en alguno de los elementos que componen el grupo,
para lo cual basta con alterar uno solo de los atributos para conseguirlo y aún así lograr
mantener la unidad del grupo.

Clases de proximidad
Existen varios tipos de proximidad que pueden ser empleados de acuerdo con el diseño que se
esté llevando a cabo.

Proximidad por menor distancia

Se llama así cuando los diferentes elementos de un grupo se encuentran separados por un
espacio que resulta menor que el espacio que los separa de otros grupos. En este tipo de
proximidades, es importante que la diferencia de separación entre los elementos del grupo
sean notoriamente inferiores que la separación entre los diferentes grupos, de forma que se
note al primer golpe de vista cuales objetos forman parte del grupo y cuales no. Veamos un
ejemplo:

En los párrafos, es sencillo encontrar qué parte del texto forma parte de uno u otro párrafo, ya
que la separación entre los diferentes renglones de cada párrafo es visiblemente menor que la
separación entre párrafos.

Proximidad por contacto

Una forma de agrupar objetos es evitar que exista separación entre ellos. Esto solo es posible
en los casos en que los objetos pueden estar juntos y distinguirse claramente unos de otros y
sean compatibles visualmente.
En el centro de la página se encuentran tres elementos que forman claramente un grupo, cuya
separación entre ellos es nula. En este caso se emplea el color para lograr diferenciar un
elemento de otro.

Proximidad por superposición

En algunos casos, puede emplearse un leve solapamiento (superposición) de los elementos
para aumentar la sensación de proximidad entre ellos, lo que agrega un bonito efecto visual.
Tal es el caso del siguiente ejemplo:

A la izquierda de la página, se muestra una imagen con su descripción, formando claramente

un grupo de elementos que tienen similitud temática. La descripción se ha superpuesto a la
imagen de forma tal que altere muy poco a ambos elementos.

Formación de grupos de elementos

Los grupos deben estar conformados por elementos que formen unidades temáticas. Por
ejemplo, el logotipo de una página, el título y el subtítulo, deben próximos entre sí, formando
una unidad temática y visual a la vez. Otro ejemplo son los menús, cuyos componentes tienen
que estar muy próximos para facilitar su visibilidad y contribuir en la navegabilidad de la página.

Los grupos pueden estar conformados por elementos diferentes (por ejemplo, textos e
imágenes, textos y videos, etc.), ordenados de forma tal que pueda identificarse su relación
con solo un golpe de vista.

La diferenciación entre los diferentes grupos de elementos también resulta importante, ya que
esto permite que los usuarios perciban claramente que se trata de elementos temáticamente
diferentes con solo una breve observación.
Ritmo o repetición en los diseños web

Si preguntamos por ritmo, la gran mayoría de las personas lo relacionan con la música. Esto se
debe a que es mucho más sencillo percibir el ritmo a través del oído que a través de la vista.
Mientras que en la observación de obras visuales los atributos más sencillos de detectar son la
forma y el color, en la música lo es el ritmo.

Sin embargo, el empleo del ritmo en la creación de objetos visuales (por ejemplo una página
web) es fundamental y por ello se le considera uno de los principios del diseño web, ya que a
través de la repetición se consigue una regularidad que es importante para conseguir ciertos
efectos en el usuario, como sensación de movimiento, facilidades de búsqueda y navegación,
sensación de relajamiento, sensación de orden y coherencia, etc.

El ritmo colabora en la presentación coherente de los contenidos de la página, ordenándolos

de forma tal que facilitan la visibilidad de los mismos. También sirven para embellecer la
página, empleando repeticiones como elemento decorativo. Este tipo de ornamentaciones
tienen antecedentes milenarios, pudiendo apreciarse este ordenamiento del diseño desde la
prehistoria.

El ritmo en los elementos visuales se consigue estableciendo un patrón basado en la forma,

posición, color o una combinación de estos atributos. Es posible establecer un ritmo con
elementos disímiles, dado que existen diferentes tipos de ritmo.

La variación en el espacio que separa los objetos no debe ser tan grande que impida ver la
repetición. Este concepto es fundamental, ya que la repetición resulta efectiva siempre y
cuando el usuario pueda distinguirla. Cuando la magnitud de la separación entre los
elementos repetidos es excesiva, se pierde el ritmo, ya que éste solo puede ser considerado
como tal cuando es posible apreciarlo.

Una misma página puede emplear distintos tipos de ritmo, ya que se puede diseñar una página
pensando en dar aspectos diferentes a cada sección de la misma.

Clasificación del ritmo

Existen tres tipos de repeticiones o ritmos, clasificados de acuerdo a la regularidad con que se
producen:

 Repetición regular
 Repetición sincopada
 Repetición no armónica

Repetición regular
Es la forma más sencilla de repetir elementos. Se trata de colocar elementos con atributos
similares a espacios regulares. Las únicas variaciones permitidas en este tipo de
repeticiones es la magnitud de los espacios entre los elementos y la orientación en que se
produce esta repetición.

La orientación de la repetición puede ser vertical, horizontal o tener una disposición en ambos
planos. Los siguientes ejemplos muestran los tres tipos de disposición que pueden emplearse
en la repetición regular.
En el primer ejemplo, la disposición repetida y regular de elementos similares del menú en
forma horizontal, colabora con la facilidad de navegación de la página, manteniendo un orden
que permite la fácil visualización de cada uno de los elementos que componen dicho menú.

En el segundo caso, el diseño completo está basado en repeticiones regulares verticales. Esto
permite que los usuarios puedan desplazar la vista y encontrar todos los elementos que están
dispuestos según un patrón ordenado.

El tercer ejemplo muestra una forma de ordenar los diferentes elementos a intervalos regulares,
tanto en el plano vertical como en el horizontal. La forma en que se encuentran dispuestas las
imágenes, brinda una sensación de orden y facilita la visualización de los elementos.

Repetición sincopada
Este tipo de repeticiones muestra un orden algo más complejo que la repetición regular, ya
que se trata de repetir grupos de elementos que a su vez se encuentran ordenados en forma
regular, brindando una sensación de orden similar a la conseguida con el tipo de repetición
anterior pero con una geometría de mayor complejidad.

Las páginas diseñadas con elementos ordenados con este tipo de repeticiones se muestran
más rítmicas que las repeticiones regulares. A continuación, vemos un ejemplo de repetición
sincopada, aplicada al fondo de la página. Podemos ver que un grupo de cuatro figuras repiten
en forma ordenada, pero no regular, formando un ritmo más elaborado que en los ejemplos
anteriores.

La síncopa en la elaboración de obras visuales, al igual que en la música, presenta diseños

más complejos que las repeticiones simples, por lo que suele ser empleado como forma de
evitar que el diseño resulte demasiado estándar.

Repetición no armónica
Se emplea para dar una sensación discordante, aumentando el mensaje emocional del
diseño.En el siguiente ejemplo, a pesar de que el orden se encuentra alterado entre los
diferentes elementos que componen el menú, la sensación de orden se encuentra dada por la
igualdad de colores y tonos. El diseñador dio una sensación de desorden, aun cuando no
perdió la armonía del diseño, empleando otros atributos.

Este tipo de repeticiones se puede apreciar también en la disposición del contenido de

algunas páginas, tanto textos como imágenes. Disponer los objetos de esta forma pretende
dar un aire informal al diseño y es muy frecuente encontrarlo en páginas musicales y de arte.
Este tipo de diseño se encuentra relacionado con el arte abstracto, en el que se inspira.
La repetición no armónica no tiene por qué presentarse como desorden, ya que en este tipo de
ordenamientos se aplican patrones irregulares, estando el orden dado por otros atributos de los
elementos presentados.

Conclusión
Como puede verse en los ejemplos presentados, resulta importante para la presentación de los
contenidos el empleo de la repetición o ritmo, de forma tal que el usuario que ingresa a la
página pueda orientarse con facilidad y tenga un acceso rápido a los elementos más
importantes. Esto hace que la página sea más amena, de modo que el visitante tenga interés
en quedarse en ella y ver todos los contenidos.

Colabora en gran medida también con la estética del diseño, ya que la formación de patrones
ordenados, además de facilitar la visibilidad y el acceso a los mismos, forman en sí parte del
diseño artístico de la página.

El uso adecuado de las repeticiones es, por tanto, un elemento crucial en el correcto diseño de
una página web. Explorar las posibilidades que brinda el ritmo resulta indispensable para
quienes estén adentrándose en este fascinante mundo del diseño web.

Utilización del espacio en blanco en el diseño de una web

El espacio en blanco es uno de los componentes de todo diseño gráfico y diseño web, con la
misma importancia desde el punto de vista del diseño en su conjunto que el que tienen los
textos, las imágenes y los videos.

Cuando nos iniciamos en el diseño de páginas web, normalmente desconocemos este

importante componente, empleándolo solo como el espacio que separa otros elementos. No
nos damos cuenta que cada espacio vacío forma parte del conjunto visual de nuestro diseño.

Es frecuente ver como los diseñadores web se esmeran en ocupar la mayor parte del espacio
de la página con diferentes contenidos, tratando de evitar que queden espacios en blanco. Esto
da como resultado páginas sobrecargadas y con elementos difíciles de ver y distinguir.

El espacio en blanco y los principios de diseño web

En artículos anteriores hemos detallado cuales son los principios en los cuales se basa el
diseño web. Estos principios son el balance, el contraste, el énfasis, el ritmo y la proximidad.

En la aplicación de estos principios básicos de diseño la utilización de los espacios en blanco

es fundamental. El espacio en blanco contribuye con el balance de los diferentes elementos
componentes de una página web, sirve para realzar elementos por contraste, colabora y
provoca el ritmo y sirve para dar sensación de proximidad en elementos semejantes.

Por esta razón resulta imprescindible considerar al espacio en blanco como un elemento más
en la página web. El empleo de lugares vacío colabora en la jerarquización de los contenidos
de la web y en la organización de los mismos. Si se quiere diferenciar y los diferentes grupos
de información relacionada, lo más adecuado es el empleo de espacios en blanco, de forma
que los diferentes grupos queden bien definidos. En el siguiente ejemplo, podemos ver como
se han separado los diferentes grupos de información empleando espacios en blanco:
Cuando se pretende realzar un elemento por encima de otros, también los espacios en blanco
pueden ser muy útiles. En el siguiente ejemplo, el diseñador ha rodeado el título de la página
de abundantes espacios en blanco, lo que colabora en gran medida en el contraste de este
elemento. Si se hubieran puesto menos espacios, su destaque sería mucho menor.

El ritmo o repetición de elementos conlleva necesariamente la utilización de espacios en

blanco para lograr el efecto deseado. En la siguiente página web, las imágenes empleadas
forman un patrón de repetición. Este ritmo es destacado por el necesario espacio en blanco
entre cada una de ellas, haciendo que se note claramente que se trata de imágenes repetidas y
no una única imagen.

Formar grupos de información relacionada es un excelente método de organizar la información

para facilitar el acceso a la misma por parte de los usuarios. Necesariamente, estos grupos
deben estar diferenciados unos de otros, por lo que se hace necesario el empleo de espacios
en blanco para conseguirlo. En el siguiente diseño, se han separado cada grupo de información
en forma nítida con espacios.
El temor a los espacios en blanco
Es común que quienes quieren tener una página web, piensen en economizar el espacio con
que cuentan, colocando una gran cantidad de información en ella. Esto hace que se piense en
el espacio en blanco como un desperdicio, por lo que muchas veces se rellenan los mismos o
se minimizan. Como consecuencia de ello, la acumulación de información hace que la mayor
parte de estos contenidos pierdan su visibilidad y sean difíciles de ver en un primer golpe de
vista, algo que resulta muy importante teniendo en cuenta que los usuarios de las páginas web
emplean muy poco tiempo en la localización de objetos.

Existen ejemplos notables de páginas web cuyo diseño se basa en el destaque de unos pocos
elementos, dejando el resto del espacio vacío. Quizá el más paradigmático de esos ejemplos
sea el siguiente:

¿Quién no conoce esta página? Todo el diseño se centra solo en el cometido principal de la
página, por lo que el usuario no tiene que realizar una búsqueda entre otros contenidos para
llegar a lo que realmente le interesa. El resto de la página, un gran espacio en blanco.

Si una de las web más importantes y visitadas del mundo no tiene ningún temor por emplear
los espacios en blanco de esta forma, ¿Por qué habríamos de tenerlo a la hora de realizar
nuestros diseños?

¿Por qué son necesarios los espacios en blanco?

Para dar respuesta a esta pregunta, debemos imaginarnos a un orador dirigiéndose a su
público. ¿Qué sucedería si no hiciera pausas en su discurso? Además de asfixiarse, el orador
no lograría que sus palabras fueran entendidas adecuadamente por su público, ya que el
sentido de las frases está marcado en gran medida por los espacios vacíos, que en el lenguaje
escrito están marcados por las diferentes puntuaciones.
Lo mismo sucede con los diseños web. Si no separamos los contenidos por espacios en
blanco, el diseño no “respira”. Los contenidos pierden visibilidad y destaque y el mensaje que
el conjunto del diseño pretende transmitir se pierde.

Por otro lado, el empleo de márgenes hace que el recorrido de la vista sea más corto, por lo
que le resultará más cómodo. Por esta razón, son muchos los diseñadores que emplean
márgenes amplios, logrando que el conjunto del diseño se vea claramente. La siguiente página
es un claro ejemplo:

El diseñador ha dado buenos márgenes a izquierda y derecha del cuerpo principal, por lo que
el usuario logrará acceder a todos los contenidos de la página con un breve recorrido de la
vista. Además este diseño gana notoriamente en claridad con la utilización de los muy amplios
espacios en blanco que podemos ver en el mismo.

Conclusión
A la hora de realizar un diseño, debemos tener en cuenta desde un principio la utilización de
espacios en blanco, no solo como forma de mantener separados los elementos de la página,
sino que debemos tomarlos como elementos en si mismos.

El espacio en blanco bien empleado, es tan importante para un diseño web como cualquiera de
los demás elementos que se deseen utilizar.

Elementos de diseño web: la textura

La textura es aplicable a todo tipo de diseño. En el arte, en la decoración de interiores, en la

vestimenta, en la construcción de edificios y en general en todo tipo de diseños, desde siempre
se ha empleado la textura como elemento decorativo. Desde siempre se ha contado con la
textura como un elemento importante a la hora de embellecer una obra. Artesanos, artistas,
arquitectos, han sabido emplearla en sus obras con resultados admirables en muchos casos.
Existen dos tipos de textura, la táctil y la visual. Esta última se refiere al efecto que los gráficos
adquieren cuando imitan una imagen en tres dimensiones, gracias a efectos de luces y
sombras.

El diseño web no ha escapado a esta tendencia a decorar elementos o páginas enteras

empleando la textura. En el caso del diseño web, la textura es solo un elemento visual y no
táctil, como en otros casos, y tiene su precedente en la aplicación de la textura en la pintura.

Si bien se ha empleado desde siempre en el diseño web, en los últimos años ha habido una
tendencia al aumento del empleo de la textura, no solo como elemento decorativo, sino como
forma de resaltar otros objetos. Basta  con hacer un recorrido por la web, para comprobar que
la utilización de este elemento de diseño ha ido en aumento, no solo por la cantidad de páginas
que lo emplean, sino por la multiplicidad de formas en que se hace.

Y esto está relacionado con la versatilidad que presenta la textura como elemento de diseño,
ya que abarca a todo tipo de objetos y en una gran variedad de aplicaciones diferentes. Quizá
la forma más simple y más empleada de utilización de la textura, sea en los fondos de las
páginas web. Este fue el primer campo de pruebas para la aplicación de este elemento, para
luego ir incorporándose a casi todo lo que sea imaginable.

Aplicación de texturas como fondo de páginas web

Esta es la forma más sencilla, aún más desde la aparición de las hojas de estilo en cascada
(CSS), de aplicar textura en el diseño web. Para la aplicación de un fondo con textura, basta
con tener una imagen que, repetida, da al visitante la sensación de estar frente a un fondo
hecho con un material con textura. Es bastante sencillo simular un fondo de madera, piedra,
papel o tela, bastando para ello con tener la imagen adecuada.

La aparición de potentes programas de edición de imágenes y creación de gráficos (Adobe

Photoshop, GIMP, Inkscape, Adobe Illustrator, CorelDraw y Xara X, entre muchos otros), no
solo ha dado a los diseñadores web la posibilidad de crear sus propios fondos, sino que han
aparecido una gran cantidad de colecciones descargables de gran calidad, tanto pagas como
gratuitas. Esto ha contribuido enormemente a la expansión del uso de texturas como recurso
decorativo. Este tipo de imágenes son muy comunes y se encuentran muchos sitios donde se
pueden descargar gratis, como por ejemplo:

http://squidfingers.com/patterns/

http://www.kollermedia.at/pattern4u/

http://www.dinpattern.com/

Y algunos ejemplos de imágenes que pueden ser empleadas como fondos y que dan un
aspecto texturado a las páginas web:

Si tenemos algunas imágenes de fondo (patterns), emplearlas como fondo de la web es muy
sencillo, bastando para ello incorporarlo al CSS (tanto si se emplea embebido en el HTML
como si se emplea una hoja independiente). Daremos un ejemplo práctico. Si subimos una
imagen de fondo de nombre fondo.jpg a una carpeta “images” en nuestro servidor, bastará con
colocar el siguiente código:
<body style=”background-image: url(images/fondo.jpg);”>

No habrá necesidad de indicar que se repita, ya que ese es el modo por defecto. De esta
forma, tendremos un fondo formado por la repetición de un patrón. Cuando este patrón da la
sensación de textura, estaremos aplicando el elemento del que es objeto este artículo. La
siguiente página web es un ejemplo de la utilización de fondo con textura:

La textura en la tipografía
Si bien en los textos normales no es recomendable la utilización de ornamentaciones, debido a
la dificultad que puede encontrarse un usuario para leerlos, en los títulos y logotipos es posible
encontrar muchos ejemplos donde se emplean texturas para decorarlos. Las posibilidades son
infinitas y solo se puede contar como límite la imaginación propia.

La utilización de textura en la tipografía no es una novedad, ya que desde la antigua roma

hasta nuestros días pueden verse ejemplos de ello. En las páginas web podemos encontrar
numerosos ejemplos de ello. En la página que hemos seleccionado como ejemplo,
encontramos un par de ejemplos de utilización de la textura en la tipografía.

 
 

La textura como forma de resaltar objetos

Además de ser un excelente medio de decorar una página web, resulta también muy
interesante su utilización como modo de obtener contraste para diferenciar y resaltar algunos
elementos importantes. Su uso en este sentido, ha aumentado mucho en los últimos años,
gracias al incremento de la potencia de los programas de edición de gráficos.

Desde la simple aplicación de una sombra hasta la confección de objetos en tres

dimensiones, la aplicación de la textura se ha convertido en uno de los recursos más
empleados en el diseño web de alta calidad. La siguiente imagen es un ejemplo de ello, donde
el elemento principal, una imagen, se sale de las dos dimensiones y adquiere volumen.

Utilización adecuada de la textura

Como todo elemento de diseño, la textura no siempre tiene cabida. Cuando nos enfrentamos a
la posibilidad de incorporar elementos con textura debemos preguntarnos en primera instancia,
si está de acuerdo con el resto de los elementos. Luego, debemos preguntarnos si el tema de
la web se adecúa a la colocación de elementos texturados. Y al final, en caso de que ambas
respuestas son afirmativas, analizar que clase de textura y en que elementos debemos
colocarla.

Por novedoso que sea un efecto, no siempre es bueno emplearlo. Son muchas las ocasiones
en que encontraremos que un diseño plano se adecúa más a lo que pretendemos. Como
cualquier otro elemento, tiene gran importancia y su utilización puede generar efectos
satisfactorios, pero siempre que se le utilice en forma adecuada y concordante con el resto del
diseño.

El equilibrio en el diseño web

El diseño de una página web incluye el empleo de varias disciplinas, entre las que se encuentra
el diseño gráfico. La presentación visual de una página web es una representación gráfica y
como tal sigue los lineamientos generales del diseño gráfico. Los elementos componentes de
una página web deben ser combinados de forma tal que el objetivo con el que se diseña sea
logrado. Cada componente de la página web tiene una jerarquía respecto de los otros, por lo
que es necesario buscar la combinación de elementos que haga posible que esta jerarquía se
vea resaltada. El diseñador debe lograr que la página tenga la máxima eficiencia
comunicativa que sea posible. Esto solo es posible mediante el impacto visual, logrado con la
correcta disposición de los elementos.

Para que el mensaje llegue al usuario, todos los elementos deben estar equilibrados. Este
equilibrio tiene una serie de reglas básicas que todo diseñador de páginas web y diseñador
gráfico debe conocer. Sin embargo, un error frecuente en el diseño es realizar el mismo para
luego introducir los componentes, cuando en realidad el diseño debe estar pensado para que
los componentes se vean de tal forma que el mensaje llegue en forma correcta al usuario.

Equilibrio de las proporciones

Cada componente de una página web tiene un peso visual, el cual depende de sus atributos,
como forma, color, tamaño, etc. Este peso visual, es la proporción. Lo primero que se nos
ocurre al hablar de proporción, es el tamaño relativo del objeto en cuestión. Un elemento más
grande que otro, tiene una atracción visual superior que el segundo. Pero además, la carga
visual de un elemento también depende de otros atributos, como el color. Un objeto de color
saturado, tiene un peso visual superior que otro cuyo color tiene una saturación menor.  Las
formas tienen también influencia en la proporción de los elementos. Así pues, un elemento de
forma irregular tiene mayor atracción visual que un objeto de forma regular.

Todos estos atributos deben guardar una proporción tal que los elementos que se desee
resaltar sean más visibles que otros, pero de forma tal que tampoco los elementos secundarios
“desaparezcan”. Hay muchas formas de conseguir que las proporciones de los diferentes
objetos se adecúen al fin perseguido.

Equilibrio de las escalas

Las proporciones de los diferentes elementos de un diseño tienen una relación entre sí que
denominamos escala. Esta escala, que en principio pensamos exclusivamente en relación al
tamaño de los objetos, abarca a todos los atributos de los mismos. Esto quiere decir, que
deben tenerse en cuenta las escalas de tamaño, de forma, de color. Cada uno de los atributos
de un objeto, tiene una dimensión, la cual no es absoluta, sino relativa, ya que depende de los
atributos de los demás objetos. Por ejemplo, un cuadrado de 120 pixeles de lado es grande si
se encuentra junto a otro de 60 pixeles, pero es chico si se le relaciona con uno de 200 pixeles.
Lo mismo sucede con los colores. Un objeto de color amarillo sobre fondo negro es más
llamativo que uno de color gris ubicado a su lado; sin embargo, el mismo elemento amarillo,
sobre fondo blanco es mucho menos llamativo que un objeto de color rojo ubicado también a su
lado.
La escala, en definitiva, es muy importante para relacionar objetos de diferentes
proporciones. Todo diseño equilibrado debe estar integrado por elementos que mantienen una
cierta relación entre sus proporciones. Un ejemplo práctico lo vemos en el siguiente diseño,
donde (solo por tomar la relación existente entre algunos de sus elementos) la escala del
encabezado y del menú, tienen una relación tal que la atención fluye rápidamente hacia el
primero, pero con una diferencia tal que hace posible que el menú sea visible para los usuarios
y dar una buena navegabilidad a la página. El equilibrio de las escalas, en este ejemplo, puede
apreciarse en el tamaño, en el color y en las formas.

Agrupación de elementos
Dentro de las reglas del equilibrio de un diseño, debe tenerse muy presente que una de las
formas de lograr un mejor equilibrio entre los diferentes elementos, es la agrupación de los
mismos. La agrupación, además, consigue otro factor importante en un diseño, que es el
orden. La agrupación de elementos es natural en el ser humano, que tiene la tendencia a
colocar juntos a objetos afines. Esto, en el diseño de páginas web, tiene como finalidad darle
lógica y racionalidad a la ubicación de los diferentes elementos, de forma tal que la
comunicación del mensaje sea efectiva.

Los componentes de una página pueden agruparse de acuerdo a varios criterios:

 Por proximidad, la forma más elemental de agrupar los objetos, que

consiste en agruparlos de acuerdo a su cercanía física.
 Por semejanza, que consiste en agrupar objetos de acuerdo a su parecido
visual.
 Por continuidad, es decir, de acuerdo al significado de los elementos.
 Por simetría, que es agrupar objetos de manera tal que den la sensación de
conformar una figura conocida o simétrica.

La agrupación es uno de los equilibrios más sencillos de ver en un diseño web. Es muy común,
por ejemplo, ver agrupaciones de imágenes, o que los textos se encuentren en un lugar
determinado de la página, los botones de navegación siempre están agrupados en un menú,
etc.

Alineación del diseño

Para que la composición no aparezca como caótica, los diferentes elementos y grupos de
elementos deben aparecer ordenados de acuerdo al trazado de líneas imaginarias, tanto
verticales como horizontales, que se denominan reticulado. La alineación es importante,
debido a que cuando se colocan muchos objetos dentro de un diseño, la forma más sencilla de
que los usuarios logren ubicarlos e identificarlos es que se encuentren alineados. Esto se ve
acentuado por el hecho de que la propia forma de los monitores es rectangular, por lo que el
ordenamiento según líneas rectas es algo natural. En la imagen siguiente, vemos una página
alineada, tanto vertical como horizontalmente y donde resulta muy sencillo trazar líneas
imaginarias sobre las que se encuentran los componentes:

La alineación de los textos, es además, un aspecto importante en la comunicación. Lo usual,

siguiendo la tradición escrita, es que los mismos se encuentren alineados a la izquierda,
aunque excepcionalmente y debido a ciertas circunstancias, los textos pueden aparecer
alineados a la derecha, centrados o justificados, aunque lo recomendable, para facilitar la
lectura, es que se emplee la primera de las alineaciones.

Equilibrio de contenidos
Toda página web está integrada por elementos textuales, gráficos y ocasionalmente con
contenidos de otros medios. Desde el punto de vista del diseño de una página web, y dado la
relevancia de los dos primeros, nos referiremos al equilibrio entre los elementos gráficos y
textuales. Los elementos textuales son indispensables, ya que aportan la mayor parte de la
información que se desea transmitir. Los elementos gráficos, además de también hacer
aportes de información, suministran las sensaciones visuales necesarias para acompasar y
resaltar el sentido del mensaje de la web.

El abuso de cualquiera de los dos tipos de elementos es contraproducente, ya que los usuarios
necesitan la información por la que llegan a la página, pero también necesitan sentirse atraídos
por el lenguaje visual. Por consiguiente, el equilibrio entre estos tipos de componentes de una
página, es fundamental.

Jerarquía visual
Una página web equilibrada debe mantener una cierta jerarquización de los contenidos, de
forma tal que la vista del usuario sea guiada en forma adecuada a través de los mismos. La
jerarquización de los componentes comienza con la ubicación de los mismos. Dado que el
sistema de lectura empleado en occidente es de izquierda a derecha y de arriba hacia abajo,
existe una tendencia natural en los individuos a recorrer los objetos gráficos en ese orden. Por
consiguiente, es natural que el elemento más importante de una página web (su logotipo) se
encuentre ubicado en la esquina superior izquierda o muy cerca de ella, seguido hacia la
derecha por el título de la página.
La jerarquización de los elementos componentes de una web, puede realizarse también
empleando colores y contraste. Todo contenido de una página web debe tener establecida su
jerarquía en la misma, empleando para ello cualquier técnica de diseño.

Elementos de diseño web: la línea

El diseño web se encuentra compuesto por varios elementos, cuya procedencia y destino son
variados y todos ellos son parte importante de todo diseño. La línea, la forma, el color, la
textura y la tipografía hacen que cada diseño se vea en una forma particular y participan de la
idea general que se quiere dar.

Cada uno de estos elementos puede colaborar en el mensaje que se quiere transmitir. Todo
elemento colocado en un diseño debe colaborar en la idea que se desea transmitir. La línea,
como cualquiera de los demás elementos, debe estar acorde con el resto del diseño, de forma
tal que se acompase con la idea.

A pesar de la simpleza de la línea, este elemento es esencial en todo diseño y por sí misma
puede transmitir sentimientos e ideas, lo que hace que pueda formar parte del mensaje
general. Veamos algunos ejemplos.

En la vida cotidiana recibimos muchos mensajes transmitidos a través de las líneas, como
señales de tránsito, alertas y avisos. Las siguientes imágenes son una muestra de ello, las
que seguramente todos conocemos y pocas veces somos capaces de advertir que se trata de
sencillos mensajes transmitidos a través de líneas.
En los símbolos que aparecen en la imagen anterior, podemos ver símbolos nacionales (o de
idiomas), matemáticos, astrológicos, religiosos, señales de tránsito y símbolos monetarios,
todos los cuales son fácilmente identificables a pesar de estar compuestos por líneas, en su
mayoría extremadamente simples. Para la mayoría de la gente estas simples líneas tienen un
significado e inclusive pueden representar sentimientos.

En el diseño de páginas web, la línea adquiere además otras connotaciones, ya que pueden
servir como elementos que contribuyan con la estructuración y organización, resaltado y
destaque de diferentes contenidos, como veremos a continuación.

La línea en la estructura del diseño

La separación de los contenidos es esencial para conseguir claridad en el mensaje. Dos
contenidos de características similares que se encuentren próximos, corren el riesgo de perder
visibilidad, lo que requiere que el diseñador separe estos elementos. Una de las formas más
simples pero a la vez más efectivas de hacer esto es a través de líneas.

La estructura de una página web puede ser marcada con mucha mayor claridad cuando se
emplean líneas para separar los diferentes componentes de la estructura. En la siguiente
captura de pantalla podremos ver un ejemplo claro:

En este excelente diseño, la simplicidad es el motivo principal. Para conseguir resaltar algunos
elementos y separar otros, el diseñador empleó líneas horizontales, algunas sencillas y otras
dobles, consiguiendo un efecto minimalista que hoy en día se encuentra de moda. En otros
diseños podremos apreciar también el empleo de líneas verticales para separar columnas o
como bordes para separar y estructurar los diferentes contenidos.

Empleo de líneas para resaltar objetos

A la hora de resaltar o destacar algunos contenidos, existen muchas formas de hacerlo. Una de
ellas es la utilización de líneas, que pueden simplemente estar subrayando un texto o
formando un contorno en torno a cualquier contenido. Es una práctica bastante habitual, en la
que los diseñadores seleccionan un tipo de línea para conseguir un contraste con el resto de
los contenidos de la página.

Hemos seleccionado la siguiente imagen (una captura de pantalla) para mostrar como un
diseñador web ha empleado líneas para conseguir que algunos elementos de esta página se
destaque del resto de los contenidos.
En la página que hemos tomado como ejemplo, en la parte superior encontramos un sencillo
menú de navegación. Encima de cada uno de los links que allí encontramos, puede apreciarse
una línea bastante ancha de color, cuya finalidad es atraer la atención de los usuarios hacia el
menú y facilitar de esta forma la navegación.

En el mismo ejemplo, cada una de las imágenes que se muestra en la página se encuentra
bordeada por una gruesa línea blanca, que provoca una clara separación visual del fondo. De
no haberse empleado este recurso, la visibilidad de las imágenes habría disminuido
considerablemente, afectando la estética general de la página.

Como emplear los atributos de las líneas

Como elemento simple que es, la línea posee pocos atributos, por lo que las variaciones que
pueden aplicarse en ella son pocas. Sin embargo, el hecho de que la línea sea un elemento
simple, la variación de cualquiera de sus atributos genera diferencias muy notorias y, por
consiguiente, efectos muy disímiles.

Longitud y grosor de la línea

A la hora de seleccionar una línea para incluir en un diseño, podremos optar por diferentes
longitudes para conseguir el mismo efecto, pero con una notable variación estética. Una línea
que atraviese la página en todo su ancho puede ser empleada para dividir en secciones o
separar el encabezado del resto de la página, mientras que una línea con iguales atributos,
excepto porque su longitud es mucho más corta, puede ser empleada para determinar el final
de un texto.

Lo mismo sucede con los grosores. En el ejemplo siguiente, una línea gruesa tiene un cometido
diferente del resto de las líneas que en este diseño podemos apreciar. La línea gruesa es la
que se emplea para separar al encabezado de la página del resto de los contenidos, mientras
que líneas más finas separan los diferentes contenidos entre si.
El color de la línea
Al igual que otros elementos, el atributo color sirve en las líneas como elemento decorativo y
como elemento diferenciador. El contraste es un principio de diseño que puede emplearse aún
en aquellos elementos más simples que componen una página web, por lo que el contraste
conseguido a través del color, puede hacer que ciertos elementos decorados o separados con
líneas puedan obtener una diferenciación.

Tipo de línea
Las líneas pueden ser simplemente una secuencia de puntos ordenados, que en un golpe de
vista identificaremos como una línea. Es el caso de las líneas punteadas o compuestas por
guiones, empleadas con mucha frecuencia en el diseño de páginas web. Otro tipo de línea,
aunque empleado con mucho menos frecuencia, es la línea irregular, como las que veremos
en el ejemplo siguiente, acompañadas de líneas regulares:

Elementos de diseño web: la forma

Otro de los elementos de diseño web (al igual que en diseño gráfico y otros tipos de diseño)
es la forma. Su importancia radica en la estrecha relación que tiene este elemento con el
mundo real. Basta con mirar en nuestro rededor para notar que la forma es el elemento más
fácilmente distinguible y el más abundante. Además, resulta mucho más sencilla la
interpretación de los mensajes visuales que otros, y la forma es el de más sencilla captación de
todos los elementos visuales.
Como forma nos referimos a la figura espacial de los cuerpos, por lo que necesariamente tiene
dos o tres dimensiones. En el diseño web pueden representarse las formas en su estado
natural a través de las imágenes, o emplearse representaciones abstractas de las mismas.
Esto se logra gracias a la capacidad humana de abstraer. A pesar de que el diseño web tiene
dos dimensiones, gracias a la utilización de luces y sombras un elemento de dos dimensiones
puede brindar la sensación de un elemento de tres dimensiones o representarlo en forma
abstracta.

La forma es empleada en muchas ocasiones como método de lograr una comunicación sencilla
y de fácil interpretación. En el diseño web muchas veces es necesario transmitir mensajes en
forma rápida, para lograr atraer la atención del usuario hacia ciertos puntos o darle a entender
donde se encuentran determinados objetos con facilidad.

El empleo extendido de la forma por parte de diseñadores y programadores ha hecho que

muchos símbolos e íconos basados en la forma sean de comprensión sencilla, facilitando de
esta manera el acceso de los usuarios a los diferentes medios, opciones y servicios que
contiene la web.

Tipos de forma y su utilización en el diseño web

Las formas pueden dividirse en tres tipos básicos: las formas geométricas, las formas
naturales y las formas abstractas. Las formas geométricas es en lo primero que pensamos
cuando se habla de formas. No son frecuentes en la naturaleza dada la regularidad de las
mismas. Los cristales son uno de los pocos ejemplos de formas geométricas naturales. El
empleo de la forma geométrica en todo tipo de diseño es muy frecuente, dado que
generalmente se trata de objetos simétricos y regulares, lo que brinda a quien lo contempla,
sensación de seguridad, orden y prolijidad. Las formas geométricas más usuales en el diseño
web son el cuadrado, el rectángulo, el triángulo y el círculo. La página que mostramos a
continuación es un ejemplo de empleo de la forma geométrica.

Las formas naturales también tienen un empleo frecuente, ya que permite una rápida
asociación con un mensaje. La mayoría de las formas naturales empleadas en el diseño web
son extraídas de imágenes. La siguiente página web nos muestra un ejemplo de ello:
Las formas abstractas constituyen el terreno menos explorado, aunque en los últimos años se
ha producido un incremento en su empleo, gracias a la aparición de nuevas tendencias en el
diseño, asociadas a tendencias artísticas como el arte abstracto o el pop art. Dentro de esta
categoría también se incluyen aquellos elementos creados para representar algo sin emplear
una imagen del mismo.

Un claro ejemplo de esto son los íconos, que sirven para que los usuarios reciban el mensaje
de que desde allí se puede acceder a un contenido, mediante una representación gráfica
basada en una forma. El siguiente es un ejemplo de utilización de formas abstractas:

En este ejemplo, el logotipo está formado por una forma que es la abstracción de un corazón.
Si bien todos sabemos que se trata de un corazón, en realidad no es la imagen de un corazón,
sino de una representación abstracta del mismo. Muchas formas abstractas son símbolos
empleados universalmente y se las emplea para enviar a los usuarios un mensaje de fácil
comprensión.

Utilidad de la forma en el diseño web

Como cualquier otro elemento de diseño web, la forma puede emplearse de muchas formas y
en múltiples funciones. El único límite con que cuenta el diseñador es el límite que tenga su
propia imaginación.

La forma puede servir como método para agregar interés al diseño. La forma como elemento
decorativo es un excelente recurso y puede utilizarse como fondo, como decoración de
espacios en blanco o para ilustrar contenidos. La repetición de una o varias formas da lugar a
motivos que pueden ser empleados como fondo de diseño. Este es el fundamento de los
pattern o fondos decorativos.

También sirve como forma de mantener el interés. Si, por ejemplo, una página web debe
presentar un texto extenso, la utilización de formas como elemento decorativo puede hacer
que el lector no pierda el interés al extenderse en la lectura. Las listas no ordenadas, llevan al
inicio de cada ítem algún tipo de forma. Lo más frecuente en este tipo de decoraciones es el
uso de formas geométricas, aunque también pueden emplearse formas naturales (una hoja,
una flor, un animal, etc.).

Otra función aplicable a la forma es la de organizar o separar elementos. La separación entre

contenidos y secciones se ve enormemente enriquecida con la aplicación de formas. Así el
diseñador puede organizar la página en secciones y separar los elementos entre si, algo que
resulta imprescindible para brindar, además de dar un aspecto ordenado, una división entre los
diferentes elementos que permita una mejor visibilidad de los mismos.

Algo que resulta imprescindible en todo buen diseño, es dirigir la vista del usuario por las
secciones que el diseñador entiende que son más importantes. La utilización de formas como
elemento para dirigir la vista del usuario es muy recurrente en el diseño de páginas web, ya
que los atributos de la forma son ideales para llamar la atención de los lectores hacia aquellas
secciones de mayor interés. La colocación de una forma colorida y llamativa junto a un texto,
dirigirá fácilmente la atención del usuario hacia el mismo.

La forma tiene una serie de atributos que permiten al diseñador explorar una gran cantidad de
posibilidades, tanto desde el punto de vista decorativo como medio para entregar un mensaje al
usuario. Esto se debe en parte a que tenemos la tendencia natural a interpretar mejor los
contenidos visuales. De todos los elementos de diseño, la forma es el que mayor cantidad de
posibilidades ofrece al diseñador.