Carrera Profesional de

Diseño Gráfico

Proyecto de:

DISEÑO DE UNA PÁGINA WEB COMO PUBLICIDAD PARA LA ACADEMIA MATEMÁTICA

“ALGORITMO”

Presentado por:

Sugasti Moreno Claudia Fiorella

Sugasti Moreno Sally Graciela

Para Optar el Título Profesional Técnico de:

Diseño Gráfico

Huancayo – Perú

2018
 ii

Asesoría
Luis Miguel Pineda Coronel
 iii

Dedicatoria

A Dios, por haber puesto en nuestro

camino, a todas las personas, que sin dudarlo nos
apoyaron a consolidar este logro tan importante. A
nuestros padres quienes nos brindan su bendición
para seguir adelante. A nuestra familia que de una
u otra manera nos ayudan en la culminación de
nuestra etapa estudiantil.
 iv

Índice

Asesoría ................................................................................................................ ii

Dedicatoria ........................................................................................................... iii

Índice ................................................................................................................... iv

Introducción ......................................................................................................... vi

CAPÍTULO I ........................................................................................................ 1

MARCO METODOLÓGICO .............................................................................. 1

1.1. El problema del proyecto de investigación ............................................ 1

1.1.1. El problema .................................................................................. 2

1.1.2. Hipótesis de investigación ............................................................ 2

1.1.3. Los objetivos ................................................................................ 3

1.1.4. Sistema de variables ..................................................................... 3

1.1.5. La justificación ............................................................................. 4

1.2. Metodología para realizar el proyecto o investigación ........................... 5

1.2.1 Método ........................................................................................... 5

1.2.2. Técnicas ........................................................................................ 6

1.2.3. Instrumentos ................................................................................. 6

CAPÍTULO II ....................................................................................................... 7

MARCO TEÓRICO ............................................................................................. 7

2.1. Antecedentes del proyecto ...................................................................... 7

 v

2.2. Bases teóricas científicas ...................................................................... 10

2.2.1. Teoría del diseño gráfico según Bustos (2012) .......................... 10

2.2.2 Bases y fundamentos .................................................................. 11

2.2.3 Cómo hacer un buen diseño........................................................ 12

2.2.4 Teoría del diseño Web ................................................................ 17

CAPÍTULO III.................................................................................................... 26

DESARROLLO DEL PROYECTO ................................................................... 26

3.1 Prototipado ................................................................................................ 26

3.1.1 Boceteado .................................................................................... 26

3.1.2 Wireframe .................................................................................... 30

3.2 Diseño gráfico y web ................................................................................ 30

3.2.1 Diseño de Photoshop y logotipo .................................................. 30

3.2.2 Rec|ursos Web ............................................................................. 34

Conclusiones ....................................................................................................... 61

Recomendaciones ............................................................................................... 62

Referencias Bibliográficas .................................................................................. 63

 vi

Introducción

El problema de la Academia Matemática “Algoritmo” es que el área publicitaria se

encuentra mal estructurada y no cuenta con un diseño de sitio web que permita responder a las
necesidades informativas del público. Actualmente, las empresas requieren mostrar sus
servicios en medios virtuales de tal manera que se tenga un mayor alcance y que la empresa
se posicione apropiadamente.
La presencia en línea es vital para una pequeña empresa pues es un campo muy
competitivo, donde las empresas que ya cuentan con un sitio web están abarcando mercados
potenciales. Seguramente hay muchas empresas que ya tienen en mente hacer su página pero
la mayoría no sabe cómo puede iniciar el proceso sin tener que gastar en exceso según
(Inteligencia en Tecnología y Servicios, 2017).
La importancia de disponer de una localización óptima para nuestra tienda física.
La localización es clave para que la vean los clientes, se paseen y decidan entrar a
comprar. En Internet dispondremos de una localización que nos permitirá llegar a nivel
mundial y mientras a más gente lleguemos, más posibilidades tendremos de ventas.
Mediante una buena web, podremos llegar a tener un número de clientes fijos mucho
mayor. (Reportes Mic, 2017).
Para el desarrollo de este estudio se han propuesto 3 capítulos: Capítulo I contiene
el problema, hipótesis y objetivos del estudio., el capítulo II contiene el marco teórico,
antecedentes, teorías y definición de términos, el capítulo III contiene la descripción
operativa del proyecto y los resultados obtenidos.
Finalmente se presentan las conclusiones, recomendaciones y referencias respecto al
trabajo desarrollado.
Las Autoras
 1

CAPÍTULO I
MARCO METODOLÓGICO
1. El problema del proyecto de investigación

La Academia Matemática “Algoritmo” se dedica a preparación en las áreas

Matemática y Comunicación para los estudiantes del nivel primario, secundario, y
preuniversitario. Especialmente, la academia, pone énfasis en la preparación para los
Colegios de Alto Rendimiento (COAR) y estudiantes que desean acceder a BECA
18.
Actualmente sus servicios se enfocan en la demanda de los sectores de la
población en pobreza y extrema pobreza y su objetivo es incrementar el nivel
académico de los niños y jóvenes estudiantes de la ciudad de Huancayo, brindando
un servicio con altos estándares académicos y promoviendo la práctica de valores de
forma permanente. No obstante, la Academia Matemática “Algoritmo” brinda sus
servicios de forma estacional, atendiendo solo durante los meses vacacionales (enero
y febrero) y casualmente algunos meses del año de acuerdo a la demanda.
La publicidad que generalmente realiza la Academia Matemática
“Algoritmo” es la de repartir volantes o mosquitos a la población en las calles días
antes de iniciar sus servicios educativos. Puesto que la frecuencia del servicio es
estacional, resulta importante que la demanda conozca las características del mismo,
toda vez que se puede preparar y anticipar para cuando llegue el tiempo.
 2

Ahora que la era digital inunda los hogares y que el internet tiene mayor
presencia en el estudio, es importante que la Academia Matemática “Algoritmo”
cuente con una página web donde pueda presentar sus servicios, así como
promocionarlos para la población demandante de Huancayo. Incluso es posible que
en el futuro se puedan ofrecer clases virtuales, por tanto sería de vital utilidad el uso
de la página web. Para que la página web tenga un impacto requiere de un contenido
apropiado, armónico y llamativo, para ello es importante editar imágenes y videos
que sean atractivos para el público demandante.
En vista que la Academia Matemática “Algoritmo” no posee una página web,
este proyecto plantea una propuesta de diseño web para que la academia puede
promocionar y presentar sus servicios.

1. El problema
General:
¿De qué manera se aplica el diseño gráfico en una propuesta de página
web publicitaria para la Academia Matemática “Algoritmo” en la ciudad de
Huancayo 2017?
Específicos:
1. ¿Cuáles son los medios audiovisuales de la propuesta de página web
publicitaria para la Academia Matemática “Algoritmo” en la ciudad de
Huancayo 2017?
2. ¿Cuáles son los medios gráficos comunicacionales de la imagen para la
propuesta de página web publicitaria para la Academia Matemática
“Algoritmo” en la ciudad de Huancayo 2017?
3. ¿Cómo se debe estructurar la propuesta de página web publicitaria para la
Academia Matemática “Algoritmo” en la ciudad de Huancayo 2017?

1. Hipótesis de investigación
General:
Los elementos del diseño gráfico que se aplican en una página web
publicitaria son: los medios audiovisuales, medios gráficos
comunicacionales, y la maqueta. Estos elementos serán utilizados en la
propuesta de una página web publicitaria para la Academia Matemática
“Algoritmo” en la ciudad de Huancayo, 2017.
 3

Específicos:
4. Los medios audiovisuales que se emplean en una propuesta de página web
publicitaria para la Academia Matemática “Algoritmo” en la ciudad de
Huancayo, 2017 son los videos.
5. Los medios gráficos comunicacionales de la imagen que se emplean en
una propuesta de página web publicitaria para la Academia Matemática
“Algoritmo” en la ciudad de Huancayo, 2017 son: las fotos, imágenes y
el logotipo.
6. La estructura de la propuesta de página web publicitaria para la Academia
Matemática “Algoritmo” en la ciudad de Huancayo, 2017 está establecida
mediante una maqueta.

