Apuntes web 01

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS

01 ARQUITECTURA 02 DISEÑO 03 LA INTERFAZ 04 MAQUETACIÓN 05 PROGRAMACIÓN 06 ACERCA DE FLASH 07 PUBLICIDAD EN INTERNET

REGLAS GENERALES DEL DISEÑO GRÁFICO 1. Convencionalidad Los códigos gráficos deben ser culturalmente vigentes. La idea de «nuevos lenguajes gráficos» resulta absurda si no se entiende.

2. Originalidad La originalidad compensa la convencionalidad al darle relevancia al mensaje. No obstante cada caso requiere un grado de originalidad o de convencionalidad diferente. Se creativo, busca nuevas soluciones y formas de pensar.

3. Eficacia Ha de cumplir, como mínimo, todas las funciones para las cuales ha sido creado. Valores, como por ejemplo la estética, no puede anteponerse a la eficacia de la comunicación, sino por el contrario, potenciarla.

4. Propiedad La gráfica debe ajustarse a la identidad y la necesidad del cliente que efectúa el encargo; no consiste en hablar del emisor sino en hablar como él.

5. Respeto Tal como sucede con el emisor, la gráfica debe ajustarse y respetar los códigos del receptor. Se habla para él, para que él entienda.

6. Densidad Entre lo vacío y lo lleno debe haber una relación de sentido.

Nuiestro mensaje debe carecer de zona privadas de sentido. Si al eliminar un elemento nada se pierde, es porque ese elemento sobraba.

7. Economía El despilfarro es comunicacionalmente negativo. No debe contener redundancias superfluas o excesos gráficos.

8. Anonimato La comunicación publicitaria debe ser autónoma, libre de referencias a su proceso productivo o su autor. Pertenece al emisor y su producción debe volverse invisible. El diseño es un servicio, trabaja y diseña con objeto de satisfacer las demandas de sus clientes y los grupos a los que está destinado su trabajo.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 1 A menudo se confunden los términos “sitio” y “página”. El “sitio” hace referencia a una ubicación completa, y no a una “página” concreta del mismo. Un sitio web se refiere siempre a la totalidad del contenido albergado en un servidor (host) en la World Wide Web, mientras que lo que muestra el navegador es una página web individual. La página principal de un sitio web se denomina página de inicio o portal.

El papel de un sitio web es crear presencia, comunicación y transparencia. El mantenimiento de un sitio web implica la atención hacia su estructura, diseño, funcionalidad y contenido; lo que no debe faltarle nunca es la calidad de contenido e información y un sistema de orientación intuitivo para el usuario.

Estas son las preguntas que uno debe hacerse al iniciar el desarrollo de un sitio web complejo: • ¿Cuál es su propósito? ¿Qué es la web para el cliente?

• ¿De qué modo la construcción de un sitio web apoyará este propósito?

• ¿Cuáles son los objetivos a medio plazo?

• ¿Cuáles son los objetivos a largo plazo?

• ¿Qué estrategias relacionadas con la Red se utilizarán para alcanzar estos objetivos?

• ¿Cómo se medirá el éxito del sitio web?

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0

n DEFINIENDO LOS OBJETIVOS Una declaración clara identificando dos o tres de los objetivos debería ser la base de la construcción de un sitio web. Una declaración con las estrategias específicas acerca de cómo se va a edificar; cual será el tiempo dedicado al diseño, a la construcción y a la evaluación; y con las medidas cuantitativas y cualitativas específicas para la posterior evaluación de su puesta en marcha. Construir sitios web no es un proyecto puntual donde se colocan contenidos estáticos, sino un proceso que continúa en el tiempo.

Aspectos como los contenidos editoriales a largo plazo o el mantenimiento deberían estar definidos ya en los primeros planes de producción y presupuestos. Sin esta perspectiva, la publicación electrónica sufrirá el mismo destino que muchas iniciativas por parte de departamentos de comunicación de empresas: un inicio entusiasta sin resultados ni a medio ni a largo plazo.

n EL BRIEFING El término briefing (o reunión informativa) procede de la jerga militar estadounidense y hace referencia a una discusión inicial acompañada de una breve descripción de la situación y de una explicación de los objetivos de una operación, así como los detalles estratégicos.

Un briefing debe incluir toda la información necesaria para concebir, diseñar y llevar a cabo un encargo.

Un buen briefing depende de la franqueza del encargado de realizarla y de su capacidad para expresar cuáles son los problemas de una manera comprensible. El briefing debe ponerse por escrito.

Nota: si se da demasiada información se dificulta la toma de decisiones y se difumina la diferencia entre lo que es importante y lo que no lo es. La cantidad de información debe ser la adecuada para llevar a cabo el encargo.

Después del primer briefing, toda la información que falte es recabada e incorporada en un proceso co-

lectivo. El briefing posterior (re-briefing) es la discusión posterior con el cliente, una oportunidad de corregir cosas y aclarar conceptos una vez acordado el encargo.

Lista de comprobación: elementos del Briefing de una agencia - Información acerca de la empresa (como actividades de la empresa o el sector corporativo).

- Descripción de la situación del marcado (punto da partida, competencia).

- Resumen del encargo, requisitos, restricciones y objetivos.

- Grupo de target (grupos de objetivo esenciales).

- Objetivos de comunicación (mensajes básicos, posicionamiento, medios objetivo, mezcla de comunicaciones).

- Información del producto (características, argumentos de uso, ventajas, razones).

- Presupuesto (por ejemplo parámetros de disponibilidad, servicios de agencia, otros servicios).

- Fechas límite (por ejemplo, lanzamiento) y timeline -línea temporal- (planificación del tiempo y del proyecto).

- Materiales adicionales.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 1

n CONOZCA A SU PÚBLICO

n DESARROLLO DEL SITIO

El siguiente paso es identificar a los usuarios potenciales del sitio web y así poder estructurar el diseño en función de sus expectativas y necesidades. Los conocimientos, procedencia, intereses y necesidades de los usuarios cambiarán dependiendo de si es un usuario ocasional, que requiere una introducción cuidadosa y estructurada, o si se trata de un usuario experto que se sentirá ofendido si intuye cualquier intento de paternalismo o, simplemente, de retrasar su acceso a la información. Un sistema bien diseñado debería ser capaz de acomodar distintos niveles de habilidad e intereses de los usuarios.

Todo proyecto significativo de sitio web supone unos retos particulares, pero el proceso de desarrollo en su conjunto sigue generalmente estas seis grandes fases:

Principiantes y usuarios ocasionales. Este tipo de usuario requiere una estructura sin ambigüedades y un acceso fácil a visiones de conjunto que ilustren cómo se dispone la información dentro del sitio web.

Los principiantes tienden a sentirse intimidados por menús de texto complejos, y si la página principal no está dispuesta de forma clara y atractiva, desistirán en traspasar el umbral y acceder al lugar. Los usuarios ocasionales prefieren páginas que aporten una visión general o de conjunto, mapas jerárquicos y elementos gráficos o iconos que puedan retener con facilidad, como forma de saber o conocer dónde se almacena la información. Un glosario de términos técnicos, acrónimos, abreviaciones y una lista de las preguntas más frecuentes (FAQ - Frequent Asked Questions), pueden ser muy útiles para el principiante o usuario ocasional.

DEFINICIÓN DEL SITIO Y PLANIFICACIÓN En este estado preliminar definiremos los objetivos y las metas para el sitio web, y empezaremos a recoger y analizar la información que será necesaria para justificar el presupuesto y los recursos que se requieren. Es hora también de definir el alcance de los contenidos, los apoyos en funcionalidad y tecnología interactiva, y la amplitud y profundidad de los recursos de información que se requieren para llenar la web y así satisfacer las expectativas de los usuarios.

Usuarios y expertos reincidentes. Estos usuarios confían en obtener de la web a la que acceden información certera y de forma rápida. Un usuario experto es generalmente impaciente ante una multiplicidad de menús gráficos de baja densidad que ofrecen pocas opciones a la vez. Tienen también objetivos específicos en mente”a la hora de consultar la web, y aprecian los menús de texto detallados, esquemas de la estructura del lugar, índices amplios y motores de búsqueda ágiles y bien diseñados que permitan una búsqueda y consulta rápida de los resultados.

• Presentación de la información de forma sencilla, clara y rápida.

1 Definición del sitio y planificación 2 Arquitectura de la información 3 Diseño 4 Construcción 5 Marketing 6 Rastreo, evaluación y mantenimiento

ARQUITECTURA DE LA INFORMACIÓN Un buen diseño web se basa en las siguientes reglas

• Centrado en los aspectos esenciales.

• Navegación lógica y manejable.

• Un principio de diseño uniforme aplicado a la totalidad del sitio.

• Tiempos de descarga aceptables para los usuarios y visualización correcta en todos los navegadores web principales.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 1 En esta etapa se deberán detallar tanto la organización como los contenidos para el sitio web. El equipo deberá inventariar los contenidos existentes, enunciar qué tipo de nuevos contenidos se requieren y definir la estructura de la organización. Una vez se ha delineado la arquitectura/estructura de los contenidos, se deberán construir pequeños prototipos de partes de la web, y así poder probar cómo se adapta el diseño a los contenidos y a la navegación.

