1 Desarrollo del

“briefing”
 A _ ¿POR QUÉ NECESITA SAPIDUP UNA WEB?

1- FIDELIZAR CLIENTES:
• Un sitio web podría ser el punto de encuentro entre todas las
personas que componen la comunidad de SapidUp, donde puedan

1
relacionarse y disfrutar de unos servicios desarrollados para ellos
(tienda, juegos, concursos, comunidad,...).
• Esto también serviría a la empresa para conocer un poco mejor a sus
usuarios, y la opiniones de estos.
Desarrollo
del 2 - CAPTAR NUEVOS CLIENTES:
“briefing” • Por otro lado la web también sería un buen medio para dar a conocer
la empresa y sus productos, ya que nos ofrece unas posibilidades
mayores que el medio impreso para llamar la atención, con el uso de
sonido, movimiento, interactividad, etc.
 B _ ANÁLISIS DEL SECTOR

• SapidUp no se corresponde con ningún tipo de sector que exista

actualmente ya que además de un refresco, se trata de una “bebida
de sensaciones”. Por tanto analizaremos los sectores más cercanos:

1
• Bebidas refrescantes y energéticas: es el sector más cercano, por
tanto se trata de competencia directa. Aquí podríamos destacar a:
Coca Cola, Pepsi, Red Bull o Burn.
• Bebidas alcohólicas: SapidUp pretende ser la alternativa a las
Desarrollo bebidas alcohólicas, y conviene saber qué tipo de web tienen.
del Dentro de este sector nos centraremos en: Ginebra (Bombay, Larios,
“briefing” Beefeater); Ron (Ron Barceló, Cacique); Whisky (Cutty Sark, DYC,
J&B); Vodka (Absolut).
• Dentro de las bebidas alcohólicas hemos elegido las que:
- Son más consumidas entre los jóvenes en España.
- Le dan importancia a la interacción del usuario.
- Presentan sus productos de una forma curiosa.
 B _ ANÁLISIS DEL SECTOR_ COCA COLA

• ¿Para quién va dirigida?

Principalmente se dirige a su target más joven.
• ¿En qué destaca?

1
Comunidad de usuarios propia y aplicaciones
muy curiosas para que el usuario participe.
• ¿Como interactúa el usuario?
Esta web es bastante interactiva. El usuario
Desarrollo puede participar subiendo vídeos, imágenes,
del datos de su perfil, comunicarse con otros
“briefing” usuarios, participar en aplicaciones, obtener
regalos.
• ¿Tratamiento del contenido?
Tiene bastante contenido, pero bien organizado.
 B _ ANÁLISIS DEL SECTOR_ COCA COLA

• Dos tipos de usuarios:

- Usuario no registrado: puede ver casi todo, pero
no puede participar en muchas de las zonas.
- Usuario registrado: puede ver y participar en

1
todas las zonas de la web.
• El sistema de navegación es bastante bueno
y sencillo, con un menú principal en la parte
Desarrollo superior, un submenú desplegado más abajo.
del • Usa scroll
“briefing”
• Predomina el color corporativo rojo
• Servicios:
Entretenimiento, Eventos, Noticias, Blog,
Comunidad, Fotos, Vídeos
 B _ ANÁLISIS DEL SECTOR_ PEPSI

• ¿Para quién va dirigida?

A su target más joven y rompedor.
• ¿En qué destaca?

1
Hace un buen seguimiento de la campaña actual,
y crea un diccionario de palabras de los usuarios.
Con esta web, Pepsi se posiciona como una
empresa rompedora, rebelde y original.
Desarrollo • ¿Como interactúa el usuario?
del También es muy interactiva. El usuario puede
“briefing” participar añadiendo palabras al diccionario (una
forma de defender su forma de hablar), y puede
conseguir determinados premios.
• ¿Tratamiento del contenido?
Se gestiona bastante contenido, aunque no tanto
como en la web de Coca Cola. De todas formas
está bien organizado y es fácil acceder a él.
Usa nombres de seccion bastante identificativos.
 B _ ANÁLISIS DEL SECTOR_ PEPSI

• También permite el registro de usuarios que

