Diseño Web

1 Diseño de páginas web

Aprender a diseñar sitios web, estudiar cuáles son las técnicas más importantes,

cuándo aplicarlas y cómo desarrollarlas valiéndonos de los principales programas de

diseño web que existen actualmente, es el objetivo fundamental de esta unidad

didáctica.

1.1. Conceptos generales y técnicas de diseño

El diseño web es una actividad multidisciplinar y reciente, tanto como lo es Internet. Se alimenta de fuentes como el diseño gráfico y las artes visuales, la programación de aplicaciones informáticas, el diseño de interfaces, la redacción de contenidos, la animación tradicional, la publicidad, el marketing y otras muchas.

Diseñar es un proceso creativo que combina arte y tecnología para comunicar ideas.

El diseñador trabaja con una serie de herramientas con la intención de hacer llegar el mensaje de un cliente a una audiencia determinada.

Internet es un medio de comunicación y, como todo acto de comunicación, consta de los siguientes elementos: emisor, receptor, canal, código, mensaje y situación o contexto.

Emisor:

Es la persona de la que sale el mensaje; por lo tanto, asignaremos este papel al cliente. Con el diseño que vamos a realizar debemos transmitir el mensaje del cliente de manera que pueda cumplir sus objetivos y su imagen salga reforzada.

Es fundamental, por tanto, escuchar las necesidades de éste y planificar el desarrollo de los sitios Web; así, el cliente puede ir realizando un seguimiento y dando su aprobación en diferentes etapas, con lo que evitaremos que, en caso de tener que realizar modificaciones, éstas nos supongan demasiado trabajo.

Receptor:

Es la persona a la que llega la información, es decir, es el usuario de la web y el destinatario del mensaje elaborado por el emisor. Daremos especial importancia a los usuarios a la hora de realizar una web. Es importante conocer cómo son, cómo acceden a Internet y qué es lo que hacen cuando visitan nuestra web.

Canal:

Es el medio físico por el que se transmiten los mensajes; en este caso, ese medio será Internet. Por lo tanto, cuanto mejor conozcamos cómo funciona, cuáles son sus ventajas, sus limitaciones y las tecnologías que se pueden emplear, mayor provecho le podremos sacar.

Código:

Es el conjunto de rasgos del mensaje necesarios para que éste pueda se ser entendido por el emisor y por el receptor. En el caso de la web, la comunicación entre personas permite una comunicación entre ordenadores. Hay un código (visual y escrito) que usamos para comunicarnos con los usuarios, y hay un código que usan los ordenadores para comunicarse entre ellos.

Mensaje:

Es aquello que se quiere transmitir. Además del significado literal de los textos de la página web, existen otros muchos factores que también comunican. El hecho de que una web no funcione bien no significa que ésta no transmita información, sino todo lo contrario, pero la información que se transmite en este caso es negativa. La tipografía, el color, las imágenes, los sonidos, el movimiento y otro tipo de elementos como éstos aportan información sobre cómo están presentados sobre la página, información que se añade al mensaje.

Situación o contexto:

Es la situación extralingüística en la que se desarrolla el acto comunicativo.

El diseñador es el eslabón entre el emisor y un público más o menos amplio, al que va destinado ese mensaje. Se trata de crear, elegir, organizar y disponer toda la información para la visualización de textos, gráficos, sonido e, incluso, el espacio en blanco empleado para comunicar un mensaje.

Desde el punto de vista técnico, una página web es un documento HTML. Pero, ¿qué es el HTML?

Además, este lenguaje permite enlazar documentos por medio de hipervínculos, lo que, a su vez, permite la interacción del usuario de una forma nueva, sin precedentes en los documentos impresos. El uso de enlaces supone el paso de estructuras lineales de comunicación a estructuras interactivas más complejas.

El receptor no es un sujeto que recibe pasiva y linealmente la información, sino que realiza una secuencia de acciones que determinan la continuidad del mensaje que queremos transmitir.

Se debe crear un entorno en donde los usuarios puedan explorar fácilmente y, a la vez, conseguir transmitirles el mensaje que nuestras páginas ofrecen.

Las tres actividades fundamentales al visitar una página web son:

- Ver imágenes.

- Leer textos.

- Interaccionar con el interfaz.

