Proyecto Web

EL CLIENTE

INTRO Things es una empresa que se dedica a la creación de

BRIEFING peluches y accesorios de forma artesanal.
¿Y para qué una También realiza pedidos de forma customizada.
web?
¿Qué hace la compe-
tencia?
Posicionamiento Things quieres una web para su empresa, así que empiezo
Público objetivo a hacer el trabajo...
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
BRIEFING
 ¿Y PARA QUÉ UNA WEB?

INTRO Things, aspira por encima de todo llegar a ser una marca iternacional.
Hay es dónde entra en juego la www:
BRIEFING
¿Y para qué una - Llegar a muchas partes del mundo, mucho más de lo que
web? se podría esperar si sólo se tiene una tienda física.
¿Qué hace la compe-
- Se puede vender directamente desde allí y recibir pedidos, de
tencia?
forma mucho más rápida que a base de ir a la tienda física.
Posicionamiento
Público objetivo - Promoción: Una marca con aspiraciones internacionales sin
Empresa vs Usuario web no se le augura un gran futuro. Things necesita llegar a todo el
mundo.
LIBRO DE
ESTILOS - Información para los clientes: Los clientes podrán estar al
tanto de lo que se cuece en Things, y seguir los eventos que patro-
Arquitectura de la
cine y los nuevos productos que van llegando a la marca.
Información
Aspectos competitivos . Comercio electrónico: Abrirá muchas puertas a Things.
Espacios
- Fidelización e incluso descubrimiento de nuevos clientes.
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?

No hay competencia directa, pero nos movemos por

INTRO webs que tengan que ver con lo “handmade”:

BRIEFING - BLOGS: La mayoría de artesanos lo tienen

¿Y para qué una como forma de promoción y puerta de acce-
s d e c h u .b l o g spot.com
web? so a sus pequeñas tiendas virtuales. cosa
¿Qué hace la www.etsy.com
competencia? - SITIOS WEBS “LUGARES DE ENCUEN- a.com
www.dawand
Posicionamiento TRO“: Webs que ofrecen una tienda virtual
w .s t o k s d id a ctic.com
ww
Público objetivo a artesanos por pocas comisiones o incluso om
www.sanrio.c d e n e k ane.com
Empresa vs Usuario gratis. a c io n
www.lahabit
LIBRO DE - MARCAS: Marcas de peluches y muñecos, t.eu
www.kidrobo rt.com
ESTILOS con su merchandising. y p l a s t ic h e a
www.m
Arquitectura de la - JUGUETES DE VINILO: Un gran mundo vos.nl
Información www.mariska
del cual existen muchos diseñadores.
a y p a p e r c r ane.com
Aspectos competitivos www.m
Espacios “Haz tu propio muñeco“
Sistema de Navegación - HECHO A MANO: Gente o comunidades
Color de gente que cose y teje sus muñecos y los
Tipografías exponen la venta.
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
cosasdechu.blogspot.com Diseño: ancho fijo Tamaño: 969 px y scroll
BLOGS
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
cosasdechu.blogspot.com Diseño: ancho fijo Tamaño: 969 px y scroll
BLOGS
INTRO
BRIEFING
¿Y para qué una
+ Limpieza, fácil utiliza-
web? ción
¿Qué hace la
competencia?
- No deja de ser un
blog...limitaciones
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios - Basados en Wordpress o Blogger.
Sistema de Navegación - 2 columnas, una para contenidos y otra para servicios.
Color
Tipografías
- Sirve para promoción
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
LUGARES DE www.etsy.com Diseño: ancho fijo Tamaño: 996px y scroll
ENCUENTRO
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
LUGARES DE www.etsy.com Diseño: ancho fijo Tamaño: 996px y scroll
ENCUENTRO
INTRO
BRIEFING
¿Y para qué una
+ Gran cantidad de conte-
web? nidos perfectamente orde-
¿Qué hace la nados por color, tipo...
competencia?
Diseño limpio y ordenado.
Posicionamiento
Con ilustraciones.
Público objetivo
Empresa vs Usuario - Sólo te permite hacer
una tienda, no crear un
LIBRO DE sitio web. Además cobran
ESTILOS comisión por venta...
Arquitectura de la
Información
Aspectos competitivos
Espacios - Web que te permite crear una tienda para vender cosas hechas a mano
Sistema de Navegación - 2 columnas. La principal a la derecha para galeria de trabajos, izquierda para un menú.
Color Cabecera con menú principal desplegable.
Tipografías
- Se parte en dos divisiones.
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
LUGARES DE www.dawanda.com Diseño: ancho fijo Tamaño: 983 px y scroll
ENCUENTRO
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
LUGARES DE www.dawanda.com Diseño: ancho fijo Tamaño: 983 px y scroll
ENCUENTRO
INTRO
BRIEFING
¿Y para qué una
+ Búsqueda rápida de
web? contenidos.
¿Qué hace la
competencia?
- La colocación de imáge-
nes dan un aspecto algo
Posicionamiento
caótico.
Público objetivo
Empresa vs Usuario Tiene scroll horizontal.

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios - Permite hacer tu tienda igual que Etsy.
Sistema de Navegación - Organización parecida a Etsy, también a pantalla doble (la segunda división con strea-
Color ming)
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
Tamaño: 1008 px
MARCAS www.stoksdidactic.com Diseño: ancho fijo
y scroll

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
Tamaño: 1008 px
MARCAS www.stoksdidactic.com Diseño: ancho fijo
y scroll