1. Los objetivos
General
Aplicar el diseño gráfico en una propuesta de página web
publicitaria para la Academia Matemática “Algoritmo” en la ciudad de
Huancayo, 2018.
Específicos
7. Emplear medios audiovisuales en la propuesta de página web publicitaria
para la Academia Matemática “Algoritmo” en la ciudad de Huancayo,
2018.
8. Editar medios gráficos comunicacionales de la imagen para la propuesta
de página web publicitaria para la Academia Matemática “Algoritmo” en
la ciudad de Huancayo, 2018.
9. Elaborar una maqueta de la propuesta de página web publicitaria para la
Academia Matemática “Algoritmo” en la ciudad de Huancayo, 2018.

1. Sistema de variables
Las variables que se han identificado en el proyecto son:
10. Diseño gráfico
11. Página web publicitaria
 4

Tabla 1.- Sistema de Variables

Variable Definición operacional Dimensiones Indicadores

o sub
variables
Diseño gráfico “Es una disciplina o profesión Medios Videos
cuya finalidad es satisfacer audiovisuales
necesidades de Comunicación Medios Fotos
visual.” (Ramírez, 2017, pág. 1) gráficos Imágenes
Logotipo
Página web “Es un documento electrónico Programación Lenguaje de
publicitaria que forma parte de la WWW web programación:
(World Wide Web) HTML
generalmente construido en el XHTML
lenguaje HTML Maqueta Estructura de la
(Hyper Text Markup Language o página web
Lenguaje de Publicación Dominio
Marcado de Hipertexto) ó en Hosting
XHTML (eXtensible Hyper Text
Markup Language o Lenguaje de
Marcado de Hipertexto
Extensible). Este documento
puede contener enlaces
(característica
del hypertext) que nos direcciona
a otra página
Web cuando se efectúa el click
sobre él.” (Comunidad de
Madrid, 2017, pág. 1)

1. La justificación
El proyecto de diseñar una página web haciendo uso del diseño gráfico
para la Academia Matemática “Algoritmo” en la ciudad de Huancayo resulta
un gran aporte en la publicidad y marketing de la academia.
 5

Actualmente la Academia Matemática “Algoritmo” mantiene un

servicio estacional, es decir solo atiende durante los meses vacacionales
(enero y febrero) y esporádicamente algunos meses del año de acuerdo a la
demanda. Aunque su servicio no es continuo, es necesario que la publicidad
sea permanente para que la demanda se entere de los momentos en que inician
las sesiones, por tanto, una página web resulta ser de vital importancia.
Es por ello que el presente proyecto se justifica prácticamente debido a
que será de utilidad para promocionar los servicios de la Academia
Matemática “Algoritmo” en la ciudad de Huancayo y otros lugares de acuerdo
a su alcance. También tiene una justificación teórica debido a que se
emplearon aspectos técnicos de diseño gráfico y diseño web que fueron de
utilidad para la realización de la propuesta de la página web publicitaria. Por
otro lado, el proyecto cuenta con una justificación metodológica puesto que
se han empleado programas (Corel Draw y Dream Viewer) para el desarrollo
de los resultados del proyecto.
Adicionalmente, el proyecto se justifica por conveniencia, pues las
autoras tuvieron acceso a información de la Academia Matemática
“Algoritmo”. Esto facilitó el proceso de desarrollo del logotipo así como la
estructuración de los datos e información correspondiente. La información se
estructuró adecuadamente de tal manera que se pueda promocionar los
servicios de la academia y brindar alcances de la academia para la población
demandante de la ciudad de Huancayo. Asimismo, se consideró desarrollar
una página web, toda vez que los elementos audiovisuales requieren de
edición gráfica y auditiva, para lo cual las autoras se encuentran preparadas.
Respecto a la programación web, las autoras cuentan con conocimientos
generales que permitieron su desarrollo correspondiente.

2. Metodología para realizar el proyecto o investigación

1. Método
El método que se empleó para la realización del proyecto es el analítico-
sintético. Analítico porque se descompuso en sus partes la estructura de la
página web para diseñar adecuadamente, asimismo se procedió a verificar las
características de las imágenes, videos y logotipos de la Academia
Matemática “Algoritmo” para seleccionarlas apropiadamente. Sintético
 6

puesto que se agruparon los diversos elementos apropiadamente

seleccionados en el diseño final de la página web. De esta manera se logró
obtener la propuesta de página web publicitaria (Sánchez & Reyes, 1996).

2. Técnicas
La técnica empleada para el desarrollo del proyecto es la computacional
compuesta por dos partes:
1. Diseño gráfico. Mediante el cual se editaron las imágenes y los videos, definiendo
los colores, matices, brillo, contraste, saturación, transparencia entre otros.
Incluso se crearon imágenes comunicacionales como el logotipo.
2. Diseño web. Mediante el bosquejo (maqueta) se procedió a realizar la
programación y se logró obtener la página web.

1. Instrumentos
Los instrumentos que se emplearon fueron softwares de diseño gráfico
como: Corel Draw 2017, Adobe Photoshop CC, y Video Editor. Mientras que
el software para el diseño web es DreamViewer.
 7

CAPÍTULO II
MARCO TEÓRICO

1. Antecedentes del proyecto

Alvitrez, Quispe y Quilca (2017), realizaron el proyecto titulado, “Diseño de
un sitio web para difundir el turismo en la reserva paisajística Nor Yauyos Cochas –
2017”, con el objetivo de Determinar el medio y diseño para la difusión de
información de la Reserva Paisajística Nor Yauyos Cochas 2017. Dentro de la
metodología para realizar el proyecto, se tuvo el método sistemático, la técnica de
investigación la aplicada, y los instrumentos utilizados fueron la estadística
descriptiva; (Google analytics) que ayudó determinar, cuáles son las situaciones que
provocan. Así mismo medir la cantidad de personas que visitan la el sitio, visitas,
visitas exclusivas, promedio de tiempo en el sitio, porcentaje de revote etc. Además,
se buscó recolectar toda información necesaria mediante la entrevista que se tuvo con
el representante de SERNANP (Abdías Villoslada Taipe), llegando a la conclusión
de que la Reserva Paisajística Nor Yauyos Cochas necesita de un sitio web propio y
exclusivo para difundir la gran variedad de riqueza paisajística que Nor Yauyos
Cochas ofrece; se logró determinar el medio y diseño para la difusión de información
de la Reserva Paisajística Nor Yauyos Cochas 2017; Se logró diseñar un sitio web
armónico para difundir el turismo de la reserva paisajística Nor Yauyos cochas 2017;
 8

se logró proponer un sitio web amigable y de fácil navegación para difundir el

