Universidad Del Este

Recinto de Cabo Rojo

DISEO DE PGINA WEB

Profa. Sarahi Reyes Perez

COMM 301
Telecomunicaciones en la Oficina

INTRODUCCIN

Diseo
Representacin formal y suele ser el primer punto de
contacto entre la persona y el producto o entre el servicio
y la persona.
Para que un diseo sea adecuado se debe disponer de la
informacin necesaria para conocer al cliente, mercado,
consumidores, producto o servicios a ofrecerse en la
pgina Web.

Pgina Web
Archivo que se encuentra disponible en el WWW.
Generalmente est hecho en formato HTML y puede
visualizarse en la pantalla de la computadora como si
fuera una pgina.

PROCEDIMIENTO DE DISEO

Una buena planificacin permite que la pgina se distinga de

otras pginas y capte la atencin de las personas provocando que
lean la misma.
Es importante organizar las ideas para que el lector identifique la
informacin de manera rpida y fcil.
Crea un bosquejo que permita ver las distintas alternativas para
la planificacin del formato y diseo de la pgina.
Planificacin
Identifica el propsito de la comunicacin

vender, promocionar, informar, orientar

Evala la audiencia a quin va dirigido

Presentacin del texto - cmo presentar la informacin
Respuesta del lector como esperas que reacciones el lector

PROCEDIMIENTO DE DISEO

Creacin
Mensaje claro
Propsito del mensaje
Prioridades del contenido
Esquema o formato (no exagerar)
Al momento de disear tome en consideracin la
intencin de la publicacin, la audiencia, la
informacin, el espacio disponible y el tipo de
distribucin.

PRINCIPIOS BSICOS
Sirven

de gua para el diseador

Si se aplican correctamente, podr captar
la atencin del lector.
Punto Focal / nfasis

Utilizado para atraer la atencin del lector.

Consiste en realzar un elemento con el fin de
captar la atencin.

Incluye la forma en que se presenta el ttulo, los

elementos grficos como lo son las ilustraciones, logos,
etc. Rodeados por espacios en blanco.

PRINCIPIOS
Balance

Considerar la distribucin equitativa del contenido.

Es la organizacin de los elementos en la pgina de
modo que una seccin no sea ms pesada que la
otra.
La distribucin puede ser simtrico (a igual
proporcin) o asimtrico (en desiguales
proporciones).

Simtrico se dirige a los documentos formales y se refiere a

elementos similares de igual proporcin en todos los lados
de la pgina. Todo es texto.
Asimtrico se refiere a que los elementos no son similares.
Este permite un balance flexible, permite ser creativo y
estimular al lector.

PRINCIPIOS
Proporcin

/ Equilibrio

Considera el tamao de los elementos en

relacin de unos con otros.
Requiere el control del tamao, tono, peso y
posicin de los elementos.
Elementos considerados visuales deben estar
en proporcin con el tipo y tamao de letra, con
el tamao del texto y el espacio disponible en
la pgina.

PRINCIPIOS

Contraste
Determinar los grados de claridad y oscuridad en la
pgina mediante la seleccin de colores, caracteres
especiales, espacios en blanco, tipo y tamao de letra de
ttulos y subttulos.
Los caracteres especiales como los bullets son tiles para
definir listados importantes y ayudan al contraste visual.
Esto permite que la pgina no resulte aburrida a la vista.

Secuencia / Flujo direccional

La ubicacin de los elementos focales deben ser colocados
en forma de Z, o sea, la forma en que el ojo se mueve de
un lado a otro.
Permite leer de izquierda a derecha y de arriba hacia
abajo. (orden lgico)

PRINCIPIOS

Consistencia
Uniformidad de los elementos, como mrgenes, tipo de
columnas, tipo de letra y tamao para cada una de las
secciones a crearse en la pgina, los espacios disponibles, y
otros.
Mantenga simplicidad cuando se repiten los elementos.
La inconsistencia no logra el enfoque.

Unidad

Diseo unificado. Debe concebirse como unidad, y la

totalidad de sus partes (texto, arte, encabezado, logotipo,
etc) se deben relacionar entre s con el fin de producir un
efecto general y unificado.

Armona

La idea de que todos los elementos deben de ser

compatibles, est muy relacionada con la unidad. El
diseador logra la armona mediante la seleccin de
elementos que combinen.

PRINCIPIOS

Color
Ayudan a organizar las ideas y a resaltar los factores
importantes
No utilices ms de tres colores y que los mismos no
sean obscuros para el fondo cuando se usan colores
obscuros para el texto. Esto hace difcil la lectura de
tu pgina.

Para otros principios y ampliar esta informacin,

leer Artculo Principios Bsicos del Diseo para
Pgina Web,
http://www.un.org/spanish/Depts/dpi/seminario/p
df/principiosfireworks.pdf