INTRO
BRIEFING
¿Y para qué una
+ Simple y efectiva. Fácil
web? navegación.
¿Qué hace la Coherencia entre las imá-
competencia?
genes que contiene.
Posicionamiento
Público objetivo CSS bien utilizado
Empresa vs Usuario - No tiene apenas ele-
LIBRO DE mentos corporativos.

ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios - Venta y promoción de juguetes de niños
Sistema de Navegación - Organizado en 4 columnas principales
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
MARCAS www.sanrio.com Diseño: ancho fijo Tamaño: 975 px y scroll

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
MARCAS www.stoksdidactic.com Diseño: ancho fijo Tamaño: 975 px y scroll

INTRO
BRIEFING
¿Y para qué una
+ Deja claro la imágen de
web? marca ante todo.
¿Qué hace la
competencia?
- Demasiadas cosas que
se mueven, recursos gráfi-
Posicionamiento
cos que agobian.
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios - Web de personajes como “Hello Kittie“ y sus amigos.
Sistema de Navegación - Cabecera principal con un menú.
Color
Tipografías
- Imágenes promocionales de sus productos en destacados del home.
Recursos Gráficos - Cantidad de elementos de imágen de marca (ilustraciones, gifs, color...)
 ¿QUÉ HACE LA COMPETENCIA?
MARCAS www.lahabitacióndenekane.com Diseño: ancho fijo Tamaño: 968 px

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
MARCAS www.lahabitacióndenekane.com Diseño: ancho fijo Tamaño: 968 px

INTRO
BRIEFING
¿Y para qué una
+ Alta interactividad con
web? el usuario (los botones
¿Qué hace la están escondidos).
competencia?
Alta calidad gráfica.
Posicionamiento
Público objetivo - Navegación complicada
Empresa vs Usuario (no permite ir atrás y hay
que buscar dónde se pue-
LIBRO DE de clikear)
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios - Web de las marcas de peluches y merchandising de “la habitación de nekane“
Sistema de Navegación - Hecha enteramente en flash.
Color
Tipografías
- Ilustraciones en todas las pantallas.
Recursos Gráficos - Tiene tienda a parte.
 ¿QUÉ HACE LA COMPETENCIA?
www.kidrobot.eu Diseño: ancho fijo Tamaño: 930 px y scroll
VINILO
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
www.kidrobot.eu Diseño: ancho fijo Tamaño: 930 px y scroll
VINILO
INTRO
BRIEFING
¿Y para qué una
+ Buen uso de CSS, clari-
web? dad, navegación sencilla.
¿Qué hace la
competencia?
- Pocos elementos de
marca.
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios -Web de muñecos de vinilo, muñecos que se venden en blanco y dseñadores diferentes los
Sistema de Navegación pintan y customizan
Color - Se venden obras, se dan a conocer a los diseñadores y también se informa de eventos
Tipografías relacionados.
Recursos Gráficos
- 3 columnas.
 ¿QUÉ HACE LA COMPETENCIA?