pueden aportar contenido a la web.
• El sistema de navegación es correcto, situando

1
un menú principal en la parte superior, que nos
describe bien el contenido de cada zona.
• Las noticias están jerarquizadas, utilizando
distintos tamaños para el texto, colores,...
Desarrollo
del • Hace un buen uso del color, usando el azul y
algunos otros colores que funcionan bien con
“briefing”
él. Pero el tamaño variable de las cajas con
fondo blanco, al adaptarse al contenido, tal vez
crea una sensación de inestabilidad que no le
favorece.
• Servicios:
Entretenimiento, Eventos, Noticias, Fotos, Vídeos,
Redes sociales (facebook)
 B _ ANÁLISIS DEL SECTOR_ RED BULL

• ¿Para quién va dirigida?

Para su target interesado en el deporte.
• ¿En qué destaca?

1
Gestiona una gran cantidad de contenido, pero
es la que mejor lo organiza. Es muy limpia.
Con esta web, Red Bull se posiciona como una
empresa muy interesada en el deporte.
Desarrollo • ¿Como interactúa el usuario?
del Es menos interactiva, llega a ser un poco estática
“briefing” en ese sentido.
• ¿Tratamiento del contenido?
Como ya hemos comentado es la mejor. Nos
muestra contenido relacionado, comentarios,
indicadores para saber dónde estamos,...
Incluye bastante material multimedia.
 B _ ANÁLISIS DEL SECTOR_ RED BULL

• El sistema de navegación es correcto, usando

un menú principal situado en la parte superior
y siempre visibles todos los enlaces, dándole a
unos más importancia que a otros.

1 • Hace uso del scroll.

• Cambia la apariencia de la web en determinadas
zonas de contenido.
Desarrollo
del • Hace un uso de color comedido, y en general es
bastante limpia.
“briefing”
• Servicios:
Productos, Vídeos, Fotos, Juegos, Eventos,
Noticias, RSS
 B _ ANÁLISIS DEL SECTOR_ BURN

• ¿Para quién va dirigida?

Su target interesado en el deporte de riesgo.
• ¿En qué destaca?

1
Es más visual, incluyendo más efectos para
mostrar el contenido. Con esta web Burn se
posiciona como una empresa interesada en
ciertos deportes, y de cierta manera explosiva,
Desarrollo potente.
del • ¿Como interactúa el usuario?
“briefing” El usuario tan solo puede ver el contenido.
• ¿Tratamiento del contenido?
Esta web incluye muy poco contenido, y su
organización es mejorable.
• En este caso no se hace uso del scroll.
 B _ ANÁLISIS DEL SECTOR_ BURN

• El sistema de navegación es un poco

desordenado.
• Por otro lado la web está recargada de recursos

1
gráficos.
• Al acceder a la página esta se abre en una
nueva ventana (pop-up), lo que puede provocar
ciertos problemas a la hora de abrirlo en ciertos
Desarrollo navegadores que tengan bloqueadas las pop-up.
del
• Servicios:
“briefing”
Catálogo, Vídeos, Fotos, Noticias, Sorteos
 B _ ANÁLISIS DEL SECTOR_ CONCLUSIONES: REFRESCOS Y ENERGÉTICAS

• Se centran en una parte de su target.

• La interacción con el usuario se tiene muy en cuenta.
• Se suelen actualizar con asiduidad, y cambiar según la campaña.

1
• Suelen tener un menú principal en la parte superior, junto al logotipo.
• Predomina un color sobre el resto.
• En general suelen llevar scroll.
Desarrollo
• No suelen utilizar Fash como única tecnología (hay expeciones), pero
del si incluyen ciertas zonas o aplicaciones desarrolladas en flash.
“briefing”
• Suele tener una zona para mostrar los productos de la empresa.
• Se intenta que la navegación sea sencilla para el usuario.
• En general están bien organizadas.
• Hay mucho material multimedia, como vídeos y fotos.
 B _ ANÁLISIS DEL SECTOR_ BOMBAY SAPPHIRE

¿En qué destaca?

• Diseño muy cuidado, y forma muy buena y muy
visual de presentar los productos. Es la única