Estos prototipos parciales son útiles en dos sentidos. Primero por ser una manera fantástica de probar la navegación y desarrollar la interfaz de usuario definitiva. Un prototipo debería tener las suficientes páginas para poder comprobar con precisión cómo uno se desplaza de las páginas con menús a las páginas con contenidos y viceversa. En segundo lugar, la creación de prototipos permite a los diseñadores gráficos probar distintas maneras de relacionar la apariencia visual con la interfaz de navegación y el diseño de la información. La clave para un buen prototipo debe ser, ante todo, la flexibilidad.

Diseño estructural Esta fase implica la organización interna, es decir, estructurar desde el punto de vista informático y gráfico toda la información que manejará el usuario cuando utilice nuestro interactivo. El diseño de un interactivo requiere la organización de directorios, nombrar archivos y directorios, y adoptar un determinado diagrama de flujo. Entre otras tareas deberemos planificar la creación de iconos y construir sistemas de ayuda.

Lineal Todos los nodos son ordenados en línea a través de una secuencia única, permitiendo al usuario sólo avanzar (“forward”) y retroceder (“rewind”). Un ejemplo son los videojuegos que reproducen una narración de tres actos: presentación de los objetivos del usuario, desarrollo de la acción y desenlace o nodo de salida con los créditos de la aplicación.

Ramificada Esta estructura parte de una secuencia lineal de nodos (entrada-A-B-Csalida) a la que se han inclui-

do otros nodos subordinados. Así un nodo A puede ramificarse en Al y A2, el nodo B en Bi y B2, etcétera.

Un ejemplo son los cuentos infantiles que emplean una estructura lineal para la narración principal y los nodos subordinados para crear las elecciones lúdicas interactivas.

Paralela Una estructura formada por un nodo de entrada, un nodo de salida y varias cadenas de nodos lineales (A, Al, A2); (B, Bl,B2,); (C, Cl, C2); (D, Dl, D2). Permite la navegación lineal y la navegación en el mismo nivel (Al, BI, Cl). Narra la misma historia simultáneamente desde distintos puntos de vista.

Concéntrica Este modelo organiza el resto de nodos alrededor del nodo de entrada en secuencias lineales impidiendo la navegación entre nodos del mismo nivel (Al, BI, Cl). Adoptan este modelo los videojuegos que solicitan de sus usuarios superar un nivel para pasar al siguiente.

Jerárquica Este modelo es clásico y también se le conoce como “estructura en árbol” o “arborescente”. Consiste en un nodo de entrada inicial que se subdivide en otros (A, B, C...) y a su vez estos se subdividen en otros (Al, A2); (BI, B2,); (Cl, C2); y así sucesivamente hasta donde queramos.

Reticular Es el modelo más completo para la navegación porque obedece a la estructura en red, malla o telaraña.

Un nodo está conectado a todos los demás. precisamente este modelo que ofrece más libertad que el resto es el más frustrante. Ello es debido a que, al no priorizar una trayectoria de navegación frente a otras, hace al sistema poco eficaz: “Si sólo hay un camino posible, no es interactivo; si todos los caminos son posibles, estoy perdido”.

Mixta Combina varios de los modelos explicados. Es la fórmula más frecuente en el diseño de interactivos.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 2

n DISEÑO Es en esta fase del proyecto donde el sitio web empieza a tener cara y ojos, en la medida en que se definen la retícula (grid) de la página, los elementos que la definirán y las líneas maestras a nivel gráfico de la web en su conjunto. Es el momento de encargar o generar las ilustraciones, las fotografías y demás materiales gráficos y audiovisuales necesarios.

También es el momento de investigar, escribir, organizar, ensamblar y editar los contenidos en formato de texto. A su vez, los elementos de programación, diseño y entrada a bases de datos deberían estar ya concretados e iniciados. El fin es producir todos los componentes para que estén listos para la última fase de producción: la construcción material de cada una de las páginas web.

Al organizar un área de diseño, se debe procurar que el tamaño de la página web coincida con la resolución del monitor, de forma que los elementos importantes estén siempre visibles. Durante mucho tiempo, se consideraba ideal diseñar las páginas para una resolución de 800 x 600 píxeles, posteriormente se usó una resolución de 1024 x 768 o de 1280 x 854 pixeles; pero todo esto ha cambiado radicalmente desde la irrupción de la navegación desde dispositivos móviles y tabletas.

Actaulmente nos enfrentamos a una web que de nuevo debe ser posible visualizar correctamente en multitud de formatos y tamaños de pantalla. A un diseño flexible a estas demandas se le denomina Diseño Responsivo.

DISEÑO RESPONSIVO El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.

Esto es responsive design y se logra con un conjunto de técnicas de css3.

Ahora mismo nos encontramos en uno de los momentos más excitantes de la tecnología, posiblemente desde la aparición en escena de la web social (conocida también como web 2.0): HTML5, Flash en dispositivos móviles y televisores, tablets, smartphones y un largo etcétera.

Es en momentos como éste donde debemos recordar lo aprendido y no olvidar cosas como la usabilidad o accesibilidad justo en el momento en que se vuelven más importantes, sobre todo teniendo en cuenta que dispositivos como los smartphones y tablets nos exigirán repensar una y otra vez sobre nuestras aplicaciones y el modo como nuestros usuarios interactuarán con ellas.

Crear sitios específicamente para móviles no es una idea novedosa, pero la aparición de dispositivos móviles con cada vez mayores capacidades le ha dado un nuevo auge, aún cuando creo estamos lejos de ver lo que realmente pueden llegar a ser. En el nuevo mundo móvil tenemos browsers de verdad, mayor capacidad, Wi­Fi, etc. que nos da todo un nuevo abanico de posibilidades.

Sin embargo, no podemos olvidar que estos dispositivos no disponen de las ventajas que nos da un computador personal, ya sea en términos de resolución de pantalla, velocidades de conexión, etc. lo que nos obliga a crear una interfaz que funcione específicamente dentro de estas limitaciones. Lo ideal será pensar primero las interfaces con mayores limitaciones y luego aumentar las prestaciones a medida que los recursos aumentan: móviles primero, luego tablets y de allí a ordenador.

La usabilidad es hacer que las webs sean herramientas de comunicación práctica. Es decir, que alguien que entre en una web encuentre lo antes posible lo que busca o -que también pasa-, se de cuenta lo antes posible de que está en el sitio equivocado.

La navegabilidad web en tres preguntas: - ¿Dónde estoy?

- ¿Dónde he estado?

- ¿Dónde puedo ir?

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 2 ¿Qué implica diseñar para móviles?

ACCESIBILIDAD

Obliga a enfocar lo verdaderamente importante: Dadas las limitaciones que tenemos en un dispositivo móvil (tamaño de pantalla, velocidad de conexión, etc.) es indispensable aprender a jerarquizar la información ¿qué es realmente lo que queremos que nuestros usuarios sepan? ¿Cuáles de los servicios que nuestro sitio ofrece son realmente usados como para aparecer de primero en nuestra lista de jerarquía? ¿Realmente es útil darle la bienvenida con un lindo texto de presentación o es mejor mostrar de una vez aquello que los usuarios realmente buscan en nuestro sitio?

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. Al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web.

Diseñar un sitio específicamente para móviles nos obliga a entender al usuario, a saber qué es lo que busca en nuestro sitio y darle justamente eso. Es imprescindible que sepamos enfocar nuestro sitio en aquello que realmente queremos mostrar al usuario o aquello que sabemos que realmente quiere de nosotros, desechando aquellas cosas que, por interesantes que puedan ser desde nuestro punto de vista, resulten secundarias o poco importantes para él.

Es fundamental conocer al usuario final Uno de los principales problemas que enfrentamos con nuestros clientes es que, por lo general, no piensan en sus usuarios a la hora de crear el sitio web, haciendo solicitudes que responden básicamente a una mezcla entre sus gustos personales (o los suyos, los de su pareja, los de sus socios, etc.) y las cosas que desea que el sitio muestre sobre su producto.

En conclusión, hacer el cambio de paradigma de móviles a PC en vez de PC a móviles no sólo nos prepara para el futuro cercano en el que desarrollar sitios optimizados para estos dispositivos no será simplemente un lujo de grandes empresas sino una necesidad real del mercado sino que además nos permite hacer un necesario ejercicio de arquitectura de la información en pro de un producto más efectivo y usable.

La accesibilidad Web también beneficia a otras personas que no tienen ninguna discapacidad pero que, debido a determinadas situaciones, tienen dificultades para acceder a la Web (por ejemplo, una conexión lenta), también estaríamos hablando de aquellas personas que sufren una incapacidad transitoria (por ejemplo, un brazo roto), y de personas de edad avanzada.

Otra consideración importante para las empresas es que la accesibilidad Web es un requisito establecido en algunos casos por leyes y políticas.

•Nota: ver documento de referencia: Introducción a la Accesibilidad Web.pdf

n TIPOS DE IMÁGENES JPG o JPEG Es el formato más común para comprimir imágenes con relativamente poca pérdida de calidad y bajo peso, generalmente usado en imagenes fotográficas. Es un formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado.

Ventajas: Soporta millones de colores a un peso relativamente bajo Ampliamente soportado en todos los navegadores y plataformas Desventajas: No soporta transparencias El formato no es libre Recomendación: Únicamente para imágenes fotográficas con muchos colores y detalles.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 2 GIF Creado por CompuServe hace casi 20 años.

