Módulo 5
parte II
Diseño para sitios
web
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
1
Diseño de páginas
Jerarquía
visual:
elementos
visuales se
enfatizan y
contenido se
organiza de
manera lógica
y predicible
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
2
Diseño de páginas
Contraste
es esencial:
balance
apropiado
entre atraer la
vista con el
contraste
visual y
proveer un
sentido de
organización
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
3
Diseño de páginas
Evitar distracciones
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
4
Estructura de página
• Impacto visual
• Predicitibilidad
• Legibilidad
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
5
Encabezado
• Identidad del sitio
• “Firma”
• Vínculos de navegación básicos
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
6
Pie de página
• Origen, versión de la página
• Navegación
– Acerca de la compañía
– Contacto
– Políticas
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
7
Diseño de páginas
Balance
– Texto e imágenes
pequeñas
– Juego de color
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
8
Diseño de páginas
Área de impacto
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
9
Dimensión de páginas
Diferencia
entre
visualización e
impresión
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
10
Elementos de una
página
•
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
11
Esqueleto y
dimensiones
Graphic "safe area" dimensions for
layouts designed to print well:
Maximum width = 535 pixels
Maximum height = 295 pixels
Graphic "safe area" dimensions for
layouts designed to maximize
screen usage:
Maximum width = 595 pixels
Maximum height = 295 pixels
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
12
Diseño de páginas
Consistencia:
establecer un
esquema y estilo
pata textos y
gráficos y aplicarlos
a todas la páginas
en el sitio
Crea ritmo y unidad
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
13
Marcos
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
14
Uso de marcos
• Posiciones encontradas
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
15
Argumentos en contra
para el uso de marcos
• Rompen el modelo fundamental de la página
• Reducen el espacio para mostrar la
información
• No todos los usuarios podrán visualizarlos
• Impresión resulta difícil
• Usuario no sabe dónde va a aparecer la
información
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
16
Argumentos a favor del
uso de marcos
• Proveen una forma consistente de dar
estructura al sitio
• Permite partir la página en archivos
HTML separados
• Proveen interactividad adicional (dar
click en un enlace, cambia contenido
del otro marco)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
17
Diseño de páginas para
comercio electrónico
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
18
Diseño de páginas para
comercio electrónico
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
19
Tipografía
• Buena tipografía depende del
contraste visual entre
– fuentes
– bloques de texto, títulos y espacios
en blanco
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
20
Tipografía
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
21
Tipografía
• Alineamiento:
– Márgenes son vitales
– Alineamiento para bloques de texto:
• Alineamiento al centro o a la derecha es
difícil de leer
• Alineamiento a la izquierda es mejor
• Justificación es deseable si no aparecen
muchos espacios o división de palabras
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
22
Tipografía
Evite utilizar
todas las letras
mayúsculas en un
título: rectángulos
monótonos
Inicialize sólo la
primera letra del
título
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
23
Uso de bloques
Líneas de texto
entre 40-60
caracteres
Utilizar tablas
invisibles
(“border=0”)
Cellspading
Cellspacing
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
24
Fuentes
Legibilidad de
una fuente
está influenciada por la
altura del
caracter x
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
25
Fuentes
Sans-serif:
Serif:
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
26
Fuentes
• Utilice una fuente serif como Times
New Roman o Georgia para el texto
• Utilice fuente sans serif como Verdana
o Arial para los títulos
• Especifique las fuentes utilizando la
cláusula FONT FACE in HTML
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
27
Énfasis
• Negrita: buen énfasis pero no debe
usarse en bloques muy grandes pues
pierde efectividad
• Itálica: atrae la vista pero su resolución
es menor
• Subrayado: puede confundirse con un
vínculo
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
28
Énfasis
• Texto en otro color: puede confundirse
con los vínculos; use colores oscuros y
diferentes de los utilizados para los
hipervínculos
• LETRAS MAYÚSCULAS: evitarlas
• Espaciado e identación
– Aislar y tratar diferente al texto
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
29
Títulos como bitmaps
• Para ofrecer letra estándar y más
resaltada
• Problema: No interpretable – incluir
texto dentro ALT tag para que pueda
ser buscado y indexado
• Para mayor legibilidad – Antialiased
• Difícil mantenimiento
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
30
Definición de Estilo
•
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
31
“Cascading style
sheets”
• Provee control sobre el estilo exacto de
los encabezados, párrafos, listas y otros
elementos de la página
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
32
“Cascading style
sheets”
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
33
“Cascading style
sheets”
• Ventajas:
– Separación de contenido y diseño
– Control eficiente sobre documentos
grandes
• Desventajas:
– Los navegadores ofrecen soporte
inconsistente e incompleto para el CSS
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
34
Inserción perfecta de
imágenes
• Diferencias
entre
navegadores
8 pixels
•
"LEFTMARGIN"
and
"TOPMARGIN"
8 pixels
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
35
Colores
• El color es utilizado para influenciar la
forma cómo ve el usuario la página
• Seleccione los colores y manténgalos en
todo el sitio
• Colores acordes al mensaje
• Cuando se especifican los colores, utilice
códigos hexadecimales ("#FF0000")
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
36
Colores
01- Agua
Motivación
02- Lavanda
Romántico
03- Verde
Crecimiento
04- Anaranjado Feliz
05- Amarillo
Entusiástico
06- Azul
Tranquilidad
07- Magenta
Violento
08- Turquesa Refrescante
09- Rojo
Energía
10- Café
Estabilidad
11- Indigo
Conocimiento
12- Oro
Iluminación
13- Púrpura
Espiritual
14- Light
Pacífico
15- Rosado
Amistoso
Acción
Inventiva
Abundancia
Coraje
Festividad
Intuitivo
Imaginativo
Fresco
Decisión
Fidedigno
Poder
Sabiduría
Apasionado
Sincero
Compasivo
Dinámico
Fantasía
Vigor
Éxito
Optimismo
Fidedigno
Innovador
Imaginativo
Pasión
Integridad
Visionario
Cariñoso
Fiel
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
37
Vínculos
• No se deben poner enlaces hacia sitios sin
utilidad y sin ninguna explicación aparente
– Perder al cliente
• Enlaces relacionados con el tema
• No es recomendable usar los colores clásicos de
los enlaces para escribir texto normal (azul, rojo
y violeta)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
38
“Scrolls”
• A la mayoría de la gente no le es
agradable visualizar páginas muy grandes
• En caso de ser necesario, la creación de
páginas grandes es recomendable
– Crear al principio una tabla de contenidos que
facilite la visualización y lectura de la misma
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
39
Insertos
• Medio de promoción más explotado en
el web: millones de páginas los tienen
• Pueden distraer al usuario
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
40
Insertos
• Consejos de diseño:
• Deben capturar la atención del usuario
– “MÍREME A MÍ”
• Los insertos animados capturan mejor la
atención, los estáticos tienen poca efectividad
• Utilizar frases que impliquen curiosidad, humor,
miedo o preguntas es muy efectivo:
– “Sabía usted que...”, “Es usted de las personas
que...”, “Precaución, usted podría...”, etc.
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
41
Insertos
• Consejos de diseño (cont.):
• Incluir logo, dirección web o identificación
gráfica del sitio para que se grabe en la
memoria de los navegantes
• Tamaño:
– 468 x 60 pixeles
– no más de 10 Kb
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
42
Insertos
• Consejos de diseño (cont.):
• Uso de colores brillantes más que oscuros: azul,
amarillo, naranja y verde
• Realizar contrastes efectivos: amarillo sobre fondo rojo
en vez de verde sobre fondo azul
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
43
Insertos
• Consejos de diseño (cont.):
• Evitar hacer falsas promesas: se obtendrá
visitantes disgustados que no recomendarán el
sitio
• Incluir texto que implique pulsar el inserto
aumenta la cantidad de visitas:
– “Pulse aquí”, “Click aquí”, “Pulse para continuar”
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
44
Otras recomendaciones
• 20 ó 30 segundos, es el tiempo máximo
de atención sostenida
• Diseñe la página principal para que la
información que contiene pueda ser leída
y analizada en ese tiempo
• Evite páginas muy cortas que obligan
constantemente a usar navegación
– longitud razonable => pantalla y media
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
45
Gráficos
• Formatos:
– Graphic Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphic (PNG)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
46
GIF
• Graphic Interchange Format
• Popularizado por CompuServe en los 80s
• La mayoría de las imágenes en el web están
en este formato
• Utilizan un esquema de compresión para
mantener los archivos en un mínimo de
tamaño y están limitados a una paleta de 8
bits (compresión LZW)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
47
GIF
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
48
Interlaced GIF
• Permite cargar una versión de baja
resolución primero y luego se amplía la
resolución
• Buena opción para imágenes grandes
• No se debe utilizar para imágenes
pequeñas (barras de navegación,
botones, íconos)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
49
Interlaced GIF
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
50
GIF transparente
• Colores del gráfico se pueden hacer
transparentes
– Usualmente color de fondo
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
51
GIF transparente
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
52
GIF animados
• El formato de archivo GIF permite la
combinación de múltiples imágenes
para crear animación
• Compresión no se realiza entre las
imágenes
• Puede distraer a los usuarios
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
53
JPEG
• Joint Photographic Experts Group
• Imágenes en color verdadero (24 bits)
• Usa técnica matemática sofisticada de
compresión
– Elimina datos innecesarios
– Compresión de pérdida
– Archivos hasta 100 veces más pequeños
que los originales
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
54
JPEG
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
55
PNG
• Portable Network Graphic
– Uso de GIF requiere pagar regalías a
CompuServe y a UNISYS
• Diseñado para páginas Web
– Mayor rango de colores
– Transparencia de imágenes más sofisticada
– Mejor “interlacing”
• Aún no es soportado por los navegadores
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
56
Usos de GIF y JPEG
• GIF para la mayoría de los elementos
gráficos de las páginas
• JPEG para fotografías o ilustraciones
fotográficas
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
57
Ventajas de imágenes
GIF
• Buen soporte visual en los navegadores
• Imágenes esquemáticas lucen mejor
como GIF que JPEG
• Soporta transparencia e “interlacing”
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
58
Ventajas de imágenes
JPEG
• Altos radios de compresión son
posibles
• Funciona bien con fotografías
• Soporta color verdadero (24 bits)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
59
Más información
• Libro:
– www.webstyle.com
• Evolución de un sitio web:
– Wayback machine:
• http://www.archive.org/web/web.php
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
60
FIN
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata
61
Descargar

Modulo 5 parte 2