turismo de la Reserva Paisajística Nor Yauyos Cochas – 2017; se logró la disposición
de espacios estratégicos distribuidos en el sitio web para difundir el turismo de la
Reserva Paisajística Nor Yauyos Cochas - 2017.
Villota (2016), en su investigación titulada, “Implementación de un sistema
gráfico de identidad visual para informar servicios del “Restaurant Café Concert La
Sentencia” dentro del Distrito Metropolitano de Quito, tuvo como objetivo diseñar la
identidad corporativa para informar los servicios del “Restaurant Café Concert La
Sentencia” dentro del DMQ; la metodología utilizada fue la visión sistémica de Bruce
Archer. finalmente según el objetivo se diseñó la identidad corporativa del Restaurant
Café Concert “La Sentencia” debido a que, la empresa no contaba con una identidad
específica y por ello, no se podían informar los servicios que oferta la empresa de
una manera adecuada; para ello se investigó en primera instancia la realidad de la
empresa, su contexto y su público objetivo, con estos datos primordiales se pudo
plantear el proyecto en función al comitente, el usuario y los colaboradores, mediante
la formulación del concepto de diseño; este concepto se generó mediante el análisis
de diferentes datos obtenidos por medio de: entrevistas, encuestas y grupos focales,
con esta información, se logró la estética de diseño y la estrategia de comunicación,
que consta en reflejar el proceso de una sentencia aplicada al “Restaurant Café
Concert La Sentencia” mediante la oferta de productos y servicios aplicados
temáticamente en función a las necesidades de los usuarios.
Méndez (2010), en su proyecto titulado “El diseño gráfico en la creación de
personajes para publicidad”, tuvo como objetivo comprobar la importancia del uso
del diseño gráfico en la creación de personajes para la publicidad aplicando
metodología bibliográfica. Para llevar a cabo el proyecto se seleccionaron diez
personajes de siete marcas del Departamento de Guatemala, siendo éstas: Pollo
Campero (Pollito y Pizzito), La Curacao (Facilito), Kellogg’s (Tony y Cornelio),
Nestlé (Quiki), Malher (Pollito, Indito de Toki), Al Macarone (Al) Bimbo (Osito
Bimbo). Estas empresas además de ser reconocidas poseen un personaje dentro de su
logotipo que las identifica fácilmente frente a sus consumidores desde sus inicios.
Además, se tomaron en cuenta criterios específicos como: diseño de programas,
diseño de juegos, diseño de páginas Web, diseño gráfico en PC.
Goncalves (2007), en su investigación titulada “Diseño de una propuesta de un
sitio web para mejorar los servicios de la agencia de comunicaciones corporativas
 9

Tips imagen y comunicación C.A”, tuvo como objetivo diseñar una propuesta de un
Sitio Web para mejorar los servicios corporativos de la empresa “Tips Imagen y
Comunicación C.A.”, el tipo de investigación fue la exploratoria, descriptiva y
explicativa; el diseño de investigación fue de Campo. La población estuvo
conformada por dos poblaciones A y B, buscando la opinión ya que, la opinión tanto
dentro (empleados) con fuera (Clientes) de la empresa son importantes para conocer
sus necesidades. La empresa “Tips Imagen y Comunicación C.A.” cuenta con una
población finita, esta población la representan los 9 empleados, entre ellos se
encuentran los representantes de cada departamento (3 licenciados), 3 asistentes, 2
gerentes y un pasante. Como población B se encuentran los principales clientes: 13
Laboratorios y 16 Sociedades Médicas. La muestra A, fue un total de: 9 personas;
muestra B realizarán 28 encuestas, que serán enviadas por correo electrónico a los
clientes. Las Técnicas e instrumento de recolección de datos fue la entrevista.
Finalmente se concluye en que la agencia “Tips Imagen y Comunicación C.A” se ha
caracterizado por ser una empresa responsable y dedicada en cada uno de sus
proyectos, lo que la hace una agencia con alto nivel de prestigio. Los principales
servicios que ofrece la empresa son: Relaciones Públicas, Comunicaciones
Corporativas, Publicidad y elaboración de Tips de cada Congreso Nacional. Pero la
búsqueda de nuevos clientes y reconocimiento a nivel internacional, los ha llevado a
mejorar diversos problemas de comunicación con sus clientes, para lo cual ha sido
de vital importancia conocer un nuevo medio funcional y factible que es el desarrollo
de una Página Web. Ademas, A través de los diferentes links a los que el cliente
ingrese dentro de la página Web, se obtendrá la información precisa sin necesidad de
llamar para solicitarla, lo que origina menor inversión de tiempo en la dedicación a
cada cliente, además de la promoción permanente de sus productos y servicios las 24
horas, 7 días a la semana, los 365 días al año. La exposición de este medio por la red,
tendrán la posibilidad de ampliar su mercado, y ser conocidos en todas partes del
mundo.
Hernández (2007), realizó la investigación acerca de una “propuesta de
metodología para el desarrollo de páginas y sitios web”, con el objeto de
esquematizar una propuesta de una metodología para el desarrollo de páginas y Sitios
Web, mediante la comprensión de las metodologías típicas y contemporáneas de
ingeniería de software, haciendo el análisis de sus modelos, procedimientos, técnicas,
herramientas y reglas que la conforman. Se hizo uso de un método o metodología
 10

para desarrollar Sitios Web con diversos fines, de una forma más rápida y metódica,
ya que se ha ido incrementando la necesidad de tener acceso público a la información
en todos los temas, por medio de la Red de Redes. Por esto es que en este proyecto
se esquematiza en una propuesta de metodología. Finalmente la investigación
concluye, se ha cumplido de manera satisfactoria el objetivo planteado al inicio del
presente documento, ya que se ha presentado una propuesta de metodología de
desarrollo de aplicaciones Web, basada en las opiniones y comentarios de
desarrolladores profesionales de Sitios Web y enriquecida con un análisis de las
características y ventajas de las principales metodologías generales de desarrollo de
software, dando como resultado un producto metodológico con aportaciones
interesantes para los lectores.

2. Bases teóricas científicas

1. Teoría del diseño gráfico según Bustos (2012)
Diseñar, del italiano "disegnare", y el latín "designare"; de signare,
significa seña o signo. De tal modo, signo se define como la unidad mínima
de comunicación en todos los lenguajes.

Según el Diccionario de la Real Academia Española, diseño es:

1. Traza, delineación de un edificio o de una figura.
2. Descripción de un objeto o de alguna cosa, hecho con palabras.
3. Disposición de manchas, colores o dibujos que caracterizan exteriormente a
diversos animales y plantas.
4. Proyecto, plan. Diseño urbanístico.
5. Concepción original de un objeto u obra destinados a la producción en serie:
diseño gráfico, de modas, industrial.
6. Forma de cada uno de estos objetos. El diseño de esta silla es de inspiración
modernista.

La palabra "gráfico" califica a la palabra "diseño", y la relaciona con la

producción de objetos visuales destinados a comunicar mensajes específicos.
Luego entonces diseño es toda acción creadora que cumple su finalidad. Por
lo tanto; el Diseño gráfico es la acción de concebir, programar, proyectar y
 11

realizar comunicaciones visuales, producidas por medios industriales y

destinados a transmitir mensajes específicos a grupos determinados.

1. Bases y fundamentos
1. Los elementos básicos del diseño
De inicio, es clave definir cuáles son elementos del diseño y la
importancia que éstos tienen en el ámbito psicológico de las personas con el
fin de lograr el propósito que se busca, que es el de persuadir e informar.
En ese sentido, de debe tener en cuenta lo que puede significar un color,
una forma, un tamaño, una imagen y la disposición determinada de los
elementos que se van a incluir en el diseño, pues esto establece una buena
comunicación, logrando con ello la atracción, motivación o interés de las
personas a las que nos dirigimos.
Un diseñador gráfico debe saber manipular esos elementos, siempre y
cuando tenga pleno conocimiento de ellos.

Para lograr el objetivo de un diseño, se deben tomar en cuenta los

siguientes requisitos:
1. Tener plena información de lo que se quiere comunicar.
2. Elegir los elementos adecuados.
3. Hacer una composición atractiva y adecuada de dichos elementos.

1. Lenguaje visual: Saber comunicar el mensaje adecuado, con los recursos

oportunos según el público al que vaya dirigido el mensaje.
2. Comunicación: Conocer los procesos de comunicación para poder tratar
los mensajes que el diseño pretende comunicar.
 12

3. Percepción visual: Conocer la manera en que el ser humano percibe lo

que ve. Aspectos como el recorrido de la vista, conceptos de contraste,
percepción de figuras y fondos, trayectoria de la luz y demás aspectos que
más adelante se tratarán.
4. Administración de recursos: Conocer los recursos de los que se dispone,
para tratar de emplearlos del mejor modo posible.
5. Tecnología: Conocer la tecnología con la que se trabaja, es dominar las
posibilidades que la técnica actual brindan al diseñador. El correcto uso de
las herramientas facilita el proceso de diseño y mejora los resultados
enormemente.
6. Medios: Uno de los puntos más importantes en la realización de un
proyecto es conocer para que medio se ha creado: para impresión, para
consulta en un monitor, para impresión en otras superficies, etc. Y de este
uso dependerá el desarrollo del trabajo en sí.
7. Nota: Un diseñador que domine todos los puntos enumerados
anteriormente, podrá afrontar cualquier encargo y desarrollar unas
creaciones llamativas, novedosas y muy acertadas.

