Facultad Gestión Organizacional

UNIVERSIDAD LAICA “ELOY ALFARO” DE

MANABÍ

FACULTAD DE GESTIÓN ORGANIZACIONAL

INTEGRANTES:

MONTES MERO HILDA NICOLE

PICO LÓPEZ KEVIN ADRIÁN

VÉLEZ FERNANDEZ KIMBERLY MERCEDES

TEMA:

DISEÑO VISUAL

PARTES DE UNA PÁGINA WEB

PRINCIPIOS BÁSICOS DEL DISEÑO WEB

CURSO/PARALELO:

TERCER SEMESTRE “B”

DOCENTE:

TANIA CECIBEL CAÑARTE RODRIGUEZ

MATERIA:

HERRAMIENTAS DIGITALES BÁSICAS PARA LA GESTIÓN DE LA

INFORMACIÓN

PERIODO:

2020 - 2021
 DISEÑO VISUAL

Aunque el diseño de la información y de la interactividad supuso un gran

esfuerzo por crear webs funcionales, un diseño que no es atractivo dificulta el
acceso y la navegabilidad. Es por ello por lo que el diseño visual de un sitio
web tiene una importancia capital.

El diseño Visual es una denominación

profesional del tipo de diseño que tiene
como objetivo transformar los datos en
maneras visuales tomando en
consideración la percepción y utilizando
las nuevas tecnologías para crear
imágenes y así establecer una
comunicación. Coordina, gestiona y
utiliza informaciones visuales, investigando los procesos cognitivos y evaluando
los aportes de las imágenes para la creación de un diseño.

El diseño visual como profesión está capacitada para detectar las necesidades
que están presentes en los sistemas de comunicación y de manera estratégica
diseñar imágenes que sirvan para el restablecimiento de estas. Trata de llegar
a un gran número de personas con las imágenes, comunicando y expresando
de una manera abierta y objetiva. Los resultados que trae consigo el diseño
visual depende del tipo de imagen que se haya creado, pueden ser los
siguientes:

 Políticas editoriales
 Imágenes globales
 Sistemas de información
 Visualización de datos
 Coordinación del diseño visual

A través de la gestión y la coordinación se pueden observar los alcances de

este tipo de diseños dirigido a la construcción de productos visuales. Estos
alcances inciden en una mejora en la calidad visual del ambiente, fomentan los
valores de identidad y de equilibrio, reconocen el individuo en su medio
geográfico y hace que mejore la percepción.
 PARTES DE UNA PÁGINA WEB

Desde las perspectivas de la estructura del contenido y del diseño visual de

una página web existen una serie de apartados más o menos habituales en la
mayoría de las páginas web. Juntos dan forma a la estructura visual de la
página web, como vemos en la figura 3.

 ENCABEZADO: es la
sección que se encuentra
en la parte superior de la
ventana, generalmente
ocupando el ancho
completo. Suele ser
invariable a lo largo de la
web. Algunos de los
elementos que contiene
son los siguientes:
1. LOGOTIPO: ubicado a la izquierda o, en
menor medida, en el centro o a la derecha, es el elemento gráfico de la marca
en la web. Generalmente se encuentra ligado a la portada, por lo que un clic
sobre el logotipo devuelve al usuario al punto inicial de navegación.

2. MENÚS DE NAVEGACIÓN Y MENÚS DE CORTESÍA: es el conjunto

de accesos directos a diferentes secciones de la web.

 MENÚ DE NAVEGACIÓN: es el menú con las secciones principales de

la web. Suele estar formado por botones, enlaces o pestañas y, aunque
no es necesario, puede integrarse en la cabecera. Es habitual
encontrarse con menús horizontales, pero en menor medida puede ser
vertical o, como sucede en los terminales móviles, estar inicialmente
oculto y activo solo tras pulsar su botón (menú tipo hamburguesa).

 CONTENIDO PRINCIPAL: es el apartado central de la página, el

contenido original de la página web, y es único en cada una de las
diferentes páginas web que con- forman el sitio. Dentro del contenido
 principal podemos encontrar secciones más o menos comunes.

1. MIGAS DE PAN: suele ubicarse en la parte superior del contenido

principal y ayuda al internauta a ubicarse dentro de la página en un
sistema jerárquico de elementos.

2. HERO IMAGE: hace referencia a un báner de gran tamaño que se

coloca en la parte superior del contenido, habitualmente en portadas
o páginas de aterrizaje (landing pages) con una cabecera llamativa,
un deslizador (slider) de imágenes.

 BARRA LATERAL: se coloca generalmente a la derecha del contenido

principal (también puede ir a la izquierda o incluso haber varias barras
laterales, una a cada lado del contenido o las dos barras de navegación
juntas) y muestra información adicional relacionada con el contenido
principal. Es habitual la inclusión de un menú de navegación local o un
menú contextual para el contenido principal. La portada no suele tener
barras laterales.

 PIE DE PÁGINA: es la parte inferior de la página web que cierra la

información de la página. Se ubica inmediata- mente al finaliza el
contenido principal (cualquiera que sea el tamaño de este)
y contiene, generalmente, los créditos, la información de contacto o un
menú de navegación que incluya los elementos más populares.

1. ELEMENTOS FLOTANTES: engloban todos los elementos que,

puntualmente, pueden aparecer en una página web para aportar o
requerir más información, como son los siguientes.
2. VENTANAS EMERGENTES: son elementos que emergen
automáticamente, generalmente en el centro de la página web y que
muestran información de interés para el internauta. Suelen activarse
con un disparador temporal (tras varios segundos de navegación en
la misma página) y se emplean con frecuencia en el marketing para
la generación de leads, como conseguir el correo electrónico del
internauta a cambio de un producto gratuito. Es un tipo de
comunicación muy intrusiva, al contrario que los siguientes elementos
flotantes.

