AP3-AA6-EV2

Elaboración del guion técnico multimedia y wireframes del proyecto

Christian Camilo Rivera Márquez y Oscar Andrés Ortega Taba

Servicio Nacional de Aprendizaje (SENA)

CENIGRAF – 2104885

2021

Notas del Autor

Christian Camilo Rivera Márquez, Oscar Andrés Ortega Taba; Producción de Multimedia, SENA

Este proyecto ha sido financiado con recursos propios

La correspondencia relacionada con este trabajo debe ser dirigida a los instructores del programa

de producción de multimedia

Servicio Nacional de Aprendizaje (SENA)

ldcollazos37@misena.edu.co

ttsalazar@misena.edu.co

acortest2009@misena.edu.co

pág. 1
 AP3-AA6-EV2

Contenido
..................................................................................................................... 3

.................................................................................................. 4

METALNET CM ............................................................................................................. 4

Descripción ............................................................................................................... 4

Target y Público objetivo.......................................................................................... 4

Idioma ...................................................................................................................... 4

Objetivos .................................................................................................................. 4

Programas que se utilizan ........................................................................................ 5

Metáfora visual ........................................................................................................ 5

................................................................................................................... 6

WEBSITE WIREFRAME 1 – INICIO - ......................................................................... 6

WEBSITE WIREFRAME 2 – PRODUCTOS Y SERVICIOS - ........................................ 6

WEBSITE WIREFRAME 3 – COTIZADOR - ................................................................ 6

WEBSITE WIREFRAME 4 – NOSOTROS - ................................................................. 6

WEBSITE WIREFRAME 5 – CONTACTO - ................................................................. 6

........................................................................................................................ 6

....................................................................................................................... 6

pág. 2
 AP3-AA6-EV2

La Empresa Metalmecánica y Montaje CM no está logrando ser autosuficiente

económicamente hablando, debido a su bajo movimiento de inventario; se detecta que la razón
es su incorrecto manejo de la publicidad; para optimizar esto Diseweb propone estrategias
novedosas, innovadoras que se desarrollan de manera creativa, para hacer realidad los objetivos
de la empresa cliente Metalmecánica y Montaje CM; desarrollando productos y servicios
multimedia acordes a las peticiones de la empresa cliente con el propósito de provocar un
impacto en el público que lo percibe, dedicados al mundo de la tecnología, especialistas en el
desarrollo y creación de contenidos como páginas web, video, fotografía, Marketing o asesoría
y consultoría.

Diseweb brinda a Metalmecánica y Montaje CM una descripción exacta por pantallazos

o páginas de su sitio web, donde se apreciará a detalle que va encontrar el usuario (público
objetivo) en cada página del sitio multimedia como, por ejemplo: Títulos, Fondos, Botones,
Sonidos, Gráficos, Textos (párrafos o frases cortas) y Acciones. Además, esto estará integrado a
diferentes esquemas de wireframes para visualizar su estructura y puntualizar sus operaciones
en la aplicación multimedia denominada sitio web.

Todo lo anterior puede generar más clientes, más

credibilidad ante ellos y un mejor canal de comunicación,
además oportunidades de empleo a otras personas que
puedan vincularse a la compañía y con esos ingresos obtener
un flujo de caja constante para poder mejorar el retraso en el
cumplimiento del inventario y de esta manera mejorar su
debilidad actual.

pág. 3
 AP3-AA6-EV2

METALNET CM

Descripción Proyecto multimedia interactivo con contenido y actividades alojados en un

portal web dinámico y corporativo que destacara la experiencia de la empresa sobre
la industria de la metalistería para el hogar.

El programa está estructurado para llevarse a cabo en el Departamento del

Valle del Cauca más específicamente en la zona Norte de la ciudad de Cali, en el barrio
San Luis 2 donde se encuentran clientes potenciales con un rango de edad entre 30 y
Target y
35 años, con niveles de estudios técnicos profesionales, y que su gran mayoría cuentan
Público objetivo con un empleo estable que les permite pertenecer a un nivel socioeconómico medio-
alto, entre lo que se destaca el género masculino, quienes optan por adquirir los
productos, bienes y servicios ofrecidos por la empresa a través de los medios digitales
por sus facilidades de pago, eficiencia, celeridad y calidad en la prestación de servicio
de esta manera satisfaciendo sus necesidades.

Idioma
Español, Latinoamérica.

Conseguir a corto plazo un posicionamiento online como empresa

especializada en la creación de artículos de metalistería para el hogar.

Generar tráfico en la red a través de las diferentes visualizaciones online de

