-

1. 1
P á g i n a W e b
Y a i z a S e b a s t i á n p a l a c i o s
R a q u e l H e rr e r a O n t i v e r o s
M e m o r i a

2. 2
El proyecto consiste en la creación de la Identidad Visual Corporativa, el
diseño editorial de una revista y el de una página web para la empresa
MusicGoals. Actualmente esta empresa es ficticia, por el momento no
tiene base jurídica ni fiscal. Dicha empresa tiene como propósito la au-
to-edición de sus propias revistas y página web.
Al principio nos fue complicado elegir que tipo de proyecto queríamos
llevar a cabo, porque cada una de nosotras teníamos nuestras propias
ideas sobre el proyecto, pero sabíamos que juntas podiamos crear algo
muchísimo mejor a lo que haríamos individualmente.
Una de nosotras tenía la idea de crear y maquetar un libro desde cero y la
otra una página web, esos hubieran sido nuestros proyectos individuales.
Llegamos a la conclusión de que al ser dos, podríamos realizar un pro-
yecto más ambicioso y que abarcara más, así que en un par de días nos
pusimos de acuerdo en crear una marca para una revista de música, lo
que significaba realizar un Manual de Identidad Corporativa que expli-
cara los valores, y el porqué de esa marca elegida. Además queriamos
crear una revista (proyecto piloto de ella) que contuviera los elementos
necesarios para que poco a poco fuera creciendo, y una página web,
la cual nos ayudaría a ampliar las fronteras de la marca y donde estaría
ubicada también toda la información física de la revista.
I n t r o d u c c i ó n

3. 3
Una vez ya teníamos la idea principal de lo que queríamos crear para el proyecto
final: un Manual de Identidad Corporativa para una marca que sería de una re-
vista de música, y a su vez, una web que contuviera la información de la misma
pero on-line, comenzamos a pensar en cual podía ser su nombre. Ya que antes de
empezar a hacer nada queríamos tener claro de donde partir, no queríamos tener
después ningún tipo de confusión.
Iba a ser una marca que representara a una revista en todos sus aspectos, así que
lo primero que teníamos que llevar a cabo era el Manual de Identidad Corporativa
y una vez realizado tendríamos que ponernos manos a la obra con la revista. Una
vez realizada la revista, decidimos que ya era hora de comenzar a crear la página
web.
Antes de empezar a maquetarla y diseñarla, hicimos varios bocetos en papel de
cómo queríamos que fuera y los apartados que deberían de constar dentro de ella.
Al final llegamos a la conclusión de que deberían aparecer los siguientes aparta-
dos:
- Inicio.
- Agenda.
- Videos.
- Noticias.
- Playlists.
Tras tener claras las diferentes secciones teníamos que desarrollar el contenido que
queríamos que tuviera dentro de ellas, decidimos crear una página web en html
utilizando el dreamweaver, y que contuviera hojas de estilo (.css), fue complicado
al principio pero al tener las ideas muy claras, comenzamos a desarrollar la página
web sin problema.
1 . P r e p a r a c i ó n

4. 4
Contiene varios banners publicitarios dispuestos dentro de un slide que puedes
activar gracias a los botones de navegación.
Una vez decididas las secciones que iba a tener la página web y teniendo claras las
tipografías y los colores que íbamos a utilizar para la misma, comenzamos a crearla.
2 . D e s a r r o l l o
0 1 . i n i c i o

5. 5
En ella se muestran las fechas de los diferentes eventos que se van a celebrar en el
país próximamente. (es una imagen)
0 2 . a g e n d a

6. 6
En esta sección mostramos una variedad de videos de los diferentes géneros que
trata la revista. Están incrustados en la página así no demoran en tiempo de carga
ni dependen de una web externa para su visualización.
En cada uno de ellos hemos realizado una portada en photoshop de 400x200px
con el nombre y el título de la canción y con uno de los colores corporativos de la
empresa, el amarillo y con tipografía también utilizada en el manual y revista.
0 3 . V I D E O S

7. 7
En el enlace de noticias se encuentra una imagen con un resumen de las noticias
más importantes de la revista. Más a fondo, se encuentra un desplegable desde
la palabra noticias del navegador donde están los distintos géneros y una noticia
detallada de cada uno de ellos, además de ir acompañado por una foto de la
noticia. Leva un titular con fondo amarillo para el resalte del mismo. .
0 4 . N O T I C I A S

8. 8
Es la sección que contiene la música de la revista, en ella dispuestas en modo de
lista con foto se encuentran los diversos géneros musicales. Para el acceso a la lista
o playlist solo tienes que pasar el ratón por encima de la imagen principal y saldrá
una lista de tres canciones por género. Posteriormente, en cada nombre hay un
reproductor que se puede presionar para escuchar dicha canción.
0 4 . P L A Y L I S T