Utiliza compresion de un máximo de 8 bits (256 colores), por lo tanto se reduce considerablemente la calidad si se trata de imagenes como fotografías o degradados complejos.

El formato GIF calcula la cantidad de colores mediante una formula que permite paletas de 2, 4, 8, 16, 32, 64, 128 y 256 colores, lo que nos da una amplia gama de posibilidades a la hora de optimizar gráficos sencillos, además soporta las transparencias de 1 bit, es decir, que un pixel puede tener un color, o ser totalmente transparente.

También permite hacer animaciones por fotogramas, (muy sencillas) aunque la compresion en estos casos suele ser deficiente.

les rojo, verde, azul y alfa (RGB + alfa, 4 canales) PNG soporta tanto transparencia alfa (los bits pueden ser “medio” transparentes) como transparencia de índice en sus tres versiones, Todos los navegadores actuales tienen soporte para PNGs con transparencia alfa excepto Internet Explorer, que soporta PNGs con transparencia de indice, y transparencia alfa solo en imágenes de menos de 8 Bits (siempre interpretada como transparencia de índice).

Ventajas: -Amplia compatibilidad en los navegadores La transparencia puede ser muy útil, si se sabe utilizar.

-La compresión logra imagenes de muy bajo peso.

PNG 24 sirve para gráficos y degradados complejos de varios colores y fotografías no tan complejas.

Desventajas: -Límite de 256 colores -No es formato libre.

Recomendación: No usar en ningún caso.

PNG Es un formato gráfico que esta basado en un algoritmo de compresion sin pérdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente en cuanto a profundidad de color.

Una de las principales ventajas de PNG, es que independientemente de la profundidad de color que se use, la compresión permite archivos de muy bajo peso sin pérdida de calidad.

El número de canales depende de si la imagen es en escala de grises o en color y si dispone de canal alfa (canal de transparencia). La combinaciones permitidas por PNG son: Escala de grises (1 canal) Escala de grises y canal alfa (2 canales) Canales rojo, verde y azul (RGB, 3 canales. También llamado “color verdadero”) Cana-

Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos: PNG 8, se pueden usar para gráficos sencillos, colores planos, logos, pequeñas sombras, y para imagenes que no requieran mucho color.

PNG 32 para todo tipo de imágenes complejas, fotografías con mucho color etc. Las imágenes complejas suelen tener un mayor peso que las JPG en una calidad similar Ventajas: -En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad.

-Formato libre. Recomendado por W3C. Acepta transparencias.

Desventajas: -Imágenes con mucho color y texturas suelen ser muy pesadas -El soporte de PNG no es tan amplio como los formatos anteriores.

Recomendación: Usar PNG al máximo, en todo tipo de gráficos, layouts, fondos, etc. No tanto en Imágenes de muchos colores y texturas, aunque nunca está de más probar.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 3

n ELEMENTOS COMUNES EN LA WEB • Los menús Los menús se suelen aglomerar en una sola barra de informaciones y contienen grupos de comandos relacionados que están separados -en la mayoría de los casos por líneas-.

• Los cuadros de diálogo El lector llega a los cuadros de diálogo cuando escoge una entrada de menú a la que siguen puntos suspensivos (...).

Los cuadros de diálogo son ventanas que contienen una serie de comandos relacionados que logran que se cumplan aquellas funciones que espera el usuario. Estos cuadros están compuestos a su vez por una serie de controles. Los más importantes son: • Las fichas Es la posibilidad que ofrecen los cuadros de diálogo de operaciones múltiples. Generalmente funcionan mediante un “click” sobre iconos de pestaña que permiten visualizar distintos grupos de controles.

• Las áreas El área es una zona delimitada por un borde y un título dentro del cuadro de diálogo o una ficha que agrupa un conjunto de comandos.

• Las listas Las listas aparecen en algunos cuadros de diálogo y consisten en un inventario de elementos que pueden ser seleccionados o editados.

• Los campos Un campo presenta forma rectangular y su función consiste en introducir un dato concreto, como nuestro nombre, correo electrónico, etc...

• Los botones de radio Los botones de radio tienen la facultad de seleccionar entre diversas opciones que se excluyen mutuamente.

• Las casillas de comprobación Estas casillas permiten al lector saber si ciertas opciones están activadas o desactivadas. Al activar una casilla de comprobación (al seleccionarla) se pueden activar otros controles; también puede suceder que al seleccionar o deseleccionar una casilla de comprobación se amplíe un cuadro de diálogo que muestre más controles.

• La botonería Los botones -que usualmente tienen forma rectangular activan una acción. Si el botón está enmarcado por doble línea más gruesa, puede activarse mediante la tecla “intro”. Existen botones que incluyen una lista desplegable, pudiéndose elegir un tipo de acción determinada.

• Cuadros de diálogo de advertencia Son cuadros de diálogos que aparecen en la pantalla del lector cuando surge un problema y, por lo general, suelen incluir información sobre el origen del problema y su posible solución.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 3

n DISEÑO DE LA INTERFAZ Las páginas web se diferencian de los libros y otros documentos en algo crucial: los enlaces de hipertexto permiten al usuario acceder a una página web sin ningún tipo de preámbulo. Así, una página web deberá tener mucha más autonomía que las páginas de un libro convencional. Esto significa que, generalmente, sus encabezamientos y pies de página deberán ser más informativos y elaborados que en las páginas impresas. Sería absurdo repetir el copyright, el autor o la fecha de un libro al pie de cada una de las páginas. Pero las páginas web tal vez requieran esta información en todas ellas, pues puede darse la circunstancia de que ésta sea la única parte que el usuario visite del sitio web. Este carácter necesariamente independiente de cada una de las páginas web no es exclusivo de la Red. Todo documento web requiere de: • Un título informativo

resado en una complejidad gratuita, especialmente los que dependan de la web para una información oportuna y detallada relacionada con su trabajo. Las metáforas de la interfaz deberán tener un carácter sencillo, familiar y lógico -si se necesita una metáfora para el diseño de la información, es mejor escoger un libro o una biblioteca que una nave espacial o un aparato de televisión. Los mejores diseños de la información son los que pasan desapercibidos a un usuario tipo.

Previsibilidad: Para una máxima funcionalidad y legibilidad, el diseño del sitio web y de cada una de las páginas debería estar construido basándose en un sólido patrón de unidades modulares que compartirían una misma retícula base y los mismos temas gráficos, convenciones editoriales y jerarquías de organización. Se trata de conseguir consistencia y previsibilidad: al atravesar el sitio, el usuario debe sentirse cómodo y convencido de que va a encontrar lo que busca. La semejanza gráfica en una serie de páginas de un sitio web proporciona pistas visuales para la continuidad de la información.

• La identidad del creador (autor o institución) • La fecha de actualización • Al menos un enlace a la página principal • La dirección URL de la página principal.

Al menos en las páginas más importantes de la web Incluir estos elementos básicos supone haber recorrido el 90 por ciento del camino a seguir para hacer más comprensible al usuario la interfaz web.

Por otro lado hemos de tener en cuenta los siguientes aspectos: Interacción y ancho de banda. El usuario no tolerará demoras largas. Investigaciones acerca del factor humano demuestran que, para la mayor parte de tareas con el ordenador, el umbral de frustración está alrededor de los 10 segundos.

Simplicidad y consistencia. El usuario no está inte-

Integridad y estabilidad en el diseño. Para convencer al usuario de que lo que se le ofrece es fiable y adecuado, es preciso cuidar el diseño de la web igual que lo haría en cualquier otro tipo de soporte; y utilizar los mismos niveles de calidad en el diseño y los contenidos editoriales. Una web de apariencia descuidada, con un diseño visual pobre y unos contenidos editoriales pobres, no transmite ningún tipo de seguridad.

Diálogo y retroalimentación. La web debería ofrecer al usuario, a través de botones de navegación o enlaces de hipertexto colocados uniformemente, una confirmación visual y funcional consecuente con sus movimientos y decisiones. La retroalimentación (o feedback) también significa estar preparado para responder a cualquier demanda o comentario de un usuario. Una web bien diseñada proporciona enlaces directos al webmaster o editor responsable del sitio. Para un éxito a largo plazo de la empresa, es fundamental una cuidada planificación de esta relación con el usuario.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 3

n NAVEGACIÓN En un sitio web, un conjunto fértil de enlaces y elementos gráficos para la navegación atraerá la atención del usuario, desplazándola de los botones de navegación incorporados en el propio navegador hacia los contenidos internos de la web. Proveer un conjunto de botones de navegación consistente y predecible supone también ofrecer al usuario una manera de percibir la estructura y organización del sitio web, manifestando visualmente su lógica y estructura; por otro lado un usuario necesita generalmente situarse dentro de un contexto, encontrar su lugar dentro de una estructura de información. En los documentos en papel, esta percepción del “dónde estoy”, es una mezcla de signos de estructura y gráficos proporcionados por el diseño gráfico del libro, la organización del texto y la propia sensación física del libro como objeto.

DISEÑO DEL SITIO La mayor parte de la información en la Red, está recogida en documentos de referencia cortos, para ser leídos no secuencialmente. Mucho antes de que la Red se inventara, los autores de temática técnica ya habían descubierto que un lector aprecia siempre los pedazos cortos de información que pueden ser localizados y visualizados de forma rápida. Esta manera de presentar la información en la Red es válida por varias razones: • Pocos usuarios de la Red permanecen largo tiempo leyendo largos párrafos de texto en la pantalla. La mayoría o bien guardan en el disco duro este tipo de documentos, o bien los imprimen.

