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

AUTOR: JOIDER RODRIGUEZ CERVANTES

SERVICIO NACIONAL DE APRENDIZAJE

TECNOLOGÍA EN PRODUCCIÓN DE MULTIMEDIA
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 en el sitio. El
objetivo de su desarrollo es que el usuario puede comunicarse con la máquina de
la forma más sencilla e intuitiva posible.
 CARACTERISITICA INTERFAZ GRAFICA
Las características que utilizaremos en la interfaz gráfica del sitio web de
Fecolpestier serán las siguientes:
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.

Dominio o URL Asignada

Logo y nombre
de la federación

Titulo

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.

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

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.

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

ELEMENTOS VISUALES: para el diseño de la página Institucional se

relacionaron imágenes como:

Logo de la federación: El logo de la federación esta formado por una figura

geométrica Circular de color rojo, dentro de ese espacio esta el nombre
de la federación. El centro del logo es de color azul rey con líneas que
inician desde la parte superior hasta el medio de color azul cielo en
forma de ondas las cual hace referencia al mar. En el centro del logo
tenemos la imagen de un pez que hace referencia ala pesca.
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, en nuestro sitio web encontramos al fondo de la pagina una imagen
de una persona lanzando una red de pesca. La muestra de una de las forma

de pesca que se hace.

En el Botón menú 2 identificado como SOBRE NOSOTROS:

Encontramos imagenes reales de personsas que conforman la federacion en la
cede o citio fisico de la federacion y otra imagen de una embaracion con persona
abordo realizando una especcion de equipos y elememtos par salir a realisar su
labor
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.

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.

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 de la federación
. 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.
 CONCLUSIÓN

Como resultado de la investigación, se puede concluir que al crear una interfaz

gráfica de usuario para una aplicación web más óptima, se deben considerar los
conceptos básicos de la interfaz gráfica de usuario, es decirPor ejemplo, los tipos
de usuarios que utilizan la aplicación. ¿Cuál debería ser la usabilidad de la
aplicación Aplicación a desarrollar ¿Cómo debería comportarse la aplicación en el
manejo de la información? Considere qué métodos se pueden utilizar para
mantener segura la aplicación web. También necesita comprender los principios
detrás del diseño de aplicaciones.