2.2.3 Cómo hacer un buen diseño

Un buen diseño es una pieza con atractivo visual, con personalidad y de
gran equilibrio estético que cumple de la mejor manera posible su función.
Ante todo, para que un diseño sea “bueno”", debe atender a la función para la
que fue creado, es decir, un cartel publicitario que anuncie un producto debe
conseguir que todos los usuarios que lo contemplen, deseen adquirir ese
producto.
Conseguir este efecto es complicado, ya que son cada día más los
anuncios que se publican y eso hace que sea difícil hacer una composición
llamativa que atraiga la atención de los usuarios.
Un ejemplo de este efecto, es la marca Coca-Cola, conocida
internacionalmente y que está en continuo trabajo para crear los trabajos más
llamativos e impactantes.
El diseño gráfico es un trabajo sencillo que cualquier usuario puede
realizar, pero para conseguir un diseño efectivo, se deben conocer ciertos
 13

aspectos como el uso de tipografías, la psicología del color o la maquetación

de documentos.
El diseñador gráfico debe saber diseñar, presentar y producir, ya que no
es sólo el diseño lo que se requiere si no también la materialización de este.
El trabajo del diseñador es cada día más valorado, llegando en algunos casos
a sustituir al director de arte e incluso, a cumplir las funciones de jefe de
producción gráfica.

1. El diseño gráfico en la actualidad

Las tecnologías y métodos utilizados antiguamente para transmitir la
comunicación visual se han ido modificando sucesivamente. Esta actividad,
que hoy conocemos como diseño gráfico, abarca muchos aspectos, de tal
forma que llegan a confundirse sus campos de actividad, pues el desarrollo y
evolución de los productos y servicios de las empresas y particulares han
crecido espectacularmente, surgiendo la publicidad y con ella la evolución del
diseñador gráfico como comunicador en la batalla de la competencia.
El diseño cada vez se “instala” en más campos, como el cine o la
televisión, apareciendo en “video-clips” musicales, anuncios, y efectos
especiales en prácticamente todas las películas de la actualidad.
Se podría decir que las posibilidades del diseño gráfico actualmente son
infinitas, ya que cada vez son más los campos en los que se emplean
elementos creados por ordenador. Entre estos campos encontramos la
publicidad, el diseño de envases (o packaging), el diseño industrial, el diseño
de páginas web y aplicaciones multimedia, el diseño de stands o puntos de
venta y así un largo número de posibles usos del diseño en la actualidad.

El diseño se podría dividir en tres grupos principales:

1. La edición que abarcaría: diseño de tipos, libros, periódicos y revistas.
2. La publicidad o el diseño comercial: carteles, anuncios y folletos.
3. La identidad que es el diseño de una imagen corporativa y de una
señalización.
 14

1. El arte y el diseño
Diseñar puede ser considerado arte pero es una apreciación muy
inexacta. Un diseño puede y debe reunir unas características estéticas como
para considerarlas obras de arte. En los museos de arte moderno pueden verse
carteles entre las pinturas o dibujos meramente artísticos y otros objetos que
se diseñaron para una función específica diferente a las que pueda tener el
Arte en sí.
La belleza de un diseño puede superar en muchas ocasiones la de
cualquier obra de arte, pero siempre que respete los tres elementos básicos de
la comunicación:
1. Un método: diseñar
2. Un objetivo: comunicar
3. Y un campo: lo visual.
El diseñador gráfico es el profesional que mediante un método
específico (el diseño), construye mensajes (comunicación), con medios
visuales.
Los elementos básicos a dominar dentro del diseño gráfico, y sin los
cuales el proyecto no tendrá el resultado previsto son: el lenguaje visual, la
comunicación, la percepción visual, la administración de recursos, y el
conocimiento de la tecnología y medios disponibles.

1. La teoría del color

El color se produce como respuesta a una sensación de la estimulación
del ojo y los mecanismos nerviosos frente a la luz. Por lo tanto, el color no
existe en sí, y no es tampoco una característica de los objetos, sino una mera
percepción de nuestros ojos ante ciertas longitudes de onda que componen
algo que se denomina “espectro” de luz blanca.
“Cuando percibimos un objeto de un determinado color, es la superficie
de ese objeto que refleja una parte del espectro de luz blanca que recibe y
absorbe las demás.”
“La luz blanca está formada por tres colores básicos: rojo, verde y azul.
Este fenómeno fue descubierto por Isaac Newton al hacer pasar un rayo de
luz blanca por medio de un prisma de cristal, este haz de luz se dividió en un
espectro de colores idéntico al del arco iris”.
 15

La materia en sí es incolora, pero; posee la característica de absorber

ciertas longitudes de onda del espectro luminoso. Por ejemplo, en el caso de
un objeto de color azul, éste absorbe el verde y el rojo, y refleja el resto de la
luz que es interpretado por nuestra retina como color azul.

1. Percepción del color

“El mundo material es incoloro. La materia posee la característica de
absorber determinadas partes del espectro lumínico. La luz que no es
absorbida es remitida y transmite estímulos de color diferentes al de la
ambientación general, al llegar estos estímulos espectrales distintos hasta el
órgano de la vista es cuando nos produce una sensación de color.”
“Consideramos el poder de absorción del material como el color propio
de su cuerpo, y la composición espectral de un haz de luz como su color
luminoso. Aunque la absorción sólo es una cualidad latente y los rayos de luz
sólo son sus transmisores de información. El color sólo es sensación de color,
producto del órgano de la vista”.
“Los tres colores primarios. El ojo cuenta con tres tipos de células
visuales, que rigen tres tipos diferentes de sensaciones, correspondientes a los
colores primarios azul (azul violáceo), verde y rojo (rojo anaranjado). A partir
de ellos se forma para cada sensación de color un código de tres partes.” Estos
colores no se pueden formar de la mezcla de ningún color, son absolutos.
Los colores secundarios son aquellos que surgen de la mezcla por partes
iguales de dos primarios es decir: de la mezcla del azul y el amarillo surge el
verde, del rojo y amarillo, el naranja y del rojo y azul, el violeta.
 16

Por su parte, los colores terciarios se forman con la mezcla, por partes
iguales, de un color primario con uno secundario adyacente. Así, de esta
combinación resulta el rojo violáceo, rojo anaranjado, amarillo anaranjado,
amarillo verdoso, azul verdoso y azul violáceo.
“A los tres componentes del órgano de la vista le corresponden ocho
colores elementales, dos acromáticos (blanco y negro) y seis colores
elementales cromáticos (amarillo, magenta, cyan, azul, violeta, verde y rojo
naranja). Los ocho colores elementales son las ocho posibilidades indivisas
de variación que resultan de los tres colores primarios. Representan las
sensaciones de color extremas que el órgano de la vista es capaz de producir.”

Colores primarios, círculo cromático

2. Psicología del color

Según Heller (2013) en su libro Psicología del color, menciona lo
siguiente:
Conocemos muchos más sentimientos que colores. Por eso, cada color
puede producir muchos efectos distintos, a menudo contradictorios. Un
mismo color actúa en cada ocasión de manera diferente. El mismo rojo puede
resultar erótico o brutal, inoportuno o noble. Un mismo verde puede parecer
saludable, o venenoso, o tranquilizante. Un amarillo, radiante o hiriente. ¿A
qué se deben tan particulares efectos? Ningún color aparece aislado; cada
color está rodeado de otros colores. En un efecto intervienen varios colores o
sea un “acorde de colores”. Un acorde cromático se compone de aquellos
colores más frecuentemente asociados a un efecto particular. Los resultados
de nuestra investigación ponen de manifiesto que colores iguales se
relacionan siempre con sentimientos e impresiones semejantes. Por ejemplo
 17

a la algarabía y a la animación se asocian los mismos colores que a la

