Diseño Gráfico

Colegio Sup. F. Ameghino

Nivel Terciario
Prof. Paula Milazzo

Introducción al Diseño Web

Los fundamentos de un buen Diseño Web.
La usabilidad es lo que da valor a ser un buen diseñador Web. En el inicio del Internet las personas solo
quería estar presentes en ese medio, no les importaba si el diseño era mediocre, si no se podía leer
satisfactoriamente, si los colores “chocaban” entre ellos, si la información se presentaba como si fuera una
copia del libro o manual de la compañía.
En nuestro tiempo un buen diseño tiene que demostrar una Arquitectura de Navegación lógica y coherente;
una consistencia inteligente sin llegar al aburrimiento; organizar la maquetación del contenido; todo
combinado con un real entendimiento de las necesidades del cliente en relación con el usuario final.
Objetivos:
• Examinar la relación entre los elementos y organizarlos en grupos definidos.
• Distribuir elementos en forma lógica para una mejor comunicación.
• Crear una consistencia en el diseño repitiendo elementos gráficos, tipografía y color sin llegar al
aburrimiento.
• Manejar prioridades en la navegación a través de color, contraste, tamaño y ubicación.
• Ganar un ojo crítico para evaluar otros diseños de sitios Web.
• Determinara el uso efectivo de gráficos, colores, tipografía, manejo del contenido y navegación para crear
una relevante presencia Web.
• Entender las exigencias, necesidades, desventajas o limitantes del cliente y el usuario final.

Usabilidad
Hace unos cuantos años las organizaciones y compañías solo deseaban estar presentes en Internet, no les
importaba si la información no se leía bien o si no existía un orden en el sitio. Ahora las grandes
corporaciones requieren de un sitio fácil de navegar, el contenido bien organizado, utilizar solo los gráficos
requeridos, jerarquías en relación a la información y una planeación de interacción con el usuario final por
medio de actualización del contenido.

Mitos del Diseño Web:

• Diseño es solo crear sitios “bonitos”
• El diseño se puede lograr sin un proceso de desarrollo
• El diseño Web es subjetivo y no se puede probar
Hechos del Diseño Web:
• Diseñar un sitio Web va más allá de la representación visual, es un estudio entre los gráficos y el
contenido.
• El diseño sin un análisis es solo una maquetación visual.
• Un sitio Web sin una evaluación es un diseño sin validación.
• Diseño Web es un proceso racional en el cual todas las desiciones tienen que ser justificadas.

Elementos Visuales de Comunicación

El diseño es la expresión/comunicación de ideas, conceptos y sentimientos transformados en algo tangible.
Un diseño es efectivo cuando es desafiante, estimulante y lleno de expectaciones. El diseño tiene una voz
que cuenta una historia, es trabajo del diseñador traducirla al usuario final.
Los elementos básicos de comunicación visual son :

• Seducción
• Convicción
• Inspiración

El diseño tiene un propósito

El propósito del diseño gráfico es hacer el mensaje fácil de entender, en el diseño web se mide su éxito en
qué tan rápido y efectivo se comunican las ideas al usuario.
• Diseñar obteniendo claridad e impacto
• Crear una jerarquía visual o añadir énfasis a los elementos importantes

Diseño Web 1
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

• Los elementos gráficos son parte del mensaje, no son completamente el mensaje.
• El contenido maneja al diseño

El diseño explicará el porque de las cosas

• Como navegar un sitio
• Como ordenar un regalo
• Como servir a los intereses del usuario
• Como comunicar
• Como mostrar la información

El sitio puede ser informativo

• Informar acerca de la organización, su misión, productos o servicios.
• Hablar de un individuo o grupo de personas.
• Comunicación el mundo dando información al día. (Revistas en línea, noticias y referencias)
• Encontrar información en línea. (directorios y robots de búsqueda)
• Promever eventos. (conciertos, películas, festivales)
• Aprender y capacitarse. (universidades en línea, tutoriales, páginas de ayuda, Literatura)

De entretenimiento
• Juegos en línea, sitios de Arte, música, películas

De participación
• Chat, foros de discusión, sitios para conocer gente
• Comprar en línea, subastas, remates
• Proveer información y herramientas para construir un sitio web

De asistencia
• Guías de Ciudad, guía de eventos

El diseño web es un proceso en constante evolución

• Desarrollar diferentes posibilidades antes de llegara una solución.
• Si se cometen errores, comenzar de nuevo y desafiarse a sí mismo.
• Implementar infinidad de posibilidades por desarrollar, un sitio web es el arte de lo no terminado.

Principios básicos de usabilidad

Estructura: la maquetación es deliberada y se basa en
las intenciones del usuario.
Visibilidad: todo tiene que ameritar una presencia.
Retroalimentación: los usuarios tienen que estar
informados de qué es lo que está pasando.
Síntesis: el usuario siempre buscará un diseño simple y al
punto.
Reciclaje: consistencia en la re-utilización de elementos
visuales en la organización.

Existen tres componentes del diseño web: Diseño de la información, Interacción en el Diseño y Diseño
visual.
Diseño web no es solo visual requiere una buena información e interacción.
Diseño de la información: es el proceso que determina como estructurar y presentar información. El
diseño de la información incluye como la navegación y orientación es presentada. Enfatiza la estructura
organizando el contenido, elementos visuales y estilo de escritura.

Diseño Web 2
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Interacción en el diseño: es el diálogo entre el sitio Web y el usuario. Toma en cuenta la forma en que se
navega en el sitio, la retroalimentación hacia el sitio y como controlar la página. Para que la interacción
funcione, el sitio tiene que emparejar las intenciones del usuario y la funcionalidad del mismo. Obteniendo
así una experiencia agradable y sin frustraciones.
Diseño Visual: es la presentación del sitio llevando el mensaje gráfico de la organización. El diseño visual
no son toques decorativos sino una ayuda en la
comunicación del mensaje, debe soportar el contenido de
cómo se ve y se siente el proyecto.
Se compone de imágenes fotográficas, en 3D, ilustraciones
técnicas, tipografía, color, espacio, ubicación, vínculos y
puede tener como opciones botones, tabuladores, marcos,
cajas, etc.

La dirección que sigue el usuario en la lectura del sitio Web.

Comprender que la dirección con que se lee un sitio web puede ser diferente a la de una hoja impresa nos
ayudará a determinar la posición de los objetos. Se pueden crear sitios con forma de lectura normal de
izquierda a derecha y regresando a la izquierda, pero se puede crear un estilo de manecillas de l reloj.

Lógica visual
El diseño gráfico crea una lógica en su balance visual. Sin el impacto visual en las formas, colores y
contraste las páginas serían aburridas sin motivación al visitante.
Desorden y confusión pueden dañar a un sitio web. Organización espacial de gráficos con texto animará la
atención del usuario, al dar prioridad a la información creará una atmósfera eficiente y agradable.

PUNTO FOCAL ABURRIDO BUEN CONTRASTE

