Toda obra de diseño conlleva la elección de los elementos básicos que la van a formar, la agrupación de estos en unidades lógicas inter-relacionadas y la distribución de las mismas en el total de la composición.

Los elementos básicos del diseño gráfico y del diseño web ya los hemos estudiado en capítulos anteriores de este curso, así como, en los inicios, las consideraciones perceptivas de los mismos, sus formas básicas constituyentes, la influencia del color y el uso correcto de la tipografía.

Las piezas gráficas elementales normalmente no se presentan aisladas, sino que se agrupan en entidades lógicas y funcionales, tratando de expresar cada una de ella algún tipo de información concreta al espectador. En estas unidades complejas cada elemento transciende su significado individual, que es influenciado por el resto de elementos que le rodean y acompañan, siendo del todo aplicable la máxima de que el todo es mucho más que la suma de sus partes.

El proceso de agrupación no se detiene en este punto, pues las entidades creadas se vuelven a unir entre sí en un proceso encadenado que culmina con la composición gráfica final, que contendrá un significado propio y único, resultado conjunto de todos y cada uno de los elementos visuales que la forman.

Una composición gráfica puede estar destinada a transmitir de forma visual un mensaje concreto (un cartel, por ejemplo), que puede verse reforzado por contenidos textuales en mayor o menor grado.

También es posible que su misión sea representar un objeto real que será utilizado por personas para realizar cualquier tarea (un automóvil, por ejemplo), destino principal de la mayoría de los diseños industriales.

O tal vez sirva para representar un medio de comunicación entre personas y ordenadores (una interfaz de usuario de una aplicación informática, por ejemplo), que será construido a partir de la composición.

Este último caso es el que nos interesa a nosotros, sobre todo el diseño gráfico aplicado a la construcción de interfaces web, medio de interacción entre los usuarios y el conjunto de páginas de un sitio web y las aplicaciones que corren por debajo de ellas.

Vamos a estudiar en este capítulo qué es una interfaz web y los principales elementos gráficos que la forman, su naturaleza, sus funcionalidades, y su ubicación dentro de la página misma, teniendo siempre presente que la interfaz será el medio de comunicación entre los navegantes que acceden a una página web y el sitio web completo, el conjunto de sus páginas y las aplicaciones que corren por debajo de forma transparente al usuario.

Introducción a las Interfaces de usuario

La Real Academia Española define el término interfaz (del inglés interface, superficie de contacto) como una conexión física y funcional entre dos aparatos o sistemas independientes. Generalizando esta definición, dados dos sistemas cualesquiera que se deben comunicar entre ellos la interfaz será el mecanismo, entorno o herramienta que hace posible dicha comunicación.


Esta definición es amplia en sí misma, utilizándose para describir multitud de entornos de comunicación entre sistemas físicos, eléctricos, electrónicos y lógicos, utilizándose por ejemplo para referirse a los procedimientos físicos y lógicos que permiten relacionarse a dos capas diferentes de la arquitectura de comunicaciones en red TCP/IP, a cualquier dispositivo que permite establecer una comunicación entre dos aparatos de diferente naturaleza o a determinados componentes de software que habilitan el entendimiento correcto entre dos aplicaciones u objetos lógicos.

Cuando uno de los sistemas que se comunican es un ser humano pasamos al concepto de interfaz de usuario. Por un lado tenemos un sistema físico o informático y por otro a una persona que desea interaccionar con él, darle instrucciones concretas, siendo la interfaz de usuario la herramienta que entiende a ambos y es capaz de traducir los mensajes que se intercambian.

Las interfaces de usuario son utilizadas en multitud de sistemas que nos rodean y hacen nuestra vida más cómoda y segura. Los ingenieros y diseñadores industriales han venido trabajando en este campo desde hace mucho tiempo, creando sistemas de comunicación adecuadas entre los objetos que crean y los usuarios de los mismos. Interfaces de usuario de este tipo pueden ser, por ejemplo, el sistema de botones de control de un televisor o el mando a distancia que lo controla, los diferentes mecanismo de control de un automóvil o los sistemas de puesta en hora de un reloj.


