Actividad de aprendizaje

GA3-220501101-AA1-EV01

Video: preproducción, producción, formatos.

Presentado por:
Luis Humberto Torres Segovia

Programa:
Tecnólogo en Desarrollo y Multimedia Web_2721222
Modalidad de formación virtual

A:
CARLOS AUGUSTO GALVIS MANJARRES
Instructor

En:
Proyecto 3

SERVICIO NACIONAL DE APRENDIZAJE – SENA

Centro de Comercio y Servicios Regional Atlántico

9 de septiembre del 2023
Popayán – Cauca
El video es una estrategia de aprendizaje que permite transferir un conocimiento a través de la inserción
de imágenes, textos o audios sobre una temática específica que se desee comunicar. Por tanto, en esta
evidencia elaborará un video con las etapas que se llevarán a cabo para definir los elementos gráficos y
la estructura narrativa que conformarán el contenido del proyecto multimedia, de acuerdo con el
modelo seleccionado en la fase de análisis. Se deberán elaborar los guiones y los textos que
determinarán el diseño del prototipo.
Para la realización de esta evidencia, se trabajará de forma colaborativa con el grupo de trabajo y para
ello deberán:
✔ Definir los elementos gráficos que conformarán la estructura visual del producto multimedia:
colores, tipografía, textos, tamaños, sonidos, imágenes, botones de interacción, entre otros que se
requieran.
✔ Escribir los guiones de los contenidos que harán parte del producto multimedia.
✔ Utilizar la herramienta de PowerPoint para realizar una presentación donde se incorpore:
o Portada de presentación del proyecto multimedia con los integrantes del equipo de diseñadores.
o Tabla de contenido.
GFPI-F-135 V01
o Definición del proyecto multimedia que se va a diseñar donde se describa el alcance, el objeto y el
público objetivo al cual va dirigido.
o Elementos de la interfaz de usuario con una descripción de los formatos que se van a utilizar y la
función que realizaran dentro del producto multimedia.
o Describir el proceso de diseño con las herramientas tecnológicas que se utilizarán para la elaboración
del wireframe y el mockup.
o Conclusiones de la planificación de los elementos gráficos.
 DESARROLLO

LINK VIDEO https://youtu.be/L4Ot7tkqO0c

Publico o buyer objetivo: Hoy en día se habla mucho de la buyer persona y de su importancia para
toda estrategia de marketing digital. Sin embargo, mucho antes de eso, los esfuerzos de las campañas
de marketing siempre fueron dirigidos para un público específico, conocido como el público objetivo,
para el desarrollo de este proyecto identifica al público objetivo como a todas las empresas industriales
hospitalarias y bodegas de todo el país, de las principales ciudades de Colombia
El alcance: se entiende el número total de usuarios que han visto un contenido, anuncio o la cantidad
de veces que los usuarios ven un enlace para dirigirlos a tu página web.
El objeto: informar, vender productos o servicios

Elementos de la interfaz de usuario con una descripción de los formatos que se van a utilizar y la
función que realizaran dentro del producto multimedia.

Definición:

1. Color: Es el principal elemento del diseño. Determina el impacto y personalidad de cada diseño.
El círculo cromático es la principal herramienta que representa a los colores de manera
ordenada. La primera clasificación a tener en cuenta es la diferencia entre los colores cálidos
(rojos, amarillos y anaranjados) y fríos (verdes, azules y violetas).
2. Formas: Si bien cada forma es única, todas se basan en una comprensión compartida de nuestra
cultura y lo que nos es familiar para expresar ideas, dirigir nuestros pensamientos o sugerir un
estado de ánimo. Entonces, ¿cuál es la forma (o formas) correctas para usar en su próximo
folleto, presentación o infografía?
La siguiente lista de formas, junto con sus atributos, te ayudarán a guiar su decisión.
Cuadrados y rectángulos: indican familiaridad, comodidad, seguridad y una sensación de paz.
Triángulos: se utilizan para indicar aventura, intensidad o llegar a alguna parte.
Círculos, óvalos y elipses: su redondez implica suavidad, flexibilidad, movimiento y fluidez.
Pentágonos, hexágonos y octágonos: se asocian principalmente con el orden, la organización y
la profesionalidad.
 Formas abstractas: úsalas con moderación en tus infografías u otros diseños para enfatizar una