Jerarquía Visual
La jerarquía visual crea una consistencia en donde elementos con prioridad se enfatizan y su contenido es
organizado en forma lógica. El balance general en la organización es crucial, una página con un enorme
bloque de texto es aburrida, no tiene un punto focal y carece de interés. Tampoco es una solución la
exageración de elementos gráficos como líneas, iconos, gifs animados, animaciones”gratis” que nada tienen
que enfatizar. La sobre utilización crea un desorden en el diseño.

Diseño Web 3
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Sin jerarquía visual Diseño con buen balance

El contenido determina el desarrollo del Sitio

Al diseñar el sitio se tiene que conocer el contenido. El cual determinará las direcciones a seguir. El estilo
del diseño reflejará lo que el contenido requiere.
Al planificar el sitio se entenderán las metas del cliente y del usuario final.
• Diseñar funcionalmente
• Crear un diseño apropiado
• Desarrollar una maquetación consistente
• Desarrollar un estilo acorde
• Crear un esquema de color
• Mantener un diseño simple
Se pueden tomar riesgos y experimentos en el diseño donde sea apropiado.

El diseño tiene su propia voz

La inspiración llega de donde sea, una buena elección se debe a una cultura visual entrenada. El trabajo del
diseñador web es encontrar la comunicación y experiencia del usuario. Lo apropiado va dirigido a la
audiencia, contenido y presupuesto del cliente

Diseño del contenido: Información visible

Internet es un medio visual, reducir información escrita sin perder contenido es un desafío.
Las soluciones pueden venir de diferentes frentes. Como diseñador web y escritor:
• Se deben crear estrategias de diseño en forma de síntesis.
• Trabajar con el presupuesto del cliente, pero sin dejar de lado al usuario final.
• Que el usuario pueda acceder a la información sin dificultad.
• Sintetizar el texto sin perder significado.
• Ayudarse de medios como vínculos externos, fotografías, listas, esquemas, etc.
• Crear capas de información, dejando lo más importante al frente y segmentando en diferentes vínculos la
información más profunda.
• Crear algún resumen de contenido.
• Utilizar Mapa del sitio como referencia de contenido.
• Crear tablas de comparación o información diversa.
• Encontrar la esencia de la información.
• Organizar el contenido en secciones cortas de texto.

Diseño Web 4
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

• Pensar visualmente
• Diseñar basado en las necesidades del usuario.

Tipografía
La tipografía no solo comunica verbalmente, también lo hace en forma visual. Crea una jerarquía visual del
texto obteniendo un orden de subordinación. Ayudando al usuario en la distinción entre los títulos, subtítulos
y bloques de texto.
Tipografía en Internet es diferente a la impresa, típicamente lo impreso se lee a 1200 dpi, mientras un
monitor solo despliega una resolución entre 72 a 96 DPI.
Una buena uso de tipografía depende del contraste visual entre las fuentes utilizadas, títulos, subtítulos,
espacio en blanco, llenar una página con texto puede ser difícil de leer.
Efectos de texto en un sitio Web
• Texto pequeño se nota más oscuro
• Texto grande se ve más claro
• Cuando se utiliza texto con bajo contraste respecto al fondo, el ambiente puede ser tranquilo, pero si el
texto es en gran cantidad puede ser cansar al leerlo.
• Menos texto es mejor
• Dividir el contenido en títulos y vínculos
• Manejar líneas cortas de texto
• Hacer decisiones editoriales acerca de la cantidad de texto en cada segmento
• Maquetar de forma que el texto no aparezca en un solo bloque de texto en toda la página.
• Darse cuenta que en la Mac se visualiza la letra más pequeña que en una PC
• Se creará una fuente que no es HTML (verdana, georgia, times, arial, etc.) en forma de imagen.
• Cuidado con la letra pequeña.

Fuentes vistas en Windows y en Macintosh

Si se especificará una fuente que viene por defecto en las Macs como en PC:
Fuentes sin patines en PC y Mac: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans regular.
Fuentes con patines en PC y Mac: Georgia, Tiems new Roman, Times,
Courier en Mac y PC: Courier New, Monaco, Courier.
Cascading Style Sheets

Diseño Web 5
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

CSS (Cascading Style Sheets) es un mecanismo para controlar el estilo del sitio sin comprometer la
estructura. La aplicación de un estilo a diferentes páginas lleva a un despliegue más rápido y si se edita esa
hoja de estilos se manifiesta en todas las páginas que lo contienen.
La mayoría de los nuevos navegadores soportan el lenguaje de CSS.

Color
Los monitores ahora pueden desplegar millones de colores, pero si un monitor solo puede desplegar 256
colores, entonces los colores que no son Seguros (216) cambiarán dramáticamente. Solo conociendo las
posibilidades tecnológicas del usuario final determinará el uso del color. Los monitores jamás estarán
calibrados al 100%, así que se notará la diferencia entre una computadora y otra. La Gamma de la Mac es
de 1.8 y la de PC 2.2, así que en una PC se notarán los colores más oscuros.
El color es uno de los elementos más subjetivos del diseño, conociendo su lenguaje se puede
utilizar como una influencia del mensaje:
• Se puede simular actividad.
• Pueden ser percibidos como algo pasivo.
• Crean un dinamismo atmosférico como frío o calor.
Cuando se elige un esquema de color se consideran los factores:
• Escoger colores que reflejen el mensaje a comunicar.
• Colores cálidos indican excitación (ambiente más vibrante, de alto contraste y más saturado),
• Colores fríos añaden paz y dignidad al sitio (ambiente relajado, menor contraste y menos saturado)
• Considerar su relación con el sitio (serio, cómico, formal, festivo, natural, etc).
• Los colores siempre representan un significado, por ese motivo tienen que desplegar la correcta
información visual

Psicología del color

Las Implicaciones psicológicas en investigadores de mercado del Color han hecho estudios extensos que
exploran las respuestas emocionales de personas hacia el color. Algunas de estas respuestas parecen ser
poderosas y bastante universales. Sin embargo, mucha de esta información se influencia culturalmente.
Sabemos que las tradiciones culturales dotan a los colores con medios poderosos que pueden diferir mucho
del lugar. Por ejemplo, en Europa y los Estados Unidos, negro es el color del luto. En muchos países
tropicales y en el Asia Oriental blanco es el color de la muerte. Por otro lado, blanco es el color llevado por
novias occidentales, mientras novias en Asia utilizan rojo.
Significado de los colores, según occidente:
Rojo se asocia con sangre, y con los sentimientos que son
energéticos, emocionante, apasionado o erótico. La mayoría de
los colores llevan ambas implicaciones positivas y negativas. La
desventaja de rojo es que provoca sentimientos agresivos,
sugiriendo la cólera o la violencia.
Naranja es el color de carne, o del calor amistoso del fuego de
hogar. Las implicaciones positivas de este color sugieren la
accesibilidad, informalidad. El lado negativo quizás implique la
accesibilidad al grado de sugerir que cualquiera puede
acercarse, esto es una falta de la discriminación o de calidad.
Amarillo es el color de sol. Este color es optimista, moderno. La
energía de amarillo puede llegar a ser agobiante. Por lo tanto
amarillo no es un color que tiende a dominar la moda por
grandes periodos de tiempo.
Verde es un modo positivo, verde sugiere la naturaleza (la vida de planta, los bosques), la vida, la
estabilidad, descanso, naturalidad. Por otro lado, verde en algunos tonos o ciertos contextos (piel tal como
verde) puede en lugar sugiere el decaimiento (el hongo, el moho), la toxicidad, artificialidad.