Inicialmente las interfaces de usuario eran desarrolladas pensando solamente en su correcto funcionamiento, luego se comprobó la necesidad de que fueran fácilmente usables y después se hizo patente la importancia de la estética en las mismas, punto en el que el diseño gráfico entró de lleno en el mundo de las interfaces de usuario. Un sistema de este tipo no sólo tiene que funcionar, debe ser bello, acorde con las inquietudes estéticas del mundo que nos rodea. Colores, formas, agrupaciones y comunicación forman en la actualidad parte indispensable de una interfaz de usuario.

Con la aparición de los ordenadores y su posterior popularización se hizo patente la creación de mecanismos que hicieran posible a un usuario medio comunicarse de forma correcta con los sistemas operativos y las aplicaciones que en ellos se estaban ejecutando, sistemas que no son más que interfaces de usuario.


Estas interfaces se crearon en un principio en modo comandos, pero su utilidad práctica era limitada, ya que no eran aptas para usuarios normales que no poseían conocimientos avanzados de informática. Fue necesario entonces crear interfaces basadas en iconos y menús, accesibles por medio del ratón, surgiendo los entornos de ventanas, como Windows o MAC, que empezaron a utilizar interfaces gráficas de usuario, verdaderas protagonistas del mundo informático actual.

Estamos tan acostumbrados a las interfaces gráficas que se puede afirmar que si desaparecieran la gran mayoría del los usuarios de aplicaciones informáticas quedarían anulados. Tanto es así que sistemas operativos y programas que antes funcionaban casi exclusivamente en modo de comandos han tenido que actualizarse y ofrecer a los usuarios interfaces gráficas equivalentes para no quedarse olvidados por el público general.

Interfaces de usuario en la web

Así estaban las cosas cuando se produjo un fenómeno sorprendente, llamado a revolucionar la comunicación entre seres humanos: Internet y la WWW. Con la aparición de la web se hizo posible que cualquier persona pudiera ofrecer información particularizada a los demás y encontrar documentos interactivos sobre cualquier tema, relacionados unos con otros mediante enlaces que permitían saltar de página en página alrededor del mundo.

Las páginas web supusieron la aparición de las interfaces web, interfaces gráficas de usuario con unos elementos comunes de presentación y navegación que pronto se convirtieron en estándares de facto. Este tipo de interfaces deben servir de intermediarias entre unos usuarios genéricos, no acostumbrados generalmente al uso de aplicaciones informáticas, y unos sistemas de información y procesos transaccionales que corren por debajo, debiendo posibilitar la localización de la información deseada, el entendimiento claro de las funcionalidades ofrecidas, la realización práctica de tareas específicas por parte de los usuarios y la navegación intuitiva por las diferentes páginas que forman el sitio web.

Buscando una homogeneidad entre los millones de páginas web que existen actualmente en Internet, el diseño de las mismas ha evolucionado con el tiempo hacia un esquema general perfectamente definido, ofreciendo unas interfaces bien definidas, con un conjunto de componentes gráficos y funcionales similares que hacen posible que sea cual sea el usuario que accede a un sitio web cualquiera la comunicación entre ellos sea posible y efectiva.

De esta forma se han definido elementos y agrupaciones de estos que han demostrado su utilidad y su comprensión por los usuarios, entre los que podemos destacar los sistemas de navegación, los dinteles, los pies de página, los formularios de entrada de datos, etc., que normalmente encontraremos en todas las páginas web y cuyo diseño y funcionalidad son similares en todas ellas.

En los próximos artículos iremos revisando cada una de las principales interfaces de usuario que puedes encontrar en una web. El primer ejemplo de interfaz web que veremos será el dintel.