www.bebot.

es

Una puerta abierta 24 horas al dia 365 dias al año

r e s t a u r a n t & l o u n g e

Vanesa Pareja Extremera 2º A

Proyecto Web
Briefing

¿Porqué quiere BEBOT una web? e

1. Bebot quiere concebir una segunda puerta a su local a través de la red.
2. Una nueva forma de comunicación con sus clientes y proveedores.
3. Una posible ampliación de mercado tanto local, nacional e internacional.
4. Bebot quiere generar una imagen para sus clientes previa a la tangible.
5. Ofrecerle información rápida y nueva.
6. Moverse en ese gran medio de comunicación que está tan de moda como es internet.

Concretando:
Bebot quiere PROMOCIÓN para ampliar el mercado,
quiere UNA NUEVA FORMA DE COMUNICACIÓN hacia sus clientes.

BEBOT estará disponible para el usuario

las 24 horas al dia los 7 dias de la semana,
sin limitación alguna. Proyecto web Bebot
1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
Competencia en la web

Comenzamos analizando la competencia: e

COMPETENCIA LOCAL, DIRECTA: locales que anteriormente hemos analizado como empresa y ahora
analizaremos la web si la hubiera.

COMPETENCIA SECUNDARIA: Locales a nivel nacional o internacional que por su imagen, clientela, pla-
tos... podemos tomar referencias y posicionarnos frente a ellos...

Necesitamos un análisis de la competencia para:

-Sacar conclusiones sobre contenidos y servicios que ofrecen en la web las demás empresas.
-Imagen que puede llegar a tener nuestra web.
-Como se posicionan estas empresas con respecto a su competencia.
-El uso de la imagen corporativa.
-Diseño y tecnologías usadas para la creación del portal.
-Elementos que podemos aportar nuevos que no tienen y por donde podemos empezar a competir.

Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
COMPETENCIA LOCAL, DIRECTA

Empresas de Barcelona capital que siempre han sido nuestra competencia, estas son:
CDLC Restaurant and Lounge-Club.
e
Mayura Lounge Bar
Shoko
Sinatra
Red Lounge Bar

Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
CONCLUSIONES GENERALES DE TODO EL ESTUDIO LOCAL
TECNOLOGÍAS
-No usar la tecnología Flash en exceso.
-Interacción con el usuario: descarga de archivos
-Comunidad de usuarios on-line.
-Compartir fotos de clientes
-Principios de Web 2.0
-Uso de flash como interacción con los visitantes.
GLOBAL
-Tener las ideas claras de qué se quiere transmitir
-Tener el trabajo acabado con todas las comprobaciones
pertinentes antes de publicarlo.
DISEÑO
-Diseño como puerta de presentación, muy cuidado.
Imagen coherente con su identidad.
e
-No uso de scroll, puede ser beneficioso dependiendo de
la información que se vaya a usar.
-Uso excesivo de su imagen corporativa, no es favorable
-Diseño de la web muy corporativo, usando variantes de
la imagen corporativa.
-Arriesgarse con la composición
-Fomentar la imagen de marca para no perderla y parez-
ca la web de otra empresa.

CONTENIDO
-Tener claro lo que vamos a comunicar en la web,
contenidos adicionales.
Proyecto web Bebot
-Secciones como mapa o reservas pueden ser muy
1.Briefing
útiles.
-Tener en cuenta qué querría encontrarse el usuario
2.Libro de estilos

y qué quiere conseguir la empresa y aunarlo. 3.Presentación de la

plataforma web

4.Conclusiones
COMPETENCIA SECUNDARIA:

Locales a nivel nacional o internacional que por su imagen, clientela, platos... pode-
mos tomar referencias, posicionarnos frente a ellos...
e

Destacamos su gran diseño en la web todo en flash, interac-

tividad, reservas, información, incentivos para los visitantes
como imágenes, posibilidad de reserva, galeria de arte, area
de prensa... un ejemplo a seguir tanto en organización de
contenidos, como diseño e incentivos.

Web con gran cantidad de información, además de un dise-

ño limpio y acorde con la la imagen que quiere transmitir la Proyecto web Bebot
empresa, el uso de la imagen corporativa es algo excesivo. 1.Briefing
Tomamos de referencia de esta web su gran aporte de
2.Libro de estilos
información, limpieza e imagen.
3.Presentación de la
plataforma web