Diseño Web 6
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Azul sugiere el frescor, la distancia, la espiritualidad y la elegancia quizás reservada. Alguna sombra de azul
halaga a casi cualquiera. En su modo negativo, nosotros podemos pensar en la implicación de tristeza,
pasividad, la enajenación, o la depresión.
Violeta es el color de la fantasía, del retozo, de la impulsividad y de los estados de sueño. En su modo
negativo, puede sugerir las pesadillas, o la locura

Navegación: un camino a través del sitio web

Visitar un sitio web es como llegar a una nueva ciudad, necesitamos orientarnos rápidamente. Se quiere
saber inmediatamente ¿dónde estoy?, ¿dónde puedo ir?, ¿como llegaré allá?, ¿cómo puedo regresar?
Estas son preguntas básicas que un esquema de navegación tiene que resolver.
Calidad de Navegación:
• La navegación tiene que ser consistente.
• Tiene que aprenderse rápidamente.
• Debe proveer retroalimentación.
• Debe ser contextual.
• Ofrecerá rutas alternativas.
• Requerirá de la menos cantidad de acción y tiempo.
• Debe proveer mensajes visuales muy claros.
• Debe ser organizada y bien marcada.
• Debe ser apropiada en los propósitos del sitio.
• Debe contemplar las metas del usuario, necesidades y conductas.
No existen recetas o fórmulas para que un sitio sea exitoso en la navegación, cada sitio tiene diferentes
requerimientos. Cualesquiera que sea el propósito del sitio tiene que contener accesibilidad, alternativas,
retroalimentación y aumentar la facilidad del usuario.
Propósitos de la navegación
• Ayudar a encontrar algo.
• Decir en qué lugar estamos.
• Darnos algo como referencia.
• Decirnos qué está aquí y qué encontraremos más allá.
• Mostrarnos como utilizar el sitio o CD ROM.
• Confiar en las personas que diseñaron el sitio.
Convenciones en la navegación
• Identificación del sitio: ¿de quién es éste sitio?
• Secciones: ¿Cuales son las secciones principales del sitio?
• Utilidad
• Una forma de buscar dentro del sitio.
• Llegar al inicio desde cualquier lugar (Home)
• Soporte
• Visualizar secciones alternativas
• Nombre de la página en que se encuentra uno
• navegación local: ¿cuáles son mis opciones en éste nivel?
• Indicador de donde me encuentro: ¿dónde estoy en el esquema externo?

Tipos más comunes de navegación:

(1) • Botones y tabuladores deben contener etiquetas de identidad

(2) • Vínculos en texto

Diseño Web 7
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

(3) • Menús desplegables

(4) Iconos con etiquetas de identidad o sin ellas

(5) • Códigos de color

6) • Robots de búsqueda

Diseño Web 8
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

(7) • En forma de directorio

La Navegación exitosa se sirve de alguna ayuda para el usuario, mostrando la arquitectura del sitio:
Tips para crear mapas del sitio:
• asegurarse que el sitio se puede ver fácilmente
• asegurarse que el mapa del sitio es consistente y no confunde a los usuarios • asegurarse que el título de
las páginas el mapa del sitio tienen sentido
• Considerarse crear una paseo por el sitio llevando al usuario por el sitio.
ejemplos:

Mapa del sitio e Indice del Sitio

Diagrama de flujo del sitio

Diseño Web 9
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Estilos de Navegación
• Lineal: pueda ser en una dirección o bi-direccional, se utiliza comúnmente en galerías

Siguiendo el camino recorrido: despliega su situación en la jerarquía del sitio

• Plano: donde puede desplegarse todo en seguida

• En base a la ruta seguida en forma dinámica como en los sitios e comerse

Diseño Web 10
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

• Al Azar

Qué estilo se utilize depende el tipo de experiencia que se quiere crear para el usuario final y que tanto
control se desea proporcionar.

Los Problemas comunes de la Navegación

• Elecciones Pobres del color en los vínculos
• Subrayando texto que no es vínculo
• Colocación ilógica de los objetos
• Mal uso de los marcos (frames) anidados con un trayecto erróneo
• Lanzar el sitio entero en una ventana nueva sin controles del navegador.
• La metáfora Inadecuada o difícil de entender
• Iconos confusos o mal utilizados
• La falta de orientación en cuanto a donde se está en la estructura del sitio
• Retroalimentación sin ayuda - mensaje de error
• Inconsistencia en la ubicación, texto, colores, estilo visual, etc.
• Vínculos confusos con conexiones a la misma página
• Botones sin etiquetas o confusos
Conceptos de accesibilidad pública
Aunque Internet tenga la habilidad de proporcionar inagotable información a una audiencia inmensa, puede
ser también una fuente de frustración a personas con ciertas incapacidades.
Hay dos grupos, en particular, que pueden quedar fuera de esa información si ciertas características de la
accesibilidad no se incluyen en el diseño de páginas web: las personas invidentes y las personas sordas.
Los invidentes tienden a utilizar navegadores basados en la lectura de información, tal como Linx (en
contraparte con navegadores gráficos como Netscape y Explorador de Internet).
Los navegadores basados en la lectura del texto pueden tener acceso a toda información en una página
web, pero no pueden describir lo que un gráfico o imagen representa a menos que el autor incluya una
etiqueta de ALT– una descripción breve de texto de la imagen empotrada en el gráfico.
Otras características del diseño web que pueden ser problemáticas para navegadores de lectura de texto
incluye:
• Infinidad de vínculos en una línea
• Nombres no descriptivos del vínculo (por ejemplo “clic aquí”)
• El uso de marcos
• El uso de formularios
• El uso de tablas

Diseño Web 11
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

• Activar la opción de “refrescamiento” de una página

• Menús desplegables

Desarrollar una Metodología para un Diseño orientado a ser exitoso