• Un troceado moderado de la información conduce, por sí mismo, a la utilización de enlaces. Pero no caiga tampoco en la extrema subdivisión de los contenidos, o emergerá la frustración por parte del usuario. La dimensión máxima para una correcta partición de la información en la Red sería lo correspondiente a una o dos páginas impresas en papel.

• Trocear la información puede facilitar su organización y exposición de manera uniforme. Esto permite al usuario aplicar tanto su experiencia a futuros sitios con los que se vaya encontrando, como predecir cómo puede estar organizada una sección no conocida de una web.

• Fragmentos sintéticos de información encajan mejor en la pantalla de un monitor, pues no hay espacio para visualizar grandes documentos. Las páginas web grandes tienden a desorientar al usuario medio, pues se le fuerza a utilizar la barra de desplazamiento y a recordar lo que está fuera de la pantalla.

El concepto de trocear la información debe ser flexible y con sentido común, con una organización lógica y conveniente. Deja que la naturaleza de los contenidos sea la que sugiera cómo deben subdividirse y estructurarse. A veces tiene sentido proporcionar documentos largos como una sucesión enlazada de un conjunto de páginas. A pesar de que es preferible la poca longitud, parece obvio que dividir un documento largo arbitrariamente puede tener muy poco sentido, especialmente si se quiere que el usuario pueda imprimirlo de una sola vez con facilidad.

Jerarquía de importancia.

En la Red, una organización jerárquica es virtualmente una necesidad. La mayoría de sitios dependen de una jerarquía, moviéndose desde el plano general de conjunto -que correspondería a la página principal o home-, hasta las páginas más específicas de subrnenús y contenidos. Los fragmentos de información deberían clasificarse según su importancia y estar organizados mediante las relaciones que se establecen entre unidades. Una vez determinado un conjunto lógico de prioridades, se puede edificar la jerarquía desde los conceptos más importantes o generales hasta los temas más específicos o detallados.

Relaciones. Al enfrentarse a un nuevo y complejo sistema de información, el usuario construye su propio esquema mental; éste le sirve para adivinar dónde encontrar lo que aún no ha visto. El éxito en la organización del sitio web vendrá determinado, por

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 3 encima de todo, por la manera en que el sistema que se crea responda a las expectativas del usuario. Si se confunde al usuario con una estructura que no es ni lógica ni predecible, se sentirá frustrado por las dificultades que se encontrarán al atravesarla.

Función. Una vez se ha creado la web, analiza su funcionalidad. Un diseño de web eficaz es el justo equilibrio en la relación que se genera entre las páginas menú y las páginas con contenidos específicos.

El fin está en conseguir una gradación de menús y páginas que un usuario medio perciba como natural, y que no confunda o interfiera con el uso que haga del sitio.

Los sitios web con una estructura jerárquica poco profunda dependen demasiado de páginas menú extensas que pueden confundir de la misma manera que una “lista de la compra” con información no relacionada: Un esquema de menús puede, a su vez, ser tan profundo, que la información quede enterrada bajo excesivos niveles de menús. Cualquier usuario puede sentirse frustrado si la navegación que se le propone no le deja más opción, para acceder a los contenidos reales, que atravesar numerosas capas de menús vinculados: Si la web está en continuo crecimiento, el equilibrio correcto entre menús y páginas de contenidos es un factor dinámico fundamental. La retroalimentación o feedback por parte del usuario (y el propio análisis del uso que nosotros hacemos del sitio) puede ayudar a decidir si el esquema de menús resiste su uso o tiene puntos débiles a mejorar. Estructuras complejas de documentos requieren jerarquías de menús más profundas, pero el usuario nunca debe ser forzado a una página de menús tras otra si el acceso directo es factible. Con una jerarquía funcional y equilibrada de menús se puede ofrecer al usuario un acceso directo a la información y, a la vez, reflejar la estructura general de la web.

Diseño de la página CLARIDAD, ORDEN Y VERACIDAD es lo que más apreciamos cuando buscamos fuentes de información, sean documentos tradicionales en papel o páginas web. Esta confianza sólo la puede aportar un diseño de página web objetivo. La organización espacial de texto y gráficos en una página web, gracias a su impacto visual, puede implicar al usuario, puede dirigir su atención, priorizar la información a la que se enfrenta y hacer que la interacción con la web sea mucho más amena y eficaz.

Lógica visual. El diseño gráfico genera una lógica visual y persigue un óptimo balance entre el estímulo visual y la información gráfica. Sin el impacto visual de las formas, el color y el contraste, las páginas pueden convertirse en aburridas y no motivar al usuario. Un documento de texto denso, sin contraste ni alivio visual, es más duro de leer. Pero sin la profundidad y complejidad del texto, las páginas con preponderancia de elementos gráficos corren el riesgo de decepcionar al usuario al ofrecer un equilibrio pobre entre el estímulo visual, la información en formato de texto y los enlaces interactivos multimedia.

La continuidad visual y funcional de la organización, el diseño gráfico y la tipografía de la web son fundamentales para convencer al público de que ésta puede ofrecerle una información útil, exacta y oportuna.

JERARQUÍA VISUAL La primera de las tareas del diseño gráfico es crear una jerarquía visual fuerte y consistente, donde se enfatizan los elementos importantes y se organizan los contenidos de forma lógica y previsible.

El diseño gráfico es básicamente la gestión visual de información utilizando herramientas como la composición, la tipografía y la ilustración, para guiar el ojo del lector a través de la página. El lector primero visualiza una página como grandes masas de forma y color, con unos elementos en primer plano contrastados con otros del fondo. Sólo en segundo lugar

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 empieza a escoger entre la información, primero en el ámbito de imágenes o gráficos -si es que existen-, para después empezar a analizar gramaticalmente el texto y a leer palabras concretas y frases: El contraste es fundamental. El equilibrio y organización general de los elementos gráficos de una página es esencial si se desea atraer al usuario hacia los contenidos. Una página aburrida, con sólo texto, provocará un rechazo del ojo, pues se encontrará ante una masa gris y monótona, sin claves evidentes de cómo se estructura la información. Por otro lado, una página diseñada de forma torpe, con grandes titulares en negrita o elementos gráficos demasiado pesados, también distraerá o repelerá al usuario que esté buscando contenidos con más sustancia.

Deberás conseguir un apropiado equilibrio entre la necesidad de atraer al ojo mediante el contraste visual y la necesidad de ofrecer una organización clara

n EYETRACKING El usuario, con su comportamiento y comentarios ante la tarea contribuye a veces al análisis del problema; pero sus expresiones acostumbran a ser ambiguas, poco concretas o incluso diferir en ciertos aspectos de sus pensamientos, por lo que a lo largo del tiempo han ido apareciendo técnicas y tecnologías para extraer datos más objetivos. Una de ellas es el eyetracking.

El eyetracking es una tecnología que permite seguir los movimientos oculares de una persona para inferir qué mira y qué ve. Esto se consigue actualmente mediante un eyetracker, un monitor especial que lanza rayos infrarrojos a los ojos de quien lo usa. Estos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está mirando.

Teniendo esto en cuenta, podemos saber en qué zonas de la web se fijan más los usuarios para optimizar la colocación de botones o elementos que deseemos destacar.

n RETÍCULAS PARA PÁGINAS WEB La consistencia y previsibilidad son características fundamentales en todo sistema de información bien diseñado. Las retículas de diseño que subyacen en la mayoría de las publicaciones en papel de calidad, son igualmente necesarias en el diseño de todo documento electrónico o publicación en Red, donde las relaciones espaciales entre los elementos que aparecen en la pantalla cambian constantemente en función de las interacciones del usuario y de la actividad misma del sistema.

No existe una retícula de diseño apropiada para la globalidad de páginas web. El primer paso es establecer una retícula de composición básica. Con esta “espina dorsal”, puedes decidir cómo se relacionarán los bloques de texto y de imagen entre ellos, y puedes generar las líneas maestras de estilo que regirán todas las páginas de la web, utilizando títulos, subtítulos, botones y enlaces para la navegación.

El fin es establecer una composición de pantalla lógica y consistente, que permita la flexibilidad suficiente como para colocar gráficos y texto de distintas maneras, sin tener que reconsiderar el diseño de cada una de las páginas con las que te enfrentes.

Sin una fuerte retícula de composición subyacente, la composición de las páginas de tu proyecto fluctuará según las decisiones del momento, y el diseño web, como globalidad, parecerá confuso e incompleto.

La disposición de los elementos visuales mediante el sistema reticular produce la impresión de armonía global, de transparencia, claridad y orden. El orden en la comunicación favorece a la credibilidad de la información y otorga confianza. Una retícula adecuada en la configuración visual posibilita: - La composición del texto y de las ilustraciones de forma sistemática y rápida.

- La composición de textos o ilustraciones de un modo compacto con su propio ritmo.

