Diseño de Página Web

17
DISEÑO DE PÁGINA WEB Profa. Sarahi Reyes Perez COMM 301 Telecomunicaciones en la Oficina Universidad Del Este Recinto de Cabo Rojo

description

Curso COOM 301

Transcript of Diseño de Página Web

Diseo de Pgina Web

Diseo de Pgina WebProfa. Sarahi Reyes PerezCOMM 301Telecomunicaciones en la OficinaUniversidad Del EsteRecinto de Cabo Rojo1IntroduccinDiseoRepresentacin 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 DiseoUna 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 comunicacinvender, promocionar, informar, orientarEvala la audiencia a quin va dirigidoPresentacin del texto - cmo presentar la informacin Respuesta del lector como esperas que reacciones el lectorProcedimiento de diseo CreacinMensaje claroPropsito del mensajePrioridades del contenidoEsquema 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 BsicosSirven de gua para el diseadorSi se aplican correctamente, podr captar la atencin del lector. Punto Focal / nfasisUtilizado 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.

PrincipiosBalanceConsiderar 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.

PrincipiosProporcin / EquilibrioConsidera 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.

PrincipiosContrasteDeterminar 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 direccionalLa 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)

PrincipiosConsistencia 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.UnidadDiseo 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.ArmonaLa 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.

PrincipiosColorAyudan 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/pdf/principiosfireworks.pdf

Estrategias para la Creacin Pgina WebAyuda 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.

EstrategiasSeleccin 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 NavegacinLa pgina debe ser creado de forma simple, clara y organizada, que facilite la navegacin por ella sin problemas. Determine si se incluyen o no imgenesLa 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.

RecomendacionesSelecciona 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 lecturaUse 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)

RecomendacionesAnaliza el contenido y formalidad del documentos antes de decidir los elementos del diseoElige un diseo simple, consistente, atractivo, que facilite la comunicacinHaz 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.

RecomendacionesEvite 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 WebAsegrese 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 breveCause 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

ReferenciasBorocci, 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.htmlPrincipios 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.pdfRosa, 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.htmSelva, 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