Por: Rodrigo Pérez

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.
 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
 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
 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
 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.
 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
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.
 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.
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
 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
 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
 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.
 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.
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)
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
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
Elementos Técnicos para
páginas web

•Añade narraciones,
Sonido música de fondo

•Enriquece el
Video contenido del sitio.
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.
 Punto

Valor Línea

Elementos
De Diseño

Textura Forma

Color
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í.
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.
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.
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
Textura
 Es la apariencia de la
superficie de un
objeto: aspereza,
suavidad,
profundidad.
 Se utilizan para
acentuar un área.
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
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
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

Son las manera en que se usan los distintos
elementos gráficos juntos
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
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
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.
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.
É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
Unidad
 El uso correcto del balance produce un efecto
armonioso
 Puede crearse unidad por:
 Proximidad
 Repetición
 Continuidad
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.
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
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
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
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
Paleta de colores
Componen una
paleta

16.7 completa de
colores usando
dígitos
Millones de hexadecimales
colores
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.
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
 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.
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.
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.