- La disposición de material visual de modo que sea fácilmente inteligible y estructurado.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 CONSISTENCIA Establece en primer lugar una retícula base y un estilo para los textos y los elementos gráficos; aplica luego estos parámetros para construir un ritmo y una unidad a lo largo de todas las páginas de la web. La repetición no es aburrida, sino que aporta a la web una fuerte identidad gráfica que genera y refuerza la sensación de estar en un “lugar” memorable y diferenciado. Una aproximación consistente a la composición y a la navegación permite al usuario adaptarse rápidamente al diseño y prever con confianza la localización de la información y del control de la navegación a lo largo de todas las páginas de la web.

Si escoges una temática gráfica, utilízala por toda la web.

n TIPOGRAFÍA

Utiliza los titulares de sección para describir el material que se muestra Al diseñar una tipografía, alguien ha pensado en cómo se percibirán las letras, las palabras, las oraciones y los párrafos se verá con el fin de que pueda ser leído cómodamente, o nos hacen sentir de cierta manera cuando lo miramos. A veces se hace bien, otros no. Muchas veces somos nosotros los diseñadores gráficos que son los que deciden cómo se verá, en nuestros folletos, nuestros logotipos, nuestros sitios web y así sucesivamente.

La buena tipografía viene de prestar atención a los pequeños detalles ya que esto puede hacer la diferencia entre el trabajo de diseño gráfico que es aceptable o muy bueno. Se trata principalmente de hacer que nuestros textos sean legibles y de fácil lectura, así como de conseguir un resultado estético.

• Usa una tipografía de sin serifas para los bloques de texto

CARACTERÍSTICAS TIPOGRÁFICAS DE LA RED • Usa siempre un buen contraste.

Texto oscuro sobre fondo claro

A pesar de que las reglas tipográficas básicas son las mismas tanto para los documentos web como para los documentos impresos convencionales, la tipografía tiene características sustancialmente distintas se muestre en una pantalla o impresa en un papel.

La pantalla de un ordenador reproduce las fuentes a una resolución muy inferior a la que encontramos en cualquier libro, revista o incluso cualquier página salida de una impresora corriente. La mayor parte de las fuentes de libros y revistas se reproducen a una resolución de 300 pixeles por pulgada o mayor, mientras que una pantalla de ordenador raramente supera una resolución de 72ppp.

LEGIBILIDAD

Los documentos que se escriben para ser leídos en la pantalla deben ser concisos y estructurados.

En lugar de leer palabra por palabra, la tendencia es leer las páginas web echándoles un vistazo. Utiliza los títulos, listas y los énfasis tipográficos para destacar secciones o párrafos; en una visualización rápida, este tipo de elementos son los que atraen la atención del usuario. Manténlos claros y precisos.

La buena tipografía depende del contraste visual entre los distintos tipos de letra y entre los distintos bloques de texto, titulares y espacio en blanco circundante. Nada atrae más el ojo y la mente del usuario que un estudiado contraste o una adecuada diferencia en el tratamiento de cada uno de los elementos. Esto se puede conseguir sólo con un diseño cuidado de las páginas. Si rellenas tupidamente

• Usa siempre colores web seguros • Usa siempre tipografías para web • Haz siempre los enlaces de hipertenso azules y subrayados • Nunca uses itálicas

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 cada una de las páginas con texto, el lector se enfrenta ante una pared gris y ante la carencia de contraste visual e, instintivamente, se siente rechazado.

Tampoco ayuda hacer que todos los elementos de la página crezcan en tamaño de manera uniforme.

Incluso las fuentes en negrita pueden convertirse en monótonas, ya que si todas tienen esta propiedad, ¿qué elementos se destacarán en “negrita?”.

Cuando el contenido es esencialmente texto, la tipografía se convierte en la herramienta para “pintar” y organizar la página. Los esquemas compositivos entre el texto y la imagen que se establecen cuidadosamente en una sucesión de páginas, pueden ayudar a una mejor organización de la información y a incrementar la legibilidad. Para el usuario, es mucho más difícil reconocer la estructura subyacente cuando se enfrenta a una tipografía desigual o heterogénea, lo cual hace imposible prever y localizar la información en documentos no conocidos: ALINEACIONES Los márgenes definen la zona de lectura al separar el cuerpo de texto de la zona que lo rodea. En todo tipo de documentos, los márgenes aportan una incuestionable tranquilidad visual. En el diseño web es importante un cuidadoso diseño no sólo de los márgenes, sino también del espacio en blanco, pues en cualquier pantalla de ordenador, los contenidos coexisten forzosamente con los elementos de la interfaz del propio navegador, e incluso con otras ventanas, menús o iconos de la interfaz de usuario del sistema operativo.

Los márgenes y en general el espacio pueden diferenciar el cuerpo principal de texto del resto de elementos de la página. Si se usan de forma consistente, pueden aportar unidad al sitio al edificar -a su largo y ancho- una estructura y apariencia fuertes.

También aportan un mayor atractivo visual a la página al añadir contraste entre el espacio positivo (texto y gráficos) y el negativo (espacio en blanco).

LONGITUD DE LÍNEA Para favorecer la lectura, las columnas de las revistas o de los libros son estrechas por razones psicológicas: ante un texto a distancias normales, el ojo abarca de forma correcta unos ocho centímetros de ancho, por ello, el diseñador intenta mantener los párrafos de texto en columnas no mucho más anchas que esta distancia cómoda para el ojo, pues una línea de texto más ancha provocará en el lector la necesidad de girar su cabeza ligeramente, o forzar los músculos del ojo para seguir la pista de la línea.

La agilidad de lectura también se ve afectada, pues el lector puede perderse al buscar el inicio de la línea siguiente.

MAYÚSCULAS Y MINÚSCULAS El uso de mayúsculas o de minúsculas afecta de forma importante a la percepción de un encabezamiento. Al leer, no visualizamos cada una de las letras que componen una palabra y luego la construimos, sino que reconocemos ante todo la forma de la palabra como conjunto de letras.

Evita el uso de encabezamientos en mayúscula. Las palabras en mayúsculas tienen carácter de rectángulos monótonos que, formalmente, le dicen poco al ojo.

Para los encabezamientos o titulares recomendamos una escritura tipo oración (en mayúscula la primera palabra y los nombres propios). Esto es mucho más cómodo, porque, al leer, lo primero que visualizamos es la parte superior de las palabras.

Puedes comprobar por ti mismo lo complicado que es leer la parte inferior de las palabras de la misma frase.

Si utilizas mayúsculas en las iniciales de cada palabra de los titulares, interrumpes la visualización de la forma de las palabras.

ESPACIO EN BLANCO El interlineado afecta en gran medida la legibilidad de un bloque de texto: demasiado grande hace que

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 el ojo tenga dificultades para encontrar la línea siguiente, mientras que, si es demasiado pequeño, confundimos las líneas, pues los rabos superiores de las palabras se interpolan con los inferiores de la línea superior.

pantalla. Si las trasladamos a las altas resoluciones en las que se imprime en papel, su exagerada altura-x y su pesado cuerpo presentan una apariencia poco delicada.

RECUERDA:

En papel se considera un interlineado correcto aquel que está dos puntos por encima del tamaño de la letra. Por ejemplo, para una letra de 12 puntos utilizaríamos un interlineado de 14 puntos. Si utilizas el interlineado, aconsejamos que éste sea generoso, por ejemplo, letras de 12 puntos con un interlineado de 14 a 16 puntos.

Legibilidad en pantalla. En una pantalla de ordenador, algunas fuentes facilitan la lectura más que otras. Una fuente tradicional, la Times New Roman es considerada como la más legible en el medio impreso, pero su tamaño es demasiado pequeño en la pantalla, y la forma de sus letras demasiado irregular.

Para la legibilidad en pantalla son muy importantes tanto la altura-x (la altura de la letra “x” minúscula) como la forma general de las letras.

• Cuando se está seleccionando múltiples fuentes que han de convivir en un mismo diseño es crucial mantener tanto la unidad y variedad.

El uso de múltiples fuentes en conjunto puede ser difícil y lograr la armonía un reto. Tengamos en cuenta el efecto general que se está tratando de lograr. las fuentes, como las personas, tienen personalidad. Y personalidades fuentes que al igual que las personas, a veces pueden entrar en conflicto.

• Demasiadas tipografías con una personalidad fuerte en un mismo espacio sólo pueden crear confusión.

Tipos de letra tradicionales adaptados. La Times New Roman es un buen ejemplo de tipografía tradicional que se ha adaptado para el uso en pantallas de ordenador. Un tipo de letra no lineal como ésta (que en la mayoría de navegadores se presenta como la fuente por defecto para el texto), con una altura-x moderada, tiene una legibilidad en pantalla por encima de la media. Times New Roman es una fuente apropiada para documentos con mucho texto, que probablemente el usuario imprimirá para leer.

El tamaño compacto de la letra Times New Roman hace que también sea conveniente su uso para empaquetar, en poco espacio, gran cantidad de texto.

ÉNFASIS

Diseños para la pantalla. Tipografías como Georgia o Verdana fueron diseñadas especialmente para facilitar la lectura en una pantalla de ordenador. Tienen una altura-x engrandecida y, comparadas con tipografías más tradicionales, su tamaño es mucho mayor para una misma dimensión en puntos. Estas fuentes aportan una mayor legibilidad a páginas web que se diseñan para ser leídas directamente en la

