BRIEFING WEB

PROYECTO DE SEGUNDO
 ¿Porqué una página web?
Que puede ofrecer el site

El buzo musical necesita captar y dades diversas programadas por

fidelizar clientes. la tienda.
Hoy en dia practicamente todas La web servirá para reforzar la
las empresas tienen una página imagen corporativa de la tienda.
web. Se ha llegado a un punto
El fin último es crear un sitio web
donde la sociedad está acostum-
que sea útil tanto para los usuari-
brada a la inmediatez y la comodi-
os como para la tienda.
dad que ofrece internet. Es el me-
dio más rápido, barato y comodo
para informar, comunicar y darse
a conocer.
A través de la página web se podrá
llegar a aquellos clientes de otras
ciudades o de clientes que por
Resumen de necesidades:
cualquier razón no pueden o no
quieren ir a la tienda físca. Promocionar: eventos de la tienda
También se podrá informar al Informar: sobre productos nuevos
usuario sobre las novedades que
ofrece la tienda, tanto en cuanto Reforzar: la marca. Si no estas en internet, no
a lo que vende como las activi- existes
 Análisis de referencias

Para obtener una visión amplia Tiendas de música: Tiendas de música online:
del enterno, se ha hecho un análi-
sis en varios campos: Amoeba www.amazon.com
Cddrome
Sellos:
Marcapasos
Mushroom Pillow
Tiendas más generales: Elefant Records
Fnac Cactus Records
Borders

Barnes and Noble

 Análisis de referencias
¿Porqué estas páginas?
Amoeba
Es la tienda de música independi-
ente más grande del mundo.
Cddrome
Es una tienda en Madrid pareci-
ventas.
da a la del cliente. Una tienda de
música pequeña, independiente,
y con un trato familiar.
Marcapasos
La competencia directa de El
Buzo Musical.
Fnac
Tienda donde la gente suele ir a
comprar música en españa. Líder
Europea en la ventas. Cactus Records
Borders Es un sello discográfico de Madrid
que también tiene una tienda on-
Tienda donde la gente suele is a line, se ha escogido basicamente
comprar música en estados uni- como ejemplo de lo que no se de-
dos. Líder estadounidense en las bería hacer con esta página.
Mushroom Pillow
Barnes and Noble Sello de indiepop español, tiene al-
gunos de los grupos actuales más
La competencia de Borders. significativos del género del mo-
mento.
www.amazon.com
La tienda online más utilizada y Elefant Records
más conocida.
El sello de pop independiente más
grande e importante de España.
 Análisis de referencias
Amoeba

Conclusiones:
Negativo:
- la página es muy pesada, no
respira (fondo y cajas azules)

- elementos desacertados en el
diseño: sobras, trazos en las sub-
secciones

Positivo
-Incluir video en la sección de
música en directo.
 Análisis de referencias
Cddrome

Conclusiones
Positivo:
- Uso del color interesantes

- Buen uso de tipografía

Negativo:
- Demasiado simple, minimalista

- Básicamente solo es un catálogo

- Falta de aprovechamiento del

medio
 Análisis de referencias
Marcapasos

Conclusiones
De las páginas que he visto es la
que más cuida el diseño y la ima-
gen corporativa.

Negativo:
- Falta de información

- Utiliza un marco de colores al re-

dedor de las listas de productos
que no tiene nada que ver con la
imagen de la tienda.

Positivo:
- cuidado de imagen corporativo

- header que cambia

- utilización del color corporativo

para destacar los más importante
 Análisis de referencias
Fnac

Conclusiones
Negativo:
Para escuchar parte de una can-
ción hay que hacer clic sobre un
icono que a mi ni siquiera me
aparece. Cuando he ido a la ayu-
da de la página ponía que tenía
que instalar Real Player, pero aún
así no me salía el icono y no he
podido escuchar nada.