actividad y la energía. A la fidelidad, los mismos colores que a la confianza.
Un acorde cromático no es ninguna combinación accidental de colores, sino
un todo inconfundible. Tan importantes como los colores aislados más
nombrados son los colores asociados. El rojo con el amarillo y el naranja
produce un efecto diferente al del rojo combinado con el negro o el violeta;
el efecto del verde con el negro no es el mismo que el verde con el azul. El
acorde cromático determina el efecto del color principal.
El color es más que un fenómeno óptico y que un medio técnico. Los
teóricos de los colores distinguen entre colores primarios —rojo, amarillo y
azul—, colores secundarios —verde, anaranjado y violeta— y mezclas
subordinadas, como rosa, gris o marrón.

3. El color en la web
Los colores pigmento son los colores físicos (pinturas y tintas) son el
azul cyan, el rojo magenta y el amarillo medio más el blanco y el negro,
mientras que los colores luz (los que apreciamos en todo tipo de monitores)
son el azul, el magenta, el amarillo y el verde, el blanco es la suma de todos
los colores (luz) y el negro es la ausencia total de color.
El uso del color a la hora de hacer el diseño de un sitio web es de suma
importancia, ya que como se ha visto, los colores son capaces de trasmitir una
infinidad de sensaciones o sentimientos aplicando una mínima parte de este
elemento. El uso adecuado de un color es una clave segura de éxito para captar
la atención de los visitantes de nuestra página.

2.2.4 Teoría del diseño Web

1. Teoría del diseño Web
En la actualidad, el diseñador gráfico ha tenido que incursionar de
manera contundente en la comunicación por la web, ya que su dominio sobre
el conocimiento del color, tipografías, simetrías, espaciados y un sinfín de
cosas que la gente común desconoce, hace que el diseñador gráfico sea
indispensable para el éxito de lo que se quiere comunicar. El diseñador web
tiene la misión de enlazar al usuario con el mundo informativo de manera
eficaz y agradable.
 18

La hipermedia permite, además de tener acceso a la información,

satisfacer los requerimientos y gustos de millones de navegantes. Por lo tanto
es primordial tener un criterio de diseño antes de crear un sitio.
Considerando lo anterior, para diseñar páginas web es necesario
conocer varias disciplinas tales como: informática, comunicación, diseño y
cibernética. Debe enfatizarse en el hecho de que la presentación de la
información por sí sola no garantiza el éxito del mensaje, precisa de
comunicación, y esta a su vez de un buen diseño para cumplir con el objetivo.
Si el código es erróneo, es obvio que el mensaje será erróneo para un público
erróneo.
Un mal diseño tiene las siguientes características:
1. No saber lo que se quiere comunicar.
2. Falta de conocimiento del significado psicológico de los elementos.
3. El favoritismo por lo estético.
4. La no valoración de lo funcional o viceversa.

5. Estructura y planificación de sitios Web

Antes de proyectar o diseñar una página web, es necesario seguir los
siguientes lineamientos en la etapa de creación:
1. En primer lugar, es necesario hacer un análisis de la información que
contendrá la página. Esto es, hay que informarse perfectamente sobre la
temática del contenido.
2. Analizar el sector a quien será dirigido el mensaje y poder identificar qué
tipo de sensaciones e ideas queremos transmitir, para lo cual contamos
con recursos como el uso de tipografías, el color y la composición, para
que todo esto se produzca de una manera clara y concisa.
3. Debemos fijar los objetivos que queremos alcanzar: es decir, que
debemos definir si lo que se quiere es educar, informar, vender, etc.
4. Ya con los objetivos definidos, es importante recopilar los elementos que
contendrá nuestra página, como son textos, imágenes, gráficas, etc., todo
el material gráfico que sea necesario para poder, entonces organizarlos.
5. Realizar una estructura con toda la información y elementos recopilados.
Es recomendable realizar un boceto para poder visualizar de manera más
clara todos los elementos que se incluirán (texto, imágenes, botones,
 19

hipervínculos), no olvidar los bocetos de las páginas con las que estará
enlazada.

6. Lenguajes para la web

Para poder crear una página web o programar, necesitamos utilizar
determinado lenguaje de programación. Estos lenguajes permiten desarrollar
diversas acciones en los sitios web.
Existen varios lenguajes para la elaboración de sitios web como el
lenguaje HTML, el XML, el CSS, el javascript, el SMGL, los cuales pueden
ser utilizados incluso combinando varios.
“El lenguaje XML es un estándar para el intercambio de información
entre diferentes instancias. Puede ser utilizado para estructurar bases de datos,
editores de texto u hojas de cálculo. XML representa la interfaz ideal entre
las páginas web y las bases de datos”. El lenguaje Javascript es un lenguaje
independiente de cualquier plataforma o sea que puede ser ejecutado en
Windows, Apple, Linux o la misma internet. Utilizado para crear pequeños y
grandes programas para poder dar efectos e interactuar con los usuarios como
son el correo o el chat, contadores de visitas, calendarios y relojes.
El CSS (Cascading Style Sheets) es un lenguaje que abarca cuestiones
como fuentes, colores, márgenes, fondos etc., y se usa para formatear
documentos estructurados en HTML.
El más popular y utilizado de los lenguajes es el HTML (Hypertext
Markup Language o lenguaje de marcación de hipertexto) aunque con ciertas
limitantes y es un derivado del lenguaje SMGL (Generalized Markup
Language), lenguaje poco usado por su complejidad. Por tal razón nos
enfocaremos en el HTML como base para la realización de páginas web.
Un documento HTML contiene instrucciones específicas (etiquetas o tags)
que indican al navégate (Internet Explorer) cómo desplegar diferentes
elementos tales como: texto, imágenes, fondos, sonidos, videos, etc.

7. Teoría de la maquetación de un sitio web

 20

1. Espacio

Las formas de cualquier tamaño por pequeñas que sean,

ocupan un espacio, así el espacio puede estar ocupado o vacío y
puede existir o ser ilusorio para sugerir profundidad. Considerando
esta página, todo el espacio vacío lo podemos considerar como un
fondo.
En la relación de figura-fondo debemos considerar la
importancia del lugar en el espacio que ocupe la figura; ya que una
misma figura colocada en diferentes posiciones puede denotar cosas
distintas como podemos observar en el siguiente gráfico:

En el cuadro “a” el objeto parece ser más liviano y ligero que

en el “d” que parece ser más pesado, mientras que en “b” parece
visualmente estar más abajo del centro, mientras que en “c” parece
estar totalmente al centro.
De ahí la importancia del manejo de los espacios, éstos van en
relación con lo que queremos denotar.
La estructura impone un orden y predetermina las relaciones
internas de las formas de un diseño. Esta estructura puede ser formal
o informal, esto es que puede ser basada en divisiones regulares,
rítmicas y graduadas o libres e indefinidas.
Llamaremos “maquetación” al ensamblaje de todos los
componentes de nuestra página de forma que tengan una
determinada estructura visual.
Esta maquetación tiene ciertas reglas, pues se deben tener en
cuenta aspectos como la tendencia de las personas de fijar la vista
hacia ciertos puntos, el uso de formatos establecidos y que ya son
muy comunes para los usuarios, como por ejemplo: los contenidos
 21

principales, se encuentran al centro de la página, los menús de

navegación los encontramos generalmente debajo del encabezado o
en columnas a la izquierda, mientras que la publicidad está en las
columnas de la derecha.
Como podemos observar en cualquier página web, los
“menús” son una parte importante, pues son los que le permiten al
usuario desplazarse de manera fácil y rápida hacia otras páginas o
sitios.

2. Formatos

Cuando hablamos de formatos nos referimos a la forma de la

estructura que tendrá la página web y ésta a su vez con los marcos
que pueden ser visuales o no.

c. Márgenes y tabuladores

Si trabajamos con Front Page, desde la barra de herramientas

tenemos gran facilidad de maquetar los espacios, formatos,
márgenes y demás componentes. Es un programa muy versátil
generador de lenguaje HTML, XML, CSS. Se pueden agregar
frames como marcos flotantes, botones interactivos, vínculos y un
sinfín de elementos necesarios para la creación de sitios web.

