El documento describe los objetivos y elementos clave para el diseño de un sitio web, incluyendo diagramas de flujo, estructura de páginas, y componentes visuales como color, forma y texto. Explica cómo crear representaciones gráficas para organizar la información, mejorar la usabilidad y comunicar el diseño al cliente.
2. Objetivos
Tomar decisiones del desarrollo de un sitio
web analizando e interpretando las
especificaciones del diseño
Conocer conceptos de diseño para la
diagramación de paginas
Conocer los diagramas de flujo, guiones
gráficos y diagramas para la creación de un
Sitio Web.
Comunicarse con los clientes respecto de
diseño y el contenido.
3. Estructura
Después de recopilar el contenido (textos,
imágenes, logotipos, etc.) se organiza para
comunicar el mensaje al cliente y cumplir sus
metas.
Para ello, se dibuja:
El diagrama de flujo
la estructura de la pagina principal
una página interna de muestra
4. Gráfico de Flujo
Debe enfatizar:
la estructura conceptual y la organización del
sitio
como el usuario fluye a través de tareas
definidas y los pasos respectivos
El sitio muestra caminos al usuario
El usuario se mueve por los caminos por las
acciones.
Las acciones generan resultados
5. La Página
Es el elemento clave de la experiencia del usuario.
Se representa con un rectángulo
Es una unidad de representación
Se utilizan etiquetas para identificar paginas y
archivos de datos
Las relaciones se representan por líneas simples o
conectores.
Los conectores también pueden ser etiquetados
cuando una acción deba ser aclarada.
Un elemento área, identifica un grupo de páginas
que comparten una característica en común
6. Mapa del sitio
Muestra un mayor nivel de representación del
sitio.
Debe mostrar:
Áreas principales
Archivos HTML
Páginas dinámicas de cada sección
Hay que revisarlo desde el punto de vista del
usuario, para comprobar si:
Tiene estructura lógica
Es Navegable.
7. Diagrama de página
Es una esquema donde se integran:
El contenido
La navegación
La funcionalidad básica
Indica:
El posicionamiento de los gráficos
La navegación
Los textos
Encabezados
Otros elementos que deben aparecer en pantalla.
La jerarquía de la información
8. Elementos del diagrama de
página
Gráficos Texto Navegación Color
• Se • Los • Los • Llene el color
representan rectángulos rectángulos de fondo del
con indican la indican la diagrama con
rectángulos posición del posición de un color
que indican texto los • Usualmente
el tamaño y • Etiquete los hipervínculos se utilizan
la posición. rectángulos de la página escalas de
• Se etiquetan con la • Etiquete los grises para
los descripción rectángulos no distraer la
rectángulos del texto o con el atención.
con el coloque texto nombre de la
nombre de de relleno. página a las
los archivos que se
que dirigen las
representan ligas.
9. La navegación
Debe ser clara y consistente
Los botones, hipervínculos y gráficos
utilizados deben ser coherentes y deben
indicar al usuario:
Donde se encuentran dentro del sitio.
A donde necesitan ir.
Cómo regresar a donde se encontraban.
10. La navegación (cont.)
Los botones:
Deben llevar una etiqueta clara que indique su
función.
Pueden usarse íconos para dar una ayuda
visual al usuario, sólo si son claros en su
significado.
Aquí tenemos un ejemplo de botón
que sirve para regresar a la página
principal, su icono es de una casa y
su etiqueta es home
HOME
11. La Navegación (cont.)
Al realizar el diagrama se deben tomar en
cuenta las especificaciones técnicas como:
Tamaño de pantalla
Velocidad de descarga
Plataforma (Windows, Mac, Linux)
Navegador (Explorer, Firefox, Chrome, etc.)
Se recomienda realizar un diagrama para:
La página de inicio.
Las páginas internas
12. La Navegación (cont.)
El diagrama describe como funciona una
pagina web
El diagrama se utiliza para comunicar
información técnica entendible para:
El cliente
Los diseñadores
Los desarrolladores
Todos los que participan en el proceso
13. La Navegación (cont.)
Los diseñadores pueden modificar la
apariencia (Look and Feel) de la página sin
afectar la jerarquía de la información.
Se pueden crear varias composiciones
distintas para la aprobación del cliente.
14. Escenario o Vistas de
Usuario
Después de los diagramas, se determinan las
tareas que realizará el visitante típicamente
Implementar estas tareas permite observar la
usabilidad del sitio.
Se recomienda reducir el número de pantallas
y rutas que el usuario complete sus tareas
más rápido.
15. Ejemplo vista de usuario
En un proceso de compra, el usuario sigue los
siguientes pasos:
Elegir características del producto>
Colocar el producto en el carrito de compras>
Registrar sus datos personales>
Capturar sus datos bancarios para realizar el
pago>
Confirmar la compra (fin de la tarea)
16. Elementos Técnicos para
páginas web
Menú • Despliega ligas en poco espacio.
• provee navegación flexible y rápida de
pop-up descargar.
• Intercambia una imagen por otra
Rollover • atrae la atención del visitante
• indica áreas donde se puede hacer clic.
• Se puede usa en paneles de navegación
17. Elementos Técnicos para
páginas web
• Sirven para intercambiar
información con el usuario
Formas • Ejemplo: Datos personales,
Libro de visitas, etc.
Transiciones • Mejoran el diseño del sitio
o efectos
19. Diseño de un sitio
En esta fase se conceptualiza la apariencia
visual del sitio basándose en:
Audiencia
Metas
Contenido.
Se crean varias composiciones visuales para
expresar la identidad del cliente.
Se incluye un tono general del sitio y diseño
de botones, color, fuentes e imágenes.
20. Punto
Valor Línea
Elementos
De Diseño
Textura Forma
Color
21. El Punto
Es el primero y más simple
Sirve como foco de énfasis para llamar la
atención a información importante.
La combinación de puntos representan ideas
más complicadas.
Un serie de puntos atrae la atención en
especial si encuentran cercanos entre sí.
22. La línea
Se define como una serie de puntos.
Dirigen la atención hacia un punto.
Actúan como bordes entre ideas o pasos de una
secuencia.
Permite visualizar rápidamente un objeto o idea.
Puede ser recta, curva o irregular.
Las líneas:
Verticales: detiene el movimiento del ojo.
simbolizan poder y fuerza.
Horizontales: simbolizan descanso y relajación.
Diagonales: son dinámicas y orientadas a la
acción.
23. La forma
Es un área que sobresale del espacio
alrededor, dando un borde definido o una
diferencia.
Se compone de líneas que encierran un área.
Pueden dirigir el movimiento del ojo.
Las formas simples son mas fáciles de
recordar
Definen una relación entre una figura o el
fondo.
24. Valor
Es el grado de luz u
oscuridad
Todos los elementos de
diseño lo requieren un valor
de contraste para ser
vistos.
Es utilizado para describir
objetos, formas y espacio.
Las áreas:
oscuras: denotan
misterio, drama,
amenaza.
Luminosas: denotan
felicidad, cercanía, calidez
25. Textura
Es la apariencia de la
superficie de un
objeto: aspereza,
suavidad,
profundidad.
Se utilizan para
acentuar un área.
26. Color
Es la parte de luz que se refleja en los
objetos.
Los colores primarios, no son mezclas de
otros colores y son: Rojo, Amarillo, Azul.
Color secundario: se obtiene al mezclar dos
colores primarios.
El color puede ayudar a mejorar o demeritar
la composición
27. La rueda del color
Se crea cuando los
Azul colores primarios y
secundarios se colocan
en círculo
Verde Morado Los colores
directamente
enfrentados se llaman
complementarios y
crean un gran
Amarillo Rojo
contraste
Cuando se utilizan
colores cercanos en la
Naranja rueda se crean
armonías
28. La rueda de color (cont.)
Hue • Otra palabra para color
Chroma • Intensidad o pureza del color
Tinte • Color mezclado con blanco
Tono • Color mezclado con gris
29. Son las manera en que se usan los distintos
elementos gráficos juntos
30. Movimiento
Es la creación de la ilusión de movimiento por
medio de:
Formas o líneas curvas
Repetición de figuras geométricas
Líneas o delineado borros
31. Balance
Consiste en compara o estimar dos cosas una
contra otra, así como el contraste entre ellas.
Espacio vacío (blanco) y espacio lleno
Texto e imágenes
Color y sin color o diferencia de colores
Textura contra espacios planos
32. Balance (Tipos)
Hay tres tipos cuando se usa color, forma y
posición:
Simetría: Correspondencia de partes en lados
opuestos de un punto, una línea o un plano.
Asimetría: Falta de simetría
Simetría radial: simetría alrededor de un
punto 0.
Se pueden identificar tres líneas de simetría:
horizontal, vertical y diagonal.
33. Balance (Regla de los
tercios)
Técnica para lograr
balance
Consiste en dividir una
imagen en 9 partes
iguales, usando dos
líneas paralelas
horizontales y dos
líneas paralelas
verticales
Se utilizan los puntos
de intersección de las
líneas para distribuir
los objetos.
34. Énfasis
Se expresa con fuerza o tensión
Atrae la atención a un punto focal
Puede expresarse énfasis por:
contraste
aislamiento de un objeto
por posición
35. Unidad
El uso correcto del balance produce un efecto
armonioso
Puede crearse unidad por:
Proximidad
Repetición
Continuidad
36. Color en la web
El color se expresa con valores del sistema
hexadecimal.
Se utiliza este sistema porque es más
compacto identificar un color entre millones
de ellos usando solo 6 dígitos hexadecimales.
37. Hexadecimal vs. Decimal
El sistema hexadecimal maneja 16 dígitos
posibles para cada posición.
Los dígitos en ambos sistemas coinciden del
0a9
Observe la tabla de equivalencias abajo:
H
E 1 2 3 4 5 6 7 8 9 A B C D E F
X
D
1 1 1 1 1 1
E 1 2 3 4 5 6 7 8 9
C 0 1 2 3 4 5
38. Color en la Web
• Cada color se representa con la combinación de
tres canales: rojo, verde, azul
• Esta forma de representación del color se le
llama RGB
Color
Rojo Verde Azul
RGB
39. Un color en cifras decimales
Cada color se representa utilizando 3 cifras para
cada canal
0a 0a 0a
255 255 255
• Cada cifra representa el grado de
intensidad de cada canal
• Cero es la menor intensidad y 255 es la
máxima intensidad
40. Un color en cifras hexadecimales
Cada color se representa utilizando 3 cifras para
cada canal
00 a 00 a 00 a
FF FF FF
• Cada cifra (de dos dígitos) representa
el grado de intensidad de cada canal
• 00 es la menor intensidad y FF es la
máxima intensidad
41. Paleta de colores
Componen una
paleta
16.7 completa de
colores usando
dígitos
Millones de hexadecimales
colores
42. Primera paleta de colores
seguros
Black Maroon Green Navy
Silver Red Lime Blue
Gray Purple Olive Teal
White Fucsia Yellow Aqua
Estos 16 colores son reconocidos en todos los navegadores.
Su nombre equivale a su representación numérica.
43. Segunda paleta de colores seguros
Se compone de 216
colores.
El sistema operativo
reserva 40 para uso
interno
Un color seguro
(Websafe) se
muestra por igual
en cualquier
navegador en modo
de 256 colores
44. A pesar de la paleta de colores segura, la
visualización de un color puede variar según el
tipo de monitor que se este usando.
45. Composición del diseño
visual
Es muy importante lograr un diseño correcto
para una página web, a fin de mantener la
consistencia de todo el sitio.
El diseñador puede tomar algunas libertades
con los elementos de página, pero sin olvidar
la información esencial ni modificar las partes
fundamentales.
46. Guión Gráfico
Relata o comunica a los diseñadores del
equipo las decisiones que se tomaron en
cuanto al diseño, la composición y la
usabilidad del sitio, al igual que para
mostrarlo al cliente, y que este apruebe el
comienzo de la producción.