1
que tiene un grupo de diseñadores.
• Es muy curiosa la organización del contenido,
pero llama la atención y está cuidada.
Desarrollo • Se publicita indirectamente, ya que se nos
del muestra la preparación de una serie de cocktails
que se hacen con sus productos.
“briefing”
• Este sitio no hace uso del scroll.
• Está desarrollado completamente en flash
Servicios
• Bebidas, Diseño, Sabores
 B _ ANÁLISIS DEL SECTOR_ LARIOS

¿En qué destaca?

• También tiene una presentación de los productos
muy cuidada y elegante.

1 • El usuario puede crear sus propios cocktails

eligiendo los ingredientes a través de una
aplicación web.
Desarrollo • Presenta el producto de forma más directa, y
del están visibles desde el home.
“briefing” • Está diseñada completamente en flash, no usa
scroll, no abusa de los colores y utiliza imágenes
refrescantes.
Servicios:
• Productos, Eventos, Historia, Entretenimiento
 B _ ANÁLISIS DEL SECTOR_ BEEFEATER

¿En qué destaca?

• Tiene una forma muy curiosa de mostrar el
contenido, como si fuera una serie de imágenes

1
que se van desplegando poco a poco, pero esto
tiene el inconveniente de que tarda más tiempo
en mostrar el contenido.
• La información está bien organizada, y es fácil
Desarrollo navegar por ella, gracias al menú superior.
del
• Nos muestra el producto indirectamente a través
“briefing”
de su historia.
• Está desarrollada en flash y no usa scroll.
• Hace un buen uso del color.
Servicios:
• Historia, Fotos, Publicidad, Noticias
 B _ ANÁLISIS DEL SECTOR_ RON BARCELÓ

¿En qué destaca?

• Se dirige a las personas que asistieron al evento.
• Es curiosa la forma que tiene de promocionar el

1 producto de forma indirecta.

• Se conecta con la red social facebook
• Tan solo incluye material multimedia, y la
Desarrollo organización tampoco está demasiado
del trabajada.
“briefing”
• Hace uso, tal vez exagerado, del scroll y sigue
una estructura que se repite constantemente.
• En cuanto al diseño, es sencillo pero atractivo.
Servicios:
• Fotos, Vídeos, Agenda, Redes sociales (facebook)
 B _ ANÁLISIS DEL SECTOR_ RON CACIQUE

¿En qué destaca?

• Los efectos visuales y el tratamiento del color
que consigue mantener al usuario enganchado
• Hace una presentación de los productos de la

1
empresa siguiendo el mismo estilo del resto de
la web, y nos permite hacer visitar la ronería.
• Introduce al usuario dentro de un juego, en el
Desarrollo que él es el protagonista, hasta que llega al
del punto final, donde conoce el secreto escondido.
“briefing” • Está desarrollada en Flash, y el uso del color es
espectacular, consigue un efecto muy atractivo
y además utiliza una música muy acorde con el
tema de la web.
Servicios:
• Entretenimiento, Descargas, Productos, Visita
virtual, Registro de usuarios
 B _ ANÁLISIS DEL SECTOR_ CUTTY SARK

¿En qué destaca?

• Tiene gran presencia en redes sociales.
• Es un poco extraño el tratamiento del contenido,

1 ya que hay páginas en flash y páginas en html y

el aspecto varía entre ellas.
• En las páginas en Flash no aparece scroll, pero
Desarrollo en el resto si.
del • Está poco actualizada y tiene problemas en
“briefing” alguna sección.
• Se promociona la empresa a través de sus
historia.
Servicios:
• Productos, Historia, Eventos, Registro de
usuarios, Redes sociales
 B _ ANÁLISIS DEL SECTOR_ DYC

¿En qué destaca?

• Se dirige a un target de más edad que el resto.
• Tiene una presentación muy elegante y

1 coherente, con imágenes muy cuidadas.

