PRESENTACIÓN PÚBLICA

PROYECTO WEB
INTRODUCCIÓN

Sobre la Empresa:

Kanaloa es una empresa de moda juvenil, que abarca todos los ambitos
de la vida de sus clientas. El objetivo de Kanaloa es poner fin a la exclu-
sividad y altos precios asociada a las grandes marcas, para que de esta
manera casi cualquier persona pueda acceder a la exclusicidad que apor-
tan las grandes firmas de renombre, pero a un precio medio, y opteniendo
la misma calidad.
Puntos de trabajo:

-Moda Casual
- Moda Sport
- Catálogo
- Blog
- Eventos de moda y deporte
- Concursos
INTRODUCCIÓN

Porque una Web:

El proyecto consiste en la realizar una web adecuada a las necesidades de

la empresa y de sus clientes.
En nuestro caso en particular, necesitamos la web para:

- Promoción:
El cliente conocera nuestros productos de forma clara, sin necesidad de
desplazarse a la tienda física. Además de informarse y comentar sobre los
productos y calidad de nuestra marca.

- Imagen de marca:
Asentar la imágen de marca de forma internacional y nacional.

-Accesibilidad:
Es uso de internet esta generalizado en nuestras vidas, y es una forma facil
y rápida a la información
ANALISIS DEL SECTOR

Nuestra competencia:

Webs analizadas:

Cuatro grandes grupos a analizar:

- Webs Alta costura(son nuestra competencia directa).

-Webs de moda surfera
- Blogs de moda
- Webs revista de moda
- Webs moda media (zara, maximo dutti)

Se analizarán las webs corporativas. Dado la gran cantidad de webs en

este ampliio estudio, pondre solo dos ejemplos de cada ambito.

Lenguajes que utilizan:

- HTML, PHP, JQuery, JavaScript y Flash.
- Numero de Secciones.
- Contenido.
- Aspecto.
ANALISIS DEL SECTOR

Alta Costura

Zona informacion

Menu

Página completamente realizada en flash.

Consta de dos menus inferiores:
1- Selección de productos.
2- Subsecciones de información
 Alta Costura
DISEÑO DE LA WEB DIOR:

Web estatica, basada en el blanco y

negro.

Dos menus desplegables con una gran

variedad de opciones.

En la página principal nos encontramos

con una presentación en flash, además Menu
del despegue de un menu lateral izquier-
dos.
Segun la sección el color del background,
cambia de negro a un violeta, grisaceo.

El diseño es serio y poco dinámico.

Zona informacion
 Moda Surfera
DISEÑO DE LA WEB VOLCOM
Menu

Rescursos MUY explotados, demasiado

uso de recursos, fotograficos, de color,
tipograficos.
Sin una jerarquía clara.

Zona informacion
 ANALISIS DEL SECTOR
Moda Surfera
Menu
.DISEÑO DE LA WEB ROXY

Elemento flash jerarquizando.

Esteticamente coordial y seria para ser
una web dirigida a jovenes,.

Estructura de dos columnas.

Estructura simple.

Zona informacion
 ANALISIS DEL SECTOR
Blogs Moda
Menu
DISEÑO DE LA WEB LOOKBOOK

Estructura muy básica:

- Logotipo superior izquierda.

- Menu, inmediatamente despues.
- Publicidad
- Entradas, el blog alcanza mucha
altura.

Demasiado Scroll vertical

Zona informacion
 ANALISIS DEL SECTOR

Blogs Moda
DISEÑO DE LA WEB THE BLONDE SALAD

2 colunmas.

La columna de la izquierda publicidad.

La columna principal esta dedicada a las Menu
entradas de la blogger.

- Cabecera centrada.
- Menu, inmediatamente despues.

Publicidad Zona informacion

 ANALISIS DEL SECTOR

Revistas
DISEÑO DE LA WEB VOGUE Menu

En primer lugar el menu, compuesto

aparte por un pseudo menu.

Logotipo centrado

La estrucuta se compone de dos colum-

nas:

- Izquierda lo más destacado.

- Derecha noticias breves, y pequeños
destacados.

Estructura es clásica
Zona informacion
 ANALISIS DEL SECTOR

Revistas
DISEÑO DE LA WEB V
Menu
Estructura básica de tres columnas, no cambia.

La columna de la izquierda publicidad, y portadas de

ese número.

La colunma principal lo más destacado.

La columna de la derecha busquedas y más publicidad

