DOSSIER DOLCE
DELLA
NONNA
ÍNDICE
HISTORIA
07
31
USER INTERFACE
COMPETENCIA
09
34
ARQUITECTURA EN ÁRBOL
MAPAS MENTALES
19
36
PROTOTIPADO 1. FASE
LOGOTIPO
23
39
PROTOTIPADO 2. FASE
COLORES
27
TIPOGRAFÍAS
29
49
PROTOTIPADO 3. FASE
65
MOCKUP FINAL
01
ANÁLISIS
6
7
HISTORIA Dolce della Nonna es un catering especializado en
Desde entonces ese carácter solidario le ha acom-
repostería situado en el centro de Brighton, una ciu-
pañado de la mano a Paola y es una de las grandes
dad costera inglesa. Ésta empresa de catering abrió
características de su catering. Dolce della Nonna se
sus puertas en 1918 en el piso de debajo de una hos-
caracteriza por ser una empresa elegante y con un
pedería. Nuestra clienta Paola es la hija de los dueños
espíritu filantrópico.
de ésta hospedería. Los padres de Paola emigraron de Italia a Inglaterra en busca de un nuevo hogar. Y en la ciudad de Brighton fue donde decidieron abrir una pequeña hospedería como negocio familiar.
Dolce della Nonna como cualquier empresa va evolucionando con el paso del tiempo y Paola lleva un tiempo pensando en ampliar su negocio a la venta online pero la página web que posee no esta prepa-
La hospedería es una tradición familiar en la fa-
rada para éste tipo de ampliación. Del mismo modo
milia de Paola, ya que sus abuelos regentaban una
la página web de Dolce della Nonna se ha quedado
años atrás. Al terminar la Primera Guerra Mundial el
obsoleta y no se puede navegar bien con las nuevas
mundo sufrió grandes hambrunas y los abuelos de
tecnologías como los móviles inteligentes o las tablets.
Paola ofrecían comida a las familias más necesitadas desde su hospedería.
9
COMPETENCIA Para poder realizar un buen trabajo antes de nada
Una de las principales necesidades que tiene Paola
tras saber un poco la historia y la ética de Paola y su
es que necesita una página web que funcione perfec-
catering de repostería Dolce della Nonna lo más im-
tamente en cualquier dispositivo movil, sea movil,
portante era hacer un análisis de la competencia de
tablet u ordenador.
mercado.
De éste modo ha sido muy importante ver cada
A la hora de hacer este análisis no solo servía ana-
web en el ordenador y en el teléfono móvil. Al ob-
lizar empresas o páginas web de repostería y a que la
servar cada página en dos tipos de dispositivos di-
inspiración te puede llegar de cualquier tipo de ám-
ferentes se han podido ver la diferencia de la web.
bito. Al igual que se pueden encontrar páginas inte-
Llegando a la conclusión de que la web en el móvil se
resantes en cualquier idioma.
estructura en una sola columna al igual que en la ta-
De éste modo aunque el análisis realizado se centre mayormente en páginas web que de un modo o otro estén relacionados con el mundo de la hostelería, también se han tenido en cuenta pequeños detalles de otro tipo de empresas.
blet, y el ordenador por otra parte posee un diseño más horizontal y como mucho puede contener 4 columnas.
10
11
TRITICUM Triticum es una empresa especializada en la panadería que le da mucha importancia a la imagen que ofrece a sus posibles compradores. El diseño de esta página web es muy limpia y ordenada. Mayormente esta web tiene un fondo blanco y claro aunque en varias partes lo combina con una textura en el fondo. La tipografía usada en esta página web es la principal inspiración para este trabajo, sobre todo la utilizada en mayusculas. Al igual que los iconos y el diseño utilizado para explicar la ética de empresa.
12
13
THE FOOD LENS The Food Lens es un restaurante estadounidense que al igual que nuestra clienta al igual de tener un local físico ofrece la posibilidad de una compra online. La estética de esta página web también es muy clara, al tener un fondo mayormente blanco ofrece esta claridad deseada. La idea de poner un vídeo con un texto encima ha sido una característica que me ha gustado mucho pero en vez de usar un vídeo cabía la posibilidad de poner una imagen, algo mas estático para empezar. El menú que baja mientras navegas me ha parecido una buena idea que se puede aprovechar en el proyecto de Paola, al igual de poner a cada lado la hamburguesa y la lupa de búsqueda.
14
15
LUCA Luca es un restaurante italiano que a diferencia de las otras dos páginas analizadas, ésta página mayormente no tiene un fondo claro, ya que utiliza diferentes tipos de texturas o motivos para cada sección que ofrece la web. Esta página web sigue con la estética de poner una foto principal en la página con el logotipo centrado en blanco, algo que al igual que en la web anterior me parece muy interesante. Aunque el mayor interés de esta página me ha parecido el menú desplegable de la hamburguesa, el modo de colocarlo todo centrado con una tipografía bastante grande y con los tres iconos principales de las redes sociales colocados abajo.
16
17
MESS HALL Mess Hall es un festival de comida que se realiza en Minneapolis, Estados Unidos. Ésta página web esta repleta de fondos de diferentes colores que acompañan a la estética juvenil y moderna que tiene el festival, aunque este detalle no sirva en nuestro trabajo ya que tiene una estética diferente. El uso de los iconos de acompañamiento de la página son un elemento muy interesante para la web de Paola, estos elementos ayudan a que la página sea más dinámica y atractiva a la vista. Al igual que otras webs analizadas esta página también tiene una página principal donde aparece el logotipo resaltado sobre un fondo amarillo acompañado de unos iconos que cuando pasas el ratón por encima se mueven según el movimiento.
18
19
MAPA MENTAL Una de las primeras cosas que tuvimos que hacer
A la vez de llegar a diferentes conclusiones en
tras la presentación del proyecto fue crear un mapa
cuanto a la estética que podía seguir el proyecto se
mental en el que se resumía principalmente la ideo-
realizaron las primeras pruebas o ideas de cómo rea-
logía de la empresa, la historia o la estética entre
lizar la página web. Teniendo en cuenta que la pá-
otras cosas.
gina debía funcionar perfectamente en diferentes
Teniendo en cuenta lo planteado por Paola era importante sacar palabras claves que pudieran ayudar en el desarrollo del proyecto. Dolce della Nonna al considerarse una empresa tradicional y a la vez moderna se van poco a poco resumiendo las necesidades básicas para realizar el proyecto.
dispositivos móviles y que cómo máximo debería tener tres niveles, ya que el posible comprador puede llegar a cansarse si le cuesta encontrar o pedir lo que desea. También se ha tenido en cuenta que el interfaz de usuario y la experiencia de usuario.
02
DISEÑO
22
23
LOGOTIPO A la hora de realizar el logotipo el primer paso de
la conclusión de que aunque un logotipo redonda es
todos fue coger un boli y un papel he ir apuntando
difícil de colocarlo según donde podía ser una idea
todas las palabras relacionadas con la repostería
interesante.
que me viniesen a la cabeza como rodillo, espátula, croissant... Entre otras muchas palabras.
Juntando las dos ideas principales, el círculo y la manga pastelera se me ocurrió escribir el nombre de
Una de las ideas que mas me gusto fue el concep-
la empresa simbolizando el papel de los muffins y el
to de la manga pastelera, un utensilio utilizado en la
frosting que va apareciendo por la parte de arriba del
repostería que mayormente es utilizado para echar
circulo y se va decorando poco a poco el muffin.
el frosting de la tarta o el muffin de un modo más estético dándole un punto sofisticado.
Por otro lado la forma de colocar el frosting siguiendo la raya que baja y partiendo el logo por la
A la hora de ir realizando o probando formas di-
mitad cada curva simboliza una inicial del nombre
ferentes de realizar el logo llegué a la conclusión de
de la empresa. La primera curva sería una “d” ma-
que muchos productos que se venden el las paste-
yúscula, la segunda una “d” minúscula y la última
lerías tienes forma redondeada, como las tartas,
curva una “n” minúscula tumbada.
los muffins o las galletas. De esta manera llegué a
24
25
26
PANTONE 432C
PANTONE BLACK 4C
PANTONE 721C
27
COLORES Los colores utilizados en todo el proyecto no son
no ayudaba mucho al diseño, por eso el color utiliza-
mas que tres. El Pantone 432C, el Pantone Black 4c y
do para los textos es un color marrón prácticamente
el Pantone 721C con un matiz del 10%.
negro pero que acompaña muy bien al color azul.
El color utilizado para el logotipo es el Pantone
Por último aunque no se vea mucho la página web
432C, este color es un azul grisáceo muy elegante.
tiene de fondo un color que se podría describir como
Este color ha sido utilizado en el logotipo, en el menú
blanco roto, este color ayuda a la vista ya que el color
de la página y en el footer. Al ser usado en diferentes
blanco blanco en las pantallas es dañino a la vista y
partes del proyectos diferentes le da una conexión
de éste modo disminuimos esta molestia. Este color
y un sentido al trabajo. El color azul representa la
también ha sido utilizado encima de las fotos con una
responsabilidad y seguridad que debe y transmite la
opacidad baja para dar la mista estética y estilo a las fotos
empresa y el tono gris del color simboliza la elegan-
ayudando a que se integren y combinen perfectamente.
cia del proyecto. Por otro lado tenemos el color Pantone Black 4C que es el color usado para los textos de la página web. El negro era un color frío y con mucho contraste que
28
OSWALD MEDIUM ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 («»‹›“”&%#¿¡!?-*[]”) MERRIWEATHER ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 («»‹›“”&%#¿¡!?-*[]”)
29
TIPOGRAFÍAS Las tipografías utilizadas en éste proyecto son
Por otro lado la tipografía utilizada para los tex-
dos, estas dos tipografías son descargadas desde la
tos es otra tipo de Google Fonts llamada Merriwea-
plataforma gratuita de Google Fonts.
ther. Esta tipografía es una tipografía con serifa que
La primera tipografía se llama Oswald y es una tipografía de palo seco estirada que la he utilizado para poner los titulos o separadores de la página web. El uso de esta tipografía ha sido sacada de la página web de Triticum que usa esta tipo para su logo y el menú.
la hace muy interesante de combinar con un tipo de letra como la Oswald por su apariencia tan diferente. La combinación de estas dos tipografías ha sido una buena idea para este tipo de proyectos.
30
31
USER INTERFACE A la hora de realizar los iconos al igual de el logo-
Los iconos que más aparecen en toda la web son el
tipo lo primero que hice fue coger un lapiz y un papel
carro de la compra, muy importante para poder rea-
he ir bocetando unos posibles iconos. Teniendo en
lizar esas compras online, la lupa para ayudar a una
cuenta el brainstorming realizado para el logotipo
búsqueda más rápida y los iconos de las tres princi-
he utilizado los mismos conceptos o ideas para rea-
pales redes sociales asociadas a la empresa.
lizar estos.
El resto de los iconos se han colocado para acompa-
La mayor influencia a la hora de hacer los iconos
ñar a los principales conceptos de la empresa, como los
fueron los flat icons, es decir esos iconos realizados
6 tipos de productos que ofrece la empresa. En vez de
mediante lineas y curvas sin ningun tipo de masa de
repetir el nombre del producto estos estan acompaña-
color. Algunos iconos se han colocado dentro de un
dos de un icono que representa ese mismo concepto.
circulo y el icono en blanco, siendo el negativo de ese icono.
03
PROTOTIPADO
34
35
ARQUITECTURA EN ÁRBOL
36
1. FASE DEL PROTOTIPADO
37
1. FASE DEL PROTOTIPADO
39
2. FASE DEL PROTOTIPADO (MÓVIL)
40
2. FASE DEL PROTOTIPADO (MÓVIL)
41
2. FASE DEL PROTOTIPADO (MÓVIL)
42
2. FASE DEL PROTOTIPADO (TABLET)
43
2. FASE DEL PROTOTIPADO (TABLET)
44
2. FASE DEL PROTOTIPADO (TABLET)
45
2. FASE DEL PROTOTIPADO (ORDENADOR)
46
2. FASE DEL PROTOTIPADO (ORDENADOR)
47
2. FASE DEL PROTOTIPADO (ORDENADOR)
49
3. FASE DEL PROTOTIPADO (MÓVIL)
50
3. FASE DEL PROTOTIPADO (MÓVIL)
51
3. FASE DEL PROTOTIPADO (MÓVIL)
52
3. FASE DEL PROTOTIPADO (MÓVIL)
53
3. FASE DEL PROTOTIPADO (TABLET)
54
3. FASE DEL PROTOTIPADO (TABLET)
55
3. FASE DEL PROTOTIPADO (TABLET)
56
3. FASE DEL PROTOTIPADO (TABELT)
57
3. FASE DEL PROTOTIPADO (ORDENADOR)
58
3. FASE DEL PROTOTIPADO (ORDENADOR)
59
3. FASE DEL PROTOTIPADO (ORDENADOR)
60
3. FASE DEL PROTOTIPADO (ORDENADOR)
04
MOCKUP
65
DOLCE DELLA NONNA