SlideShare una empresa de Scribd logo
1 de 36
Estrategias de Comunicación
Visual Utilizadas en Aplicaciones
Web
M.Sc. Noris Rodríguez
Junio; 2007
Interfaz de Diseño para
un curso Web
Motivación y aprendizaje
del estudiante
Estudiar y evaluar las estrategias de
comunicación visual utilizadas en las
aplicaciones instruccionales Web
Mejor utilización de estrategias
de comunicación visual para su
uso pedagógico y lógico.
Establecer lineamientos y estrategias de comunicación
visual para enriquecer las aplicaciones instruccionales
Web que se produzcan para el Internet.
Crecimiento de las
telecomunicaciones y la
necesidad social del ser
humano para educarse
Surge los medios alternativos de
educación formal y de capacitación
Personal profesional Incorporación de las
nuevas tecnologías
en los procesos
instruccionales y
educativos
Utilizan plataformas tecnológicas de Internet, para
desarrollar aplicaciones instruccionales en sus
programas y planes de estudio.
ANTECEDENTES DE
LA INVESTIGACIÓN
Zambrano (2004), realizó una
tesis denominada “Evaluación
de la Imagen en los Software
Educativos
Evaluar el tratamiento de la
imagen en el software educativo
Se Fundamentó en los postulados
teóricos de Dondis y Aumont
(1998), De Pablos (1999), Nielsen y
Galvis (2000), Marcal y Sexé (2001),
Díaz (2002), Zambrano (2003).
Entre las conclusiones del
estudio, se determinó que los
profesores de la maestría
requieren sistematizar los
conocimientos sobre el diseño
de pantalla, para aplicarla con el
fin de mejorar sus materiales
pedagógicos.
Se recomendó desarrollar el software
que servirá de apoyo al proceso de
aprendizaje y extender su aplicación
a docentes de otras áreas
Torres, M (2003), realizó una
tesis doctoral denominada “Las
Teorías de Aprendizaje y de
Instrucción
Ofrece lineamientos teórico-
metodológicos para su
diseño
Albornoz y Zambrano (2000)
De la realidad a la
imagen
Djuro, A (2003
Software educativo para el Diseño
De plantillas en las producciones
educativas multimedia
Procedimiento de la investigación
1.Se seleccionaron textos y documentos “on line” que tratasen sobre las estrategias de
comunicación visual, la composición, diagramación, sintaxis de la imagen, tipo de fuentes
tipográficas a utilizar, usabilidad en la Web, navegación, desarrollo de contenidos, principios de
diseño básicos para la creación de sitios Web y teorías del color y su tratamiento para la Web.
2. Se procedió a la revisión bibliográfica de los antecedentes para la fundamentación del estudio
y la correspondiente sustentación de las bases teóricas, considerando criterios para la selección
de investigaciones en el área de evaluación de estrategias de comunicación visual y aplicaciones
instruccionales Web.
3. Tomando como punto de partida estas bases teóricas, se construyó una tabla de
operacionalización de cada variable (Cuadro No 3) que dio origen a una guía de
observación (Anexo C), cuya estructura se responde a cuatro (3) dimensiones, y (12)
indicadores representados en ochenta (80) ítemes que se midieron siguiendo la
alternativa fija de respuesta conformada por la ausencia y la presencia de las estrategias
de comunicación visual, y la pertinencia de las mismas en la aplicación instruccional
Web.
PROPUESTA DE LINEAMIENTOS SOBRE ESTRATEGIAS DE COMUNICACIÓN VISUAL
UTILIZABLES EN LAS APLICACIONES INSTRUCCIONALES WEB
1. Estudiar al público al cual va dirigida la aplicación instruccional Web.
2. Diseñar bocetos de la estructura gráfica partiendo de lo general
a lo
específico.
3. Discutir con el equipo de
trabajo.
LINEAMIENTOS ESPECÍFICOS
Arquitectura de la Información / Criterios de organización
•Desarrollar la arquitectura de contenidos de forma jerárquica o mixta, pero
de forma organizada.
•Un sitio Web debe ser consistente en todos sus aspectos y aunque pueda
parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia
entre los diseños facilita al usuario el uso de un sitio. Parte de la consistencia se
evidencia con el uso adecuado de la arquitectura de contenidos, y con un buen
uso de un criterio de organización.
•Mantener botones, iconos o algunos elementos de interacción en un mismo
lugar para que los usuarios no se pierdan en páginas secundarias.
• Trabajar con un criterio de organización de simplicidad, claridad y regularidad,
esto provocará en el usuario una sensación de organización del curso.
• Colocar en el lado izquierdo el menú de opciones ya que en nuestra
cultura se estila leer generalmente de izquierda a derecha.
Arquitectura de la Información / Criterios de organización
Arquitectura de la Información / Criterios de organización
Iconos
• Crear iconos o botones creativos, con colores planos, conceptos claros y sencillos,
con un gran nivel de síntesis, para que estos sean entendidos con facilidad.
• Crear iconos universales o estándares si la aplicación Web instruccional se dirige a
un público amplio y heterogéneo.
• Mantener un mismo concepto gráfico para los iconos e interfaz, de manera que los
usuarios entiendan la identidad del mismo y sea una aplicación funcional.
• Utilizar metáforas en la iconografía para enriquecer el lenguaje y dejar que la
aplicación vaya narrando una historia.
Iconos
Iconos
Ilustraciones
• Utilizar ilustraciones, esquemas, gráficos u otros elementos de apoyo visual
a los contenidos que ayuden a llamar la atención, y que soporten el fin de
comunicar una idea, ilustrar procedimientos o instrucciones procedí mentales.
• Utilizar todas las imágenes del curso con un mismo concepto, un mismo
fotógrafo o ilustrador o de un mismo banco de imágenes; esto otorgará una visión
uniforme de toda la aplicación, y apoyará una vez más la identidad de la aplicación
instruccional Web.
• Utilizar imágenes en un solo tono o dúo tono para ilustrar secciones y no
abusar del uso del color ni del peso de las imágenes.
Ilustraciones
Ilustraciones
Fuentes / pistas tipográficas /legibilidad
• Utilizar fuentes estándares, preferiblemente palo seco ya que en la mayoría de las
plataformas de los computadores estas se ofrecen. Estas deben poseer un muy buen nivel de
lectura y visualización.
• Ser cuidadoso con el uso de contrastes entre colores de textos y fondos; el uso de
colores parecidos puede favorecer a la mala lectura.
• Contrastar con el del fondo el color de los textos. El tamaño de fuente debe ser
suficientemente grande para que sea legible.
• Crear pistas tipográficas para que sirvan de puntos focales y el usuario sepa cuando
descansar o no. Estas pistas deben ofrecerse con estilo tipográficos o ilustraciones pequeñas
dentro de las columnas de texto que sirvan de detalles.
• Utilizar textos con fondos de colores uniformes, que contrasten con el fondo para
facilitar la lectura y provoquen menos cansancio y sobre esfuerzo. Utilizar preferiblemente
colores de fondos claros, o blancos.
Fuentes / pistas tipográficas /legibilidad
Multimedia
• Crear elementos multimedia atractivos manteniendo un concepto similar al de la
aplicación instruccional Web, y un mismo lenguaje visual.
• Crear elementos multimedia como demostraciones (demos, animaciones, videos),
que sirvan de apoyo a los contenidos como resúmenes del curso o como elementos
introductorias que sean explícitos mas no elementos decorativos.
Multimedia
Vínculos o enlaces
Multimedia
Sinopsis
Multimedia
Uso
• Crear una interfaz sencilla y visualmente fácil de entender.
• Utilizar los colores con precaución para no dificultar el acceso a los
usuarios que presentan problemas de distinción de colores.
• Utilizar enlaces azules y botones del sistema. Ayudan al usuario a
reconocer lo que son vínculos y lo que no lo es, al igual que los vínculos ya
utilizados.
• En las aplicaciones instruccionales Web la interfaz gráfica ha de ser
visible, evitar elementos invisibles de navegación que han de ser inferidos por los
usuarios, menús desplegables, indicaciones ocultas.
• A nivel visual los usuarios no deben sufrir sobrecarga de información.
Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer, existe
sobrecarga de información, por lo que se le debe ofrecer en primera instancia una
interfaz sencilla, con un excelente concepto gráfico, respaldada por su identidad.
Uso
Actividades
Uso
Color
• Seleccionar los colores de la paleta Web, estudiando el tema tratado ya que
esto es parte de la personalidad del curso.
• Utilizar el color de fondo de manera lógica para separar unas áreas de otras y
crear rupturas que ayuden a jerarquizar y separar los contenidos.
• Se Utilizar pequeños elementos de color sobre un fondo mayoritariamente
blanco para separar contenidos y que no se confundan.
• Proporcionar a nivel visual (cromático) contrastes, donde el usuario pueda
leer visualmente y por jerarquía, usando intencionalmente los colores calidos o fríos
como patrones principales.
• Utilizar los colores de tonos mas saturados para las zonas donde se
despliegue los menús, iconos y notas especiales. El color de mayor tono llamará la
atención a primera vista, lo cual proporcionara a los usuarios una jerarquía en la
lectura, comenzando por los mas fuertes u oscuros, o de los calidos a los fríos.
• Utilizar un máximo de 3 a 4 colores en la aplicación instruccional Web; un
color en grandes áreas y otros esparcidos de manera de pinceladas o retoques en la
interfaz para que visualmente exista una diversidad de colores, más no un abuso del
mismo. Esto ayudará al usuario a no cansarse de la interfaz.
Color
Color
Identidad
• Las cabeceras de las aplicaciones instruccionales Web deben proporcionar,
el nombre y el logo de la misma. En ningún caso se debe colocar un vínculo a
contenidos importantes del sitio en la cabecera o cercano a ella, se debe respetar
esta zona si lo que se desea respetar es la identidad.
•Mantener el uso de los mismos colores, buscando un lenguaje propio,
matices, degradados, colores planos, manteniendo el concepto.
Identidad
Identidad
Identidad
Identidad
CONCLUSIONES
Son de uso instruccional, pedagógico o de enseñanza,
carecen de organización, de criterios compositivos, lo
que las muestra visualmente desorganizados, poca
efectividad comunicacional
Internet es una plataforma que se
presta para utilizar diferentes
tecnologías multimedia, como
demos o animaciones, por lo que
se puede evidenciar que estas no
aprovechan al máximo las
ventajas de las tecnologías.Las estrategias de comunicación visual
utilizadas en las mayoría de las
aplicaciones instruccionales Web fueron:
- Los contrastes tipográficos y las fuentes y
- Ninguna aplicación mostró identidad o
personalidad.
RECOMENDACIONES
Recordar que el uso adecuado de las estrategias de comunicación visual
puede seducir al usuario y favorecer el contenido, a diferencia de el mal
uso de las estrategias podría ocasionar cansancio y ruido y convirtiéndose
estas estrategias en cómplice del desprecio a entidades culturales, por lo
que se debe tener cuidado con el uso de las mismas.
Tener presente que la imagen el signo, los esquemas, los elementos
multimedia, y las composiciones que se utilicen de manera intencional
como estrategias de comunicación visual, constituyen un amplio repertorio
de base, con lo que se podrían crear otras formas de lenguaje y
aplicaciones instruccionales Web más ricas y vistosas visualmente,
proporcionado mayor claridad y calidad de cursos, que tendrían un valor
intrínseco de respeto al educando o usuario, proporcionado aplicaciones
desde una mayor y mejor calidad desde los contenidos hasta de forma.
Promover líneas de investigación inherentes a las estrategias de comunicación visual,
con relación a las nuevas tecnologías y a la educación, con el fin de crear una cultura
visual eficiente al momento de la utilización de estas estrategias comunicacionales.
Alcanzar una manera eficiente la posibilidad de que estas estrategias de comunicación
visual apoyen los contenidos y procesos de enseñanzazas, mas no estropeen el mismo.
RECOMENDACIONES
Líderes en Educación a Distancia a través de InternetLíderes en Educación a Distancia a través de Internet
Gracias por su AtenciónGracias por su Atención
M.Sc. Noris B. Rodríguez S.
Directora de Estudios a Distancia
Telf: (0058) 261 2008871 al 74
www.ead.urbe.edu
Maracaibo – Estado Zulia.
República Bolivariana de Venezuela

Más contenido relacionado

Destacado

Las Animaciones Para La Web
Las Animaciones Para La WebLas Animaciones Para La Web
Las Animaciones Para La Webluisamhia
 
Composición en Web
Composición en WebComposición en Web
Composición en WebRubens Yanes
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina webkatherinviviana
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web2012diego
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página webadri9610
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"ogms
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webJuan Flores
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio webtomyycerr
 

Destacado (12)

Las Animaciones Para La Web
Las Animaciones Para La WebLas Animaciones Para La Web
Las Animaciones Para La Web
 
Composición en Web
Composición en WebComposición en Web
Composición en Web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Composicion de paginas web
Composicion de paginas webComposicion de paginas web
Composicion de paginas web
 
Analisis Sitios Web Ramo
Analisis Sitios Web RamoAnalisis Sitios Web Ramo
Analisis Sitios Web Ramo
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 

Similar a Estretagias de comunicacion para diseño web

Estándares para el diseño de interfaz
Estándares para el diseño de interfazEstándares para el diseño de interfaz
Estándares para el diseño de interfazJose Luis Dorao
 
Aspectos Estéticos a ser considerados en el diseño de un MDC
Aspectos Estéticos a ser considerados en el diseño de un MDCAspectos Estéticos a ser considerados en el diseño de un MDC
Aspectos Estéticos a ser considerados en el diseño de un MDCgerardoR
 
Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1mbulas
 
Diseño Modulo Instruccional
Diseño Modulo InstruccionalDiseño Modulo Instruccional
Diseño Modulo InstruccionalMigdalia
 
Concejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesConcejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesTania Hurtado Hernandez
 
Principios
PrincipiosPrincipios
Principiosniko a
 
2.2 elementos basicos multimedia
2.2 elementos basicos multimedia2.2 elementos basicos multimedia
2.2 elementos basicos multimediaDiana Hernandez
 
Mapas De Progreso K12
Mapas De Progreso K12Mapas De Progreso K12
Mapas De Progreso K12matijoaquin
 
recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital Seebas Vargas
 
Presentaciones digitales
Presentaciones digitalesPresentaciones digitales
Presentaciones digitales19942206
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEBJavier Navarro
 
Elementos basicos-multimedia
Elementos basicos-multimediaElementos basicos-multimedia
Elementos basicos-multimediajennifergarzong
 
Estrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesEstrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesSeebas Vargas
 
Uso de presentaciones colectivas
Uso de presentaciones colectivasUso de presentaciones colectivas
Uso de presentaciones colectivasbelenzota0
 

Similar a Estretagias de comunicacion para diseño web (20)

powerpoint
powerpoint powerpoint
powerpoint
 
Estándares para el diseño de interfaz
Estándares para el diseño de interfazEstándares para el diseño de interfaz
Estándares para el diseño de interfaz
 
Aspectos Estéticos a ser considerados en el diseño de un MDC
Aspectos Estéticos a ser considerados en el diseño de un MDCAspectos Estéticos a ser considerados en el diseño de un MDC
Aspectos Estéticos a ser considerados en el diseño de un MDC
 
Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1
 
Diseno de Modulos para la Web
Diseno de Modulos para la WebDiseno de Modulos para la Web
Diseno de Modulos para la Web
 
Diseño Modulo Instruccional
Diseño Modulo InstruccionalDiseño Modulo Instruccional
Diseño Modulo Instruccional
 
Moretti
MorettiMoretti
Moretti
 
Concejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitalesConcejos graficos para el diseño de recursos digitales
Concejos graficos para el diseño de recursos digitales
 
Sp014 admirar 2009 entornos virtuales
Sp014 admirar 2009 entornos virtualesSp014 admirar 2009 entornos virtuales
Sp014 admirar 2009 entornos virtuales
 
Principios
PrincipiosPrincipios
Principios
 
2.2 elementos basicos multimedia
2.2 elementos basicos multimedia2.2 elementos basicos multimedia
2.2 elementos basicos multimedia
 
Elementos basicos de multimedia
Elementos basicos de multimediaElementos basicos de multimedia
Elementos basicos de multimedia
 
Mapas De Progreso K12
Mapas De Progreso K12Mapas De Progreso K12
Mapas De Progreso K12
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital recomendaciones para un ben contenido digital
recomendaciones para un ben contenido digital
 
Presentaciones digitales
Presentaciones digitalesPresentaciones digitales
Presentaciones digitales
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Elementos basicos-multimedia
Elementos basicos-multimediaElementos basicos-multimedia
Elementos basicos-multimedia
 
Estrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitalesEstrategias para realizar contenidos digitales
Estrategias para realizar contenidos digitales
 
Uso de presentaciones colectivas
Uso de presentaciones colectivasUso de presentaciones colectivas
Uso de presentaciones colectivas
 

Más de buciosinai

Más de buciosinai (16)

Medición y análisis
Medición y análisisMedición y análisis
Medición y análisis
 
Redes Sociales
Redes SocialesRedes Sociales
Redes Sociales
 
Publicidad On-Line
Publicidad On-LinePublicidad On-Line
Publicidad On-Line
 
Comercio Electrónico
Comercio ElectrónicoComercio Electrónico
Comercio Electrónico
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presetacion2
Presetacion2Presetacion2
Presetacion2
 
Hola 2
Hola 2Hola 2
Hola 2
 
Curso web
Curso webCurso web
Curso web
 
Hola 2
Hola 2Hola 2
Hola 2
 
P.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAIP.P.T. EN GOOGLE SINAI
P.P.T. EN GOOGLE SINAI
 
Test ciudad
Test ciudadTest ciudad
Test ciudad
 
Presentation1
Presentation1Presentation1
Presentation1
 
Hola
HolaHola
Hola
 
Curso DiseñO
Curso DiseñOCurso DiseñO
Curso DiseñO
 
Sesion2
Sesion2Sesion2
Sesion2
 
Sesion1
Sesion1Sesion1
Sesion1
 

Estretagias de comunicacion para diseño web

  • 1. Estrategias de Comunicación Visual Utilizadas en Aplicaciones Web M.Sc. Noris Rodríguez Junio; 2007
  • 2. Interfaz de Diseño para un curso Web Motivación y aprendizaje del estudiante Estudiar y evaluar las estrategias de comunicación visual utilizadas en las aplicaciones instruccionales Web Mejor utilización de estrategias de comunicación visual para su uso pedagógico y lógico. Establecer lineamientos y estrategias de comunicación visual para enriquecer las aplicaciones instruccionales Web que se produzcan para el Internet.
  • 3. Crecimiento de las telecomunicaciones y la necesidad social del ser humano para educarse Surge los medios alternativos de educación formal y de capacitación Personal profesional Incorporación de las nuevas tecnologías en los procesos instruccionales y educativos Utilizan plataformas tecnológicas de Internet, para desarrollar aplicaciones instruccionales en sus programas y planes de estudio.
  • 4. ANTECEDENTES DE LA INVESTIGACIÓN Zambrano (2004), realizó una tesis denominada “Evaluación de la Imagen en los Software Educativos Evaluar el tratamiento de la imagen en el software educativo Se Fundamentó en los postulados teóricos de Dondis y Aumont (1998), De Pablos (1999), Nielsen y Galvis (2000), Marcal y Sexé (2001), Díaz (2002), Zambrano (2003). Entre las conclusiones del estudio, se determinó que los profesores de la maestría requieren sistematizar los conocimientos sobre el diseño de pantalla, para aplicarla con el fin de mejorar sus materiales pedagógicos. Se recomendó desarrollar el software que servirá de apoyo al proceso de aprendizaje y extender su aplicación a docentes de otras áreas Torres, M (2003), realizó una tesis doctoral denominada “Las Teorías de Aprendizaje y de Instrucción Ofrece lineamientos teórico- metodológicos para su diseño Albornoz y Zambrano (2000) De la realidad a la imagen Djuro, A (2003 Software educativo para el Diseño De plantillas en las producciones educativas multimedia
  • 5. Procedimiento de la investigación 1.Se seleccionaron textos y documentos “on line” que tratasen sobre las estrategias de comunicación visual, la composición, diagramación, sintaxis de la imagen, tipo de fuentes tipográficas a utilizar, usabilidad en la Web, navegación, desarrollo de contenidos, principios de diseño básicos para la creación de sitios Web y teorías del color y su tratamiento para la Web. 2. Se procedió a la revisión bibliográfica de los antecedentes para la fundamentación del estudio y la correspondiente sustentación de las bases teóricas, considerando criterios para la selección de investigaciones en el área de evaluación de estrategias de comunicación visual y aplicaciones instruccionales Web. 3. Tomando como punto de partida estas bases teóricas, se construyó una tabla de operacionalización de cada variable (Cuadro No 3) que dio origen a una guía de observación (Anexo C), cuya estructura se responde a cuatro (3) dimensiones, y (12) indicadores representados en ochenta (80) ítemes que se midieron siguiendo la alternativa fija de respuesta conformada por la ausencia y la presencia de las estrategias de comunicación visual, y la pertinencia de las mismas en la aplicación instruccional Web.
  • 6. PROPUESTA DE LINEAMIENTOS SOBRE ESTRATEGIAS DE COMUNICACIÓN VISUAL UTILIZABLES EN LAS APLICACIONES INSTRUCCIONALES WEB 1. Estudiar al público al cual va dirigida la aplicación instruccional Web. 2. Diseñar bocetos de la estructura gráfica partiendo de lo general a lo específico. 3. Discutir con el equipo de trabajo.
  • 7. LINEAMIENTOS ESPECÍFICOS Arquitectura de la Información / Criterios de organización •Desarrollar la arquitectura de contenidos de forma jerárquica o mixta, pero de forma organizada. •Un sitio Web debe ser consistente en todos sus aspectos y aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio. Parte de la consistencia se evidencia con el uso adecuado de la arquitectura de contenidos, y con un buen uso de un criterio de organización. •Mantener botones, iconos o algunos elementos de interacción en un mismo lugar para que los usuarios no se pierdan en páginas secundarias. • Trabajar con un criterio de organización de simplicidad, claridad y regularidad, esto provocará en el usuario una sensación de organización del curso. • Colocar en el lado izquierdo el menú de opciones ya que en nuestra cultura se estila leer generalmente de izquierda a derecha.
  • 8. Arquitectura de la Información / Criterios de organización
  • 9. Arquitectura de la Información / Criterios de organización
  • 10. Iconos • Crear iconos o botones creativos, con colores planos, conceptos claros y sencillos, con un gran nivel de síntesis, para que estos sean entendidos con facilidad. • Crear iconos universales o estándares si la aplicación Web instruccional se dirige a un público amplio y heterogéneo. • Mantener un mismo concepto gráfico para los iconos e interfaz, de manera que los usuarios entiendan la identidad del mismo y sea una aplicación funcional. • Utilizar metáforas en la iconografía para enriquecer el lenguaje y dejar que la aplicación vaya narrando una historia.
  • 13. Ilustraciones • Utilizar ilustraciones, esquemas, gráficos u otros elementos de apoyo visual a los contenidos que ayuden a llamar la atención, y que soporten el fin de comunicar una idea, ilustrar procedimientos o instrucciones procedí mentales. • Utilizar todas las imágenes del curso con un mismo concepto, un mismo fotógrafo o ilustrador o de un mismo banco de imágenes; esto otorgará una visión uniforme de toda la aplicación, y apoyará una vez más la identidad de la aplicación instruccional Web. • Utilizar imágenes en un solo tono o dúo tono para ilustrar secciones y no abusar del uso del color ni del peso de las imágenes.
  • 16. Fuentes / pistas tipográficas /legibilidad • Utilizar fuentes estándares, preferiblemente palo seco ya que en la mayoría de las plataformas de los computadores estas se ofrecen. Estas deben poseer un muy buen nivel de lectura y visualización. • Ser cuidadoso con el uso de contrastes entre colores de textos y fondos; el uso de colores parecidos puede favorecer a la mala lectura. • Contrastar con el del fondo el color de los textos. El tamaño de fuente debe ser suficientemente grande para que sea legible. • Crear pistas tipográficas para que sirvan de puntos focales y el usuario sepa cuando descansar o no. Estas pistas deben ofrecerse con estilo tipográficos o ilustraciones pequeñas dentro de las columnas de texto que sirvan de detalles. • Utilizar textos con fondos de colores uniformes, que contrasten con el fondo para facilitar la lectura y provoquen menos cansancio y sobre esfuerzo. Utilizar preferiblemente colores de fondos claros, o blancos.
  • 17. Fuentes / pistas tipográficas /legibilidad
  • 18. Multimedia • Crear elementos multimedia atractivos manteniendo un concepto similar al de la aplicación instruccional Web, y un mismo lenguaje visual. • Crear elementos multimedia como demostraciones (demos, animaciones, videos), que sirvan de apoyo a los contenidos como resúmenes del curso o como elementos introductorias que sean explícitos mas no elementos decorativos.
  • 22. Uso • Crear una interfaz sencilla y visualmente fácil de entender. • Utilizar los colores con precaución para no dificultar el acceso a los usuarios que presentan problemas de distinción de colores. • Utilizar enlaces azules y botones del sistema. Ayudan al usuario a reconocer lo que son vínculos y lo que no lo es, al igual que los vínculos ya utilizados. • En las aplicaciones instruccionales Web la interfaz gráfica ha de ser visible, evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas. • A nivel visual los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer, existe sobrecarga de información, por lo que se le debe ofrecer en primera instancia una interfaz sencilla, con un excelente concepto gráfico, respaldada por su identidad.
  • 23. Uso
  • 25. Color • Seleccionar los colores de la paleta Web, estudiando el tema tratado ya que esto es parte de la personalidad del curso. • Utilizar el color de fondo de manera lógica para separar unas áreas de otras y crear rupturas que ayuden a jerarquizar y separar los contenidos. • Se Utilizar pequeños elementos de color sobre un fondo mayoritariamente blanco para separar contenidos y que no se confundan. • Proporcionar a nivel visual (cromático) contrastes, donde el usuario pueda leer visualmente y por jerarquía, usando intencionalmente los colores calidos o fríos como patrones principales.
  • 26. • Utilizar los colores de tonos mas saturados para las zonas donde se despliegue los menús, iconos y notas especiales. El color de mayor tono llamará la atención a primera vista, lo cual proporcionara a los usuarios una jerarquía en la lectura, comenzando por los mas fuertes u oscuros, o de los calidos a los fríos. • Utilizar un máximo de 3 a 4 colores en la aplicación instruccional Web; un color en grandes áreas y otros esparcidos de manera de pinceladas o retoques en la interfaz para que visualmente exista una diversidad de colores, más no un abuso del mismo. Esto ayudará al usuario a no cansarse de la interfaz. Color
  • 27. Color
  • 28. Identidad • Las cabeceras de las aplicaciones instruccionales Web deben proporcionar, el nombre y el logo de la misma. En ningún caso se debe colocar un vínculo a contenidos importantes del sitio en la cabecera o cercano a ella, se debe respetar esta zona si lo que se desea respetar es la identidad. •Mantener el uso de los mismos colores, buscando un lenguaje propio, matices, degradados, colores planos, manteniendo el concepto.
  • 33. CONCLUSIONES Son de uso instruccional, pedagógico o de enseñanza, carecen de organización, de criterios compositivos, lo que las muestra visualmente desorganizados, poca efectividad comunicacional Internet es una plataforma que se presta para utilizar diferentes tecnologías multimedia, como demos o animaciones, por lo que se puede evidenciar que estas no aprovechan al máximo las ventajas de las tecnologías.Las estrategias de comunicación visual utilizadas en las mayoría de las aplicaciones instruccionales Web fueron: - Los contrastes tipográficos y las fuentes y - Ninguna aplicación mostró identidad o personalidad.
  • 34. RECOMENDACIONES Recordar que el uso adecuado de las estrategias de comunicación visual puede seducir al usuario y favorecer el contenido, a diferencia de el mal uso de las estrategias podría ocasionar cansancio y ruido y convirtiéndose estas estrategias en cómplice del desprecio a entidades culturales, por lo que se debe tener cuidado con el uso de las mismas. Tener presente que la imagen el signo, los esquemas, los elementos multimedia, y las composiciones que se utilicen de manera intencional como estrategias de comunicación visual, constituyen un amplio repertorio de base, con lo que se podrían crear otras formas de lenguaje y aplicaciones instruccionales Web más ricas y vistosas visualmente, proporcionado mayor claridad y calidad de cursos, que tendrían un valor intrínseco de respeto al educando o usuario, proporcionado aplicaciones desde una mayor y mejor calidad desde los contenidos hasta de forma.
  • 35. Promover líneas de investigación inherentes a las estrategias de comunicación visual, con relación a las nuevas tecnologías y a la educación, con el fin de crear una cultura visual eficiente al momento de la utilización de estas estrategias comunicacionales. Alcanzar una manera eficiente la posibilidad de que estas estrategias de comunicación visual apoyen los contenidos y procesos de enseñanzazas, mas no estropeen el mismo. RECOMENDACIONES
  • 36. Líderes en Educación a Distancia a través de InternetLíderes en Educación a Distancia a través de Internet Gracias por su AtenciónGracias por su Atención M.Sc. Noris B. Rodríguez S. Directora de Estudios a Distancia Telf: (0058) 261 2008871 al 74 www.ead.urbe.edu Maracaibo – Estado Zulia. República Bolivariana de Venezuela

Notas del editor

  1. ______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
  2. ______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________