Si una página web contiene únicamente bloques de texto, se hace difícil visualizar en ella la estructura de los contenidos y dificulta también el escaneado al ojo. El énfasis o subrayado aporta estructura a la información y añade variedad visual, lo cual facilita el acceso a los contenidos por parte del lector. La clave en un subrayado efectivo está en la utilización eficaz y económica del énfasis tipográfico.

• No hay reglas en cuanto al número de tipografías a usar, pero siempre conviene ser comedido y podemos trabajar con tipografías con una familia amplia que nos permitan una mayor variedad de soluciones.

• Al seleccionar los tipos de letra es importante tener en cuenta la naturaleza del texto a diseñar. ¿Estamos hablando sobre todo el cuerpo del texto? ¿Existen distintos tipos de titulares, subtítulos?

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 La tipografía tradicional posee ya unas buenas herramientas para añadir énfasis a un bloque de texto, pero asegúrate de utilizarlas siempre mesuradamente. Si pones un texto entero en negrita, nada resaltará y parecerá que estás gritando a tus lectores. Una buena regla que puedes utilizar es añadir énfasis al texto utilizando cada vez sólo un parámetro. Si deseas que determinados titulares atraigan la atención del lector hacia secciones concretas, no utilices un tamaño grande, en negrita y además mayúsculas (es decir, todo de golpe); si quieres que se destaque, utiliza un tamaño de letra un nivel superior. Si prefieres la negrita, utiliza el mismo tamaño de fuente, pero en negrita. Descubrirás rápidamente cómo con sólo una ligera variación del estilo se puede conseguir un gran contraste visual.

Cursiva. El texto en cursiva nos atrae por el contraste respecto a la forma del cuerpo principal de texto.

Es bueno utilizar las cursivas en los casos convencionales, por ejemplo al citar títulos de periódico o libros, o en el interior de un bloque de texto para señalar expresiones forzadas o palabras de otro idioma. Evita utilizar la cursiva en bloques de texto largos, pues de esta manera no facilitan la lectura.

Negrita. El texto en negrita contrasta con el normal por su color, aportando el énfasis necesario para, por ejemplo, los títulos de las subsecciones. El texto en negrita se lee bien en la pantalla, aunque si lo utilizamos para bloques de texto demasiado largos pierde su capacidad de contraste y, por tanto su eficacia.

Subrayado. El texto subrayado es una herencia de la época en que se utilizaban las máquinas de escribir, que no tenían la capacidad de escribir en cursiva ni en negrita. Además de sus deficiencias estéticas (es un recurso demasiado pesado e interfiere con las formas de las letras), en un documento web, subrayar tiene un significado y funciones especiales. La mayor parte de los usuarios tienen configurado su navegador para que subraye los enlaces. Si introduces texto subrayado en una página web lo más probable es que la gente lo perciba como un enlace de hipertexto.

Texto en color. A pesar de que el color es una opción más para diferenciar un determinado texto del cuerpo principal, en un documento web tiene un significado propio, al igual que el subrayado. Deberías evitar insertar texto en color en un bloque de texto, porque el usuario enseguida lo asociará a un enlace de hipertexto e intentará clicar en él. De todas formas, es muy apropiado cuando se utiliza sutilmente para distinguir los titulares de una sección. Por ejemplo, puedes usar tonos oscuros que contrasten con el fondo de la página, evitando los tonos que tradicionalmente vienen por defecto como color de enlace: el azul y el violeta.

Mayúsculas. El texto en mayúsculas es uno de los métodos más utilizados y menos efectivos en la voluntad de poner énfasis tipográfico a un texto. Reconocemos las palabras de dos maneras: mediante un análisis gramatical de grupos de letras y a través de las formas mismas de las letras.

Las palabras o encabezamientos en mayúsculas forman una sucesión monótona de rectángulos, sin ningún resalte. Para leer un bloque de texto en mayúsculas, únicamente nos queda la posibilidad de analizar los distintos grupos de letras -leer el texto letra a letra- lo que aumenta la incomodidad en la lectura y ralentiza el proceso.

Fíjate en lo cansado que es leer este párrafo: EL DISEÑO DEL SITIO DETERMINARÁ SU MARCO DE ORGANIZACIÓN. EN ESTA FASE DEL PROYECTO, SE TOMARÁN LAS PRINCIPALES DECISIONES ACERCA DE QUÉ ES LO QUE QUIERE EL PÚBLICO DE LA WEB, QUÉ ES LO QUE SE QUIERE DECIR Y CÓMO ORGANIZAR LOS CONTENIDOS PARA SATISFACER AL USUARIO EN LA MAYOR MEDIDA POSIBLE. A PESAR DE QUE A PRIMERA VISTA ES EL DISEÑO GRÁFICO LO QUE ANTES PERCIBE EL USUARIO, LA ORGANIZACIÓN DE LA WEB SERÁ EL ASPECTO QUE CAUSE UN MAYOR IMPACTO EN SU EXPERIENCIA. TIPOGRAFÍA COMO IMAGEN En un sitio web, la tipografía no siempre puede aislarse de los elementos gráficos o de las imágenes.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 4 El texto, como elemento gráfico, puede estar estrechamente integrado con la imagen, de manera que sea imposible mostrarlo en formato de texto HTML. Por razones estéticas puedes decidir mostrar el texto como representación en formato de imagen, en lugar de trabajar directamente con el lenguaje HTML.

WEBFONTS No poder hacer uso de la tipografía como elemento decorativo y de comunicación gráfica ha sido siempre una limitación en el diseño de paginas Web. Hasta hace muy poco si queríamos que nuestros diseños se vieran más o menos igual para todos los usuarios había que conformarse con unas cuantas fuentes que ya sabíamos que estaban instaladas en la mayoría de los ordenadores, otra solución era la de convertir nuestros textos en imagenes que luego podiamos usar de fondo. El trabajo se complicaba cuando había que traducir esas paginas a diferentes idiomas, o necesitábamos que esos textos cambiarán dinámicamente. En el primer caso habia que crear esas imagenes en todos los idiomas, el segundo no tenia solución.

Durante estos años han ido surgiendo ideas muy ingeniosas para resolver el problema, pequeños “trucos” para engañar y obligar a los navegadores a mostrar nuestras fuentes, pero en su mayoría, al día de hoy, todas estas técnicas todavía presentan muchas limitaciones.

La más simple y flexible de todas estas tecnologías, la que ofrece mayor compatibilidad entre navegadores y parece tener un futuro como la solución definitiva al problema, es una simple regla css incluida en la pagina Web que enlazada directamente al archivo de una tipografía en un servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía.

Nota: Ver documento de enlaces

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 5