Positivo:
- Buen uso el color corporativo
- Buena organización de mucha
información
- Consistencia en todas las sec-
ciones
- Breadcrumbs
 Análisis de referencias
Borders

Conclusiones
Negativo:
- Uso excesivo de breadcrumbs,
no hace falta poner la misma in-
formación dos veces.
- La línea que te indica en que
sección del top menú te encuen-
tras es casi inapreciable.
- El banner de GET FRE SHIP-
PING es excesivamente grande

Positivo:
- Uso inteligente del color corpo-
rativo
- Precio de lo que tienes en el car-
rito y cuantos elementos llevas
siempre está visible.
- Consistencia de estructura
 Análisis de referencias
Barnes and Noble

Conclusiones
Negativo:
- el footer es muy grande
- a la hora de comprar salen los
botones de seguir comprando y
seguir con la tienda dos veces, es
redundante y no hace falta
- demasiada información en la
presentación del disco

Positivo:
- el usuario puede interactuar es-
cribiendo comentarios o haciendo
un ranking de los discos
- proporcionan mucha información
sobre los discos
- se puede escuchar la música
 Análisis de referencias
www.amazon.com

Conclusiones
Negativo:
- No se interesan por el diseño

- el top menú es muy discreto y

casi no se aprecia

Positivo:
- buen uso de los colores corpo-
rativos

- aprovecha bien el medio (músi-

ca, video, interactividad de usu-
arios)
 Análisis de referencias
Cactus Records

Negativo:
- Falta de diseño: cajas de texto
demasiado largos, disposición de
imágenes al azar (entrevista)

- Falta de información

- Parece un blog

Positivo:
- el uso de la tipografía y el color
corporativo le da personalidad.
 Análisis de referencias
Mushroom Pillow

Conclusiones
Negativo:
- Poca visibilidad de logotipo a
veces

- El cambio de fotografía resulta

molesto

- El tiempo de carga es excesivo

a veces

Positivo:
- Aprovechan bastante el medio

- Opción de comprar la música

para iTunes

- Buen uso de los colores corpo-

rativos
 Análisis de referencias
Elefant Records

Conclusiones
Negativo:
- Falta de identidad corporativa

- Falta de imágenes
Positivo:
- Código de color

- Las ilustraciones le da person-

alidad

- Posibilidad de escuchar la músi-

ca y descargar videos
 Análisis de referencia
Tabla de contenidos

Tienda Directos Noticias Localización Merch. Novedades Carrito Quien somos Contacto Redes Sociales Blog Videos Ofertas Recomendaciones Descargas
Amoeba
Cd.drome
Cactus Rec.
Marcapasos
M. Pillow
Elefant
Fnac
Borders
B&N
Amazon
 Posicionamiento por medio de la web

Para que sea un proyecto satis- - conexión con las redes sociales
factorio para ambas partes, algu-
nas cuestiones a tener en cuenta - interacción entre la empresa y
son: el usuario

- acceso de información y busque- Principales Productos:

das rápidas
discos
- minimización del número de
clics para acceder a lo que se merchandising
está buscando

- evitar grandes cantidades de

texto

- párrafos cortos

- navegación intuitiva

- evitar la sobrecarga visual

- coherencia con la identidad cor-

porativa
 Usuarios

Conocen internet y lo usan con

frecuencia.

Están acostumbrados a comprar

música y ropa online.

Conocen y recurren a la web

como una fuente de consulta y
comunicación.

Por tanto, tienen expectativas al-

tas y esperan un sitio nuevo, fácil
y rapido.
 Necesidades de la empresa vs. Necesidades de usuario

Empresa: Usuarios:
- fidelización de clientes - información sobre discos

- ampliación - compra de discos/merchandis-

ing
- aumentar ventas
- información sobre novedades
- toma de contacto con los clientes
- información sobre eventos pro-
pios de la tienda
 Conclusiones

Secciones más frequentes Propuesta: Herramientas necesarias:

- Home - html
Servicios que ofrecerá la
- Tienda página - css
- Novedades - escuchar música - flash
- Carrito - información de grupos - prestashop (tienda online)
- Quien somos - redes sociales -jQuery
- Contacto - tienda online

- Recomendaciones - eventos de la tienda

- Descargas/escuchar

- Merchandising

- Ofertas
 Conclusiones

Posibles secciones y sub- - Contacto

secciones
- Agenda
- Home
- Tienda
- Discos Nacionales

- Discos Internacionales

- Recomendaciones

- Novedades

- Ofertas

-Merchandising
- Quien Somos
LIBRO DE ESTILOS WEB
PROYECTO DE SEGUNDO
Marta Delclós Gómez-Morán
 1. Estructura definitiva de la web

Despues de hacer varias estruc- En el primer nivel tenemos la 1. TIENDA

turas en árbol valorando los difer- tienda,
entes niveles de importancia de
En el segundo nivel tenemos la Tienda Merchandising
las distintas secciones, se ha or-
agenda
ganizado la estructura de la web
en función a las secciones que Y en un tercer nivel está la infor- Nacional. Internacional. Recom. Novedad. Ofertas
más se visitarán. mación sobre la tienda en sí (el
contacto y quien somos)
Habrá dos formas de acceder a la
información: 2.
AGENDA
El menú y los submenus
Imágenes y destacados
( solo de las secciones
más importantes en la 3.
página de home ) INFO.

¿quien? contacto suscríbete

2. Punto fuerte de la web

El punto fuerte de la página web es la tienda online.

El objetivo de la web es en primer lugar, aumentar las ventas, con
lo cuál hay que asegurarse de que esta parte de la web esté lo más
claro, limpio, fácil y agradable como sea posible.
 3. Distribución de espacios

Tipología web
- la estructura de la página web tendrá
proporciones fijas
- sin scroll
- fondo blanco
- menú lateral
- top menú
- footer
 3. Distribución de espacios
Estructura de la web

La página consiste en dos partes: la

parte de la tienda online y la parte de
fidelización (agenda, suscripción y con-
tacto)
Las secciones principales se encuen-
tran en el top menú. Las subsecciones
de la tienda se encuentran en el menú
lateral. La información sobre la tienda
se encuentra en el footer.

Dimensiones:
815ppp x 500ppp

La retícula:
horizontal: 5 columnas con 10ppp sep-
arando cada uno
vertical: 6 columnas con 10ppp sepa-
rando cada uno
 3. Distribución de espacios
Estructura de la web

Elementos Fijos:
Cabecera
Menú Lateral
Footer
 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del home.

7 bloques:
La Cabecera
El menú lateral
Una ventana flash con 5 discos
destacados
Un disco destacado de la semana
La agenda
La entrevista principal de la revista
hidrofónica
El footer
CATALOGO MERCH AGENDA
Tienda de música indiepop

buscar

NACIONAL

INTERNACIONAL

8€ POSSOPOTARE
CONCIERTO
Un año encerrados en el
estudio da para mucho o al entrevistamos:
NOVEDADES
menos da para entregar LOS PLANETAS
OFERTAS Tienda de música indiepop
un puñado de canciones
inmortales que, aunque a
RECOMENDACIONES estas alturas de la jugada
parezca imposible, están
destinadas a convertirse
en nuevos clásicos de su
repertorio. Y van... ¡Ah! y

MAYO 3€
26de
de nuevo con el flamenco

articulo de la
semana
por montera, así que
bienvenidos a “Una ópera
egipcia” de tomo y lomo

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del contac-

to y la página de suscripción

5 bloques:
La cabecera
El menú lateral
Titulo de la página
Caja de formulario
Footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

CONTACTA
buscar

Cuentanos lo que piensas:

NACIONAL

INTERNACIONAL

NOVEDADES

OFERTAS

RECOMENDACIONES

Emperador Michael 22 Granada