1. Publicidad
Se refiere a los distintos sistemas de comunicación a través de
los cuales se dan a conocer productos, se impone una imagen
favorable de los mismos, y se estimula su compra y su consumo, se
denomina publicidad.
Hoy día, la publicidad es la clave de la financiación y
sostenimiento de los medios de comunicación de masas en
sociedades desarrolladas de libre mercado.

2. Importancia y Necesidad de la Publicidad

 22

En relación a la enorme cantidad, de diversos productos y

servicios que surgen día a día, la publicidad pasó a ser indispensable
para que el público pueda conocerlos y al mismo tiempo informarse
sobre los cambios que se producen en ellos. La aspiración es que,
todo producto se llegue a confundir con la marca, consiguiendo que
el consumidor vaya a un almacén y no pida una gaseosa cola, sino
una “Coca” o “Pepsi”, o ir a comprar pasta de dientes y pedir
“Colgate” lo que es factible gracias a la publicidad intensiva.

3. Objetivos de la publicidad
En su libro Fundamentos de Marketing, Etzel y Walker
Stanton, proponen los siguientes objetivos:
1. Respaldo a las ventas personales: el objetivo es facilitar el trabajo
de la fuerza de ventas, dando a conocer a los clientes potenciales,
la compañía y los productos que presentan los vendedores.
2. Mejorar las relaciones con los distribuidores: aquí el objetivo es
satisfacer a los canales mayoristas y/o minoristas al apoyarlos con
la publicidad.
3. Introducir un producto nuevo: su objetivo es informar a los
consumidores acerca de nuevos productos o de las extensiones de
línea.
4. Expandir el uso de un producto: Éste objetivo puede ser alguno
de los siguientes: 1) extender la temporada de un producto, 2)
aumentar la frecuencia de reemplazo o 3) incrementar la variedad
de usos del producto.
5. Contrarrestar la sustitución: El objetivo es reforzar las decisiones
de los clientes actuales, y reducir la probabilidad de que opten por
otras marcas.

6. Funciones de la Publicidad
La publicidad, es un factor muy importante en la sociedad
actual, influye mucho en las personas creándoles necesidades, que
en un principio no existían, se cree que la publicidad es una de las
principales causas del consumismo. La publicidad puede influir de
forma muy profunda en los pensamientos y costumbres de las
 23

personas subliminalmente, las principales consecuencias de éstas se

organizan dependiendo de la función que tenga esa publicidad.
Las principales funciones de la publicidad según Stanton (2015) son:

7. Función sustitutiva: hace creer al comprador que el objeto que

se anuncia posee unas cualidades que en verdad no poseen. Esto
es muy frecuente en la publicidad y se puede encontrar en
anuncios muy variados como: de venta de carros y hasta de
colonias.
8. Función estereotipadora: crean un ideal de sociedad, en la que
es necesario un tipo de producto, esto tiene tanta influencia que,
es una de las principales razones de la aparición de estereotipos
sociales. Es común, encontrar esta función en anuncios de nuevas
tecnologías e incluso en la publicidad dirigida al sector infantil.
9. Función desproblematizadora: como lo indica el nombre, este
tipo de publicidad hace ver que el mundo es maravilloso, y que
todo el mundo vive feliz sin preocupaciones, dejando de lado a
las desigualdades sociales: el hambre en el mundo, la violencia en
las calles, etc. Esta función, se puede encontrar en los anuncios
de bancos y de productos relacionados con las dietas.
10. Función conservadora: Aunque se crea estar en
pleno proceso de cambios y progreso social, la sociedad apalanca
a los estereotipos sociales conservadores, como: la diferenciación
entre sexos. Por ejemplo, es claramente visible en la publicidad
de juguetes ya que están pensados para uno de los sexos en
concreto.
11. Función ideológica: se intenta crear grupos de
opiniones que estos anuncios imponen. Un ejemplo serían los
anuncios de carros en los que intentan diferenciar a las personas
por la clase del carro, cuanto mayor sea el poder adquisitivo de la
persona mejores y más caros serán los carros que compren.
12. Estimulación de la demanda primaria: consiste
en que el anunciante trata de crear demanda para una categoría de
producto en general. En su forma pura, el propósito de este tipo
 24

de publicidad, es educar a los compradores potenciales en cuanto

a los valores fundamentales del tipo de producto, en lugar de
destacar una marca específica dentro de la categoría del producto.
13. Estimulación de la demanda selectiva: su
propósito es señalar, los beneficios particulares de una marca en
comparación con las de la competencia.
14. Publicidad de respuesta directa: es un tipo de
publicidad, que solicita al receptor del mensaje actuar de
inmediato. Por ejemplo, los anuncios en televisión que tratan de
estimular a los receptores a que compren un determinado
producto a un precio especial, o con un buen descuento que sólo
durará hasta la medianoche.
15. Publicidad de respuesta retardada: en lugar de
buscar el estímulo de la acción inmediata del público, la
publicidad de respuesta retardada, busca crear el reconocimiento
y la aprobación de una marca a lo largo del tiempo. Por lo general,
la publicidad de respuesta retardada, trata de generar el
conocimiento de la marca, refuerza los beneficios de su uso y
establece un gusto general por la marca.
16. Publicidad empresarial: no se diseña para
promover una marca específica, sino que funciona para establecer
una actitud favorable hacia una compañía como un todo, por
ejemplo, Xerox e IBM.

17. Definición de términos básicos

18. Diseño: se define como el proceso previo de configuración
mental, "pre-figuración", en la búsqueda de una solución en
cualquier campo.
19. Dirección Web: Conocido también como página web al
documento que forma parte de un sitio web y que suele contar
con enlaces (también conocidos como hipervínculos o links)
para facilitar la navegación entre los contenidos.
 25

20. Sitio web: Es un conjunto de páginas web desarrolladas en

código HTML, relacionadas a un dominio de Internet el cual se
puede visualizar mediante los navegadores web.
 26

CAPÍTULO III
DESARROLLO DEL PROYECTO
1. Prototipado
Al inicio del proyecto se propuso determinar los elementos que la página web
utilizaría para publicitar los servicios que brinda; de tal forma que se comenzó
realizando primero el boceto en físico y luego creando su versión digital.

3.1.1 Boceteado

Primero se empezó utilizando post notes en una pizarra y ubicando las

partes principales de un sitio web la cabecera el contenido principal y el pie
de página. Luego se procedió a utilizar el software Balsamiq mockup que
ayuda a plasmar y transferir las ideas y empezar a maquetar la página web.
Se procedió a elaborar la maquetación que tendrá la página web
ubicando el header el contenido de página y el footer
 27

Imagen 1
MAQUETACIÓN DE LA PAGINA WEB

Fuente: Propia
Elaboración: Propia

El proyecto comenzó a partir del bocetado de la página web, teniendo en cuenta

las partes principales de la página, para luego proceder a desglosar cada una de ellas.
En esta primera parte del proyecto la elección de las ventanas principales ayudo
a ver la falta de los elementos principales de publicidad de la empresa, la cual no
contaba con apoyo en publicidad web tales como correo electrónico, Fan Page, a su
vez la identidad corporativa de esta.
 28

Imagen 2
MAQUETACIÓN DE LA PAGINA WEB

Fuente: Propia
Elaboración: Propia

Luego de la elección de las ventanas principales que irían en la página web se

procedió a desglosar los sub menús de cada uno de ellos.
Con la configuración de las nuevas ventanas se logró adherir otros enlaces para
completar la página web entre otros tanto en la parte del header, el cuerpo y el footer
 29

Imagen 3
MAQUETACIÓN DE LA PAGINA WEB EN EL PROGRAMA BALSAMIQ
MOCKUP

Fuente: Propia
Elaboración: Propia

Se procede a construir la maqueta virtual del proyecto de la página web en base al

boceto realizado anteriormente. Con el programa Balsamiq mockup la plantilla de la
página web fue tomando forma, poniendo cada elemento en su lugar se logró tener una
mejor disposición de los elementos de cada ventana.
 30