sola idea o concepto.
3. Líneas: Uno de los elementos básicos en el diseño gráfico es la línea. La línea se usa para
agregar estilo, mejorar la comprensión, crear formas y dividir el espacio al ser un borde
alrededor de otros elementos de diseño o un divisor entre ellos.
Cuando se usan solas, pueden ser reglas, reglas negativas o guías para ayudar a separar,
organizar o enfatizar el contenido. Las líneas también se pueden usar solas o en combinación
con otros elementos de diseño gráfico para establecer estados de ánimo, crear texturas, definir
formas y crear patrones.
Hay alrededor de siete tipos de líneas: líneas horizontales, líneas verticales, líneas diagonales,
líneas curvas o de forma libre, líneas patrón, líneas no sólidas y líneas sólidas.
4. Escala: En arte y diseño, el principio de escala se refiere al tamaño relativo de un objeto en
comparación con otro, generalmente el tamaño de la obra de arte con respecto al cuerpo del
espectador. La escala también puede referirse a las relaciones de tamaño de diferentes imágenes
dentro de una obra de arte singular.
5. Simetría: La simetría en el diseño tiene lugar cuando se utilizan figuras o formas simétricas para
crear una imagen. Por ejemplo, en una simetría reflexiva, hay dos lados idénticos al diseño con
un punto central de eje. En otras palabras, si corta el diseño por la mitad, los lados izquierdo y
derecho se reflejarán entre sí.
6. Espacio: El espacio puede separar objetos o unirlos. El espacio estrecho entre los elementos
visuales transmite que tienen una fuerte relación, mientras que el espacio más amplio comunica
que están menos relacionados. Cuando rodeas un elemento visual con espacio, estás enfatizando
su importancia, pero el espacio también puede sugerir soledad y aislamiento.
7. Textura: La textura es la sensación de una superficie: peluda, lisa, áspera, suave, pegajosa o
brillante. La mayoría de los diseñadores gráficos deben transmitir textura visualmente mediante
el uso de ilusiones para sugerir cómo se sentiría su trabajo si los espectadores pudieran tocarlo.
Dominar la textura es una parte importante para hacer que los diseños se vean pulidos y
profesionales.
8. Tipografía: Cuando hablamos de Tipografía, nos referimos al arte y técnica de crear letras para
comunicar un mensaje. Dentro de esta rama del diseño encontramos el estudio de la fuente y
familia tipográfica.
Proyecto página WEB

Cuando una institución cuenta con una página web eleva su prestigio, a la vez que permite que los
clientes aumenten su nivel de confianza en el producto o servicio que ofrece. Un sitio web ayuda a
incrementar las ventas, la productividad y el valor en el mercado de cualquier PYME
La página web de la empresa debe ser el instrumento para dar visibilidad online a la marca e informar
correctamente sobre los productos/servicios que están a la oferta para los consumidores
Una página web es necesaria para cualquier negocio, sea cual sea su tamaño y actividad.
Normalmente las pequeñas empresas utilizan motivos iguales o parecidos para justificar que no tienen
página web. Algunos son temores reales, otros son frutos del desconocimiento. Entra y desenmascara a
los motivos que te impiden crear una web para tu negocio.
UNA PÁGINA WEB, ¿DE VERDAD SIRVE PARA ALGO?
¿Para qué me sirve a mí tener una web, si no tengo nada especial que contar?
En la web tu catálogo estará disponible 24×7. Internet está abierto 24 horas al día, 7 días a la semana.
Las consultas en Internet pueden hacerse en cualquier momento, por cualquier razón y desde cualquier
lugar. Y tu página web es la forma de atenderles siempre, sea en horario laborable o no.
Con una web facilitarás el contacto personal. Toda página web debe tener una sección bien visible
donde se vean todas las formas posibles de contactar con la empresa. E incluso el horario. Así
facilitarás que se pongan en contacto contigo para ampliar información.
La página web te da la oportunidad de presentar tu valor añadido a tus posibles clientes. Es el lugar
para explayarse y mostrar lo mejor de cada negocio. En cada consulta tus clientes buscan información
antes de decidir a quién van a llamar. Es el momento ideal para convencerles: están en actitud receptiva
y les interesa toda la información que les puedas dar.
La página web simplifica tu trabajo de venta. Un cliente que llega después de haber visto tu página web
desea ampliar la información. Ha decidido que eres una de sus opciones; la primera fase de la labor
comercial ya está hecha.
¿Para qué necesito una web si ya me ocupo de dar publicidad a mi negocio en mi zona de influencia?
Eso es para los que quieren cubrir zonas geográficas muy amplias.
Porque tener página web no es la alternativa sino el complemento de cualquier acción de marketing
tradicional que realices.
Hoy en día todo se busca en Internet. Un catálogo en papel tiene una vida finita. Pero si alguien
encontró tu publicidad interesante, es probable que te busque en Internet. Si no te encuentra a ti pero sí
a otro negocio parecido, habrá sido una oportunidad perdida

