DISEO DE

PAGINAS WEB Y
SITIOS WEB
Facultad de Ingeniera de Sistemas
Introduccin a la Ingeniera de
Sistemas
Ing. Raul Ruiz Peralta
Vocabulario
Pagina Web: Es una simple pagina que se
visualiza en el explorador.

Sitio Web: Es un conjunto de paginas Web
relacionadas.

Pagina de Inicio: Es la pagina principal en un
sitio Web
Cual es el propsito de mi
pagina?
Definir claramente el propsito y objetivo de su
pagina Web o sitio Web.

Por que deseo una Pagina Web?
Cuales son los objetivos inmediatos para mi sitio
Web?
Cuales son los objetivos largo plazo para mi sitio?
Cual es mi escala temporal?
Que tipo de sitio quiero: Informativo, Entretenimiento,
Portal, Etc.
Cual es el propsito de mi
pagina?
Defina a que colectivo esta dirigida
Aficionados
Activistas
Empleados
Clientes
Jvenes
Estudiantes

Cual es el propsito de mi
pagina?
Refinar el tema que ser tratado
Pg. Animales
Anfibios
Insectos
Mamferos
Juegos
3D
On Line
Quien forma parte de mi
audiencia?
Piense en una persona en particular que cumpla
con las caractersticas de su audiencia.

Clientes de empresa (Dr. Gmez, Ing. Ruiz, Etc)
Nios (Camilo, Juanito, Etc.)
Artistas (Botero, Gabo, Etc.)
Deportistas (Villegas, Montoya, Etc.)

Quien soy?
Determine como desea presentarse a su
audiencia, de manera:

Ocasional
Profesional
Formal
Cmica
Creativa
Seria

Como visualizara mi audiencia
mi pagina?
Considere las posibilidades tcnicas de
su audiencia

Banda ancha
MODEM
Sitios Pblicos
Equipos personales

Boceto de un sitio Web
Debe realizar un borrador del diseo de su
pagina de inicio y de las paginas
dependientes (Sub-paginas).

Boceto grafico
Mapa de navegacin
Fundamentos bsicos para
diseo de paginas Web
Dimensin de una pagina Web
Aspecto de la disposicin de pagina
Color
Hipervnculos y herramientas de navegacin
Componentes estndar de credibilidad
Texto
Imgenes
Fundamentos bsicos para
diseo de paginas Web
Dimensiones de una pagina Web:

rea de seguridad 620 X 310 / 780 X 440
Porcentaje de resolucin mas usado 800
X 600 = 17% - 1024 X 768
Paginas fluidas
Fundamentos bsicos para
diseo de paginas Web
Aspectos de la disposicin de pgina:
Uso de una plantilla
El lugar mas elegido dentro
del rea de seguridad es la
esquina superior izquierda
Permanezca dentro de la
anchura
Titulo, Logotipo, Enlaces de
navegacin, Texto del cuerpo
y Texto en el pie
Ubicar la informacin dentro
del rea de seguridad
Los botones y barras de
men deben estar
preferiblemente en el borde
izquierdo o superior
Sobre pliegue
Fundamentos bsicos para
diseo de paginas Web
Texto parpadeante y
animacin gratuita
Competencia
Contenido
Tecnologa Integrada
Velocidad de descarga
Marcos
Diseo funcional
Elementos importantes
Moderacin
Archivos de sonido
La repetidera
Apariencia visual
Espacio en blanco
Aspectos de la disposicin de pgina:
Fundamentos bsicos para
diseo de paginas Web
Color:

Utilice un esquema de color a lo largo del sitio
Limitar el numero de colores
Utilizar contraste de colores
Procure utilizar los colores apropiados para
transmitir su mensaje
Utilice colores para llamar la atencin sobre
ciertos elementos o reas de la pagina
Fundamentos bsicos para
diseo de paginas Web
Hipervnculos y Herramientas de navegacin

Botones
Logotipos
Enlaces de Texto
Enlaces Grficos
Fundamentos bsicos para
diseo de paginas Web
Componentes estndar de credibilidad:

Atribucin
Informacin de contacto
Aviso de Copyright
Contenido Dinmico
Ultima modificacin
Informacin personal
Intereses especiales
Ortografa y Gramtica
Enlace Webmaster
Fundamentos bsicos para
diseo de paginas Web
Texto:

Tamao de fuente
Estilo de fuente
Formato de fuente
Fundamentos bsicos para
diseo de paginas Web
Imgenes:

Evite imgenes de gran tamao
Evite imgenes que no tengan ningn sentido
Asegrese de que cada enlace grafico dispone
de un enlace de texto equivalente
Incluya siempre una etiqueta ALT para cada
imagen.
Reglas de diseo de sitios Web
Consistencia
Estructura
Cree una estructura lgica clara
Los enlaces de navegacin se encuentran
claramente esquematizados en la jerarqua
de su sitio
Utilice ttulos de pagina en cada una


Puntos claves
(Recomendaciones)
Recuerde que la audiencia posee un dominio
absoluto
Esquematice las relaciones de pagina del sitio
Web y su pagina de inicio
Utilice plantillas y cuadriculas para guiar su
diseo
Reserve la esquina superior izquierda para la
informacin mas importante
Visualice los conceptos principales Sobre el
pliegue
Puntos claves
(Recomendaciones)
Incluya enlaces de navegacin dentro del rea
de seguridad
Incorpore un rea de titulo, logotipo, enlaces de
navegacin, texto de cuerpo y de pie en cada
pagina
Sea moderado en casi todas las reas de
diseo
Implemente un esquema de color,
preferiblemente limitado a tres o cuatro colores
Puntos claves
(Recomendaciones)
Emplee espacio en blanco para crear descanso
ocular y llamar la atencin sobre los principales
elementos
Mantenga las herramientas de navegacin
fcilmente accesibles, claramente definidas y
consistente en su sitio
Vincule su logotipo a la pagina del inicio en todo
su sitio
No subraye nunca el texto cuando no se trate de
un enlace
Puntos claves
(Recomendaciones)
Aumente su credibilidad facilitando informacin
de contacto y canales de comunicacin, y
ofreciendo atribucin, crditos y referencias.
Utilice el tamao de fuente predeterminado para
el texto del cuerpo, y escoja fuentes compatibles
con cualquier plataforma siempre que sea
posible
Incluya etiquetas ALT con cada imagen