La metodología utilizada para un diseño exitoso consiste en diferentes pasos:
• Determinar las metas del proyecto, la audiencia y el estudio de mercado
• Crear personajes basados en el usuario típico
• Crear escenarios basados en los usuarios
• Crear tareas basadas en las metas del usuario
• Crear un prototipo para probar
• Desarrollar las pruebas del usuario en el concepto clave y tareas claves
Como se diseña para lograr metas
• aprender acerca del cliente, sus expectativas y sus limitaciones
• Aprender acerca de las metas y tareas del usuario final
• Entender el producto o servicio a exponer en el sitio
• Crear un concepto de diseño
• Trabajar los detalles probando la usabilidad
• Crear una especificación técnica con soporte (qué tecnología utilizarán los usuarios)
Un sitio web es un producto de autoservicio. Proveer calidad en la navegación es esencial, solo de esa
forma se puede tomar ventaja ante la competencia.
Comunicar efectivamente la información, crea visitantes leales para regresar una y otra vez.
El diseño dirigido al usuario tiene que ser coherente, intuitivo y agradable.

Desarrollo del proceso:

1) Estrategia
2) El alcance
3) Arquitectura o estructura del sitio
4) El esqueleto de la interfaz
5) Diseño
6) Producción
Cada nivel depende del otro, la dependencia asegura un buen entendimiento entre ellos.

Determinar la audiencia, contenido y funcionalidad del sitio

La audiencia:
1. ¿Qué tipos de visitantes se quiere atraer?
2. ¿Cuáles son las metas para cada tipo de visitante?
3. ¿Qué implican los productos o servicios?
4. ¿Cuáles son las metas para estos productos o servicios?
El contenido:
1. ¿De dónde vendrá el contenido? ¿Será nuevo, re dirigido, o ambos?
2. ¿Con qué frecuencia se agregará contenido nuevo?
3. ¿Quién actualizará el contenido?
La funcionalidad:
1. ¿Qué requisitos funcionales se cree deben ser necesarios? (Por ejemplo, áreas de descarga, páginas
web manejadas por bases de datos, e-comercio, de catálogo, etc.)
2. ¿Quién actualizará estas funcionalidades?
3. ¿exixten asuntos de seguridad?
4. ¿Hay otros asuntos o limitaciones técnicas?
5. ¿Se ha presupuestado para hospedaje del sitio? ¿Si es así, cual es el presupuesto?
6. ¿Quién mantendrá el contenido del sitio?
7. Qué tipos de sistemas de bases de datos están en el lugar?
8. ¿Cuales el plan a largo plazo para el sitio?
El Estudio de mercado:
Esta parte del perfil es muy importante. Más trabajo que se dedique, más beneficios traerá al proyecto.
• Visitar un sitio con una situación semejante al proyecto (compañía nueva, marca nueva, marca
establecida, etc..)
• Preguntarse si se construiría el sitio si se estuviera en una industria diferente
• Crear un esquema de Color, como se siente el ambiente del sitio, manejar la disposición de elementos
• Tamaño del sitio
• Tamaño de proyecto
• Actualización constante (frecuencia, la novedad del contenido, etc..)
• Atrayendo personas nuevas al sitio (noticias frescas, regalos, impacto, etc..)

Diseño Web 12
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

• Estudiar los sitios competidores

• Determinar la calidad del contenido
• Crear la calidad de los gráficos
• Funcionalidad (loque hacen los sitios las personas)
• La Comunidad, las características especiales, la receptividad, otras categorías importantes para el
proyecto
• Sitios favoritos Generales (por cualquier razón)
¿Cómo Realmente Utilizamos el Internet? Mirando, escudriñando, navegando, no leyendo.
¿ Por qué nosotros escudriñamos? Porque generalmente estamos apurados. Mucho de nuestro uso del
Internet es motivado por el deseo para ahorrarnos tiempo.
No tenemos tiempo para leer más que lo necesario. Sabemos que no tenemos la necesidad de leer todo. En
la mayoría de veces, sólo estamos interesados en una fracción de lo que muestra la página. Buscamos
apenas los pedacitos que emparejan nuestros intereses o la tarea más fácil, el resto no es importante.
Escudriñar es cómo encontramos las partes importantes.
Estamos acostumbrados a escudriñar lo importante en periódicos, revistas, libros y sabemos que nos ahorra
mucho tiempo
¿Cómo los consumidores leen guías o instrucciones?
De principio a fin: 15%
Escudriña: 46%
Lee como una referencia: 35%
Nunca lee: 4%
Lo que leemos en Internet es solo una fracción, nunca nos detenemos los suficiente.
Por eso es que diseñaremos para ese tipo de lectura (El diseño para Escudriñar)
• Crear una Jerarquía Visual Clara la mayoría de los títulos son más grandes, gruesas y prominentes.
Utilizar grupos semejantes con encabezados lógicos anidando visualmente información. Una jerarquía visual
clara mejora el trabajo de pre-procesar, organizar, y priorizar el contenido.
• Tomar ventaja de las convenciones, llegan a serlo porque trabajan bien. Las convenciones alientan
familiaridad. Si no se utiliza una convención, se reemplazará por:
Algo tan claro que se explica por sí mismo para que no hay curva aprendizaje – sí así como una convención
o se agrega tanto valor que vale la pena una pequeña curva de aprendizaje.
• Dividir las páginas en zonas bien definidas. Priorizar y organizar las secciones, definiendo las regiones
principales.
• Hacer obvio lo que es un vínculo
• Aminorar el ruido visual de la página, que es saturación la del color, de imágenes o de texto y evitar un
fondo que compita con la información.
Una Marca en Internet
Una Marca no es la Identidad completa. Las marcas siempre han sido las experiencias. Una marca es una
esperanza de desempeño.
• Una marca es previsible y se sobreentiende la integridad.
• Marcas importantes son a menudo como religiones.
• Las marcas son recíprocas.
• Entre más fuerte la interacción y el valor más fuerte la marca.
• Marcas son conceptuales y emocionales.
• Una marca es una colección de memorias y experiencias.
Para tener éxito, una marca debe:
• Proporciona constantemente la calidad y la satisfacción.
• Debe distinguirse significativamente de la competencia para crear la preferencia de cliente.
• Debe ser pertinente, conveniente y fácilmente accesible a su audiencia.
Pueden existir diferentes marcas en Internet:
• Los medios: Libros, revistas, periódicos
• Publicidad: Medios Impresos, la televisión, en línea, al aire libre, la Radio
• Identidad Corporativa: Logo, papelería, Folletos, Carteles, etc.
• Oficinas: Ambiente del Negocio
• Eventos: Exposiciones, de Comercio, etc.
• Productos
• Servicios
Cada medio tiene sus propios atributos de marca y éstos cambian constantemente. Las marcas necesitan
ser consistentes en general a través de los medios, pero evolucionar para encontrar la ventaja de cada uno
de ellos
En el Diseño Web igual que el Diseño Editorial todo parece estar basado en el contraste: la habilidad de
distinguir una cosa de otra. La composición, secuencia, ritmo, aún la legibilidad depende de dispositivos que
afectan el contraste entre el contenido.

Diseño Web 13
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Buscaremos claridad, orden y confianza en las fuentes de información. La organización espacial de los
gráficos y el texto en la página web atraen a los lectores, sentirán el impacto gráfico, dirigirán su atención,
priorizarán la información, logrando así que sus interacciones con el sitio web sea más agradable y eficiente.