enviar
tel. 958112743 fax. 958123654
info@elbuzomusical.com

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula de la

agenda.

4 bloques:
La cabecera
El menú lateral
El calendario
Footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

buscar
MAYO 2011
NACIONAL
1
INTERNACIONAL
2 3 4 5 6 7 8
NOVEDADES

OFERTAS 9 10 11 12 13 14 15
RECOMENDACIONES
16 17 18 19 20 21 22

23 24 25 26 27 28 29

30 31

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del home

del catálogo.

7 bloques:
La Cabecera
El menú lateral
Titulo de la página
Enlace a las recomendaciones
Enlace a las novedades
Enlace a las ofertas
El footer CATALOGO MERCH AGENDA
Tienda de música indiepop

QUE
PUEDES
ESTA
buscar

CATALOGO
NACIONAL

INTERNACIONAL

NOVEDADES
recomendaciones nuevas ofertas novedades
OFERTAS

RECOMENDACIONES

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del catál-

ogo de discos.

5 bloques:
La cabecera
El menú lateral
8 caratulas de discos en grande
Un pasador de tres cajas, cada
uno con 8 caratulas cada uno
Footer

Al mover el ratón encima de una de las

CATALOGO MERCH AGENDA CATALOGO MERCH AGENDA
Tienda de música indiepop Tienda de música indiepop

fichas, sale un cartel con el nombre del buscar buscar

artista y el nombre del disco. NACIONAL NACIONAL

La Herida Universal
Julio de la Rosa

INTERNACIONAL INTERNACIONAL

NOVEDADES NOVEDADES

OFERTAS OFERTAS

RECOMENDACIONES RECOMENDACIONES

ELBUZOMUSICAL CONTACTO SUSCRÌBETE ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula de las

recomendaciones, novedades, ofertas

5 bloques:
La cabecera
El menú lateral
Título de la página
Los 3 discos destacados
Footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

NOVEDADES
SEMANA
buscar

NACIONAL

INTERNACIONAL
15,99€
NOVEDADES Diamantes El Columpio Asesino
OFERTAS

RECOMENDACIONES

F
16,99€ People’s Key A la hora del sol 9,99€
Bright Eyes Maga

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula de la infor-

mación del producto.

7 bloques:
La cabecera
El menú lateral
La caratula del disco en grande
Otros discos de interés
Información del disco
Un player para escuchar alguna
canción del disco
CATALOGO MERCH AGENDA

Footer
Tienda de música indiepop

La Herida Universal
Julio de la Rosa
buscar
12.99€
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean imperdiet tortor vel neque commodo sed
NACIONAL
pretium nulla cursus. Integer vitae felis in nisi
ullamcorper convallis quis vitae neque. Nullam non lacus
INTERNACIONAL
sit amet lectus facilisis venenatis. Aenean a lectus orci.
Integer lectus elit, semper id mattis a, laoreet in felis.
NOVEDADES
Integer aliquam egestas urna non venenatis. Vivamus
OFERTAS scelerisque augue id neque rhoncus quis viverra purus
eleifend. Proin suscipit fermentum tristique. Sed at eros
RECOMENDACIONES molestie lectus mollis elementum. In sodales, tortor id
consectetur placerat, dolor lacus semper est, nec rutrum

Si te gusta, también te puede interesar:

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del carrito

de la compra.

4 bloques:
La Cabecera
El menú lateral
La información de la compra
El footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

producto cantidad importe eliminar

La Herida Universal 1 12.99€ X
buscar Julio de la Rosa

NACIONAL
La Herida Universal 1 12.99€ X
INTERNACIONAL
Julio de la Rosa
NOVEDADES

OFERTAS

RECOMENDACIONES
total de productos 25.98€
gastos de envio 3.90€
TOTAL 29.88€

pagar

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del home

del merchandising.

5 bloques:
La Cabecera
El menú lateral
Titulo de la página
Enlaces directos a la información
sobre 4 articulos diferentes
El footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