• Muestra mucha información pero muy bien
organizada, jerarquizada.
Desarrollo • Se promociona de forma indirecta al tratar sobre
del el 50 aniversario de la empresa.
“briefing”
• Utiliza Flash, pero sin abusar de efectos
innecesarios. Además el tiempo de carga es muy
pequeño. Y no utiliza scroll.
Servicios:
• Productos, Historia, Visita virtual, Fotos
 B _ ANÁLISIS DEL SECTOR_ J&B

¿En qué destaca?

• Nos muestra su historia de una forma más
entretenida.

1 • No presenta grandes aplicaciones interactivas.

• Se promociona de forma indirecta mostrandonos
su historia.
Desarrollo • Está diseñada en flash y no usa scroll.
del
“briefing” • El menú aparece en la parte inferior y el
contenido por encima de este.
Servicios:
• Redes sociales, Videos, Fotos, Registro, Historia,
Entretenimiento
 B _ ANÁLISIS DEL SECTOR_ ABSOLUT

¿En qué destaca?

• La forma de interactuar con el usuario mediante
clips de película interactivos.

1
Por ejemplo para obtener las recetas de los
cocktails el usuario tiene que introducirse en una
aplicación interactiva y realizar ciertos pasos que
necesitan de su atención.
Desarrollo • Todo el contenido se presenta de manera muy
del cuidada, con imágenes muy buenas y colores
“briefing” muy llamativos.
• La web está diseñada en Flash, tiene un formato
panorámico, es líquida y no usa scroll.
Servicios:
• Vídeos, Fotos, Productos, Entretenimiento,
Historia
 B _ ANÁLISIS DEL SECTOR_ CONCLUSIONES: BEBIDAS ALCOHÓLICAS

• Se diferencia entre las que utilizan el color negro de fondo, que hace
referencia directa a la noche, y las que usan un fondo claro (vodka y
ginebra, bebidas blancas).
• La interacción con el usuario tiene gran importancia.

1
• Buscan alguna manera de publicitarse de forma indirecta.
• No suelen actualizarse constantemente.
• No hay un lugar concreto para situar los menús.
Desarrollo
del • Predomina el uso de colores vivos en el contenido.
“briefing” • No suelen llevar scroll, y suelen estar desarrolladas en Flash.
• Suelen tener una zona para mostrar los productos de la empresa.
• Son web con un diseño muy cuidado.
• Hay mucho material multimedia, como vídeos y fotos.
 1
Desarrollo
del
“briefing”
 C _ POSICIONAMIENTO DE LA WEB

• La principal característica de la web debería ser su interactividad,

ya que para SapidUp el usuario es el que manda. Por tanto incluiría
aplicaciones web en las que el usuario obtendría regalos al usarlas.
• Por otro lado se buscaría una forma original, descriptiva y atractiva
de presentar los productos, intentando incrementar las ventas.

1 • Algunos de los servicios que podría ofrecer la web serían:

Presentación de productos, Noticias y eventos, Comunidad de
usuarios, Aplicación interactiva, tienda virtual
Desarrollo
del • Otra forma de posicionarse es usando un color de fondo diferente al
resto.
“briefing”
• En definitiva se podría considerar como una web para el usuario,
dirigida a él, y adaptada a sus gustos personales, de la que la
empresa puede obtener ciertos beneficios tanto informativos como
económicos.
 D _ EL TARGET COMO USUARIO

• Se trata de un tipo de usuario joven, adaptado al uso de las nuevas

tecnologías y que hace un uso continuo de Internet, para sus
momentos de ocio, para entablar relaciones con otras personas, para
solucionar algún problema o buscar información de algún tipo. Por
tanto podemos decir que es un usuario experto.

1 • Tal vez podemos distinguir dos tipos de usuarios:

- Aquellos que acceden a la web porque ya forman parte de la
comunidad y buscan un poco de entretenimiento.
Desarrollo

del
- Los que buscan información sobre la empresa, a los que se
“briefing” intentará convencer para que se unan a la comunidad.
 E _ NECESIDADES EMPRESA VS USUARIO

• Entre las necesidades de la empresa podemos destacar:

- Dar a conocer sus productos de una forma atractiva. En la página
principal se debería incluir un acceso a este catálogo, de una forma
destacada.

1