ESTRATEGIAS PARA LA CREACIN

PGINA WEB
Ayuda

al diseador a crear su plan

estratgico.

Determine a quin est dirigida la pgina

Motive a su audiencia.
Tratarlos con respeto y ofrecerles los medios
para comunicarse con usted.
Establezca sus objetivos del diseo.
Incluya una seccin donde el usuario pueda
ofrecer reacciones y comentarios sobre su pgina,
e incluya textos de ayuda para aquellos que no
obtienen la informacin que esperaban.

ESTRATEGIAS

Seleccin del Contenido

Seleccione el contenido de su pgina web
Utilice un lenguaje simple y comprensible
Incorpore espacios en blanco
Ofrezca la informacin en forma de resumen.
Considera la Navegacin
La pgina debe ser creado de forma simple, clara y
organizada, que facilite la navegacin por ella sin
problemas.
Determine si se incluyen o no imgenes
La creacin de una pgina Web comienza por su texto y la
estructura bsica de la misma.
Analizar el contenido, determine qu tipos de imgenes e
ilustraciones se pueden utilizar.

RECOMENDACIONES
Selecciona un fondo y un color de texto de gran
contraste
Sea consistente con el formato del texto:
evite los cambios de color
evite cursivas (dificultad de lectura) y subrayado
(se confunde con los enlaces)
evite textos demasiado largos
Evite los fondos con texturas que no permitan una
fcil lectura
Use imgenes simples, reducidas o pequeas e
inmviles para ilustrar el contenido
Los formatos de los archivos grficos deben ser
utilizados comprimidos (.jpg) fotografas y dibujos
(.gif)

RECOMENDACIONES
Analiza el contenido y formalidad del documentos
antes de decidir los elementos del diseo
Elige un diseo simple, consistente, atractivo,
que facilite la comunicacin
Haz un recorrido por el texto de acuerdo al
desarrollo de la lectura normal (desde arriba
hacia abajo, izquierda a derecha)
Limita las letras maysculas para los ttulos y
para enfatizar algo. Las letras minsculas salas
en el texto para su mejor lectura.
Utiliza tipos de letras que sean claros y no se
presten a confundir.

RECOMENDACIONES
Evite terminologa tcnica. De utilizarla, coloca
las definiciones para el usuario.
Utiliza pginas subsiguientes para colocar los
datos o detalles de aquella informacin que sea
compleja.
El contenido de cada pgina subsiguiente debe
ser coherente con su enlace.
Revise la ortogrfica de sus pginas, y solicite
que otra persona las revise de forma
independiente.
Invite a sus lectores a realizar comentarios y
sugerencias. Esto aumentar la eficacia de su
pgina web.

ETIQUETA EN LA WEB

Asegrese que el encabezado y el ttulo de la pgina

guarde relacin con el contenido.
Utilice un lenguaje apropiado, no utilice letras
maysculas, ello equivale a gritar.
Enve mensajes breve
Cause buena impresiona con sus palabras y contenido de
su pgina. Revise las palabras e imgenes que utilizar.
Sea selectivo con la informacin que publica en el Web.
Esa informacin ser pblica y puede ser visa por
cualquier persona.
Obedezca las leyes de Copyright. No utilice contenidos o
imgenes sin permiso.
Cite las obras que utiliza

REFERENCIAS

Borocci, Daniel. (s.f.). Netiquette. Estudios, Gua y Estrategias. Recuperado en

http://www.studygs.net/espanol/netiquette.htm
Martin, Cesar. (2006). Introduccin al Diseo Web. Desarrollo Web.com.
Recuperado de http://www.desarrolloweb.com/articulos/disenio-adecuado.html
Principios Bsicos del Diseo. (2009). Tutor Grfico. Recuperado de
http://tutorgrafico.com/principios-basicos-del-diseno.html
Principios Bsicos del Diseo para Pgina Web. (2005). Internet, el instrumento
esencial de la diplomacia del siglo XXI. Disponible en lnea
http://www.un.org/spanish/Depts/dpi/seminario/pdf/principiosfireworks.pdf
Rosa, Mara. (s.f.). Principios Bsicos del Diseo de Publicacin. Universidad
Interamericana de Aguadilla. Recuperado de http://agu.inter.edu/mrosa/
Selva, Joaqun. (2000). Principios Bsicos en el Diseo de Pginas Web.
(Traduccin- http://www.uv.es/~selva). Estudio Guas y Estrategias. Disponible
en http://www.studygs.net/espanol/basdesign.htm
Selva, Joaqun. (2000). Escribir Pginas Eficaces para el Web. (Traducida http://www.uv.es/~selva). Estudios, Gua y Estrategias. Recuperado en
http://www.studygs.net/espanol/content.htm#Diseando%20Pginas%20Web