4.Conclusiones
POSICIONAMIENTO DE LA EMPRESA A TRAVÉS DEL WEBSITE
Una segunda puerta de acceso al local, el usuario tiene que sentir que se encuentra en con-
tacto con el local sin estar presente en él, como diferencia, este local estará disponible para e
el visitante las 24 horas al dia los 7 dias de la semana.

Nuestra principal premisa va a ser la información.

Posibilidades diferentes: Reserva de mesa, material fotográfico del local, la posibilidad de
compartir imágenes de su estancia en el local, enlaces directos a redes sociales para com-
partir la información...

Tenemos claro lo que queremos:

Buen diseño e interactividad con el usuario.
Ofrecer información primaria rapida y sencilla.
Información adicional.
Favorecer a los ya clientes y buscar mercados nuevos.
Proyecto web Bebot
1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
PÚBLICO OBJETIVO
Nuestro target estará comprendido entre la edad de 25 y 40 años, nos interesan personas que
tengan acceso a nuestro local de manera presencial. e
Personas con posibilidad de estar en pleno contacto con las nuevas tecnologías y acceder a
ellas a través de muchos dispositivos, son personas conectadas las 24 horas al dia .

Nuestro target tiene claro lo que quiere, y sabe buscarlo en la red, si no estás en la red no
se pondrán en contacto contigo, por ello, para nosotros, este proyecto web se va a convertir
en clave para contactar con nuestro cliente o futuro cliente.

Nuestro cliente habitual del restaurante será el cliente habitual de la web, para ello te-
nemos que crear la necesidad al cliente de entrar en la web, y conseguir que sea también clien-
te habitual en la web. Para ello, se creará por un lado una agenda del local y eventos y además,
una serie de ofertas e incentivos que atraparán al cliente para estar en contacto continuamente
con la web, tales como ofertas, menus especiales, reservas de mesa, regalos, descuentos...
Proyecto web Bebot
1.Briefing
Necesitamos que el cliente nos tenga en mente antes, mediante y después de la visita al res- 2.Libro de estilos
taurante. 3.Presentación de la
plataforma web

4.Conclusiones
Juntamos nuestras necesidades con las de nuestro público

Información Primaria: Corporativa, quienes somos, dónde estamos, qué ofrecemos, filosofía,
e
imágenes del local...
Información Adicional: Mapa localizador, eventos musicales, cheff especializados, cocktails es-
peciales, jornadas gastronómicas, menús especiales (pareja, grupo, de escapada...), regalos y
descuentos por reserva de mesa on line...
Interactuamos con el visitante: Posibilidad de descarga de menú, carta de cocktails, publicacio-
nes de imágenes de visitantes con posibilidad de descarga, enlaces a web 2.0...
Diseño: Respetando la imagen de Bebot, limpia, sintética con un toque retro y vintage, mezclan-
do dos estilos diferenciados entre el logo y el diseño de la web.
Tecnología: Usaremos html con css, javasript (jquery), flash en alguna animación.

Necesitamos que el cliente nos tenga en mente antes, mediante y después

Proyecto web Bebot
de la visita al restaurante y pueda visitar nuestra web en cualquier momento
1.Briefing
y ésta siempre tenga novedades
2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
Libro de Estilos

e
1.Estructura de Información
MAPA WEB
1. Eventos 2. Promociones 3. Menu Especiales 4. Sabor del Mes 5. Quienes nos visitan
1.1. Menú de hoy
1.2. Calendario
1.3. Eventos Ant.
2.1. La hora del café
2.2. Miércoles de infarto
2.3. Club Beer 3.1. Menú Infantil
3.2. Menú Pareja
3.3. Menu de Empresa 4.1. Mes actual 5.1. Galeria de imágenes
4.2. Siguiente mes

6. Quienes somos 7. Dónde Estamos 8. Trabaja con nosotros 9. Revista Be! 10. Mapa Web 11.Reserva de Mesa
Proyecto web Bebot
CONTENIDOS 1.Briefing