VINILO
www.myplasticheart.com Diseño: ancho fijo Tamaño: 1000 px y
scroll
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
VINILO
www.myplasticheart.com Diseño: ancho fijo Tamaño: 1000 px y
scroll
INTRO
BRIEFING
¿Y para qué una
+ Coherencia y branding.
web? Simplicidad y buen diseño,
¿Qué hace la fácil navegacion.
competencia?
Posicionamiento
- Se limita a ser más
tienda que otra cosa
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios -Web de muñecos de coleccionista. Galería y venta.
Sistema de Navegación - 3 columnas desiguales, menú, contenido e información accesoria
Color
Tipografías
- 3 columnas.
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
HECHO A www.mariskavos.nl Diseño: ancho fijo Tamaño: 707 px y scroll
MANO
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
HECHO A www.mariskavos.nl Diseño: ancho fijo Tamaño: 707 px y scroll
MANO
INTRO
BRIEFING
¿Y para qué una
+ Intenta poner cierto
web? orden al contenido y dar
¿Qué hace la imagen de marca con las
competencia? ilustraciones.
Posicionamiento
Público objetivo
- Todo está un poco “cu-
tre“.
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios -Web tipo blog, seguramente hecha con plantilla.
Sistema de Navegación - Contiene tienda y novedades.
Color
Tipografías
- 3 columnas.
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
HECHO A www.mypapercrane.com Diseño: ancho fijo Tamaño: 800 px y scroll
MANO
INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?
HECHO A www.mypapercrane.com Diseño: ancho fijo Tamaño: 800 px y scroll
MANO
INTRO
BRIEFING
¿Y para qué una
+ Imágenes bien tratadas
web? - Diseño brilla por su
¿Qué hace la ausencia.
competencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios -Parecida a la anterior. Montada en una plantilla.
Sistema de Navegación - Enlace al blog de la artesana y a una tienda en Etsy
Color
Tipografías
- 2 columnas.
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?

quienes contacto galeria blog tienda registro foro artistas eventos

INTRO Cosas de chu
BRIEFING Etsy
¿Y para qué una Dawanda
web?
Stoksdidactic
¿Qué hace la
competencia? Sanrio
La habitación
Posicionamiento de Nekane
Público objetivo Kid robot
Empresa vs Usuario My plastic

LIBRO DE Mariskavos

My paper
ESTILOS
Arquitectura de la
Información Comparativa de secciones comunes.
Aspectos competitivos
Destaca como comunes: Registro para usuarios, tienda, quienes somos, contacto.
Espacios
Sistema de Navegación Destaca como no comunes : Foro, artistas, informacion sobre eventos o blog.
Color
Tipografías
Recursos Gráficos
 ¿QUÉ HACE LA COMPETENCIA?

Diseño
INTRO Recursos
Secciones Branding Experiencia e-commerce Color Maquetación Textos
Gráficos
BRIEFING Cosas de chu Pocas Regular
♥♥♥ Si (etsy)
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
¿Y para qué una
web? Etsy Muchas Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
¿Qué hace la Dawanda Muchas Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
competencia?
Posicionamiento
Stoksdidactic Muchas Regular
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
Público objetivo
Sanrio Muchas Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
Empresa vs Usuario
La habitación
de Nekane
Pocas Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
LIBRO DE
Kid robot Medias Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
ESTILOS My plastic Muchas Bien
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
Arquitectura de la
Mariskavos Pocas Regular
♥♥♥ Si (etsy)
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
Información My paper Pocas Regular
♥♥♥ Si
♥♥♥ ♥♥♥ ♥♥♥ ♥♥♥
Aspectos competitivos
Espacios Comparativa GENERAL Blog
Sistema de Navegación Destaco como webs que tienen algo importante para imitar a Etsy, Sitios de encuentro
Color Kidrobot y La Habitación de Nekane. Marcas
Tipografías Juguetes vinilo
Recursos Gráficos Hecho a mano
 POSICIONAMIENTO DE LA EMPRESA

- Alejarse de lo mal diseñado, que dé desconfianza:

INTRO Se quiere vender los productos
BRIEFING - Branding: Que se note la imagen de marca en cada rincón
¿Y para qué una de cada página del site
web?
¿Qué hace la compe- - Elementos gráficos: Muchas fotos y elementos que a
tencia? parte de dar branding, también ayude a la visualización de
Posicionamiento los productos
Público objetivo - Información: Eventos, blog...
Empresa vs Usuario
. Comercio electrónico: Tienda de Things.
LIBRO DE
- Posibilidad de compartir mediante las redes sociales.
ESTILOS
Arquitectura de la
- Feedback: Se quiere saber la satisfacción del comprador
Información con esta marca.
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 PÚBLICO OBJETIVO

Personas que:
INTRO
- Les guste lo hecho a mano, lo vintage, que sean de-
BRIEFING tallistas...
¿Y para qué una
web? -Que se relaciones con internet de forma asidua, para
¿Qué hace la compe-
leer blogs, redes sociales, comprar. buscar información...
tencia?
Posicionamiento
Público objetivo - Se entienden, por lo tanto,3 target diferentes:
Empresa vs Usuario ◊ Los que buscan un regalo original, algo que no sea
LIBRO DE lo típico.
ESTILOS ◊ Los propios artistas que trabajan para Things y que
quieren ver sus trabajos publicados.
Arquitectura de la
Información ◊ Los crafters que quieren información sobre things, los
Aspectos competitivos tutoriales que hay en su web, conocer a los artistas...los
Espacios que miran pero no compran
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ¿QUÉ QUIERE CADA UNO?

INTRO
BRIEFING
¿Y para qué una
web?
Empresa vs Cliente
¿Qué hace la compe-
tencia?
Posicionamiento - Vender productos - Información sobre lo que va a com-
Público objetivo
prar
- Promoción de sus productos
Empresa vs - Posibilidad de contacto directo con la
Usuario - Fidelización y descubrimiento de
marca para hacer el encargo
clientes
LIBRO DE
- Recibir información sobre su encargo
ESTILOS - Feedback de los clientes
(fotos..)
Arquitectura de la
- Llegar a donde la tienda física no
Información - Información sobre los artistas
Aspectos competitivos
llega
- Facilidad de compra
Espacios
Sistema de Navegación - Información sobre eventos
Color
Tipografías
Recursos Gráficos
LIBRO DE
ESTILOS
 ¿QUÉ LE INTERESA A CADA TIPO DE TARGET?

THINGS Se agrupa la información

INTRO en 4 tipos:
INFO CRAFT
BRIEFING
PRODUCTOS THINGS
¿Y para qué una
web?
ARTISTAS
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo Crafter Artista Comprador
Empresa vs Usuario

LIBRO DE
ESTILOS
Secciones principales
Arquitectura de SECCIONES: - Artistas
la Información - ¿Quienes somos?
- Tienda - Contacto
Aspectos competitivos
- Catálogo (accesorios y - Noticias (Blog)
Espacios - Tutoriales
peluche)
Sistema de Navegación - Novedades - Ofertas
Color
Tipografías
Recursos Gráficos
 ¿QUÉ LE INTERESA A CADA TIPO DE TARGET?

EMPRESA
INTRO
BRIEFING
¿Y para qué una
¿Quienes somos? Contacto Catálogo Artistas
Nivel 1
web?
¿Qué hace la compe-
tencia?
Tienda Ofertas
Nivel 2
Posicionamiento
Público objetivo Nivel 3 Noticias Tutoriales Novedades
Empresa vs Usuario

LIBRO DE COMPRADOR
ESTILOS
Arquitectura de
la Información Tienda Ofertas Novedades Catálogo
Nivel 1
Aspectos competitivos
Espacios ¿Quienes somos? Contacto Artistas
Nivel 2
Sistema de Navegación
Color
Nivel 3 Noticias Tutoriales
Tipografías
Recursos Gráficos
 ¿QUÉ LE INTERESA A CADA TIPO DE TARGET?

INTRO ARTISTA
BRIEFING
¿Y para qué una
web?
Artistas Contacto Catálogo ¿Quienes somos?
Nivel 1
¿Qué hace la compe-
tencia?
Noticias Tienda
Posicionamiento Nivel 2
Público objetivo
Empresa vs Usuario Nivel 3 Ofertas Tutoriales Novedades