- Conseguir un aumento de las ventas de estos productos,
incluyendo la posibilidad de comprar los productos a traves de la
web.
Desarrollo
del - Aumentar su comunidad de usuarios, que le proporciona
“briefing” información y a la vez la convierte en una gran empresa, dándole
prestigio. A la misma vez esto es un motivo añadido para que
aquellos que aún no sean usuarios de SapidUp, decidan serlo.

- Informar sobre eventos y noticias de interés (música, cine, arte,
deporte, encuentros, humor).
 E _ NECESIDADES EMPRESA VS USUARIO

• Y entre las necesidades del usuario podemos destacar:

- Encontrar información sobre los productos de una forma rápida y
sencilla.

1
- Relacionarse con el resto de los usuarios de la comunidad,
pudiendo entablar conversaciones, compartir material multimedia. En
definitiva, pasar un rato de entretenimiento.

Desarrollo - Estar al día de lo que sucede con la empresa, de los eventos que
del organiza,...
“briefing”
- Tener un lugar donde poder comprar, para que los usuarios puedan
comprar las bebidas o productos de merchandising de la empresa.
 F _ CONCLUSIONES DE LA INDAGACIÓN

• La web que necesita SapidUp debe de ser un híbrido que contenga

una comunidad de usuarios, un catálogo de productos, una zona de
compra, aplicaciones interactivas, y una zona informativa que se va
actualizando continuamente.
• Se busca que el usuario pueda interactuar, que esté bien organizada,

1 con un menú que nos facilite la navegación y que a la vez tenga un

toque diferenciador, evitando usar los típicos menús.
• En la zona de catálogo se buscará presentar los productos de forma
Desarrollo atractiva, simulando el efecto que producen.
del
• El fondo será diferente al resto, y no se usará scroll.
“briefing”
• Debemos tener en cuenta que es un producto de SapidUp, por lo
tanto debe seguir una coherencia con la identidad de la empresa.
• La información debe estar bien organizada, para no desorientar al
usuario.
• Debe predominar la funcionalidad, pero sin descuidar la parte
estética cuando sea posible.
2 Proyecto WEB
“libro de estilos”
 A _ ARQUITECTURA DE LA INFORMACIÓN_ MAPAS WEB

1) Por tipo de usuario: 2) Por tipo de contenido 3) Más comercial

ES USUARIO HABITUAL ÚLTIMA HORA 1º)PRESENTACIÓN DE PRODUCTOS
carnet gente sápida noticias con enlaces a compra directa
concursos eventos
juego/regalos 2º)CAPTACIÓN DE USUARIOS
comunidad LA EMPRESA juegos con regalos
noticias información de la empresa

2
eventos comunidad
descargas productos descargas
catálogo
tienda
carnet de socio
3º)MÁS INFORMACIÓN
NO PERTENECE A LA COMUNIDAD ENTRETENIMIENTO noticias y eventos
Proyecto catálogo juego con regalos la empresa
la empresa comunidad usuarios
WEB noticias concursos
4º) FIDELIZACIÓN
“libro de eventos descargas
comunidad
concursos
estilos” comunidad TIENDA concursos
carnet gente sápida juegos con regalos
descargas
tienda carnet socio
DISTRIBUIDOR
tienda online
ver productos
información sobre la empresa
noticias y eventos
 A _ ARQUITECTURA DE LA INFORMACIÓN_ MAPAS WEB

PONTE AL DÍA GENTE SÁPIDA

NOTICIAS COMUNIDAD

2 EVENTOS CONCURSO

CARNET DE SOCIO
INFORMACIÓN

LOCALES

Proyecto VENTAJAS
CATÁLOGO
WEB JUEGO
“libro de UNIRSE
PRODUCTOS
estilos” REVISTA DOBLE S

TIENDA LA EMPRESA
DESCARGAS

INFO. CORPORATIVA
DESCARGAR PDF
F.A.Q.

ADVERTENCIAS CONTACTO
 A _ ARQUITECTURA DE LA INFORMACIÓN_
CONTENIDOS: CARACTERÍSTICAS, ETIQUETADO, CLASIFICACIÓN