2.Libro de estilos
Eventos: Se informarán de los eventos que tienen o van a te- Promociones: Promociones actuales del local, tales como ofer-
ner lugar en el local, para ello pondremos una subsección con: tas, solo por conectarte a la página o reservar mesa por inter- 3.Presentación de la
el menú de hoy, el calendario con duración de una semana y net...Esta sección se actualizará tanto como sea necesario, asi plataforma web
eventos anteriores ya pasados, estas secciones serán fijas. como el cambio del nombre de la promoción.
4.Conclusiones
CONTENIDOS

Menu especiales: Menus originales que podemos encontrar en

el local, estos menús pueden cambiar según la época del año o
temporada, por ejemplo: verano, halloween, San valentin....
Sabor del mes: Esta sección tiene como finalidad al evento que
tiene lugar dos fines de semana al mes en el local, dedicarle la
e
musica, la comida y bebida a un país en concreto, por tanto en
esta sección se publica el país del mes actual y anunciaremos
el del mes siguiente.

Quienes nos visitan: Sección dedicada a los usuarios, una gale- Quienes somos: Hablamos de nosotros, esta sección no se mo-
ria de imágenes en las que se colgarán las fotos de los clientes, difica.
fiestas, eventos. Estará actualizada siempre.

Dónde Estamos: Localización del restaurante, situación en el Trabaja con nosotros: Breve formulario de contacto para los
mapa. usuarios que deseen trabajar con nosotros.

Revista Be!: Enlace directo a la revista corporativa. Mapa web: Se incluirá el mapa web, actualizado, para facilitar la
navegación al usuario.

Proyecto web Bebot

Reserva tu mesa: Pestaña que continuamente esta presente en
la web, NO se puede modificar. 1.Briefing

2.Libro de estilos

SON CONTENIDOS QUE OBLIGAN AL USUARIO A ESTAR CONECTADO CON NOSOTROS 3.Presentación de la
PERFIL DE USUARIO:USUARIO HABITUAL. plataforma web

4.Conclusiones
2. Aspectos Comunicativos

Imagenes persuasivas, estilo retro y vintage, metáforas visuales en menús de

navegación.
e
Interacción con el usuario desde el primer contacto.

Necesidad de que el cliente sea usuario continuamente, a través de contenidos

novedosos y no repetitivos.

Claridad en los contenidos, sintético y limpio.

Actualización continua de secciones, necesidad de que el usuario se conecte.

Reserva tu mesa: siempre presente en la web.

Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
3. Distribución de Espacios.

Proporciones e
950px x 500px, FIJA SIN SCROLL

Tipología de web
Será una web corporativa y además comercial, vendemos nues-
tros productos/eventos a través de las promociones y ofertas.

950 px
Tecnologías a utilizar
HTML y CSS: Maquetación de la web.
Javascript: Menús desplegables, dinamismo en la web. Cabecera
144 px
Flash: Animaciones que se realizarán en el reservado para ellas.
ActionScript: Animaciones en las que el usuario interactue.
147 px Submenú
Proyecto web Bebot
564 px
Retículas y Módulos 1.Briefing
230 px Contenido
En horizontal, 4 partes diferenciadas, cada una con una longi-
2.Libro de estilos
tud, buscamdo la jerarquización.
43 px Footer 3.Presentación de la
plataforma web

4.Conclusiones
Retículas y Módulos 950 px

158 px
e
144 px Cabecera

147 px División Libre según ilustración Submenú

564 px
616 px 334 px Contenido
230 px

43 px Footer

106 px

Menú

Menú Metafórico Submenú Ilustración

Proyecto web Bebot
Submenú
Pestaña Reserva 1.Briefing
Contenido 2.Libro de estilos
Imagenes, ilustraciones o
en blanco
3.Presentación de la
Menú Footer plataforma web

4.Conclusiones
Fondo e Interfaz
El fondo, en blanco, da limpieza y resalta el diseño.
e
Menu

Submenú

Contenido

Footer Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
4. Diseño de la interacción

e
Sistema de Navegación
Menú principal en horizontal, cualquiera de los botones des-
pliega un submenú, éste con ilustraciones y metafórico, éste
menú irá cambiando y actualizando según los contenido. El
submenú nos lleva en un tercer nivel al contenido.
A parte, tenemos el footer, html sueltas que tienen su propio
contenido y sus propias ilustraciones.

Menu

Ilustraciones
Submenú

Proyecto web Bebot