- Cabecera superior izquierda, acompañado de
publicidad
- Menu, inmediatamente despues y otra barra
de opciones en la parte inferior de la pág.

Estructura, diferente a las demás propiamente de las

revistas y sitios de moda.

Zona informacion
Publicidad
 ANALISIS DEL SECTOR

Moda
DISEÑO DE LA WEB ZARA
Menu

- Logotipo izquierda.

- Menu vertical izquierda, desplegable

- Información centrada.

- Destacados columna derecha.

Zona informacion
 ANALISIS DEL SECTOR

Moda
DISEÑO DE LA WEB MAXIMO DUTTI
Menu
- Logotipo centrada

- Menú clásico horizontal

La colunma principal información.

La columna inferior, menu visual destacados

Zona informacion
 Quienes
Somos Contact Catalog Coleccio Destac Suscrip Registr Tienda Música Eventos Blog Legal Ofertas
Chanel
Dior
Zara

Kling
Maximo Dutti
Tommy Hilfiger
Ralph Lauren
DKNY
Prada
Louis Vuitton

Bimba & Lola

Mango
Look Book
Theblondesalad
Stylescrapbook
Theolivablog
V Magazine
Vogue
Elle
Marie Claire
Vanity Fair
Cosmo
ANALISIS DEL SECTOR

Conclusiones Competencia

1. El 80% de las webs dedicadas a la moda, tiene el logotipo en la parte

superior, y el menú debajo de este.
El otro 20% lo tiene en la parte izquierda de la pagina, y el logotipo en
medio.

2. Todos tienen una sección dedicada a la moda, (propia o no).

3. Hay secciones que no cambian en esencia, aunque si en nombre, la sec-

ción catálogo/moda, y contacto, eventos...

4. Noticias breves de moda

5. En todas predomina la imagen.

6. Se esceden algunas en la altura de la web.

7. Contradicción entre webs muy básicas simples y sencillas, con otras

desestrucutudas, con recursos muy explotados. Dificil usabilidad para
usuarios poco habituados al medio.
ANALISIS DEL SECTOR

Conclusiones

- La interfaz tiene que ser clara e intuitiva

- Tienda divida en dos secciones: casual y sport, y estas a su vez en seccio-

nes de producto para reducir el numero de clicks.

- Nos diferenciamos por incluir un blog donde nuestros usuarios dan su

opinion real sobre nosotros. Además de incorporar eventos de todo tipo,
incluyendo concursos propios de la empresa

Uso de las siguientes tecnologías:

- HTML
- JQuery
- CSS
- Flash
POSICIONAMIENTO

Posicionamiento

Kanaloa tiene en el mercado un puesto elevado, por encima de grandes

marcas conocidas por todos como son Zara, Massimo Dutti...
Pero debajo de grandes firmas como Prada, Dior.
Estariamos en una directa competencia con Bimba y Lola, Volcom.

1- Nos caracterizamos por tener un precio, razonable, con alta calidad,

siempre siguiendo las tendencias del momento, pero con un caracter propio
y sencillo.

2- Profesionales - Intentamos destacar en calidad e innovación.

3- Consecuentes - Somos responsables de nuestros productos.
4- Diferentes -Nuestra comunicación debe impactar.

Los valores de Kanaloa están en la base de todo lo que hacemos

PÚBLICO OBJETIVO

Público Objetivo

PÚBLICO OBJETIVO

Kanaloa va dirigido a mujeres entre 20 y 35 años solteras o con pareja.

Con una renta media-alta que les guste la moda y seguir las tendencias.

Con un nivel cultural medio-alto, residentes en grandes ciudades y con facil

acceso a internet.

Con un nivel social alto, vida muy activa y sin ningun tipo de complejo.

Que buscan moda mas exclusiva, pero mas barata que grandes firmas, les
gusta Zara, pero quieren mas exclusividad.

Quieren y buscan un intermedio entre calidad, precio y

exclusividad.

Que es precisamente lo que Kanaloa ofrece.

PUNTO FUERTE

Punto Fuerte

El punto fuerte de mi pagina web será el blog, junto con las opiniones de
nuestros clientes. Juntos con los eventos de nuestra web, que abarcan tan-
to deportes como desfiles de moda de Kanaloa, y concursos para jovenes
diseñadores, etc.. Para que nos conozcan como producto y como empresa.
LIBRO DE ESTILOS

Mapa Web

0. Home