n ¿QUÉ ES CSS? Siglas de “Cascading Style Sheets” (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML. Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.

Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en las paginas, y mas flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua.

Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto conociendo los tres principales elementos en el desarrollo de CSS: Atributos, valores y selectores.

Atributos Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo “font”, si es el fondo, el atributo “background”, etc.

Valores Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo “font” y el valor “red”.

Selectores Se usan para definir sobre cuales elementos HTML

vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector “body” que se refiere a la etiqueta <body> del documento HTML. Hay tres tipos de selectores: Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto “.” seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase.

La sintaxis: Es muy simple, primero se coloca el selector, luego se abre una llave “{“ y se empiezan a colocar los atributos, seguidos de dos puntos “:” y luego el valor seguido de punto y coma “;”, al final de todo se cierra el estilo para el selector con el cierre de llave “}”. Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con “/*” para abrir y “*/” para cerrar, como veremos en el siguiente ejemplo: /*CSS sobre selector de etiquetas*/ body {

font­family: arial;

font­size: 12px;

color: black;

background­color: #cccccc; }

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 5 Este tipo de selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos. /*CSS sobre selector de identificador*/ #header {

background­color: #ff0000;

color: #ffffff;

font­size: 26px; } En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo: <div id=”header”>Aqui el contenido</div> /*CSS sobre selector de clase*/ .mi_clase {

margin: 5px;

height: 100px;

width: 200px; } En los selectores de clase, usamos el atributo “class” en las etiquetas HTML para darles el estilo.

Ejemplo: <div class=”mi_clase”>Aqui el contenido</div> Ademas de esto, existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la sección head de la página: <link href=”archivo.css” rel=”stylesheet” type=”text/ css”> Para mi esta forma es la mas recomendable porque asi se puede vincular el archivo.css a todas las páginas del sitio, es mucho mas liviano al ver la pagina y ademas a la hora de modificar algo se hace solo una vez.

La segunda forma es aplicando los estilos directamente en la sección <head> del documento HTML. Se hace de la siguiente forma <head> <title>Pagina</title> <style type=”text/css”>

<!--­­body {

font­family: Geneva, Arial, Helvetica, sans­serif; font­size: 12px;

color:#333333;

}

--­­> </style> </head> Es buena idea colocarlos de esta forma si son estilos exclusivos para la pagina a la que se le aplica.

El tercer método no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en aplicar el estilo directamente sobre el elemento HTML, de esta forma: <table style=”background­color:#333333; padding:2px; width:300px; height;100px;></table> Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo “font­ family” o “background­color”, puede llevar adicionalmente caracteristicas mas especificas, que van separadas por un guion “­“ como vimos en los ejemplos. Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles “px” centimetros “cm” o relativos como “em”, en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles.

De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituyen una página web, y poco a poco ir separando el contenido de la presentación, ademas de lograr en un documento completamente válido cosas que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML. Unicamente con el uso, se va uno acostumbrando a lo que se puede hacer con CSS, al principio,

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 5 seguramente , les pasará (como a mí) que solo lo usan para dar formato a los textos, tablas etc, pero luego uno va conociendo como trabaja y va añadiendo elementos a los archivos CSS. El punto ideal sera cuando logremos separar completamente el diseño del contenido, dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para diagramar el contenido.

FRAMEWORKS Marcos CSS pueden ayudar a hacer más fácil la construcción de su red. Se puede asegurar que los diseños potencialmente complejos se procesan correctamente en, ejem, navegadores difíciles - sí, estoy mirando a ti IE 6!

Según la definición de Wikipedia, un marco de CSS es: “Un marco de CSS es una biblioteca que está destinado a permitir la fácil estilo, más compatible con los estándares de una página web utilizando el lenguaje de Hojas de Estilo en Cascada. Al igual que los lenguajes de programación y scripting, marcos CSS paquete de una serie de opciones ya preparadas para el diseño y outlaying una página web “ Que todo suena bien. El objetivo de un marco de CSS es quitar algunas de las tareas repetitivas, sin dejar de ser seguro de que su sitio no se romperá si se construye otro diseño. Hay una serie de marcos que puedes descargar, que van desde el complejo, (como el marco de Yahoo! UI Library grid), a la simple 960.gs. Voy a hablar de un solo marco aquí - Blueprint - y específicamente cómo usarlo como base para el diseño de la red.

MEDIA QUERIES La rápida distribución de dispositivos móviles, ha puesto el mundo del web de cabeza. Los usuarios ya no ven únicamente contenido web en computadoras de escritorio, sino en smartphones, tabletas y otros dispositivos con un amplio rango de dimensiones. El reto para los diseñadores web es asegurar que sus sitios puedan verse bien, no sólo en una pantalla grande, sino también en una pequeña pantalla de celular y cualquier pantalla de

por medio.

Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplican los estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para imprimir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el ancho de pantalla, orientación y así sucesivamente.

RESET CSS Nuestro objetivo, es conseguir que nuestra WEB, se vea igual en todos los navegadores (o al menos, en los más importantes), pero muchas veces, el problema viene por la manera que tiene cada navegador de mostrar los elementos.

Por ejemplo, si sólo pones: Código : <p>contenido</p> Y lo renderizas con varios navegadores, verás que hay diferencias en el resultado entre algunos de ellos ya que cada navegador define como cree conveniente los margenes que le pone al elemento <p>, su padding, su tamaño de fuente, posición relativa...

Esto no sólo le ocurre a los <p>, sino a casi todos los elementos que estamos acostumbrados a usar.

Y cada navegador, tiene su “estilo por defecto”. Y nunca coinciden... ¿cómo lo arreglamos? Reseteando el CSS. Mediante este sencillísimo concepto, le diremos al navegador que visualice nuestra WEB, que no queremos que aplique “su estilo”, sino el que definamos nosotros. Para ello, sólo tenemos que “inicializar”, al principio de nuestra hoja de estilos, la propiedad que queremos “resetear”, del elemento que queramos tener “reseteado”.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 5 Por ejemplo, el “reset” más conocido, es: Código : * {margin:0px;padding:0px;} ¿Qué hace esto? Pues puesto al comienzo de nuestra hoja de CSS, le dice al navegador: <<Quiero que le quites el margen y padding por defecto, a todos los elementos de mi WEB>> Desde entonces, todos los navegadores le quitarán el margen/ padding a cualquier elemento, en consecuencia, este aspecto será igual en cualquier navegador.

Después del reset, claro, tenemos que definir los valores que queramos usar. ¿y hay algún reset más completo? Hay muchos.

Encontraréis “CSS reset” para todos los gustos, unos más extensos que otros en Google Ejemplo: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, cite, code, del, dfn, em, font, img, ins, kbd, strike, abbr, acronym, address, q, s, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tr, th, td, center, u, b, i{vertical-align: baseline border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;} li, tbody, tfoot, thead, * {margin: 0; padding: 0} {line-height: 1; height:100%} {outline: 0} {list-style: none} {border-collapse: collapse; border-spacing: 0;} {quotes: “” “”} body :focus ol, ul table blockquote, q hr height:1px} blockquote:before, blockquote:after, q:before, q:after {content: “”} Como veréis, no sólo quita el margen/padding a todos los elementos, sino que hace otras muchas cosas, como “alinear abajo” los elementos de línea, o hacer que se hereden las fuentes en todos los elementos, o quitar el “marco punteado” de los elementos cuando los “seleccionamos”, o aplanar los bordes de las tablas, o poner a 1px las líneas <hr>... etcétera.

CONSEJOS: Para usar este reset (o cualquier otro), has de ponerlo al principio de la primera declaración CSS que tengas, pues si no, te sobreescribirá las anteriores (“regla de la cascada”) Cuando uses un “reset”, resetea al principio de empezar a diseñar. Si aplicas este reset a un documento que ya tengas hecho y terminado, verás como muchas cosas puede que se te descuadren, y tendrás que “redefinirlas”.

Una buena idea, puede ser, guardar el reset anterior en un documento nuevo (reset.css), y “linkearlo” al principio de vuestras webs, cuando empeceis a trabajar, de la siguiente manera: <link href=”reset.css” rel=”stylesheet” type=”text/ css” />

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 6

n FLASH Flash como tal empezó como simplemente un software de animación vectorial con algunas acciones básicas y se ha convertido en lo que es ahora, un entorno multimedia de desarrollo de todo tipo de trabajos que requieran integración de medios interactivos de fácil distribución multiplataforma; desde animaciones para televisión hasta Rich Internet Applications para Intranets o aplicaciones web y es precisamente eso; sus inicios, lo que lo tienen marcado de nacimiento.

La mayoría de power users de cualquier sistema operativo tiene bastante experiencia con la web; alguna vez navegó con Internet Explorer y odia los popups emergentes y la publicidad intrusiva en un banner de 640x480 que te meten en la mitad del contenido de una pagina para que, supuestamente, hagas click de manera mas efectiva.

En que estará hecho este banner... ¿Como puedes hacer una súper animación que incluya todo tipo de efectos raros, sonido, bitmaps y la foto de tu perro, en menos de 30Kb? Si dijiste Flash, has acertado.

No digo que sea malo hacer banners; digo que si es malo meter publicidad intrusiva y encima abusar de flash para ello Si eres novato en Flash seguramente lo primero que aprenderás es animación, seguro que luego aprendes a publicar para la web y seguro que haces una megaINTRO para tu web con muchos bonitos colores y animaciones shape morph(Interpolación de forma) por montón; ahora claro, avanzas un poco mas, aprendes a hacer botones y mejoras la experiencia de tu usuario metiendo un botón Skip Intro No lo hagas y de hecho, repite después de mi Un intro es malo Un intro es malo Un intro es malo Si tienes una animación de intro en tu web, repetirás estas tres sabias frases todas las noches antes de dormir.

Un diseño debe ser funcional, usable y practico, ahora, si encima es bonito, pues tanto mejor, un buen diseño. Las intro no aportan nada, son aburridas después de la primera vez, casi siempre (casi) son pesadas y te dejan como tonto pensando que esperaste todo eso para ver los bonitos colores animados y al fin entrar a la web; no te engañes, una intro solo sirve para aumentar ego de diseñador.

Popups y fullscreen son palabras que el colectivo de power users relaciona con Flash Developer; si no, solamente miren cualquier pagina web de la película de turno y verán que, después de una intro de 1Mb, te abre un popup con la información de la película ¿Es tan difícil hacer un fondo presentable para una web en Flash?; ¿Es necesario arruinar la experiencia del usuario con un intrusivo popup que te quita las barras de navegación?, ¿Tan poco éxito quieres tener con tu web?

El usuario no pidió que le abrieran una nueva ventana (una mas de tantas), esto es incomodo, ¿Y si el quería seguir navegando en la ventana donde estaba? O peor aun ¿Si usa un navegador de verdad y esta usando pestañas? Acabas de arruinar por completo su experiencia (Y la imagen de tu web de paso) No solo eso, sino que le quitas al usuario dos elementos claves, la barra de dirección y las herramientas de navegación. ¿Qué de malo tiene que se vea la URL?, ¿Qué de malo tiene poder usar el botón Atrás? ¿Y si animo el logo? ¿Y si animo las noticias? ¿Y si animo la botonera?

Que el logo tiene una animacioncilla divertida, esta bien, siempre y cuando no sea fastidiosa a la vista y en lo posible no sea animada todo el tiempo Que las noticias van animadas en un scroll Es cierto que Flash es poderoso en la animación; pero no tienes que abusar; una web es una web, hecho en Flash no implica que todo deba ser animado; piensa en lo que te fastidiaría si no conocieras el contenido y quisieras leerlo, piensa en tu usuario, no en ti.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 7

n EL DISEÑO PUBLICITARIO EN INTERNET Banners Dentro de las formas publicitarias más usuales que podemos diseñar para la WWW están los banners.