3. BARRA PROMOCIONAL: es una barra promocional que se ubica en la

parte superior de la web (encima del header) o en la parte inferior
(debajo del footer) y muestra información promocional de la página
web.
En marketing se utiliza para promocionar cupones de descuento, por
ejemplo.

4. BARRA DE NOTIFICACIÓN: al contrario que la barra promocional, la

barra de notificación aporta información relacionada con la acción o
el evento que tiene lugar en el contenido de una web. Se usa, por
ejemplo, para informar del éxito o de un error en el proceso de
compra en línea.
 PRINCIPIOS BÁSICOS DE DISEÑO WEB

Más allá de lo estético y los gustos personales

de cada inter- nauta, el diseño de una página
web también se rige por unos principios
generales que mejoran tanto el diseño como la
funcionalidad de la web. He aquí algunos de los
principios básicos que deberías tener en cuenta
a la hora de diseñar una página web: a la hora
de mostrar el texto en pantalla, se recomienda
tener en cuenta algunos ajustes como básicos, como su legibilidad y
comprensión; mantener un contraste entre el texto y el fondo, cuidar el tamaño
de la letra y evitar el uso excesivo de letras mayúsculas. Las jerarquías son
importantes, tanto para el lector como para el SEO. En una pantalla es
necesario, además, resaltar elementos empleando negritas, cursiva, etc. En
cuanto a tipografía, se debe evitar el uso de múltiples fuentes tipo gráficas y, si
se emplean varias, las más llamativas (o fuentes de exhibición) deben usarse
en el cuerpo del texto. En los párrafos es necesario cuidar dos aspectos:

 INTERLETRAJE: es el ajuste del espacio entre los caracteres a la hora

de escribir. Un mayor interletrado reduce la legibilidad, pero un
interletrado inexistente produce sensación de angustia al lector.

 LONGITUD DE LAS LÍNEAS CORTAS: deberían ser de un mínimo de

seis palabras por línea y un promedio de
alrededor de 30-40 caracteres (incluyendo
espacios). Sobre todo, se deben evitar líneas
viudas (la última línea del párrafo cuando
aparece tras un salto de columna o página) o
huérfanas (la primera línea de un párrafo
 cuando aparece al final de una columna o página, descolgada del
resto de su párrafo).

BIBLIOGRAFIA:

http://elibro.net/es/ereader/uleam/106387?fs_q=paginas__web&prev=fs

https://www.behance.net/gallery/2499423/QUE-ES-DISENO-VISUAL

https://blog.hubspot.es/marketing/los-3-principios-basicos-del-diseno-web

https://www.pentaweb.es/partes-de-una-pagina-web/
 PREGUNTAS

1. ¿QUE ES DISEÑO VISUAL?

a) Es una disciplina profesional que estudia los sistemas de información,
con el objeto de convertir los datos en formas visuales.
b) Comportamiento que establece el profesional que maneja los sistemas
de información
c) Es la presentación o la cara del marketing.

2. ¿CUALES SON LAS PARTES DE UNA PÁGINA WEB?

a) Encabezado
b) Menú de navegación
c) Contenido principal
d) Barra lateral
e) Pie de pagina
f) Todas las anteriores

3. ¿QUE SE ENTIENDE POR MENÚ DE NAVEGACIÓN Y MENÚ DE

CORTESÍA?
a) La disposición que el diseño visual le ofrece a los usuarios
b) Es el conjunto de accesos directos a diferentes secciones de la web
c) Conjunto de accesos indirectos únicamente en secciones de la web

4. ¿DÓNDE SE COLOCA LA BARRA LATERAL?

a) A la derecha del contenido principal
b) A la izquierda del contenido principal
c) En la parte superior del contenido principal

5. ¿DÓNDE SE UBICA LA BARRA PROMOCIONAL?

a) Se ubica en la parte superior de la web
b) En la parte inferior de la web
c) Al costado de la web
6. ELIJA LA O LOS PRINCIPIOS BÁSICOS QUE DEBERÍAS TENER EN
CUENTA A LA HORA DE DISEÑAR UNA PÁGINA WEB:
a) Legibilidad y comprensión
b) Las jerarquías son importantes, tanto para el lector como para el SEO.
c) Ninguna de las anteriores

7. ¿QUÉ ASPECTOS SE DEBE DE CUIDARE EN LOS PARRAFOS DE

UN DISEÑO WEB?
a) Interlitriaje y longitud de las líneas cortas
b) Conocimiento y experiencia en marketing
c) Ninguna de las anteriores

8. SELECCIONE LA O LAS CORRECTAS ¿DE QUE TRATA UN MENÚ

AMIGABLE?
a) Las mejores formas de estructurar la página web
b) Poder acceder a toda página web
c) Diseñar una página web

9. ¿POR QUE ES IMPORTANTE LA JERARQUÍA?

a) Para poder destacar lo realmente relevante y dar un orden a nuestra
web
b) Para poder diferenciar las páginas web
c) Para acceder a las páginas web

10. ¿QUÉ FACTORES DEFINEN UN CORRECTO DISEÑO VISUAL DE

UNA PÁGINA WEB?
a) Apariencia y estética
b) Formas
c) Accesibilidad
d) Ninguna de las anteriores
DIAPOSITIVAS DE EXPOSICIÓN