1.Briefing
Footer 2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
Protocolos de Navegación
Con lo explicado anteriormente tenemos el modo de navega-
ción, en dos click, el usuario tiene la respuesta a sus dudas,
los menús siempren estan presentes y el usuario ve la ruta de
acceso.
e
Mención especial al botón RESERVA TU MESA, éste nunca será
modificado. Está presente en toda la web, al pinchar se desplie-
ga y rellenando el nombre y la fecha tenemos mesa en el local,
podemos hacerlo en cualquier momento de la navegación.

El mapa web, situado en el footer nos ayuda a ver todos los

contenidos de la web, otro servicio al usuario.

5. Uso del color Colores corporativos

Como ya se ha dicho anteriormente, la web tendrá un toque

retro, por tanto, los colores fomentarán esta asociación, SOMOS
UN LUGAR DE OCIO, por tanto los colores tienen que incitar a
ello, al ocio. Partiremos de la imagen corporativa de Bebot y
estos colores corporativos serán protagonistas en esta web, con
ayuda de algunos más. Proyecto web Bebot
1.Briefing

2.Libro de estilos
#5c6266
#d1982a 3.Presentación de la
plataforma web

4.Conclusiones
Usos del Color

Con estos cuatro colores vamos a jugar para organizar nuestra

web, todos ellos tendrán un uso funcional en la web y que el
usuario pueda por los colores relacionar.
1 2
e
1. Usado para los menús, exceptuando el submenú. Para decora-
ción en las ilustraciones, y titulares.

2. Usado para las ilustraciones, submenú, y textos.

3. Links visitados y decoraciones.

4. Decoración en las ilustraciones. 4

3
Contraste de color, porque la página va a tener mucho blanco.

Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
6. Estrategia Tipográfica

TIPOS NATIVOS Arial

Legibilidad en pantalla
e
Menú, submenú y footer: Arial, Helvetica, sans-serif 12 px

Textos: Arial, Helvetica, sans-serif 10 px

Titulares: Arial, Helvetica, sans-serif 12 px

TIPOS RASTERIZADOS Ballpark

Ballpark: para titulares decorativos. Le da caracter a la web

7. Recursos Gráficos e Interactivos

La web como peculiaridad tiene su diseño, su estilo vintage, por ello va-
mos a destacar este contraste de la marca con este diseño.

En la web se van a utilizar metáforas visuales entre lo antiguo y lo mo-

derno. Proyecto web Bebot
Todos los elementos multimedia van a llevar ese estilo, retro; se van a 1.Briefing
utilizar ilustraciones para cabeceras.
Las imágenes, también estarán tratadas con toque antiguo para que la 2.Libro de estilos
web no pierda los colores.
3.Presentación de la
plataforma web

4.Conclusiones
PRESENTACIóN de la PLATAFORMA WEB

Está inacabada, pero se puede ver como funciona, se acabará como plazo
máximo en dos semanas.

http://practicas.escuelaartegranada.com/vparejaextremera/bebot/index.html

Proyecto web Bebot

1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
CONCLUSIONES

- Investigar para saber qué se quiere hacer, da respuestas. Buscar el qué para conse-
guir el cómo. Mirar webs, diseños, usabilidad, navegación, tecnologías... para buscar
lo que queremos.

- El análisis de la competencia, y de nuestro target, nos ayuda a configurar el caracter

de la web.

-Un libro de estilos a fondo, da caracter y facilita el trabajo.

-A la hora de trabajar, me he enfrentado a unas tecnologías nuevas, con las que hay
que jugar y equivocarse para obtener resultados, al tener tantas posibilidades donde
elegir, he escogido acorde al diseño y los puntos fuertes (previa investigacion) de la
web, ya que no me he cerrado puertas en las tecnologías.

-Aún me queda mucho por aprender, pero este proyecto me ha entusiasmado desde el
principio por la gran tarea de aprendizaje y que espero seguir aprendiendo.

-Con respecto a la terminacion del sitio, está inacabado, tengo dudas técnicas que ne-
cesito resolver ya que por mi misma me ha sido imposible, también por miedo a equi-
vocarme. Tengo previsto que en dos semanas esté completamente acabada y subida
Proyecto web Bebot
al servidor. 1.Briefing

2.Libro de estilos

3.Presentación de la
plataforma web

4.Conclusiones
www.bebot.es