Elementos para la creación de una página WEB

1. Encabezado
El encabezado (también conocido como reader por su nombre en inglés) es la parte superior de
una página web. Es una de las áreas más importantes, pues es lo primero que un usuario ve al
visitar tu sitio. Por ello los elementos que lo componen deben pensarse bien.
En primer lugar, el encabezado de una página web debe brindar a simple vista la forma de
navegar y un resumen muy rápido de quién es tu marca y su identidad. No olvides incluir los
siguientes elementos:
Logotipo de tu marca
2. CTA, que puede variar en intención, por ejemplo:
Para conocer más sobre un producto
Para ir a la versión de prueba de un producto
Para dirigir al carrito de compras
Menú (con sus respectivas categorías)
Enlaces a redes sociales
Algunas herramientas en línea te pueden ayudar a definir una identidad gráfica para tu
marca, así como a crear un logotipo para tu sitio web. No olvides la importancia que tiene crear
una imagen empresarial fácil de recordar.
Considera que estos elementos deben distribuirse eficazmente. Determina cuáles brindarían una
mejor presentación, con el propósito de que los visitantes cumplan los objetivos que
esperas. Recuerda que tu sitio web tiene una intención y tú debes ayudar a los usuarios a
comprenderla.

3. Menú de navegación
El menú de navegación es uno de los elementos esenciales en una página web, ya que su
intención es que cualquier visitante pueda explorarla completamente. Cuanto más fácil y rápido
de leer sea el menú, mejor experiencia tendrá el usuario. Además, este detalle permite que los
motores de búsqueda lo comprendan rápidamente, lo cual mejora el SEO de tu sitio.
4. CTA
Las llamadas a la acción, conocidas como «CTA» por sus siglas en inglés, son un elemento que
no pueden faltar en tu página web. Son aquellos atajos con los que ayudas a tus visitantes a
realizar las acciones que deseas, por ejemplo: pedir informes, conocer más acerca de tu
producto, descargar una guía, entre otros.
5. Imagen destacada
La imagen destacada o hero section es la zona que está debajo del encabezado. Esto hace
que prácticamente estén conectados. Mientras que el encabezado te brinda una información de
contacto y navegación directa del sitio web, la imagen destacada complementa la vista con
elementos altamente atractivos.
6. Formulario
Estrategias como el inbound marketing nos han dejado en claro la importancia de contar con un
formulario en una página web. Este recurso es un elemento clave para obtener más datos de los
visitantes y comenzar una estrategia de conversión.
La ventaja de crear formularios online es que pueden ser tan extensos como tú lo desees, sobre
todo si tu sector o industria requiere datos específicos para realizar una cotización o dar más
información acerca de un servicio.
7. Video
Si bien un video no es un elemento obligatorio en una página web, sí se ha vuelto en una pieza
esencial para aumentar tu retención. Los usuarios gastan un 88 % más de tiempo en una web
que tiene contenido en video con respecto a una que no tiene.
8. Información de contacto
La información de contacto es un elemento que suele colocarse en la parte final, en el pie de
página. En esta sección se incluyen datos que proporcionan más información al visitante acerca
de tu negocio, por ejemplo: dirección, número de contacto, redes sociales o incluso un mapa con
la ubicación exacta.
Pie de página
El pie de página es el elemento final de una página web (y es ahí donde suele aparecer la
información de contacto). En este espacio pueden concentrarse diferentes datos útiles, como los
enlaces
Formatos universales
1. JPEG
En uso por más de 25 años, JPEG es un estándar que ha sobrevivido a lo largo del tiempo. Es
muy bueno para comprimir los tonos continuos en las imágenes, como con las fotografías, que
poseen muchos colores. En todo caso, JPEG no es el formato ideal para comprimir imágenes
con bordes crispados o alto contraste, al mismo tiempo que con las texturas engañosas, y dará
lugar a anillos alrededor de los bordes afilados o que los detalles finos salgan borrosos.
2. GIF
En los tempranos días de la web, si una imagen no era un JPEG, era un GIF. El GIF es útil para
comprimir imágenes que tienen mucha data repetitiva. Como resultado, las imágenes que solo
tienen un par de colores, en amplios sectores, con transiciones bruscas entre ellos se pueden
almacenar de manera eficiente y sin pérdidas con el formato GIF. Además, es compatible con
transparencia y animación.
Como tiene un límite de 256 colores, el GIF no debe ser usado para comprimir imágenes que
tengan apenas un número moderado de colores. Convertir una imagen con más de 256 colores
en un GIF resulta en pérdidas posteriores, lo que no se verá bien. Así, mientras el GIF fue
inicialmente utilizado para una variedad de imágenes, en la actualidad se debe considerar sólo si
es necesario emplear animaciones.
3. PNG
Las celdas de PNG con el mismo orden de imágenes que GIF, pero ofrece algunos beneficios
adicionales. Por ejemplo, no tiene un límite de 256 colores y el formato soporta una
comprensión gráfica mayor. También funciona con la transparencia “alpha channel” que
permite a los píxeles ser parcialmente transparentes, y no simplemente totalmente transparentes
o extremadamente opacos.
La próxima generación de formato para imágenes
4. WebP
WebP es un hijo del formato de video WebM de Google. Lleva una simple y predictiva
estrategia usada por el formato PNG al siguiente nivel. Utiliza hasta dieciséis estrategias
predictivas diferentes para cada bloque de imagen (de tamaño variable), y también puede
producir pérdidas o bien comprimir la diferencia residual entre los valores predichos y los
reales.
Interfaz WEB