1. Kanaloa

2. Tienda

2.1 Sport
2.2 Casual

3. Blog

4. Música

5. Eventos

5.1 Pasados
5.2 Actuales
LIBRO DE ESTILOS

Mapa Web

0. Home, página principal, contendra un pequeño resumen/esquema de

todos los contenidos de la pág.

1. Catálogo, campaña publicitaria de la temporada

2. Tienda, venta y visualizacion de toda nuestra gama de productos.

Clasificados: pantalones, bikinis...

3. Blog, nuestra clientas suben sus conjuntos, se asesoran...

4. Música, opción de abrir un reproductor, para escuchar música

seleccionada por Kanaloa.

5. Eventos, todo lo referente a moda y deporte, en los cuales participa

Kanaloa
LIBRO DE ESTILOS

Proporciones

-960 px Horizontal

-Uso Scrool Vertical

-Alineación Centrada
LIBRO DE ESTILOS

Proporciones

El uso de reticulas es fundamental para realizar un buen diseño web.

Reticula de Kanaloa:

- Fuente base: 12 px

- Columnas: 192

- Ancho columna: 5 px

- Medianil: 5 px
LIBRO DE ESTILOS
Reticula

960 px
5px 192 columnas
LIBRO DE ESTILOS

Menus
En el index nos encontramos dos tipos de menús para la web, para poste-
riormente en las demás secciones encontrarnos con tan solo el menú princi-
pal desplegable.

1º menú: Principal (desplegable)

2º menú: Recomendaciones
3º menú: Visual.

El index plantea tres tipos de menús distintos para la correcta estructura-

ción de la informacíon, para contribuir a una navegacion mas correcta y
clara.

El menú principal ordena los enlaces de arriba abajo, según su relevancia.

El menú recomendaciones es un menu con 3 opciones que va rotando perio-

dicamente, ademas de la posibilidad de cambiarlo el propio usuario, para
elegir el deseado.

El menú visual, es un recuadro con 9 imágenes, las cuales se iluminan al pa-

sar el ratón por encima, dando la posibilidad de dirigirte rápidamente a
esa sección.
LIBRO DE ESTILOS

Uso del color

Estos son los colores principales de la web de Kanaloa, y sus valores RGB
Todos los textos de la web iran de color blanco o rosa, dependiendo del
color de fondo.

En la elección del color no debemos olvidar que su fin primero es la legibi-

lidad tipográfica. Kanaloa debido a su bajo contenido en texto, predomina
el texto sobre fondo oscuro, aunque con excepciones como el en blog.

Predominan los colores de gama alta, y de un fuerte contraste con las ima-
genes y demás elementos de la página.

Negro Rosa Gris Blanco

R- 0 R- 231 R- 169 R- 255

G- 0 G- 79 G- 169 G- 255
B- 0 B- 149 B- 169 B- 255
LIBRO DE ESTILOS

Tipografía

Tipografias seleccionadas:

- Verdana 12 px; menu y “más”.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdeefghijklmnñopqrstuvwxyz

- Times 12 px; textos.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdeefghijklmnñopqrstuvwxyz
- ; titulos.
LIBRO DE ESTILOS

Recursos Gráficos

Index:

Recomendaciones: Flash 542x400 px

Las imagens van pasando manualmente.
LIBRO DE ESTILOS

Recursos Gráficos

Index:

Visual: Flash 390x400 px

LIBRO DE ESTILOS

Recursos Gráficos

Kanaloa:

Flash 960x610 px
LIBRO DE ESTILOS

Recursos Gráficos

Tienda:

Flash 960x700px
LIBRO DE ESTILOS

Recursos Gráficos

Eventos:

foto:340x637 px foto: 579x329 px

foto: 249x259 px foto: 302 px

CONCLUSIÓN

Conclusiones finales

- Es MUY importante analizar un gran número de webs, para descartar

malas ideas, y adquirir ideas originales y diferentes.

- Tener un buena reticula, que la vez que te establece limite, te permita

movilidad.

- Los bocetos previos, ayudan tanto a la concepción de la web, como des-

pues en su montaje en lenguaje html.

- Tener un buen briefing y libro de estilos es FUNDAMENTAL.

- Empezo siendo un quiero, para convertise en puedo, al final no es lo que

a primera hora queria establecer, pero con una pelea constante entre el
quiero y el puedo, algo se va logrando.

Por hacer:
- Música
- Blog
- Terminar demás enlaces