la marca de metalistería de la compañía.
Objetivos
Ofrecer comercialmente los servicios y productos de metalistería para el
hogar a través del portal web y redes sociales.

Obtener la fidelización de los clientes nuevos y conservar a los antiguos

implementando las diferentes herramientas y plataformas del ciberespacio de la
empresa.

pág. 4
 AP3-AA6-EV2

Interfaz:

 WordPress; Interfaz de inicio. Página estática.

 Divi; Constructor de páginas.
Programas Software de apoyo:

que se utilizan  Suite adobe

 Photoshop
 Illustrator
 Gimp
 Canvas
 Format factory
 adobe XD

El Look and Feel planteado para este proyecto tiene las siguientes
características:

 Tipografía: Para títulos principales y subtítulos Segoe-UI, se aplicará un tamaño a

partir de 40px en adelante, para párrafos se usará la fuente Roboto con un
tamaño máximo de 17px en tamaño, en ambos casos se usará negrilla donde sea
requerido.
 Colores: El color primario para este portal será el rojo, seguido de blanco y negro:
Rojo: #ee0000
Metáfora
Blanco: #ffffff
visual

Negro: #0e0e0e

 Textura: Limpia y de gran credibilidad ante el usuario.

 Iluminación: Blanca
Se usará la tendencia web más acorde y moderna a la fecha de construcción
del sitio, con tecnología adaptable a móviles y tabletas

Se tomó como inspiración el constructor Divi de la compañía Elegant Themes

por sus diferentes diseños, por ser el más usado en la creación de sitios web
modernos, atractivos y fácil uso.

pág. 5
 AP3-AA6-EV2

WEBSITE WIREFRAME 1 – INICIO -

Página principal donde observamos diferentes módulos interactivos que llevaran

Descripción
a navegar por el portal web.
Elementos de la
Contenido en texto e informativo que da valor al usuario.
página: T- Textos
T-Int – Textos
Texto informativo que crea hipervínculo a otra parte del sitio web.
Interactivos
I - Imágenes Imágenes de alto impacto que captura la atención del usuario.
i-Int - Combinación simple y elegante de texto e imagen con una pequeña porción de
Interactividad información y que puede contener un link.
Icon - Iconos Pequeña imagen asociada al texto en mención.
Menu tipo hamburguesa con contenido organizado que direcciona a las
M- Menú
diferentes páginas del sitio
Cuenta con un diseño moderno llamativo y flexible que le permite al visitante
Desarrollo del encontrar todo lo que busca, además la combinación de los colores corporativos
diseño y la calidad de imágenes se mezclan para que el usuario permanezca más
conectado al portal. Y se ajusta muy bien en dispositivos móviles.
Tipografía Segoe-UI, Roboto.
Gama cromática Rojo: #ee0000 - Blanco: #ffffff - Negro: #0e0e0e

pág. 6
 AP3-AA6-EV2

WEBSITE WIREFRAME 2 – PRODUCTOS Y SERVICIOS -

Descripción Pagina dinámica donde se presenta de forma interactiva los productos y servicios.
Elementos de la Textos de gran impacto para capturar la atención del usuario y textos descriptivos
página: T- Textos de los productos y servicios a ofrecer de manera ágil.
T-Int – Textos Estos textos interactivos llevaran al usuario a módulos o páginas de su interés de
Interactivos forma multimedia.
Imágenes potentes de ayuda para guía al usuario en la elección del servicio o
I - Imágenes
producto.
Video corporativo con voz en off y fondo musical alegre, y su contenido con
V-Int Video
información relevante.
i-Int -
Imágenes interactivas con efectos para tener más atención del usuario.
Interactividad
Icon - Iconos Pequeña imagen asociada al texto en mención.
Menu tipo hamburguesa con contenido organizado que direcciona a las diferentes
M- Menú
páginas del sitio.
Este desarrollo sigue contando con un diseño moderno llamativo y flexible que le
Desarrollo del permite al visitante encontrar todo lo que busca, esta pagina se caracteriza por
diseño tener mas imágenes y mas textos planos como interactivos que llevaran al usuario
a vivir una experiencia por los diferentes productos y servicio.
Tipografía Segoe-UI, Roboto.
Gama cromática Rojo: #ee0000 - Blanco: #ffffff - Negro: #0e0e0e.

pág. 7
 AP3-AA6-EV2

WEBSITE WIREFRAME 3 – COTIZADOR -

Página dinámica donde se presenta de forma interactiva los productos y