buscar

ULTIMO
NACIONAL

INTERNACIONAL
MERCHANDISING
NOVEDADES Tienda de música indiepop

OFERTAS

RECOMENDACIONES

Tiend
a de
músic
a indiep
op

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 3. Distribución de espacios
Diferentes módulos

Aquí podemos ver la retícula del catálo-

go de merchandising.

4 bloques:
La cabecera
El menú lateral
Un carrousel de 6 productos de
merchandising
Footer

CATALOGO MERCH AGENDA

Tienda de música indiepop

buscar
Tienda de música indiepop

Tienda de música indiepop

NACIONAL

INTERNACIONAL

NOVEDADES

OFERTAS

RECOMENDACIONES
Tienda de música indiepop

Tienda de música indiepop Tiend

a de
músic
a indiep
op

ELBUZOMUSICAL CONTACTO SUSCRÌBETE

 4. Sistema de navegación
Menú y Submenú

HOME El menú lateral en el lado izquierdo que

contiene todas las subsecciones del
CATALOGO
catálogo.
Nacionales
El top menú que contiene todas las sec-
Internacionales ciones relacionadas con la fidelización
de los clientes.
Novedades
El footer contiene información terciaria
Recomendaciones
Ofertas
MERCHANDISING
Tienda
Grupos
AGENDA
SUSCRIBETE
CONTACTO
ELBUZOMUSICAL

 5. Uso del color

1. En clave alta
2. Fotografías en color
3. Colores principales:
Negro
Gris 80%
4. Color funcional en botones, pestañas, separadores
y enlaces
Naranja R:247 G:146 B:28
Azúl R:28 G:103 B:145
 5. Uso del color
Colores de secciones

Las diferente secciones tienen diferentes colores asociados. Estos cambios de

color se producirán en el borde del submenú, en los titulos de las páginas, y en
el tono general de las páginas, haciendo que algunas sean más frias o otras más
calidas.
Recomendaciones R:52 G:170 B:93 Tienda de música indiepop
CATALOGO MERCH AGENDA

Ofertas R:224 G:17 B:106 OFERTAS

SEMANA
buscar

Novedades R:77 G:87 B:165

NACIONAL

Super 8
INTERNACIONAL
6,99€
NOVEDADES Los Planetas

R:152 G:23 B:35

Nacionales OFERTAS

RECOMENDACIONES

Internacionales R:17 G:86 B:42

5,99€ Manel Toro 9,99€
CATALOGO MERC

Agenda R:247 G:146 B:28

Manel El Columpio Asesino
Tienda de música indiepop
ELBUZOMUSICAL CONTACTO SUSCRÌBETE

Catálogo, Merchandising R:28 G:103 B:145 CATALOGO MERCH AGENDA

buscar
Tienda de música indiepop
La Herida Universal
NACIONAL

SEMANA
Julio de la Rosa

INTERNACIONAL

NOVEDADES

OFERTAS

RECOMENDACIONES
buscar

NACIONAL

INTERNACIONAL
RECOMENDAMOS ELB

14,99€
6. Usos tipográficos

SECCIONES PRINCIPALES: ARIAL BLACK 16 PTS TRACK: -100

SUBSECCIONES: ARIAL BLACK 12 PTS TRACK: -75

TEXTOS: Verdana (11pts) gris 80%

NOMBRE DE DISCO: ARIAL BLACK 16 PTS TRACK: -100

NOMBRE DE ARTISTA: ARIAL BLACK 14 PTS TRACK: -100 GRIS
80%
PRECIO: ARIAL BLACK 12 PTS TRACK: -75
AGENDA:
FECHAS: ARIAL BLACK 16 PTS TRACK: -100
INFORMACIÓN: Verdana (11pts) gris 80%
 7. Recursos Gráficos

1. Pasadores

2. Botón buscador buscar

3. Carrito de la compra

4. Marca sección del top menú

5. Botón formularios