LIBRO DE
ESTILOS CRAFTER
Arquitectura de
la Información
Aspectos competitivos
¿Quienes somos? Noticias Catálogo Tutoriales
Nivel 1
Espacios
Sistema de Navegación Contacto Artistas
Nivel 2
Color
Tipografías
Nivel 3 Ofertas Tienda Novedades
Recursos Gráficos
 ARQUITECTURA DE LA INFORMACIÓN

INTRO 1. THINGS 4. TUTORIALES

BRIEFING ¿Qué es Things? Proyectos
¿Y para qué una Contacto Mándanos el tuyo
web?
¿Qué hace la compe- FAQ
tencia?
5. BLOG
Posicionamiento
Público objetivo
2. ARTISTAS (En el Blog se incluirá las noveda-
des y las noticias del mundo Craft)
Empresa vs Usuario
Artistas Things
LIBRO DE ¿Quieres trabajar con nosotros? 6. TIENDA
ESTILOS

Arquitectura de
la Información 3. CATÁLOGO DE PRODUCTOS Redes Sociales
Aspectos competitivos
Espacios
Accesorios RSS
Sistema de Navegación Peluches Boletín (Newsletter)
Color
Pedidos custom Política legal
Tipografías
Recursos Gráficos Formas de pago y gastos de envío
 ARQUITECTURA DE LA INFORMACIÓN

INTRO
¿Qué hace falta para llenar la web?
BRIEFING Como mínimo:
¿Y para qué una
web?
¿Qué hace la compe- - Sección artistas: 3 personas, con muestras de su trabajo (3
tencia? fotos) y alguna dirección y una pequeña bio.
Posicionamiento
Público objetivo
- Productos: 3 peluches y 3 accesorios
Empresa vs Usuario - Blog: 5 noticias
LIBRO DE - Para el pase de fotografía del home: 1 oferta, 1 artistas, un
ESTILOS producto como novedad.

Arquitectura de - Tutoriales: 4 tutoriales (a ser posible, dos con 4 fotos y otros

la Información dos con vídeo). 3 personas con versiones de algun tutorial. 1
Aspectos competitivos foto de cada uno.
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 OBJETIVOS COMUNICATIVOS

1. THINGS EN LA WEB: Promover la marca a través de

INTRO la web
BRIEFING
¿Y para qué una 2. VENTA Y PRESENTACION DE ARTISTAS COMO
web?
¿Qué hace la compe-
SECCIONES PRINCIPALES: Banners de ofertas, nuevos
tencia?
artistas...
Posicionamiento
Público objetivo
3. SEGURIDAD: El producto es de calidad y el servicio de
Empresa vs Usuario Things también.
LIBRO DE
ESTILOS 4. LUGAR REFERENTE PARA CRAFTER: Mediante el
Arquitectura de la blog y la sección de tutoriales
Información
Aspectos
competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 ASPECTOS COMPETITIVOS

INTRO TE ENSEÑAMOS A HACER PROYECTOS

BRIEFING Objetivo principal:
¿Y para qué una
web?
¡COMPRA NUESTROS PRODUCTOS!
¿Qué hace la compe-
Catálogo a la vista, ofertas y por supuesto, la tienda. Compra
tencia?
con la mayor seguridad, para ello:
Posicionamiento
Público objetivo BUEN DISEÑO Y TONO AMABLE: La web te habla a TI
Empresa vs Usuario PROMOVEMOS A LOS JÓVENES ARTISTAS
TE MANTENEMOS INFORMADO
LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos
competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 DISEÑO GENERAL

INTRO ANCHO FIJO para 1024 x 768 px:

- Tipo de web más adecuado para sitios con abundante
BRIEFING carga gráfica.
¿Y para qué una -Fácil diseño
web?
¿Qué hace la compe- SCROLL VERTICAL
tencia? - El usuario odia más tener que hacer muchos clicks
Posicionamiento que hacer scroll vertical.
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
1024 x 768 px >1024 x 768 px
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 12 columnas
978 px
RETÍCULA PRINCIPAL
54 px 30 px

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la compe- 978 px de ancho
tencia?
por 2000 px de alto
Posicionamiento
Público objetivo 12 columnas de 54
Empresa vs Usuario px cada una y de 54 px

30 px de separación
LIBRO DE 978 px

ESTILOS 54 px 894 px
Arquitectura de la
Información 138 px 810 px

Aspectos competitivos
222 px 726 px
Espacios
Sistema de Navegación 306 px 642 px