Descripción servicios, en la cual el usuario puede tener más en detalle una aproximación del
precio y algunas características en los productos o servicios.
Elementos de la
Textos descriptivos dando introducción al módulo actual.
página: T- Textos
T-Int – Textos Texto con hipervínculos donde el usuario hace clic y es llevado a otro modulo o
Interactivos página.
Imágenes mas detalladas y con una excelente calidad de imagen de los
I - Imágenes
productos o servicios.
Imagen interactiva que permite llevar a usuario a otra sección o mostrar otra
i-Int - Interactividad
imagen del producto o servicio relacionado.
Icon - Iconos Pequeña imagen asociada al texto en mención.
Menu tipo hamburguesa con contenido organizado que direcciona a las
M- Menú
diferentes páginas del sitio.
Pagina diseñada con las características similares a otras páginas del portal,
Desarrollo del
pero llevando al usuario a otros apartados o módulos con información del
diseño
producto o servicio.
Tipografía Segoe-UI, Roboto.
Gama cromática Rojo: #ee0000 - Blanco: #ffffff - Negro: #0e0e0e

pág. 8
 AP3-AA6-EV2

WEBSITE WIREFRAME 4 – NOSOTROS -

Página dinámica donde se presenta de forma interactiva información de la

Descripción
empresa con algunas imágenes acorde a lo escrito.
Elementos de la
Textos informativos, relatando la misión y visón de la compañía.
página: T- Textos
T-Int – Textos
Texto informativo que crea hipervínculo a otra parte del sitio web.
Interactivos
I - Imágenes Imágenes de mucho valor alusivas al contenido del texto.
i-Int - Interactividad Carrusel de imágenes que pueden llevar a otros módulos o paginas del portal
Icon - Iconos Pequeña imagen asociada al texto en mención.
Menu tipo hamburguesa con contenido organizado que direcciona a las
M- Menú
diferentes páginas del sitio.
Página diseñada con las características similares a otras páginas del portal, en
Desarrollo del
la cual se detalla mas información de la compañía, creando así una confianza y
diseño
una marca personal entre los visitantes del portal.
Tipografía Segoe-UI, Roboto.
Gama cromática Rojo: #ee0000 - Blanco: #ffffff - Negro: #0e0e0e

pág. 9
 AP3-AA6-EV2

WEBSITE WIREFRAME 5 – CONTACTO -

Pagina donde los visitantes pueden diligenciar un formulario de contáctenos

Descripción
para obtener más información o una comunicación directa.
En estos módulos encontraremos algunas cajas de ingreso de texto como
Elementos de la
nombre, correo electrónico y una interactiva donde habrá una respuesta a
página: T- Textos
escoger, junto a la caja de mensaje.
T-Int – Textos
Texto informativo que crea hipervínculo a otra parte del sitio web.
Interactivos
I - Imágenes Carrusel de imágenes
i-Int - Interactividad Mapa de ubicación.
Icon - Iconos Pequeña imagen asociada al texto en mención.
Menu tipo hamburguesa con contenido organizado que direcciona a las
M- Menú
diferentes páginas del sitio.
Página diseñada con las características similares a otras páginas del portal
Desarrollo del
esta incluye un formulario de contáctennos con cajas de texto para el envió de
diseño
información.
Tipografía Segoe-UI, Roboto.
Gama cromática Rojo: #ee0000 - Blanco: #ffffff - Negro: #0e0e0e

pág.
10
 AP3-AA6-EV2

Se espera que la Empresa

Metalmecánica y Montaje CM logre ser
autosuficiente en los diferentes aspectos
mencionados en la trayectoria de este
trabajo; esto con el apoyo de la estructura o
esquemas aquí presentados para el web sitio,
han sido pensados y diseñados con el objetivo de provocar un
impacto positivo en el público, donde la interactividad juega un
papel de mucha ayuda para aumentar la clientela o público objetivo
interno y externo, además de mejorar el flujo de caja con la sencilla
accesibilidad a los productos y servicios.

pág.
11
 AP3-AA6-EV2

Aceros Mapa. (2020, 5 octubre). Inicio. https://acerosmapa.com.co/

Aceroscol. (s. f.). Productos archivos. Aceroscol - Aceros en Cali. Recuperado 9 de abril
de 2021, de https://www.aceroscol.com/productos/

Coldeaceros. (s. f.). Productos – coldeaceros S.A. Recuperado 9 de abril de 2021, de

https://coldeaceros.com/productos/

SENA. (2021, abril). GUIÓN TÉCNICO DEL PROYECTO MULTIMEDIA (N.o 1). SERVICIO
NACIONAL DE APRENDIZAJE.

pág.
12