CATÁLOGO DE PRODUCTOS LA EMPRESA

Logo, packaging, información y Información corporativa
escenario para 3 productos 6 preguntas y respuestas
- SapidUp 69

2
- SapidUp Night CONCURSOS
- SapidUp XD
Información sobre el concurso actual,
Catálogo en PDF
bases, plazos, y obras subidas por los
Advertencias sobre el consumo
participantes
NOTICIAS
Proyecto 3 últimas noticias (con imagen) + DESCARGAS
archivo de noticias (6 más) 5 fondos de pantalla
WEB
TIENDA
“libro de EVENTOS
3 últimos eventos (con imagen) + 3 productos SapidUp
estilos” archivo de eventos (3 más) Merchandisign

CARNET DE SOCIO
Información y diseño
10 locales asociados
15 ventajas

JUEGO CON REGALOS

Tipo de juego, cómo se juega, Regalo a
entregar, diseño
 A _ ARQUITECTURA DE LA INFORMACIÓN_
COHERENCIA CON LOS OBJETIVOS COMUNICATIVOS
Podemos decir que existe coherencia con los objetivos comunicativos,
ya que:
• Se ofrecen contenidos tanto para conseguir captar la atención de
nuevos usuarios (presentación de los productos, ventajas que tienen
los usuarios,...)

2 • También hay contenidos para mantener a aquellos que ya forman

parte de la comunidad (noticias, eventos, toda la zona de Gente
Sápida,...)
Proyecto
WEB • Existe una comunicación directa con el usuario, que en todo
momento decide lo que quiere ver sin tener que dar demasiados
“libro de clics.
estilos”
• Se estructura el menú en distintas zonas jerarquizadas, para que sea
más sencillo encontrar lo buscado.
 B _ ASPECTOS COMPETITIVOS_ PUNTOS FUERTES

• PRESENTACIÓN CUIDADA DE LOS PRODUCTOS

Uso de imágenes que hagan referencia al efecto, uso del color,
movimiento.
• JERARQUIZACIÓN DEL CONTENIDO
Uso de distintos tamaños, colores, estilos de fuente.

2 • INTERATIVIDAD CON EL USUARIO

Juego interactivo, posibilidad de participación en distintas zonas de
la web, ...
Proyecto
WEB • DISEÑO CUIDADO
Uso de recursos gráficos que guardan la identidad de la empresa,
“libro de buen tratamiento de la tipografía.
estilos”
• NAVEGACIÓN SENCILLA
Menú lateral desplegable, siempre visible, indicador de dónde nos
encontramos, apoyo del color a la navegación.
 C _ DISTRIBUCIÓN DE ESPACIOS
1280x768px
• Proporciones: 994x553px
16/9 --> 994x553px
• Tipología:
Cerrada, ya que contiene bastante
material multimedia.

2 Irá centrada.
• Fondo:
El fondo será un motivo con líneas
Proyecto diagonales que se repetirá.
WEB
• Retículas y módulos:
“libro de 10 filas x 13 columnas
estilos” Módulos de 58x40 px
Medianil vertical de 20px
Medianil horizontal de 17 px
 D _ SISTEMA DE NAVEGACIÓN

• Menús y submenús:
La idea es incluir el menú fijo en el
lateral que se despliegue de forma
vertical. Se muestra desde un primer
momento plegado y se despliega con

2
solo situarse encima de él.

La navegación sería intuitiva, ya que se
organizaría por grupos y bajo cada uno
Proyecto de ellos se desplegarían los subniveles.
WEB
“libro de La jerarquía se conseguiría con el
estilos” tamaño de la fuente.

Más abajo, se incluiría un pequeño menú
para la zona de Empresa (información
corporativa, preguntas, contacto)
 E _ USO DEL COLOR

• General:
Se tratará de una web en clave alta, y se hará uso del contraste.
Usaremos un fondo con líneas diagonales que se adaptará a la
sección en que nos encontremos.
• Color identitario:

2 Se utilizarán los colores corporativos, y se añadirá el magenta y gris.