1. Wireframe
La segunda parte del proyecto fue desarrollar la página la parte
funcional del sitio web para la distribución de los elementos que constituyen
la página web.

2. Diseño gráfico y web

Una vez que se determinó los elementos que participarían en el proyecto se
procedió a realizar cada uno de ellos en forma virtual para luego proceder con el
armado de la página web.

1. Diseño de Photoshop y logotipo

1. Logotipo
El logotipo fue elaborado y creado con Corel dram x7 el primer
paso fue reunirnos con la directiva de la academia para intercambiar
ideas y proceder a elegir el Isotipo los colores y tipografía del logo a
elaborar etc. Luego de distintas opciones y variantes del logotipo se
eligió una opción.

Imagen 4
SELECCIÓN DEL LOGOTIPO

FUENTE: Propia
ELABORACIÓN: Propia
 31

Imagen 5
RESULTADO FINAL DE ELECCIÓN DE LOGOTIPO

FUENTE: Propia
ELABORACIÓN: Propia

En esta imagen el logotipo seleccionado tuvo variantes en los colores corporativos

para armonizar los colores y hacerlos compatibles utilizamos el software Corel Draw.
A continuación, se muestra el logotipo y sus características
 32

Imagen 6
LOGOTIPO FINAL

FUENTE: propia
ELABORACIÓN: propia
Una vez realizados los cambios de tipografías y dado el visto bueno se establece un
logo para su posterior uso

2. Fotografía web
El proyecto requirió y demando de imágenes para la realización
de la página web, por lo cual se procedió a la creación de bancos de
fotografías para el apoyo del soporte de la página web, las fotografías
pasaron por el proceso de retocado para lo cual se utilizó como
herramienta de edición a Adobe Photoshop, verificando de cada foto
mantengan uniformidad entre ellas en cuanto al tono de la imagen,
brillo, saturación curvas, A continuación se presentan los paso de la
selección y creación del banco de fotos para la institución.
 33

Imagen 7
CREACIÓN DE BANCO DE FOTOGRAFÍAS

FUENTE: propia
ELABORACIÓN: propia

El proyecto requirió la utilización de fotografías para dar soporte en la parte visual

de la página web por lo cual se creó un banco de imágenes de categoría educación para
facilitar la selección para la página web y se procedió a elegir diversas imágenes que
serían aplicadas para el slider pasaron por una edición de imagen por lo que se procedió
a utilizar el software Adobe Photoshop CS6.
 34

Imagen 8
EDICIÓN DE IMÁGENES

FUENTE: Propia
ELABORACIÓN: Propia

Se procedió a elegir diversas imágenes que serían aplicadas para el slider pasaron por
una edición de imagen por lo que se procedió a utilizar el software Adobe Photoshop CS6

3. Web
El desarrollo del proyecto para el armado en la web se procedió
realizando cada elemento en forma digital, realizando retoques en las
fotografías, la redacción que iría en la web, y demás partes que se irían
acoplando según se iba armando la pagina web.

1. Recursos Web
Para la página web se implementó recursos que complementen y
fortalezcan el dinamismo de la web.
 35

1. Slider
La página web cuenta en su presentación con un elemento dinámico,
el cual a la vez de contener fotografías lleva texto de los servicios que la
institución ofrece al público. Las imágenes de este elemento se editaron
en el programa Adobe Photoshop, el diseño se trabajó en el programa
Corel Draw 17 y luego se procedio a armar el slider con el programa
Amazing Slider; a continuación se muestra el proceso seguido.

Imagen 9
RETOQUES DE COLOR BRILLO TONALIDAD

FUENTE propia
ELABORACIÓN propia
Otorgando retoques al slider elegido calibrar el brillo tonalidad
 36

Imagen 10
INSTALACIÓN DEL SOFTWARE PARA CREACIÓN DE SLIDER

FUENTE: Propia
ELABORACIÓN: Propia

El primer paso fue instalar el programa y una vez instalado abrir el software elegir
el idioma. Luego de que fueron retocadas las imágenes se procedió a utilizarlas en el
software amazing slider carrusel esto con el objetivo de otorgarle diversas animaciones
etc.

Imagen 11
INSERTAR DIAPOSITIVAS

FUENTE: Propia
ELABORACIÓN: Propia

Abrir la carpeta e ingresar las imágenes seleccionadas y procesadas en Photoshop Cs6

 37

Imagen 12
CARGADO DE IMÁGENES

FUENTE: Propia
ELABORACIÓN: Propia

Establecer dimensiones del slider en este caso 1800 por 525 px

Imagen 13
ELEGIR UNA OPCIÓN DE MASCARA

FUENTE: Propia
ELABORACIÓN: Propia

Al elegir la segunda opción se activa diversos efectos para el slider

 38

Imagen 14
MENÚ MASCARAS

FUENTE: Propia
ELABORACIÓN: Propia

Personalizar las opciones de máscara efecto de texto etc.

Imagen 15
OPCIÓN DE SOMBRA Y BORDES

FUENTE: Propia
ELABORACIÓN: Propia

Personalizar opciones de máscara bordes el tiempo del frame la sombra de fondo

 39

Imagen 16
OPCIÓN TRANSICIONES

FUENTE: Propia
ELABORACIÓN: Propia
Elegir efecto de las transiciones configurar el tiempo

Imagen 17
OPCIONES INTERVALO

FUENTE: Propia
ELABORACIÓN: Propia

Activar la opción de deslizar y cambio de imagen al contacto de los dedos en la para

modo pantalla táctil.
 40

Imagen 18
VISTA PREVIA

FUENTE: Propia
ELABORACIÓN: Propia

Esta opción nos permite visualizar el estado del proyecto con los cambios
establecidos

Imagen 19

OPCIÓN PUBLICAR

FUENTE: Propia
ELABORACIÓN: Propia

Opción publicar como insertar tu slider en la página web

 41

Imagen 20
OPCIÓN ARCHIVO

FUENTE: Propia
ELABORACIÓN: Propia

Con esta opción se puede guardar el proyecto como en el disco a elegir

 42

Imagen 21
GUARDAR Y ARCHIVAR EL PROYECTO

FUENTE: Propia
ELABORACIÓN: Propia

En esta opción se exporta el slider para luego ser insertado en la página web

2. Video
Para la creación del video institucional de la academia se utilizó el
programa Video Maker, en el cual se trabajó con la plantilla elegida por
el cliente, a continuación, se presenta el proceso.

Imagen 22
CREACIÓN DE DOCUMENTO

FUENTE: Propia
ELABORACIÓN: Propia
Luego de abrir el programa se procede a la creación de un proyecto nuevo
 43

Imagen 23
SE NOMBRA EL DOCUMENTO NUEVO EN EL PROGRAMA VIDEO
MAKER

FUENTE: Propia
ELABORACIÓN: Propia

Se procede a crear un nuevo documento de videofx maker y colocamos el nombre

al archivo para poder visualizar el area trabajo

Imagen 24
ELECCIÓN DE PLANTILLA

FUENTE: Propia
ELABORACIÓN: Propia

Al comienzo del nuevo proyecto se realizó la elección de la plantilla que se adecuo

mas a la idea institucional
 44

Imagen 25
MODIFICACIÓN DEL DISEÑO

FUENTE: Propia
ELABORACIÓN: Propia

Una vez elegido el diseño procedemos a modificar textos, imágenes, colores y todo
lo que deseamos cambiar.

Imagen 26
VISTA PREVIA DEL PROYECTO

FUENTE: Propia
ELABORACIÓN: Propia

Luego de hecho los cambios se procedió a dar una vista previa del trabajo, para
luego proceder con algunos cambios.
 45

Imagen 27
ÚLTIMOS DETALLES Y GUARDADO DEL PROYECTO

FUENTE: Propia
ELABORACIÓN: Propia

Luego de verificar los cambios hechos en el video y conformes con el trabajo

procedemos a nombrar el proyecto y a guardarlo.