9. 9
La página web está compuesta principalmente por tres partes; una cabecera com-
puesta por un banner con el logotipo de la revista y un navegador donde puedes
encontrar las diversas secciones que en un primer momento queríamos que tuviera
la web como: Inicio, Agenda, Noticias, Videos y Playslist.
En la segunda parte de la página y zona central se encuentra una tabla que recoge
dos banners publicitarios que enlazan con las webs de compra de los productos y
la zona principal de la página o “main” donde se sitúan los diferentes contenidos
que tiene la web según la sección.
Por último, en la parte inferior o “footer” se encuentra un enlace al Manual de
Identidad Corporativo de la empresa donde se puede consultar o descargar ya que
se abre en una ventana nueva para su visualización con mayor comodidad.
3 . R e c u r s o s d e l D i s e ñ o

10. 10
La elección de la tipografía ya la hicimos anteriormente en el Manual de Identidad
Corporativa, pero hay que tener en cuenta que a veces es complicado mantener
en la página web las mismas tipografías, así que añadimos dos nuevas que perfec-
tamente podrían ser secundarias.
Monserrat
La tipografía que recomendamos para uso interno de la página web es la ‘Mon-
serrat’, es una tipografía de palo seco, con un estilo minimalista y con una legibi-
lidad alta. Dentro de la página web, es utilizada para las secciones e incluso para
titulares más pequeños dentro de las mismas.
Comfortaa
Otra tipografía recomendada para uso interno en la página web es la ‘Comfor-
taa’, es de palo seco, de estilo simple y contemporáneo, con una alta legibilidad.
Será utilizada para el texto general.
4 . T i p o g r a f í a s

11. 11
Una vez teníamos elegido el logotipo de la marca, y realizada la revista, sabíamos
que también la página web contaría con los mismos colores corporativos y un par
más complementarios que añadimos en un apartado de la misma: exactamente en
el de las noticias.
5 . C o l o r e s E mp l e a d o s
01. El color negro forma parte de la Identidad Corporativa de la marca, además
de ser el principal. En la página web lo hemos usado como fondo en muchas oca-
siones y también como texto general.
02. El color amarillo forma parte de la Identidad Corporativa de la marca. El
amarillo, es un color brillante y alegre que se asocia con la parte intelectual de la
mente y la expresión de nuestros pensamientos. Este color lo hemos utilizado para
las redes sociales y también para los enlaces cuando cambian de color.
Pantone P
Process Black C
C0 M0 Y0 K100
R39 G3 B37
HTML #22525
Pantone
124 C
C7 M35 Y100 K0
R220 G168 B23
HTML #DCA817
03. El color naranja forma parte de la Identidad Corporativa de la marca. El na-
ranja, es un color que significa entusiasmo y emoción, cuando es más bien rojizo
denota pasión, y si es más anaranjado nos suscita sentimientos de fuerza, energía,
ambición y triunfo. En la página web solo se ha utilizado para algunas secciones al
igual que para el logotipo como explicamos en el Manual de Identidad.
Pantone orange
021 c
C0 M83 Y100 K0
R227 G81 B0
HTML #E35100

12. 12
03. El color rojo forma parte de la Identidad Corporativa de la marca. El color rojo
simboliza el poder y se le asocia con la vitalidad, aporta confianza en sí mismo,
coraje y valentía. Transmite a su vez una sensación de poder alcanzar las metas.
Dentro de la web, exactamente en la sección de las noticias, hemos utilizado siete
colores más para señalizar los diferentes generos musicales, a continuación haré
las referencias a sus colores.
Pantone
485 c
C5 M98 Y100 K0
R194 G40 B33
HTML #C22821
R210 G128 B142
C9 M66 Y31 K0
#ee768b
R227 G178 B132
C5 M39 Y52 K0
#e3b284
R245 G226 B115
C7 M13 Y69 K0
#f5e273
R143 G143 B191
C53 M46 Y6 K0
#8f8fbf
R210 G128 B142
C9 M66 Y31 K0
#ee768b
R154 G193 B149
C55 M5 Y54 K0
#9ael95
R206 G226 B211
C28 M3 Y24 K0
#cee2d3

13. 13
Las imágenes utilizadas para la web son de artistas nacionales e internacionales,
todas y cada una de ellas han sido retocadas con anterioridad con el photoshop y
algunas de ellas modificadas para hacerlas entrar en diversas formas.
6 . I m á g e n e s

14. 14
Al tratarse de una página web, su contenido es únicamente on-line, por lo tanto no
es necesario usar ningún tipo de material.
Y si como material entendemos, la manera de crear la misma, hemos usado el pro-
grama dreamweaver para crear la página web en html, con varias hojas de estilo
enlazadas y también el photoshop para el retoque de las fotos y algunos apartados
de la página.
7 . M a t e r i a l e s

15. 15
Una vez terminada la página web, podemos sacar conclusiones del trabajo que
hemos realizado. Al principio pensábamos que iba a ser más sencillo de lo que al
final nos resultó.
Hacer una página web, aunque no completa, es un arduo trabajo que requiere de
tiempo y muchas habilidades tanto a la hora de utilizar los programas de diseño,
retoque y maquetación como a la hora saber cómo incrustar en ella los valores
que la empresa quiere proyectar.
8 . C o n c l u s i o n e s