• Uso funcional:
Se utilizará el color para crear jerarquías en la información, para
Proyecto diferenciar el contenido, orientar al usuario y llamar su atención...
WEB
“libro de
estilos”
 E _ USO DEL COLOR

• Fondo:

#FCEBF3 #D4EBED #FCEBF3 #E0E0E0

R: 252 R: 212 R: 252 R: 224
G: 235 G: 235 G: 231 G: 224
B: 243 B: 237 B: 202 B: 224

2
#F6AA41 #cdcdcd
• MENÚ
R: 246 R: 205
G: 170 G: 205
B: 65 B: 205

#18A096 #000000
Proyecto

R: 24 R: 0
G: 160
WEB
B: 150
G: 0
B: 0
“libro de
#E41770
estilos”

R: 228
G: 23


B: 112

• TEXTO • Botones:
#7c7c7c
#E0E0E0 #FFFFFF
R: 124
G: 124
R: 224
G: 224 + + R: 255
G: 255
B: 224
B: 124 B: 255
 E _ USO DEL COLOR

• PÁGINA DE ACCESO

• ZONA DE NOTICIAS • AYUDAS DE NAVEGACIÓN

2 A 1 A
#7c7c7c #18A096 #E41770 #7c7c7c
R: 124 R: 24 R: 228
G: 124 G: 160 G: 23
R: 124
B: 124 B: 150 G: 124
B: 112
B: 124
Proyecto B #e0e0e0
R: 224
2 #18A096
R: 212
G: 235
WEB G: 224
B: 224 B: 237
“libro de
estilos” • FORMULARIOS

1
#e0e0e0
R: 224
A #7c7c7c
R: 124
#000000
R: 0
G: 224 G: 124 G: 0
B: 224 B: 124 B: 0

#FFFFFF
R: 255
G: 255
B: 255
 F _ ESTRATEGIA TIPOGRÁFICA

• Fuentes utilizadas

Arial **fuente segura**

Georgia **fuente segura**

2 Museo, Museo Sans **fuentes no seguras**

• Menú principal:
Proyecto Museo Sans 900 a 30 px para links de nivel 1.
Museo Sans 900, de 20 px hacia abajo, reduciendo
WEB de 2 en 2 px el tamaño del texto cuando tiene
“libro de menos importancia (20px, 18px, 16px, 14px...). Si
hubiera más de 6 links en algún submenú, esta
estilos” reducción se haría de 1 en 1 px.

• Menú secundario
Museo Sans 500 a 10 px.
 F _ ESTRATEGIA TIPOGRÁFICA

• Formularios:
Arial Regular, 12 px, para todos los textos.

• Formularios secundarios:
Arial Regular, 12 px

2
• Dónde estamos:
Georgia Regular, 11px ->Bold, 11px para el nombre

• Texto con link:

Irá en negrita y del color de la sección identificativa.
• Texto a destacar:
Proyecto Irá en negrita
WEB • Botones:
“libro de Arial Regular tamaño 12 px para todos los botones

estilos”
MES
• Zona de acceso:
Para el titular de bienvenida, Georgia bold, 30px.
Arial Regular tamaño 12 px para el texto informativo,
en bandera izquierda, interlineado 14px
Arial Black tamaño 50 px para los indicadores de
día, mes y año.
Arial Regular tamaño 80 px para los números del
interior del formulario
 F _ ESTRATEGIA TIPOGRÁFICA
atracció
• Productos: n
deseo
Arial 12 px, para texto informativo, en bandera a la
izquierda interlineado 14px.
Museo para texto persuasivo (tamaño variable)

sonrisas
2 • Advertencias:
Arial regular 12 px, para las advertencias

• Noticias o eventos (listado inicial)

Proyecto Georgia bold 13 px, subrayada, para titulares
WEB Arial Regular, 11px, para introducción de la noticia,
justificado, interlineado 14px.
“libro de Arial Regular, 10px, para el resto de información de
la noticia.
estilos” Arial Regular, 14px, para “categorías” , “archivo” y
cualquier otro indicador del tipo.
Arial Regular, 12px, para cada una de las
categorías, para los textos de los campos de
selección...
 F _ ESTRATEGIA TIPOGRÁFICA

