DISEO DE PGINA WEB

Profa. Sarahi Reyes Perez

COMM 301

Telecomunicaciones en la Oficina

Universidad Del Este

Recinto de Cabo Rojo

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