Conceptos básicos de

Interfaz gráfica

PRESENTADO POR

SANTIAGO GARCÍA LÓPEZ

SERVICIO NACIONAL DE APRENDIZAJE SENA

PRODUCCION DE MULTIMEDIA.

SAN GIL- SANTANDER

JULIO 2020

.
 Introducción

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.

Nombre del
pantallazo:
Página Principal
(inicio)
Descripción:
En la parte
superior se puede
observar el banner
principal el cual
contiene el logo de la
empresa y el menú de
navegación con los
botones inicio,
servicios, nosotros, blog
y reserva tu cita. Este
banner está presente en
todas las páginas de la
web.
Debajo se
observa un slider, el
cual es una presentación
de imágenes
relacionadas con el que
hacer de la empresa y
texto sobre un recuadro con opacidad.
En la tercera sección, se visualiza las 4 entradas recientes incluidas en el blog de la
página, cada una de ellas tiene un hipervínculo que si se selecciona, direccionará al usuario para
que visualice completamente la entrada.
En la cuarta sección, se visualizan 5 imágenes correspondientes a las principales marcas
con las cuales trabaja la empresa.
En la parte inferior, se observa el pie de página que está presente en todas las páginas de
la web. En este se puede observar en el lateral izquierdo 3 botones enlazados correspondientes a
las redes sociales de la empresa y en la parte derecha se encuentra los teléfonos y la dirección
física de la empresa.
Nombre del
pantallazo:
Página servicio
Descripción:
En la parte
superior, se visualiza el
banner principal
(encabezado).
Debajo se
incluye una imagen
superpuesta por un color
translucido y sobre esta
el nombre del servicio.
La siguiente
sección está dividida en
2. La parte izquierda
contendrá un cuadro de
texto con la descripción
del servicio y en la parte
derecha estará una
imagen representativa.
Debajo de esta sección
se ubicara un listado de 3 hipervínculos, los cuales corresponden a las entradas del blog
relacionadas con el servicio nombrado.
En la parte inferior, se visualiza el pie de página.
Nombre del
pantallazo:
Página Quienes
somos
Descripción:
En la parte
superior, se visualiza el
banner principal
(encabezado).
Debajo se
incluye una imagen
superpuesta por un color
translucido y sobre esta
el texto quienes somos.
La siguiente
sección está dividida en
2. La parte izquierda
contendrá un cuadro de
texto con una
descripción de la
empresa y en la parte
derecha estará una imagen representativa. Debajo de esta sección se ubicara el mapa de google
maps.
En la parte inferior, se visualiza el pie de página.
Nombre del
pantallazo:
Página Blog
Descripción:
En la parte
superior, se visualiza el
banner principal
(encabezado).
Debajo se
incluye una imagen
superpuesta por un color
translucido y sobre esta
el titulo blog.
La siguiente
sección mostrara las
entradas del blog. En
cada entrada se
visualiza el título, un
resumen y una imagen
representativa de la
entrada. Además
contiene un hipervínculo que llevara a visualizar la entrada completa.
En la parte inferior, se visualiza el pie de página.
Nombre del
pantallazo:
Página Reserva
tu cita
Descripción:
En la parte
superior, se visualiza el
banner principal
(encabezado).
Debajo se
incluye una imagen
superpuesta por un color
translucido y sobre este
el título Reserva tu cita.
La siguiente
sección está dividida en
2. La parte izquierda
contendrá un formulario
con los campos nombre,
teléfono, fecha, hora,
descripción de la
solicitud y un botón para el envió de la información. En la parte derecha estará una imagen
representativa.
En la parte inferior, se visualiza el pie de página.
 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 de productos de sublimación y diseño que quiere transmitir

sencillez, seriedad y estatus social, usaremos el azul como color dominante que da un aire de

sofisticación, se asocia a la confianza, honestidad y fidelidad, En el diseño web el azul suele

ser usado para dar más visión y otras partes funcionales debido a su neutralidad. El azul

puede lograr fácilmente una sensación de sofisticación y misterio en un diseño y es perfecto

para usarse de fondos en diseño web. Son combinados frecuentemente con colores más claros

de acento, en nuestro caso nuestro color de acento, el blanco que genera sensaciones de

calma y tranquilidad y en diseños web donde se busca la permanencia.

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.