Es publicidad pasiva que el internauta encuentra sin buscarla tal como sucede en los medios tradicionales. Estas ventanas publicitarias surgen automáticamente cuando el internauta está consultando páginas web. “Son espacios gráficos con enlaces a otras páginas que contienen la información extendida de los productos y servicios que publicitan y comercializan en otros casos. Los “banners” son muy útiles; aunque el documento sea muy largo y tengamos que movernos por él, la ventana publicitaria siempre estará visible y disponible” FORMATOS Sus formatos tienden a estandarizarse. El más usual es el tamaño 468x60 píxeles (2x0,8 cm), aunque existen otras tablas de medidas. El lAB (“Internet Advertising Bureau”) ha confeccionado una guía de formatos publicitarios para evitar lo negativo de un mercado caótico de tamaños Banner: Se llama banners a todos los formatos pero cada uno tiene su nombre. El banner sólo es el que mide 468×60 píxeles. Antes era muy común encontrarlo en todas las webs pero hoy en día debido a su pequeño tamaño es muy complicado encontrarlo. Aparecía en la parte superior de las páginas pero como ahora las resoluciones de los monitores son mayores hay más espacio y se utilizan formatos mayores.

Megabanner o Superbanner: En inglés lo conocemos como Leaderboard. Es la evolución del banner ya que es de las mismas proporciones pero más grande. Mide 728×90 píxeles y lo podemos encontrar en las cabeceras de la mayoría de los periódicos online. Puede ser expandible, esto quiere decir que al pasar por encima muchos aumentan su tamaño hacia abajo. Ese tamaño depende de la página donde se encuentre y sus especificaciones pero normalmente suelen permitir que expanda al doble

del original. Esto quiere decir que si en reposo mide 728×90 expandido puede ser 728×180.

Rascacielos, Skyscraper o simplemente Sky: A diferencia de los otros dos formatos anteriores este es un formato vertical como su nombre indica (forma de rascacielos). El principal mide 120×600 pero ha evolucionado y también lo podemos encontrar un poquito más ancho: 160×600. Otra evolución mayor y que mucha gente llama doble-sky mide 300×600 y lo podemos encontrar en muchas páginas webs en sus laterales. Como el anterior puede ser expandible, normalmente hacia la izquierda y como mucho al doble de su tamaño original, por ejemplo un 120×600 normalmente expandirá a 240×600 ó 300×600.

Robapáginas: Posiblemente este sea el formato más encontrado en internet. Sobre todo porque debido a sus dimensiones y proporciones es muy fácil de integrar con el contenido. Su tamaño es 300×250 pero tiene muchísimas variantes. Yo diría que todo lo que tiene unas proporciones “cuadradas” y está entre 200×200 y 400×400 puede ser llamado robapáginas. Los más encontrados son el 300×250 y el 300×300 pero también hay muchos 200×200 y algún que otro 400×400 aunque este es un poco grande.

También los podemos encontrar expandibles (al pasar por encima de ellos) en muchos casos. El tamaño de expansión varía mucho dependiendo de los soportes. Muchas veces expanden sólo hacia un lado, otras hacia arriba o abajo y otras en varias direcciones. Lo “normal” es que expanda sólo hacia una dirección, por ejemplo un 300×250 expande a 600×250 (así es como expande en elpais.com por ejemplo).

Minibanner: Formato muy utilizado pero pequeño, su tamaño es 234×60 píxeles. Pensaréis por qué un formato tan pequeño es tan utilizado y la explicación la tenéis seguramente delante de vosotros . El sitio más común para encontrarlo es en el Messenger. Si abrís la aplicación para chatear lo podréis encontrar abajo del todo. Aparece también en muchos sitios web pero ese es el sitio por excelencia.

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 7 Como los anteriores se expande y lo normal, o por lo menos en el Messenger que es donde casi siempre lo podremos encontrar expandible, sea a 300×250.

Es decir, un 234×60 expande a 300×250.

Botón o Botones: Con este nombre diría yo que agrupamos a todos los formatos que son más pequeños que un minibanner. Por ejemplo un 120×60, un 90×90, etc… Es decir, son formatos que son muy pequeñitos y que muchos además van acompañados de texto al lado. Suelen ser muchas veces simples imágenes sin animación.

Text-link: Este no es un formato gráfico como los anteriores sino de texto. Tiene una limitación de caracteres, por ejemplo 30 caracteres y suelen ir acompañados de un botón de los anteriores (Botón + Text-Link). Para que os hagáis una idea os pongo aquí abajo un ejemplo de la home de Yahoo! con un Botón+Text-Link de autopromo (publicidad de secciones suyas).

Por otro lado encontramos otros formatos de publicidad que los internautas consideran como “intrusivos” porque aparecen por encima del contenido interrumpiendo o molestando la correcta navegación y visualización de los contenidos.

Interstitial o Cortinilla: Posiblemente este sea el formato que peor fama tenga entre los usuarios. Es el que aparece antes de visitar una página web o entre sección y sección y ocupa casi toda la pantalla.

Normalmente tiene un tamaño de 800×600 píxeles, a veces es un poco más pequeño: 640×480 píxeles.

Las características que suelen tener para hacer de este formato lo menos molesto posible es que es obligatorio que lleve una cruz para poderlo cerrar (arriba a la derecha casi siempre) y tienen una duración de tiempo que transcurrida esta aparece la web que se quiere visitar, está entre los 4 y 8 segundos.

Casi siempre va acompañado de un formato de recuerdo. ¿Qué significa esto? Pues que si por ejemplo nos aparece un Interstitial de Zara una vez se haya ido y estemos ya en la web de elpais.com por poner un ejemplo habrá o un robapáginas y un superbanner de Zara. Ese es el formato de recuerdo o

también conocido como reminder. Casi siempre en las planificaciones está así: Interstitial+Reminder.

Layer: Es un formato parecido al anterior pero más pequeño y que aparece una vez dentro de la página web por encima del contenido. or ejemplo si estamos en elpais.com (que no admite layers) aparecería por encima de la noticia un formato por ejemplo de tamaño 400×400. Tiene que tener las mismas características que el anterior, es decir que lleve una cruz para poder cerrarlo y que se vaya automáticamente cuando pasen X segundos.

Pre-Roll: Este es un formato que a muchos les parece muy molesto. A mi personalmente no. Aparece cuando queremos ver un vídeo online antes del vídeo. Es decir, pulsamos en el play para ver la noticia y aparece este formato como un anuncio de televisión. Cuando termina aparece la noticia que queríamos ver.

Personalizaciones, Wallpapers, etc.: Estos formatos consisten en customizar el fondo de la página web con imágenes del anunciante. Además muchos de ellos no sólo son el fondo personalizado sino que todos los formatos que acompañan a la página web son también de ese anunciante. Lo vemos con ejemplos que siempre queda mejor: Por ejemplo en MSN se puede contratar para su página de inicio un Wallpaper. Este formato consiste en una imagen de fondo del anunciante más un robapáginas del anunciante más un superbanner del anunciante. Es decir, tú entras en la home de MSN y si por ejemplo Zara tiene contratado un Wallpaper todo lo verás de Zara.

Las malas prácticas de anunciantes y soportes con los banners Es cierto que el banner es percibido como molesto por muchos usuarios. La culpa no es del anuncio sino del uso y abuso que ha tenido en estos últimos años por parte de los anunciantes y soportes web que lo publican en sus sitios.

Por una parte los anunciantes han querido aumentar su efectividad de manera infinita a través de técnicas

FUNDAMENTOS DE DISEÑO GRÁFICO PARA WEB E INTERACTIVOS tema 0 7 molestas e intrusivas. Por otra parte existen páginas web donde cuesta diferenciar lo que es el contenido real y lo que es la publicidad.

Desgraciadamente los tipos de banners más molestos son los que mayor efectividad muestran. Aparte de los que tienen incluido sonido existen los siteunders que son una evolución del pop-up. En este caso se abre una ventana entera por debajo de la ventana en la que actualmente estás navegando.

Banners efectivos sin que sean molestos para el usuario Si te importa tu imagen como empresa no te recomiendo hacer uso de los formatos intrusivos. A corto plazo consigues resultados pero a largo plazo pierdes la confianza y credibilidad. Aunque cueste más trabajo merece la pena de invertir trabajo en un banner efectivo que aporta valor al usuario que navega en la web. Para empezar tienes que elegir los sitios de tal manera para que haya un encaje entre el contenido de la web y tu oferta comercial.

TEN EN CUENTA… Creatividad del banner: siguen existiendo aquellos banners que son lo suficientemente creativos para generar el interés por parte del usuario. Incluir personas suele tener mejor resultados.

Integración de una animación flash o video: siempre existe un porcentaje de usuarios que percibe un banner animado más molesto que uno sin animación. Hay para todos los gustos, pero es posible que llamar la atención pueda compensar más que disgustar a un porcentaje de los internautas.

Banner formulario: uno de los conceptos básicos de usabilidad es ahorrar cada clic que sobra. En este caso el banner se convierte en página de aterrizaje consiguiendo datos de usuarios como el correo electrónico directamente en el banner sin necesidad de tener que pasar por la web del anunciante.

Generar un banner con impacto que sea valorado de manera positiva por la mayoría de los usuarios no es una tarea fácil. No busques nunca el 100% porque es imposible de lograr. Jugar limpio y no hacer uso de técnicas agresivas cuesta más tiempo y esfuerzo pero al final merece la pena.

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0

FUNDAMENTOS DE DISEﾃ前 GRﾃ：ICO PARA WEB E INTERACTIVOS tema 0