Color 390 px 558 px

Tipografías
474 px 474 px
Recursos Gráficos
 BOCETOS GUI: Retícula General
222 px 30 px

INTRO 147,5 px

BRIEFING
¿Y para qué una PERSUASIVO 15 px

web?
¿Qué hace la compe-
tencia?
30 px
Posicionamiento
Público objetivo
Empresa vs Usuario
INFORMATIVO

2000 px
LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación GRAN FOOTER
FOOTER
Color
Tipografías
Recursos Gráficos
 BOCETOS GUI THI CAT
HOME

ART TUT BLO TIE

INTRO HOME LOGO MENÚ PPAL Y 2°

BRIEFING
¿Y para qué una
Composición
web? FLASH, PASE DE
tipográfica
¿Qué hace la compe- IMAGENES
tencia?
Posicionamiento
Público objetivo
Tutorial Novedad Tienda
Empresa vs Usuario Imagen Imagen Imagen

LIBRO DE
ESTILOS Tutorial Novedad Tienda
Texto Texto Texto
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación RRSS Info Newsletter
suscripción
Color
Tipografías
Recursos Gráficos Menú 3°
 HOME
BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO TUTORIALES LOGO MENÚ PPAL Y 2°

BRIEFING
¿Y para qué una Composición
ÚLTIMO TUTORIAL
web? tipográfica
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo Tutorial Tutorial Tutorial
Empresa vs Usuario Categorías

LIBRO DE
ESTILOS Tutorial Tutorial Tutorial

Arquitectura de la
Información
Aspectos competitivos
Espacios RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 HOME
BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO TUTORIALES LOGO MENÚ PPAL Y 2°

BRIEFING (Tutorial) Categorías

¿Y para qué una IMAGEN GENERAL
web? TUTORIAL
Materiales Versiones
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo
Empresa vs Usuario EXPLICACIÓN
TUTORIAL
LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 HOME

BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO TUTORIALES LOGO MENÚ PPAL Y 2°

BRIEFING (Versión) Categorías

¿Y para qué una
web? VERSIÓN
Materiales
Versio-
¿Qué hace la compe-
nes
tencia?
Posicionamiento
Público objetivo
Empresa vs Usuario Fotos y
texto
LIBRO DE
ESTILOS
A tutoriales
Arquitectura de la
Información
Aspectos competitivos
Espacios
RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 HOME
BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO ARTISTAS LOGO MENÚ PPAL Y 2°

BRIEFING
¿Y para qué una IMAGEN GENERAL
Composición
web? tipográfica
TUTORIAL

¿Qué hace la compe-

texto
tencia?
Posicionamiento
info crafter crafter crafter
Público objetivo
Empresa vs Usuario crafter
crafter crafter

LIBRO DE crafter crafter crafter

ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías Menú 3°
Recursos Gráficos
 HOME
BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO ARTISTAS LOGO MENÚ PPAL Y 2°

BRIEFING (Artista)
¿Y para qué una Composición
web? tipográfica
¿Qué hace la compe-
tencia? texto

Posicionamiento
info y bio
Público objetivo del crafter
Empresa vs Usuario fotos

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 HOME
BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO THINGS LOGO MENÚ PPAL Y 2°

BRIEFING (Quienes
¿Y para qué una
web?
somos) Composición
tipográfica
FLASH de
Bienvenida
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 HOME

BOCETOS GUI THI CAT ART TUT BLO TIE

INTRO THINGS LOGO MENÚ PPAL Y 2°

BRIEFING (Contacto)
¿Y para qué una
Composición
web? tipográfica
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo
Formulario
Empresa vs Usuario Info

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
RRSS Info Newsletter
Sistema de Navegación suscripción
Color
Tipografías
Menú 3°
Recursos Gráficos
 MENÚS
Menú secundario

INTRO Menú principal:

- Things TUTORIALES BLOG TIENDA
BRIEFING
¿Y para qué una - Catálogo
web? THINGS CATÁLOGO ARTISTAS
¿Qué hace la compe-
- Artistas
tencia? ¿Quiénes somos?
Posicionamiento Contacto
Público objetivo Menú secundario:
FAQ
Empresa vs Usuario - Tutoriales
LIBRO DE - Blog Menú principal desplegable
ESTILOS - Tienda
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de
Navegación
Color
Tipografías
Recursos Gráficos
 NAVEGACIÓN ALTERNATIVA Y AYUDAS