La informática tiene un peso muy importante en la creación y la gestión de sitios web. En ella intervienen muchas tecnologías, tanto aquéllas relativas a la transmisión de la información (servidores, protocolos, etc.), como las que hacen referencia a la recuperación y la gestión de datos (bases de datos, programación del lado servidor), y a la presentación en pantalla (programación del lado cliente).

Para la creación de sitios web complejos normalmente se dividen las tareas entre diseñadores y programadores. Incluso en estos casos a los diseñadores les toca un tipo de programación que se encarga de cosas como cuando pasas sobre un botón y éste cambia de color y se reproduce un sonido.

Pero no es necesario saber programar para publicar en Internet. El contenido de este manual gira en torno al uso de herramientas que asisten a la creación de páginas web.

Podemos distinguir cinco áreas que cubren las principales facetas del diseño web:

El aspecto final de la web se verá influenciado por cada una de estas áreas en mayor o menor medida, dependiendo del tipo de sitio web que estemos desarrollando.

Para conseguir un buen diseño de una página, sea para web o sea para imprenta,es necesario proporcionarle una forma que sea funcional y transmita un mensaje.

Se combinan diferentes elementos (como texto, imágenes, iconos, enlaces o cualquier otro) en un conjunto equilibrado, ordenado, funcional y bello.

Pero existe un factor artístico, y esto no puede ser analizado en términos objetivos.

La creatividad y la innovación son fundamentales en el diseño. Decidir si un diseño es bueno o malo puede resultar subjetivo, pero debemos tener en cuenta que hay ciertos principios básicos del diseño, generalmente aceptados, que hay que conocer.

1.1.1. La tipografía

Al conjunto de símbolos que sirven para representar un lenguaje se le denomina letras. En imprenta y tipografía, se denominan tipos los signos empleados para hacer moldes. En medios digitales reciben el nombre de caracteres.

Se denomina tipografía al estudio, diseño y clasificación de los tipos (letras) y las fuentes (familias de letras con características comunes), así como al diseño de caracteres unificados por propiedades visuales uniformes. Se entiende por tipometría el conjunto de técnicas destinadas al tratamiento tipográfico y a la medición de textos.

La tipografía cumple una doble función: como medio de comunicación verbal y como medio de comunicación visual. El lector primero visualiza los gráficos y la estructura y, posteriormente, el contenido.

Una buena tipografía permite que el texto sea legible, establece jerarquías, separa los encabezados del cuerpo, provee de signos de puntuación y, en definitiva, ayuda a la comprensión del texto y a lograr un resultado estéticamente bello.

Los medios digitales tienen unas necesidades y realizan un tratamiento de las fuentes muy diferente al de las imprentas tradicionales, pues lo que funciona en la imprenta no siempre se adapta bien a un monitor.

Desde el punto de vista del diseño, clasificamos las fuentes según su estilo, en:

La forma de esta fuente se debe a su origen primitivo, cuando eran cinceladas a mano. Los talladores, ante la dificultad de hacer los remates rectos, desarrollaron una técnica que consistía en destacar las líneas cruzadas para el acabado de casi todas las letras, por lo que las letras presentaban en sus extremos unos remates muy característicos, conocidos con el nombre de serif.

Todas las de esta categoría, por tanto, tienen serif. En las minúsculas, el serif tiene un ángulo, denominado ángulo de la pluma. Se producen en el trazo unas zonas más finas y otras más gruesas, y la transición entre éstas se produce de manera suave.

Se llama línea de estrés o modulación a una línea que atraviesa las zonas

más finas del trazo; en estas fuentes es diagonal.

Para una persona que no sea experta en tipografía, todas ellas pueden resultar muy similares. En esto radica su ventaja, en que no son llamativas por sí mismas. Por eso son perfectas para textos largos. Los trazos finos y los remates ayudan al ojo a fijar y seguir una línea en un conjunto de texto, facilitando la lectura rápida y evitando, consecuentemente, la monotonía.

Modernas:

Con el paso del tiempo, la estructura de los tipos fue cambiando. Se vivieron distintas tendencias en la tipografía, como sucede en otros campos (por ejemplo, la moda o la arquitectura). Es a partir del siglo XVIII cuando las técnicas de imprenta y los tipos se mecanizan. Ya no siguen, desde es el momento, el trazado a mano, aunque mantienen el serif, pero éste es ahora horizontal y muy fino. El contraste entre los trazos más finos y los gruesos es mucho mayor, y, en ocasiones,

...