• Noticias o eventos (desarrollo):

Georgia Bold, 18px, para titulares de noticias.
Arial Regular, 10px, para información adicional
sobre la noticia.
Arial Regular, 11px, para el desarrollo de la noticia,
justificado, con interlineado 14px.

2 • Noticias o eventos (listado por fecha o categoría):

Proyecto Arial Regular, 14px, para el indicador de la categoría
WEB de las noticias, usando Bold para el nombre de esta.
Georgia Regular, 11px, para toda la información
“libro de aportada sobre una noticia
Arial Bold, 11px, para el enlace de leer la noticia.
estilos”
 F _ ESTRATEGIA TIPOGRÁFICA

• Carnet de socio
Georgia Regular 12px para los textos orientativos o
pequeños titulares.
Arial Regular 11px, para el desarrollo de la
información, justificado, con interlineado 14px

2 • Concurso (ficha técnica) • Preguntas y respuestas

Proyecto Nombre de obra. Georgia Bold 15px Georgia Regular, 11px, para preguntas de la parte
WEB Texto informativo, Arial regular 11px
Autor, Georgia Regular, 12 px
izquierda y respuestas de la parte derecha
Georgia Bold, 11px, para la pregunta de la parte
“libro de derecha.
• Concurso (información) Arial regular 11px, para las respuestas, justificadas
estilos” Arial regular, 11px

• Descargas
Título de imagen, Museo 500 12px
Tamaño de imagen a descargar, Arial Regular 11px

• Información corporativa
Arial Regular, 11px, justificado, interlineado 14 px.
 G _ TECNOLOGÍAS UTILIZADAS

• HTML
• CSS
• FLASH

2
• JQUERY
• PHP
• MYSQL
Proyecto
WEB
“libro de
estilos”
 G _ RECURSOS GRÁFICOS E INTERACTIVOS

siempre se utilizarán en escala de grises

2
Proyecto
WEB
“libro de
Imágenes decorativas
estilos”

texturas de fondo
3 Presentación de
la Plataforma WEB
http://www.sapidup.com
4 Conclusiones
 A _ CONCLUSIONES

• Para el proyecto web hay que ser más organizados aún si cabe
que en el resto de proyectos, porque hay muchos elementos
relacionados entre sí, y es fácil perderse.
• Hay que pensar “¿por qué?” antes de hacer cualquier cosa, o tomar
cualquier decisión, y no tomar decisiones aleatorias aunque resulte

4 más sencillo.
• Trabajar sobre una retícula te ayuda bastante, aunque a veces es
complicado adaptar el contenido a los módulos.
Conclusiones
• El libro de estilos y los bocetos previos nos facilitan en gran medida
el trabajo, pero no debemos cegarnos por conseguir resultados
exactamente iguales que en los bocetos, porque a veces no es
posible o no está en nuestras manos.
• Hay que trabajar teniendo en cuenta que la web tiene que llevar la
identidad de la empresa, pero se debe adaptar al tipo de medio y a
las posibilidades que nos ofrece la web.

 A _ CONCLUSIONES
• El mundo de la web está en continua evolución, pero es
relativamente fácil encontrar cualquier información a través de
internet, por lo tanto es muy necesario realizar indagaciones
continuas, y no rendirse a la primera. Un ejemplo de ello es que he
podido conseguir que el menú funcione como yo deseaba, y que se
quede marcado en flash en qué página te encuentras.

4 • La web también te permite realizar simulaciones con cierta facilidad,

por ejemplo, sin tener conocimientos de 3D y pocos de flash, he
podido simular el giro de las botellas en flash.
Conclusiones • Es muy necesario consultar a otras personas cuando realmente te
encuentras perdido, o no sábes por qué falla algo.
• Todo lo que hagamos debe estar optimizado para que al subirlo en el
servidor no tarde demasiado tiempo en cargar.
• Aún queda bastante trabajo por hacer, pero creo que con un poco
de organización hay tiempo suficiente para finalizar todo, y que esté
en funcionamiento para el día de la entrega. De todas formas seguiré
trabajando por las zonas más importantes de la web y dejaré las
menos para el final.