La lógica visual
El diseño gráfico crea una lógica visual buscando un equilibrio óptimo entre la sensación visual e
información gráfica. Sin el impacto visual de la forma, color, del contraste, las páginas son gráficamente
poco interesantes y no motivarán al espectador. Los documentos densos en texto, sin contraste, sin alivio
visual son también más difíciles de leer, especialmente en un monitor, relativamente de baja resolución.
Pero sin la profundidad y la complejidad de texto, páginas sumamente gráficas desilusionan al usuario. Se
debe ofrecer un balance entre la sensación visual, información de texto, y conexiones recíprocas de
vínculos. Al buscar este equilibrio ideal, las limitaciones primarias del diseño son las restricciones del HTML
y limitaciones de ancho de banda del usuario. Gran cantidad de personas utiliza módems lentos y solo muy
pocos cuentan con conexiones de alta velocidad tales como o DSL o Cable.
Continuidad visual, funcionalidad en la organización de sitio web, el diseño gráfico y la tipografía son
aspectos esenciales para convencer a la audiencia que el sitio ofrece contenido de calidad. Un enfoque
cuidadoso y sistemático del diseño puede simplificar la navegación, reduce los errores del usuario, les hace
más fácil aprovechar la información y las características del sitio.
La jerarquía visual
La tarea primaria del diseño gráfico deberá crear una jerarquía visual, constante y fuerte en donde los
elementos importantes se acentúan y el contenido se organiza lógica y previsiblemente.
El diseño gráfico es una administración visual de información, utilizando los instrumentos de maquetación,
tipografía e ilustración para dirigir el ojo del lector por la página. En un principio el usuario final solo visualiza
una masa de color y figuras contrastando con el fondo (1). Posteriormente empiezan a captar información
específica, primero ven los gráficos si están presentes, sólo entonces analizan detenidamente la parte llena
de texto (2), acto seguido proceden a leer palabras y frases individuales (3):

1 2 3

El contraste es esencial
El equilibrio y la organización de gráficos en la página son cruciales para invitar al usuario a leer el
contenido. Una página llena de texto repelerá el ojo como una masa de indiferenciado gris, sin indicaciones
obvias a la estructura de su información. Una página dominada por sobre-trabajados gráficos o tipografía
mal diseñada, repelerá a usuarios que buscan un contenido sustantivo. Se debe lograr un equilibrio
apropiado entre atraer el ojo con el contraste y proporcionar un sentido de organización (4) y (5):

(4) Sitio Aburrido sin punto focal 5) Estructura visual con mejor contraste

El equilibrio y la conveniencia visual atraerán la audiencia y creará experiencias exitosas de diseño. Los
diseños más efectivos para audiencias generales de Internet utilizan un equilibrio cuidadoso de texto y

Diseño Web 14
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

vínculos con gráfica relativamente pequeña.

Estas páginas se cargan rápidamente, aún cuando el acceso es por medio de módems lentos, mas logra
todavía un impacto gráfico substancial (6).
Cuándo se establece un diseño de páginas para el sitio web, se debe considerar el propósito general, la
naturaleza de su contenido y muy importante, las expectativas de sus lectores.

(6) Sitio simple con pequeños gráficos

La Consistencia
Se establecerá una cuadrícula con la disposición y estilo para
manejar texto y gráficos, entonces se aplicará en forma constante
para construir un ritmo y unidad a través de las páginas. La
repetición con mesura no es aburrida; provee al sitio de una
identidad gráfica constante y refuerza un sentido claro del “lugar”
logrando un sitio memorable. Un enfoque constante en la
disposición y navegación permite a los usuarios adaptarse
rápidamente al diseño y así predecir la ubicación de información y
navegación a través de las páginas del sitio

Si se escoge un tema gráfico, se utilizará a través del sitio web

En éste sitio se utiliza un gráfico en la página principal y en los interiores se establece una imagen más
pequeña, pero con el mismo estilo

Diseño de la Página Web

Dimensiones de la Página
Aunque el diseño web y documentos convencionales de impresión compartan muchas similitudes gráficas,
funcionales y editoriales, la pantalla de la computadora es el sitio primario de visualización para información
basada en Internet. Las pantallas de la computadora son típicamente menos amigables visualmente que la
mayoría de un libro o revista. Un error común en el diseño web es crear páginas que van más allá del área
que un usuario común puede ver en un monitor de 17 pulgadas (a).
(a) El sitio está diseñado para un monitor grande.

Diseño Web 15
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Las áreas gráficas “seguras”

El “área segura” para una página web es determinada por dos factores: el tamaño mínimo de pantalla en el
uso común y la anchura de papel utilizado para imprimir páginas web.
La mayoría de las pantallas que se utilizan en la oficina y en la escuela son de diecisiete a diecinueve
pulgadas (cuarenta y tres a cuarenta y ocho centímetros) en tamaño y en su mayoría están arregladas para
desplegar un tamaño de 800 x 600 pixeles. El diseño de una página web que excede la dimensión de
anchura que los monitores comunes despliegan, demuestran lo inexperto del diseñador y molestará a
muchos lectores el desplazarse vertical y horizontalmente para ver la página completa. Es suficiente malo
tener que moverse en forma vertical, entonces el desplazarse en dos direcciones sería intolerable.
Aún en pantallas pequeñas es posible mostrar gráficos que son demasiado anchos para imprimir bien en
tamaño común de carta, de tamaño legal, ó A4. Las versiones actuales del navegador procuran resolverse
los problemas para imprimir con la opción de escalar el contenido de página, quedando la anchura uniforme
de papel. Sin embargo, muchos usuarios no saben de esa opción. Otro problema es que las páginas anchas
al ser escaladas, a menudo son ilegibles porque la tipografía se ha reducido excesivamente. En muchas
páginas web, sin embargo, imprimir es un acto secundario. Las páginas con mucho texto siempre se deben
diseñar para imprimir apropiadamente porque la mayoría de los lectores imprimirán esas páginas para
leerlas más cómodamente.
Las dimensiones seguras del área para imprimir (640 x480 pixeles) y para maquetaciones diseñadas con la
anchura máxima de 800 x 600 pantallas se muestran abajo:
Dimensiones seguras de área diseñadas para imprimir bien en maquetaciones de 640 x480 pixeles (b):
Anchura Máxima = 560 pixeles
Altura Máxima = 410 pixeles (visible sin desplazamiento)
Dimensiones seguras de área diseñadas para pantallas de 800 X 600 (c):
Anchura Máxima = 760 pixeles
Altura Máxima = 410 pixeles (visible sin desplazamiento)

Diseño Web 16
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

La longitud del contenido en la página

