AP3-AA7-EV6 CONCEPTOS BÁSICOS DE INTERFAZ GRÁFICA

JUAN SEBASTIAN MEDINA VELOSA

GRUPO DE INSTRUCTORAS

PRODUCCION DE MULTIMEDIA

(1792966)

BOGOTA, CUNDINAMARCA
Una interfaz web es una estructura formada por una serie de elementos gráficos
que permiten a los usuarios acceder a los contenidos de un sitio web; esta debe
permitir a los usuarios navegar de forma fácil, eficaz y cómoda por nuestro sitio.

1. Características Interfaz Gráfica

Las características que utilizaremos en la interfaz gráfica de la web institucional

Declory Happy Infancy serán las siguientes:

1. Elementos de Identificación: El usuario al verlos sabe a qué sitio a accedido,

algunos ejemplos son: el logo, título de la página, nombre de dominio,
imágenes propias de la Institución.

2. Elementos de navegación: Son aquellos que están presentes en cada una

de las pantallas de un sitio Web; permiten al usuario moverse por las
diferentes secciones del sitio y retornar de nuevo a la portada. Estos
elementos deben ser lo suficientemente intuitivos para que el usuario sepa
qué es lo que hay que hacer para acceder a un contenido en concreto.
Haciendo clic en cualquier zona de la imagen se retorna a la Portada
independientemente de la zona del sitio Web en la que se encuentre el
usuario.
3. Elementos de Contenido: Son las zonas en las que se muestra la información
relevante y que componen el menú principal; dentro de la zona de contenidos
se distinguen los títulos del contenido (Bienvenidos, Nosotros, Agenda
Virtual, Artículos y Contáctenos) y al acceder a dichas zonas están muestran
el contenido propio a cada título

4. Elementos de Interacción: para el diseño de navegación de la página se

utilizará un menú web superior y una barra de navegación lateral derecha,
donde cada botón nos traslada a contenidos e información de acuerdo a la
elección.

5. Elemento de Ordenación: El bloque de Encabezado se repite en todas las

páginas de un sitio Web y debe permanecer visible en todas ellas. Para el
ejemplo de nuestra página será el título con los datos

6. Elementos Visuales: para el diseño de la página Institucional se relacionaron

imágenes como:

 Logo Institucional: utiliza colores sólidos, formas geométricas, caras

dibujadas de dos niños sonriendo, letras sobre expuestas en fondo oscuro
para resaltar el nombre que va de color blanco, Son elementos de relación
ya que, por su ubicación, interrelación de las formas, letras y tamaños
generan una imagen única y compacta. Este diseño es propio de la Institución
y no admite cambios en la misma por lo que se debe adaptar al diseño de la
misma. Los dibujos son representaciones reales de figuras geométricas y no
reales de niño y niña, son figuras no planas por presentar sobre posiciones
de fondos en sobra.
 Imágenes de fondo de página: Nuestro cerebro se ve mucho más estimulado por
una imagen siempre que aparece en ella un ser humano y más aún por nuestro tipo
de página, se mostrarán fotos reales de niños realizando actividades propias de
acuerdo a las edades, deben de tener el tamaño justo y van cambiando de manera
automática, deben de tener una resolución de 300 pp, con iluminación adecuada y
que la luz sea constante en todas las fotos de la web, las fotos van a ser compradas
de stock procurando siempre elegir las más naturales posible. Las imágenes
elegidas deben tener efecto de recordación y de motivación, en la que muestren
niños haciendo actividades reales y donde interactúan con su ambiente, también
deben ser atemporales, es decir que se vean frescas todo el tiempo.
 En el Botón menú 2 identificado como NOSOTROS, en la parte baja de este menú
podemos colocar vínculos para mostrar las sedes y los diferentes ambientes de la
Institución, se verán fotos reales de la institución donde los padres pueden ver como
es el ambiente real donde van a estar los niños, las imágenes van cambiando de
manera automática cada 5-6 segundos o tiene opción de siguiente o atrás por medio
del botón seleccionado.

7. Elementos de Color: Una de las propiedades de los colores es la de transmitir

sensaciones. Los colores estimulan nuestro cerebro y nos evocan
tranquilidad, seguridad, confianza, pasión, misterio... Esto es muy interesante
desde el punto de vista del Marketing, ya que no es necesario dar
argumentos para convencer sobre las propiedades o beneficios de un
producto o servicio. Por lo general, se recomiendan respetar una de estas
tres reglas:
 Colores de la misma gama cromática; es decir, diferentes tonos de un mismo
color.
 Colores complementarios; aquellos situados próximos en la gama cromática
 Colores opuestos: son aquellos situados justo en el lado opuesto de la gama
cromática y que ayudan al contraste.

Como es una página para una institución educativa recomiendo escala de

colores pasteles con imágenes de colores vivos y reales.
  Elementos de textos (fuentes): Es extraño encontrar una página web con solo
un tipo de letra. Lo habitual es elegir dos tipos de letra, uno para los títulos y
otro para los textos. Nuestra recomendación es que no utilices más de tres y
que cuides ante todo de que las fuentes sean diferentes entre sí pero que se
complementen en su estilo.

Se recomienda la tipografía sin serifa para la navegación y el cuerpo de los textos

gracias a su legibilidad ya que presenta cortes limpios en los extremos y son más
legibles en la pantalla y dan la sensación de páginas modernas. Tipo de fuente
Trebuchet MS, Open Sans, Arimo.

Para títulos de actividades, charlas, invitaciones puede utilizarse tipografía

Divertida, fuente tipo Snap ITC, Disney, Amatic, Comic en colores y formatos
sombreado o tres d.

2. Estilo recomendado y sus características de aplicación:

 Diseños minimalistas: “menos es más”. Se trata de combinar diseño y

funcionalidad de la forma más sencilla posible para que el usuario pueda
navegar sin perderse ni distraerse. Se eliminan todos los elementos
superfluos. Las formas que se utilizan a la hora de hacer una web minimalista
son formas geométricas y muy simples, con fotografías a full screen como
fondo.
 Diseños modulares: Se trata de un tipo de diseño en el que cada elemento
se plantea como un módulo independiente, inspirado en la red
social Pinterest, se caracteriza por el diseño en módulos, ya que es perfecto
para una correcta adaptación al diseño responsivo.

 Diseño Hero: Son imágenes con ancho completo de la pantalla para captar
la atención del usuario que visita la página web del colegio. Están pensados
como imágenes introductoras del sitio web y su resultado a nivel visual es
muy llamativo.
 Diseño con trasparencias: Las transparencias, tan odiadas como deseadas.
Nos permiten dotar de pinceladas de detalle y no mostrar fondos 100%
planos. Aplicados tanto a producto como a logotipos, las transparencias
dotan de “textura” a nuestro producto, una textura que podemos combinar a
nuestro completo antojo.
 CIBERGRAFIA

https://es.jimdo.com/2014/12/12/elige-la-tipograf%C3%ADa-adecuada-para-transmitir-el-

mensaje-correcto-en-tu-p%C3%A1gina-web/

http://www.staffcreativa.pe/blog/guias-de-estilo-diseno-de-paginas-web-diez-marcas-que-

amamos/

http://www.sitiolibre.com/curso/pdf/DIW01.pdf