la interfaz web es el conjunto gráfico que permite la presentación y la navegación del sitio
Para poder diseñar interfaces de usuario, no hace falta de mucho, cualquier persona con acceso a un
ordenador con conexión a Internet puede intentar hacerlo, se toman unos cuantos cursos online y en un
par de meses podemos creernos listos y preparados para empezar a diseñar.
Pero el punto clave está en saber hacerlo correctamente, ya que si bien muchos se aventuran a realizar
esta clase de proyectos, son pocos los que respetan los principios básicos que esto demanda.

1. Interfaces claras y precisas

Al diseñar elementos de manera clara creamos confianza en el usuario, pero si en vez de eso le
entregas una página desordenada y además con una interfaz poco familiar, el usuario puede
tener problemas para usar tu página web.
2. Da el control a los usuarios
Las personas se sienten mucho más seguras cuando tienen el control de una situación, si el
entorno de tu sitio no es seguro para el usuario, este optará por abandonar el lugar.
3. Define bien tus acciones primarias y secundarias
Debemos definir bien cuáles son las acciones principales que el usuario debe llevar a cabo en
nuestro sitio, para que después, en base a eso, enfoquemos el diseño de la interfaz. Para lograr
un proceso exitoso, debemos evitar que este tipo de acciones se vean interrumpidas por
distracciones.
4. Da importancia a la consistencia
Siguiendo con la base de los principios anteriores, debemos establecer que el diseño de
elementos debe realizarse de manera consistente, tratando siempre de utilizar diseños genéricos
y a partir de ahí ir especificando lo necesario para cada parte
5. Utiliza la jerarquía visual
Cuando un usuario ve las mismas cosas, en el mismo orden y sin ninguna referencia, su interés
se irá rápidamente. Para evitar esto debemos crear una visualización clara de los elementos que
componen nuestra interfaz, estableciendo niveles de importancia que nos ayuden a determinar
los estilos a aplicar.
6. Organiza tus elementos de manera adecuada
Para poder llevar nuestra interfaz a la organización, debemos aprender a agrupar elementos,
relacionarlos, para que de esa manera podamos identificar la orientación y colocación adecuada.
De esta manera, el usuario no tendrá que ponerse a averiguar cuál es la relación que existe entre
un elemento y otro, porque la misma interfaz le estará proporcionando esa información.
BIBLIOGRAFÍA

https://piktochart.com/es/blog/que-es-el-diseno-grafico/

https://desarrolloweb.com/articulos/2063.php

https://blog.hubspot.es/marketing/elementos-diseno-
grafico#:~:text=Los%20elementos%20gr%C3%A1ficos%20son%20los,de%20utilizarlos%20en%20sus%20creacio
nes.

https://bcomedigital.com/marketing-online/razones-pagina-web/

https://impulsapopular.com/marketing/la-importancia-de-contar-con-una-pagina-web-de-tu-
empresa/#:~:text=Cuando%20una%20instituci%C3%B3n%20cuenta%20con,el%20mercado%20de%20cualquier
%20PYME.

https://blog.hubspot.es/website/elementos-web

https://www.staffcreativa.pe/blog/formatos-pasado-futuro-pagina-web/
 CONCLUSIÓN

En conclusión, los wireframe y mockup son un papel importante para cualquier proyecto que
realicemos ya que nos ayuda con la estructura, distribución, definición de colores, tipografía, etc.
Además, Los mockups funcionan como prototipos que ayudan a comunicar visualmente las ideas de
diseño y funcionalidades del producto a tu equipo de trabajo y clientes. Determinan la rentabilidad de
una plataforma o una aplicación, ya que mediante pruebas puedes mejorar la calidad, ajustar costos y
alcanzar la usabilidad deseada.