Tiene sentido mantener la información dentro de los límites de
una sola página web, especialmente cuando usted espera al
usuario a imprimir o salvar el texto. Mantener el contenido en un
lugar hace más fácil imprimir o salvar la página. Pero más de
cuatro pantallas de información que el usuario desplace, hace
que la utilidad de la página comience a fallar. Las páginas largas a
menudo fallan por no aprovecharse de los vínculos disponibles en
el medio web.
Si se desea proporcionar una buen interfaz en línea para un
documento largo, que sea fácil de imprimir o salvar su
contenido:
• Dividir el documento en piezas de no más de una o dos
páginas de información, incluye los gráficos. Utilizar el poder de los vínculos aprovechando del medio web.
• Proporciona un vínculo a un archivo separado conteniendo el texto con la longitud completa, combinado
como una página así que el lector pudiese imprimirlo o salvar toda la información en un solo paso. No
olvidar incluir el URL de la versión en línea dentro del texto de esa página para que los usuarios pueden
encontrar la fuente, por si existen actualizaciones futuras.
En general, se diseñarán páginas web cortas para:
• Páginas principales
• Documentos para ser leídos solo en línea
• Páginas con gráficos muy grandes, ocupando una pantalla completa
En general, documentos más grandes se diseñarán para:
• Hacerlas más fácil de mantener (el contenido está en un solo pedazo, no en pedazos vinculados)
• Parecerse más a las versiones impresas (sin cortar)
• Más Fácil para usuarios al descargar e imprimir en un solo movimiento

La maquetación web
Las páginas web implican un poco de magia. El protocolo de hipertexto fue diseñado por ingenieros y
científicos que nunca lo imaginaron como un instrumento de maquetación. Su meta era proporcionar una
manera de describir información estructural acerca de un documento, no un instrumento para determinar la
apariencia del mismo. Una vez que el mundo entero empezó a trabajar en ese medio, diseñadores gráficos
adaptaron los instrumentos primitivos del hipertexto para producir documentos que se parecían más a los
medios de impresión. El punto no era producir páginas “de colores llamativos” o más “bonitas”. Las
convenciones en la disposición de documentos de impresión han evolucionado por centenares de años con
razones prácticas y concretas, haciendo ver el diseño web muy simple, pero si se toma ventaja de ello
crearemos sitios con alto grado de síntesis.

Crear un diseño flexible

Internet es un medio flexible diseñado para acomodar una gran diversidad de usuarios y una gran variedad
de dispositivos para visualizarlo. A diferencia de un documento impreso, que se muestra estático en su
medio, una página web depende de elementos como el tamaño del monitor, la resolución, los cambios del
color, la altura y la anchura de la ventana del navegador, las preferencias de software tales como la
conexión y los tipos de letra disponibles. Verdaderamente, no hay forma de tener un control completo sobre
el diseño de una página web. El mejor enfoque, entonces, debe entender el medio y diseñar páginas
flexibles que son legibles y accesible para todos los usuarios.
La disposición con hojas de estilo CSS (Cascading Style Sheets)
Uno de las propiedades visuales en que las Hojas de Estilo ayudan en la maquetación es describir cómo los
elementos se posicionarán en la página. Los CSS permiten a los diseñadores crear márgenes, posicionar
texto e imágenes en la página en relación de uno al otro, esconder y mostrar elementos, sobreponer
elementos, etc. Teóricamente, CSS debe
proporcionar todo el control del diseño para
maquetar una página web. En la práctica, sin
embargo, contradicciones entre los navegadores
han hecho que los CSS no trabajen en forma
universal. Aunque las especificaciones W3C para
posicionar CSS contienen la mayor parte de los
instrumentos necesarios para un buen diseño.
Microsoft y Netscape han hecho un trabajo
especialmente pobre aplicándolos, así que las
propiedades tales como bordes y márgenes
demuestran diferencias substanciales de navegador

Diseño Web 17
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

a navegador. Si se crea el sitio para una audiencia diversa tal vez sea mejor crear el sitio por medio de
“tablas” o crear la maquetación sencilla por si la versión del navegador utilizado por los usuarios no soporta
bien CSS

Diseñar por medio de tablas (tables)

A causa de las limitaciones del HTML y las contradicciones de CSS, la único disposición segura para
diseñadores web en este momento son las tablas

Longitud de una línea de Texto

La longitud ideal de una línea de texto se basa en la fisiología del ojo humano. El área de la retina que se
utiliza para las tareas que requiere la agudeza visual alta se llama " mácula". La mácula es pequeña,
típicamente menos de 15 por ciento del área de la retina. En distancias normales de lectura el arco del
campo visual que cubre la mácula es sólo unos pocos centímetros
La anchura de una columna bien diseñada de texto, debe ser cerca de doce palabras por línea.
Investigaciones muestran que la lectura se vuelve lenta y la retención falla cuando la longitud de la línea
empieza a exceder la anchura ideal, porque el lector necesita utilizar los músculos del ojo o el cuello para
rastrear del fin de una línea y principio de la próxima. Si el ojo debe atravesar gran distancias en una página,
el lector se pierde fácilmente y debe buscar el principio de la próxima línea. Estudios cuantitativos
demuestran que una moderada longitud de línea aumentan apreciablemente la legibilidad de texto. El uso
de tablas limitará la longitud, idealmente a diez a doce palabras por la línea

Los márgenes
Los márgenes definen el área de lectura de una página separando el texto principal de los elementos
gráficos, tales como objetos de la interfaz o navegación. Los márgenes proporcionan también el contraste y
el interés visual. Utilizar celdas para establecer márgenes y se utilizarán constantemente a través del sitio
para proporcionar la unidad.

Columnas
Un uso común de las tablas es aumentar tanto la legibilidad como funcionalidad del diseño, con una
disposición de columnas múltiples se puede dividir la página en columnas de texto principal, la navegación
del sitio en otra, quizás una tercera columna con la navegación de la página, otra par para citas textuales y
otra para vínculos a sitios relacionados. Múltiples columnas proporcionan un espacio flexible en variaciones
de la maquetación y reducen columnas de texto a una longitud cómoda para leer

Diseño Web 18
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Los espacios entre columnas (medianiles)

En la impresión el espacio entre columnas se llama medianil. Ellos mantienen las columnas separadas una
de la otra, en algunas ocasiones se utilizan y en otras se disimulan

Los bordes alrededor de tablas

Cuándo se habla acerca de tablas es porque requerimos una alternativa para maquetar contenido en una
forma ordenada. Se utilizan tablas para evitar las limitaciones del HTML. Estas son tablas invisibles cuyo
único propósito es controlar elementos de la página, solo si es necesario se aplica un borde alrededor de
ellas:

Fijo contra flexible

La conducta de una tabla del protocolo HTML depende en gran parte de cómo sus celdas se definen. Una
“característica” de las tablas es que tratan de adaptarse; se ensanchan y colapsan para acomodar su
contenido y entrar en las dimensiones del navegador. En la forma más básica, las tablas no son más
precisas que una galera de texto.
Es posible crear tablas flexibles de disposición que se abren o cierran elegantemente sin sacrificar la
integridad del diseño, pero si se requiere una maquetación precisa, se utilizarán tablas de anchura fija.