3. Formulario web
Se creó un correo a la academia y también un formulario para
enviar a los interesados a inscribirse u obtener información sobre la
academia, inicio de clases, horarios y dudas del usuario

Imagen 28
ENTRAR AL CORREO ELEGIR LA OPCIÓN DRIVE

FUENTE: Gmail
ELABORACIÓN: Propia
 46

Imagen 29

FUENTE: Gmail
ELABORACIÓN: Propia

Elegir opción formulario

Imagen 30

FUENTE: Gmail
ELABORACIÓN: Propia
Rellenar los campos que ofrece el formulario
Imagen 31
 47

FUENTE: Gmail
ELABORACIÓN: Propia

Elegir una imagen de nuestro agrado para fondo

Imagen 32

FUENTE: Gmail
ELABORACIÓN: Propia

Acomodar la imagen seleccionada

Imagen 33
 48

FUENTE: Gmail
ELABORACIÓN: Propia

Vista previa de la imagen seleccionada

Imagen 34

FUENTE: Gmail
ELABORACIÓN: Propia
Opción enviar formulario
 49

Imagen 35

FUENTE: Gmail
ELABORACIÓN: Propia
Click en opción incluir formulario en correo electrónico

Imagen 36

FUENTE: Gmail
ELABORACIÓN: Propia

Enviar al destinatario
 50

Imagen 37

FUENTE: Gmail
ELABORACIÓN: Propia

Invitación a rellenar el formulario de la academia recibido

Imagen 38
Una vez creado el slider, las imágenes el video institucional todo es encarpetado para
posteriormente ser reemplazado en la plantilla aplicado en la web.

FUENTE: Propia
ELABORACIÓN: Propia
 51

Imagen 39
Código resultante del slider paras esto utlizamos el software Dreamweaver este código
sera insertado

FUENTE: Propia
ELABORACIÓN: Propia

En la imagen N se muestra el código que genera Amazing slider carousel , el cual

debe de incluirse en la etiqueta <head> del documento Html de la página.

Imagen 40

FUENTE: Propia
ELABORACIÓN: Propia

De igual modo para tener las imágenes en secuencia se debe de trasladar el código
que genera amazing slider dentro de la etiqueta <body>, con ello podremos visualizar
correctamente el slider en la página web tal y como se muestra a continuación,.
 52

Imagen 41

FUENTE: Propia
ELABORACIÓN: Propia

Como se puede observar gracias a que se adiciono el slider se muestra una imagen
de la web más dinámica. La imagen de fondo es suplantada por el slider

Imagen 42

Visualización de la plantilla que utilizaremos las opciones son editables

FUENTE: Propia
ELABORACIÓN: Propia
Se tiene el constructor online de páginas web que es similar a wix en el cual se
edita online, con ello se podrá realizar la web sin codificar al 100%
 53

Imagen 43

FUENTE: Propia
ELABORACIÓN: Propia

Se encuentran secciones principales como se pueda observar en la imagen tales

como header, secction title, content, services, proyect, team, contact, footer, los cuales
serán de utilidad para poder realizar la página web en su totalidad y luego modificar.
 54

Imagen 44

FUENTE: Propia
ELABORACIÓN: Propia

Para poder construir solo basta con arrastrar el contenido al espacio en blando a la
derecha y se cuenta con el apartado seleccionado.

Imagen 45
En este bloque insertaremos el nombre de la academia el círculo de matemática

Algoritmo
FUENTE: Propia
ELABORACIÓN: Propia
 55

En esta parte se ha seleccionado Title para un título atractivo. Se agregó un

texto de bienvenida al usuario que accederá a la página web para posteriormente
visualizar el contenido de la página toda la información necesaria que requiera.

Imagen 46

FUENTE: Propia
ELABORACIÓN: Propia

Luego agregamos contenido, que puede ser imagen o video, siendo video se coloca
el código de video subido en youtube.
 56

Imagen 47
En el bloque Team se reemplazaron las imágenes establecidas por las fotografías
que tenemos encarpetadas en este caso las imágenes de los maestros y alumnos.

FUENTE: Propia
ELABORACIÓN: Propia

.
Imagen 48
Por último se agrega un apartado de footer para finalizar con enlaces de interes

FUENTE: Propia
ELABORACIÓN: Propia
 57

Imagen 49
Mediante el botón preview se realiza una previsualización de la web
avanzada

FUENTE: Propia
ELABORACIÓN: Propia
 58

Imagen N° 50

FUENTE: Propia
ELABORACIÓN: Propia

Finalmente el diseño avanzado para la web para su posterior modificación. Para

modificar la web ser pulsa en el botón de Source y con ellos se mostrara el código para
poder modificar.
 59

Imagen 51

FUENTE: Propia
ELABORACIÓN: Propia

Tal y como se muestra a continuación. En el código se puede observar que

podemos modificar los textos y enlaces a imágenes.

Imagen 52

FUENTE: Propia
ELABORACIÓN: Propia

En esta imagen podemos apreciar que se puede modificar los códigos de la web,
también se utiliza el software dreamweaver para poder editar este código y actualizar la
web.
 60

Imagen 53

FUENTE: Propia
ELABORACIÓN: Propia
 61

Conclusiones

1. Se logró emplear correctamente los medios audiovisuales en el que se programó.

2. Se logró hacer un banco de imágenes de acuerdo al servicio que brinda la institución y
poder comunicar a través de la web, dando como resultado una mejor estructura.
3. Se logró presentar una maqueta
 62

Recomendaciones
1. Que, es indispensable que la institución cuente con un banco de fotografías para una
mejor publicidad institucional en materiales gráficos impresos y web de igual manera
manejar una identidad corporativa manteniendo un solo estilo.
2. Que, se recomienda a la academia brindar toda clase de información necesaria para
mejorar en su publicidad en proyectos futuros.
3. Que, se recomienda a la institución considerar para publicidad futura la maqueta base
creada para este proyecto y considerar los elementos presentados para mantener la
información necesaria para el público.
 63

Referencias Bibliográficas
Alvitrez, G., Quispe, J., & Quilca, A. (2017). Diseño de un sitio Web para difundir el
turismo en la reserva paisajistica Nor Yauyos Cochas. Huancayo: Istituto
Continental.
Comunidad de Madrid. (2017). Madrid. Obtenido de ¿Qué es una página web?:
http://www.madrid.org/cs/StaticFiles/Emprendedores/GuiaEmprendedor/tema7/
F49_7.9_WEB.pdf
Goncalves, V. (2007). Diseño de una propuesta de un sitio Web para mejorar los
servicios de la agencia de comunicaciones corporativas Tips imagen y
comunicación C.A. Caracas: Universidad NUeva Esparta, Facultad de ciencias
administrativas.
Hernandez, R. (2007). Propuesta de metodología para el desarrollo de paginas y sitios
Web. Estado de Hidalgo: Universidad Autónoma del estado de Hidalgo.
Inteligencia en Tecnología y Servicios. (04 de Abril de 2017). NewWweb. Obtenido de
http://www.newwweb.com.mx/aviso-privacidad
Méndez, I. (2010). El diseño gráfico en la creación de personajes para publicidad.
Guatemala: Universidad de San Carlos de Guatemala.
Ramírez, P. (2017). Graphia. Obtenido de ¿Qué es el diseño gráfico?:
http://www.graphia.com.mx/pdf/que_es_diseno.pdf
Reportes Mic. (20 de Abril de 2017). Estrella Digital. Obtenido de
http://www.estrelladigital.es/articulo/la-red/importancia-tener-sitio-web-
negocio/20170208161254312480.html
Sánchez, H., & Reyes, C. (1996). Metodología y diseños en la investigación científica.
Lima: Mantaro.
Villota, R. (2016). Implementación de un sistema gráfico de identidad visual para
informar servicios del “Restaurant Café Concert La Sentencia”dentro del
Distrito Metropolitano de Quito. Quito: Universidad Católica del Ecuador.
Apéndice 1
Apéndice 2

Apéndice 3
Apéndice 4

Apéndice 5

Softwares utilizados
Apéndice 6

Apéndice 7