INTRO Navegación alternativa

BRIEFING - Footer
¿Y para qué una - Enlaces
web?
¿Qué hace la compe- - Pequeños menús en algunas seccio-
tencia? nes
Posicionamiento
- Flechas siguiente y anterior
Público objetivo
Empresa vs Usuario

LIBRO DE Ayudas
ESTILOS - Elementos de ancla
Arquitectura de la
Información
- Colores
Aspectos competitivos - Breadcrumps
Espacios
. Mapa web
Sistema de
Navegación
Color
Tipografías
Recursos Gráficos
 COLORES
Corporativos
INTRO
Debido a su escasa legibilidad, este color se
BRIEFING # B8B11C restringirá a elementos gráficos y decorati-
¿Y para qué una vos y para el fondo del footer.
web?
¿Qué hace la compe- Se utilizará para los títulos y subtítulos,
tencia?
palabras destacadas y para la composición
Posicionamiento # 553676 tipográfica de algunas páginas. También se
Público objetivo utiliza para el cambio de color en el menú.
Empresa vs Usuario

LIBRO DE No Corporativos
ESTILOS
Arquitectura de la
Fondo de todo el sitio web
Información
Aspectos competitivos # FDEFCA
Espacios
Sistema de Navegación
Color Se utilizará para el cuerpo de texto y para
# 1A1A1A elementos gráficos. También estará presen-
Tipografías
te en el menú
Recursos Gráficos
 TIPOGRAFÍAS
Se utilizarán 3 tipos de fuentes en el sitio web:
INTRO
- Fuente segura
BRIEFING - Fuente rasterizada
¿Y para qué una - Fuente de GOOGLE FONT WEB API (font.com)
web?
¿Qué hace la compe- Fuente segura. Para el
tencia? abcdefghijklmnopqrstu- CENTURY GOTHIC
cuerpo de texto a 12 px
Regular y Bold.
Posicionamiento vwxyz y para subtítulos h3 a 23
Público objetivo abcdefghijklmnopqrstuvwxyz px.

Empresa vs Usuario Fuente rasterizada. Para

abcdefghijklmnopqrstu- ANDROGYNE composiciones tipográfi-
LIBRO DE cas decorativas.
vwxyz Regular
ESTILOS abcdefghijklmnopqrstuvwxyz
Arquitectura de la Fuente rasterizada. Para
Información composiciones tipográfi-
abcdefghijklmnopqrstuvwxyz AACHEN EF
Aspectos competitivos cas decorativas.
abcdefghijklmnopqrstuvwxyz Bold
Espacios
Sistema de Navegación abcdefghijklmnopqrs- NADIANNE Fuente en servidor de Go-
Color tuvwxyz Bold ogle. Para h2 (titulos im-
Tipografías abcdefghijklmnopqrstuvwxyz portantes) en 37 px.
Recursos Gráficos
 hola!
RECURSOS GRÁFICOS

RECURSOS GRÁFICOS FLASH

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS

hola!
en things nos dedicamos a hacer peluches y acce-
Arquitectura de la
sorios como tu los prefieras. ¿que no sabes que
Información
quieres exactamente?. pues puedes elegir entre el
Aspectos competitivos amplio catálogo que tenemos, ya diseñados por
Espacios nosotros, o por las colecciones de nuestros artistas.
Sistema de Navegación
llevamos haciendo esto desde hace 5 años, y cada
Color día nos gusta más...
Tipografías
¡venga! ¿a qué esperas? visita nuestro catálogo y
Recursos Gráficos seguro que te enamoras de algo.
 RECURSOS GRÁFICOS

RECURSOS GRÁFICOS ESTÁTICOS

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo

make things
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos
 RECURSOS GRÁFICOS

ICONOS TRATAMIENTO IMÁGENES

INTRO
BRIEFING
¿Y para qué una
web?
¿Qué hace la compe-
tencia?
Posicionamiento
Público objetivo
Empresa vs Usuario

LIBRO DE
ESTILOS
Arquitectura de la
Información
Aspectos competitivos
Espacios
Sistema de Navegación
Color
Tipografías
Recursos Gráficos