Diseño Web 19
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

Estructura de tabla con celdas fijas

Estructura de tabla con la celda del centro flexible

Tablas de anchura fija para disposiciones precisas

Acomodando el contenido en una tabla fija significa que la visualización será la misma sin importar el
tamaño del monitor o navegador del usuario. Diseñar en éste ambiente significa que podemos fijar la
posición de elementos en la página, por ejemplo, controlar la tipografía en su longitud de línea y
espaciamiento. Una desventaja de una disposición fija es que en pantallas grandes se despliegue una
porción mayor de espacios vacíos. Se puede evitar el efecto de “espacio desperdiciado” de una disposición
fija, centrando la tabla en el navegador o diseñando un gráfico del fondo para llenar las áreas vacías

Estructura con tabla centrada Tabla flexible, llenando de color el lado derecho

Tablas flexibles para las disposiciones que se adaptan

Un punto de vista popular es que los diseñadores deben controlar la naturaleza de documentos en Internet y
crear las disposiciones flexibles que se adapten a diferente condiciones de visualización. Para hacer esto,

Diseño Web 20
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

se requiere abandonar el control del diseño de página, como la longitud de línea. El diseño flexible es en
muchos sentidos más desafiante que el diseño fijo, porque requiere una comprensión profunda del HTML y
su implementación a través de plataformas y navegadores. Requiere también que se piense en que se
perderá control de la configuración propia y proponer que los gráficos y disposiciones trabajarán en
diferentes condiciones de visualización por parte del usuario.

Tabla con celda primaria flexible adaptándose a cualquier monitor

Las tablas son inherentemente flexibles, así que un enfoque al diseño flexible deberá permitir que las celdas
dentro de una tabla se acomoden según su contenido y el tamaño del navegador. Otro enfoque deberá
especificar la anchura de las celdas en valores de porcentaje; por ejemplo, la celda izquierda tendrá un 40
por ciento y la anchura principal de la columna del texto al 60 por ciento. De ésta forma las columnas se
acomodarán cuando el tamaño de la ventana se cambie, manteniendo sus proporciones relativas a pesar
del tamaño del navegador. Se puede utilizar también una combinación de celdas fijas y otras sin especificar
el tamaño para crear una disposición flexible. Utilizando esta técnica se especifica en pixeles la anchura de
las columnas que se requieren posicionar absolutamente — por ejemplo, una columna de la navegación o el
espacio entre ellas — y dejar la restante, como la columna de texto, sin específicar para que se adapte
llenando la pantalla.
Tabla con celdas flexibles utilizando un tanto por ciento, manteniendo así la misma proporción sin importar
el tamaño del navegador.

Tips creación Páginas Web

Entender el medio
Los usuarios experimentan páginas web en dos formas: como un medio directo donde las páginas se leen
en línea y como un medio para conseguir acceso a información que se descarga en archivos de texto o se
imprime en papel. Las expectativas acerca de como los lectores utilizarán típicamente el sitio debe gobernar
las decisiones del diseño.
Los documentos para ser leídos en línea deben ser concisos, con la cantidad de gráficos cuidadosamente
relacionados a la anchura de banda disponible a su audiencia convencional. Los documentos que muy
probablemente sean impresos y leídos posteriormente deben contenerse en una página, la anchura de

Diseño Web 21
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

página debe ser suficiente estrecha para imprimirse fácilmente en un tamaño uniforme de papel.
Incluir los elementos fijos de página
Cada página debe contener un título, un autor, una afiliación institucional, una fecha de la revisión,
información de derecho de autor, y una conexión a la “página principal” del sitio. Las páginas web a menudo
se imprimen o son salvadas en disco, sin esta información no existe una forma fácil de determinar donde se
originó el documento. Cada página en el sitio es como un recorte de periódico y se tiene que determinar de
donde proviene.
No imponer un estilo
No desarrollar un “estilo” para todos los sitios, no importar simplemente los elementos gráficos de otra
publicación de otro sitio web o impresión diseñada con anterioridad solo para “decorar” las páginas. Los
gráficos y el estilo editorial del sitio web deben evolucionar como una consecuencia natural del manejo
constante y apropiado de su contenido y maquetación.
Llevar al máximo los puntos principales del sitio
En la maquetación la parte superior de la página es siempre dominante, los primeros pixeles de la página
son visible en la pantalla típica del navegador. Utilizar este espacio eficiente y efectivamente.
Incorporar colores sutiles
Las sombras o colores pastel se encuentran típicamente en la naturaleza y serán las mejores opciones para
el fondo o elementos secundarios. Evite los colores primarios sumamente saturados y fuertes excepto en
regiones que se desean destacar e incluso allí utilizarlos cuidadosamente.
Tener cuidado con embellecimientos gráficos
Las reglas horizontales, balas gráficas, iconos, y otros marcadores visuales tienen usos ocasionales, se
aplicarán frugalmente, para evitar un diseño desigual y confuso. La misma consideración aplica a los
tamaños más grandes de tipografía en páginas web. Una razón por la que lo diseñadores gráficos son tan
impacientes con el HTML simple, es que las etiquetas H1 y H2 de título demuestran un tamaño
grotescamente grande en la mayoría de los navegadores. Los instrumentos del énfasis gráfico son
poderosos y deben ser utilizados sólo en dosis pequeñas para lograr un efecto máximo. El uso excesivo del
énfasis gráfico, lleva a un efecto de agotamiento visual en el cuál todo es saturado y nada se acentúa

Las reglas del diseño web se apega a los demás medios, pero se tiene que conocer las limitaciones
y transformarlas en ventajas.
Tips para reconocer el sitio
• Incluir el logo de la empresa en todas las páginas. Posicionarlo en el extremos superior izquierdo para una
pronta localización.
• Complementar el logo con una frase memorable que resuma el propósito del negocio. Por ejemplo “la
mejor opción en conectividad”.
• Que el sitio cuente con un estilo constante y se sienta en todas sus páginas. Utilizar un esquema de
colores que se presente en todo el sitio.
• Contener una sección de “Acerca de Nosotros”, que incluya toda la información pertinente acerca de las
personas y del negocio.
• Incluya una declaración del derecho de autor en la parte baja de cada página.
Tips de Navegación
• Diseñar las páginas para cargar en menos de 10 segundos (50 Kb el tamaño máximo, incluyendo
gráficos).
• Agrupar opciones de navegación en categorías relevantes.
• Utilizar nombres comunes para opciones del menú: Home, Acerca de Nosotros, Contacto, Ayuda,
Productos. Evitar alternativas “oscuras” que solo confundan al usuario.
• Si se diseña un sitio en Flash, proporcionar también una versión en HTML para usuarios que prefieran un
sitio más rápido y menos extravagante.
• Proporcionar menús sencillos de navegación en forma de texto en la parte baja de páginas largas, así los
usuarios no necesitan desplazarse hacia arriba.
• Vincular el logo a la página principal, menos en la página principal. Vincular a la página principal en todas
las páginas internas.
• Crear “rastreo de los vínculos”; básicamente es el sendero de la página principal a la página donde se
está. Por ejemplo: Home> la Sección> la Subdivisión> Página, facilita mucho la navegación.
• Si el sitio es demasiado grande, proporcionar una forma de Búsqueda interna.
Tips en Maquetación
• Trabajar en conjunto con el cliente, si él pide un diseño específico que pueda coartar nuestro “sentido”
creativo, mejor utilicemos esa creatividad para entenderlo y hacer algo que funcione en conjunto de lo que él
sugiere y lo que nosotros podemos resolver.
• El diseño es resolver problemas, definirlos es ya una ganacia del 50%.
• El primer paso es crear un proceso sólido de diseño, definir las metas, seguirlas y trabajar en equipo. Un
diseñador mediocre con un buen proceso de diseño creará un sitio funcional, un buen diseñador sin proceso

Diseño Web 22
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

de diseño creará un sitio sin sentido.

• Hechar mano de HTML y CSS antes que utilizar GIFS o JPGs.
• Evitar una página llena de elementos cosméticos, lo simple y directo es mejor.
• En el diseño web a diferencia del medio impreso no existe un “accidente feliz” se tiene que planear en
función de la usabilidad.
• Aprender y pensar como los usuarios, luego aprender y pensar en la tecnología disponible, al final volver a
pensar en la audiencia.
• Tratar que todo el contenido baje en menos de 30 segundos.
• Los usuarios no desean aprender a navegar en el sitio, ellos quieren tener acceso al contenido, así que se
tiene que crear una navegación fácil de aprender.
• Ubicar el contenido más importante en la parte superior de la página.
• Maquetar la página con tablas en forma de porcentaje en vez de un número fijo de pixeles. De esa forma,
la página siempre quedará al tamaño de la pantalla, sin necesidad de desplazarse horizontalmente.
• Optimizar la página para ser vista mejor en 800x600 px (la resolución más popular en nuestro tiempo).
• Utilizar contraste alto para el cuerpo de la página: texto negro en fondo claro, o texto blanco sobre fondo
oscuro, pero sin abusar de éste último.
• No utilizar demasiados tipos de letra en una página. Evitar tipos de letra con patines en tamaño pequeño
(como Times Roman) : son difíciles de leer en la pantalla. Verdana es la fuente sin patines más amigable y
Georgia es la más amigable en estilo con patines.
• Evitar bloques largos de texto. Ayudarse con herramientas que facilitan la ubicación como balas,
subtítulos, palabras clave destacadas, los vínculos, etc.
• Evite características amateurs como: contadores de página, el uso al por mayor de puntos de exclamación,
todas mayúsculas, bloques justificados de texto, uso excesivo de gifs animados, fondos que compiten con la
información, etc.
• No abusar de ventanas pop-up. Distraen a los visitantes y se confunden con anuncios.
• Pruebe su sitio para que parezca bueno en navegadores y resoluciones diferentes.
Tips de Escritura en Internet
• Escriba en término universal para que todos puedan entender el contenido, a menos que se produzca un
sitio técnico para personas técnicas.
• La lectura en la pantalla es difícil: utilizar 50% menos palabras que lo que se utilizaría en algo impreso.
• Si una página es demasiado larga, se corta en varias páginas y se vincula entre ellas.
• Utilizar un diccionario. Los errores ortográficos son embarazosos y no ayudan a la credibilidad.
Tips para conocer a los clientes
• Pedir una retroalimentación: incluir una forma de comentarios en la sección de contacto.
• Publicar una sección de noticias del lugar e incluir una forma de suscripción al lugar en la página principal.
Con esto se provee a los clientes de información valiosa y se alienta al contacto.
• Incluya sondeos y otros instrumentos para reunir información de mercadotecnia.
Tips para vincular
• Hacer vínculos descriptivos. Deben indicar lo que el usuario encontrará, en comparación con decir “clic
aquí”.
• No subrayar nada que no es un vínculo.
• Subrayar vínculos y utilizar un color constante para ellos a través del sitio (preferiblemente azul).
• Utilizar un color diferente para vínculos visitados, así los visitantes sabrán donde han estado
(preferiblemente púrpura o un tono más subordinado al de sitios no visitados).
• Cuándo se vincule a un archivo diferente a HTML, tal como Excel, Word o Acrobat, hacerlo evidente o
inclusive agregar un icono pequeño junto al vínculo.
• No vincular a páginas “en construcción”, mejor se terminan primero.
• Cerciorarse que los vínculos trabajan y que no se tienen vínculos sin destino final. Hay instrumentos en
línea gratis que pueden ayudar con esto.
• Si se utilizan vínculos con gráficos, no olvidarse de escribir el atributo ALT. El atributo ALT debe describir a
lo que se vincula.
Tips en el manejo de gráficos
• Optimizar al máximo, pero sin perder calidad en todos los gráficos. Manejar sólo formatos gif y jpg.
• Utilizar “thumbnails” (versiones miniaturas de una imagen) y un vínculo a la imagen del tamaño grande.
• Evitar gráficos que se parecen a anuncios. Las personas los ignorarán.
• Utilizar el atributo ALT en imágenes, incluso si la imagen no sea un vínculo. Ayuda a los usuarios con
incapacidades y personas que han quitado la opción de gráfico.
Optimizar el sitio para los motores de búsqueda:
• Crear títulos cortos y descriptivos de la página, sirve como invitación a los motores de búsqueda a entrar al
sitio.
• Crear un mapa del sitio que contenga todas las páginas, y un vínculo directamente a la página principal.
Los robots de búsqueda seguirán el vínculo al mapa del sitio y muy probablemente agregarán todas las

Diseño Web 23
Diseño Gráfico
Colegio Sup. F. Ameghino
Nivel Terciario
Prof. Paula Milazzo

páginas a su índice.
• Escoger dos o tres palabras clave (keywords) principales para cada página (las palabras que se cree los
usuarios escribirán en el motor de búsqueda para encontrar la página) y se repiten a menudo en el título de
página, etiqueta meta de descripción y cuerpo de página.
• Crear una página de vínculos llamada Recursos. En ella, se colocan los vínculos que se ha convenido con
otros sitios para crear un vínculo recíproco. La mayor cantidad de vínculos de calidad que se tengan en el
sitio, se situará mejor el sitio en los motores de búsqueda.
• Utilizar más texto que gráficos, aminorar el uso del Flash y Javascript. Los motores de búsqueda favorecen
mayormente al texto y llevará al sitio a su índice con mayor facilidad

Fuente: http://www.vecindadgrafica.com/neuroWeb/NeuroWeb.html

Otras páginas para consultar

http://www.webexperto.com/
http://www.webnova.com.ar/diseno-web.php
http://www.desarrolloweb.com/

Diseño Web 24