Memoria de proyecto web "Azait" by Olga Murillo

MEMORIA DEL PROYECTO WEB AUTOGESTIONABLE

ÍNDICE BRIEFING 7 LIBRO DE ESTILOS

JERARQUÍAS 22 PUNTOS FUERTES DE LA WEB

DISTRIBUCIÓN DE ESPACIOS

NAVEGACIÓN 64 USO DEL COLOR

RECURSOS GRÁFICOS

TIPOGRAFÍAS 68 USUARIO FINAL CONCLUSIONES

72 75 5

INTRODUCCIÓN Este proyecto tiene el objetivo de desarrollar una web autogestionable para una empresa. Para ello, llevamos a cabo un análisis de las necesidades de “AZAIT”, mediante una análisis de la competencia directa e indirecta y una investigación del público objetivo. Con lo que ello nos aporta, elaboramos un libro de estilos que recoge la manera en la que se debe desarrollar la web. Por último, ésta memoria recoge las conclusiones finales del proceso de trabajo y desarrollo del proyecto.

BRIEFING EMPRESA El cliente, es una empresa que adquiere aceite lampante a terceros, éste aceite se obtiene de olivas caídas del árbol, con un grado de acidez no apto para consumo, el cual conserva todas las propiedades del ácido oléico, ya que no tiene que ser procesado para ser usado como producto alimentario. ¿Para qué sirve el producto? Está destinado a usarse para obtener del aceite beneficios en otros aspectos no nutritivos,ya que por sus propiedades es apto para todo tipo de “remedios caseros”. Por ello, además del aceite por si solo, la empresa ofrece tres packs con todos los ingredientes necesarios para que la persona que lo adquiera pueda elaborar de manera artesanal : jabones, tratamientos para la piel, y tratamientos para el pelo.

DAFO Debilidades · El aceite de oliva no se encuentra en el mercado para uso no alimetario. · Aunque las propiedades del aceite son muy populares, la gran mayoría desconoce los grados de acidez que lo hacen beneficioso para otros aspectos no nutricionales que a su

vez se pierden al hacerse aptos para el consumo. · Que el usuario desvincule el aceite de sus propiedades nutritivas y se centre en las que nos competen. Amenazas · El uso de cualquier aceite para los mismos fines. · Producto no reconocible para el uso al que va destinado en el punto de venta habitual. · Obtención de una oliva muy específica (alto grado de acidez), por lo que incrementaría el precio de venta. · El usuario no busca el producto para un uso tan concreto, por lo que depende de la promoción. Fortalezas · Andalucía es la mayor productora de aceite de oliva de España, y su aceite está asociado a calidad. · El producto es valorado y percibido como sano y beneficioso por las conocidas propiedades del aceite. · Al no ser procesado, es un producto más puro y ayuda a su percepción de producto 100% ecológico. · El aceite de calidad está aceptado como producto caro, por lo que el precio será bien acogido.

POSICIONAMIENTO EN EL MERCADO

PÚBLICO OBJETIVO

Su posicionamiento se basa en la preferencia del producto natural sobre el producto químico y artificial. Ofrece al consumidor un aceite de calidad, sin procesos que alteren sus propiedades para usos no alimenticios, que por otra parte se vienen dándo a lo largo de la historia, desde la fabricación de jabón, hasta la hidratación de la piel.

El público que buscamos, es consumidor de productos ecológicos, valora el modo de vida sana y aprecia los métodos tradicionales de elaboración de productos para los usos indicados. Según un estudio del ministerio de medio ambiente en España, éste tipo de consumidores son en su mayoría mujeres de mediana edad, con familia, que se preocupa por su salud y la de los suyos. Es conocedor de las ventajas de éste tipo de productos y sabe identificarlos, no se deja llevar por las marcas. Dentro de este tipo de consumidor, el estudio los divide en cuatro perfiles que nos interesa conocer por su potencial como consumidores de nuestro aceite:

VALORES DE LA EMPRESA Los valores en los que pivota la empresa son: “Ecológico, Tradicional, Calidad y Saludable” La empresa busca recuperar los modos tradicionales del uso del aceite, fomentando que el consumidor produzca el mismo el producto acabado. Quiere ser percibida como una empresa ecologista, que respeta el medio ambiente y promueve una vida saludable a través de productos naturales.

- “Des-implicado“ (26%), consume productos ecológicos porque está de moda. - “Convencido“ (32%), deconfía de las marcas y reivindica una vida saludable y respetuosa con el medio ambiente. - “Ecologista“ (21%), le preocupa la conservación del medio ambiente y cree que está en las manos de todos. - “Preocupado por la salud“ (21%), cree que los productos ecológicos los ayudan a cuidar su salud y la de los suyos.

Oportunidades · Aumento de hábitos de vida saludable. · Auge de productos naturales, sobre productos químicos. · Los remedios tradicionales son bien acogidos y alorados.

-Jabones naturales con aceite de oliva específicamente. - Competencia directa (producto similar) -Empresas más populares y accesibles (target que consume por que está de moda).

WEBSITE AUTOGESTIONABLE ¿Por qué necesitamos una web? La empresa necesita una web fundamentalmente para: - Venta online - Darse a conocer como empresa y a su producto - Promover contenido (remedios tradicionales con aceite), que inciten a la compra delproducto - Generar cercanía y confianza al usuario Quiere ser percibida como una empresa cercana, comprometida y ecológica. Necesita que su contenido capte la atención del consumidor /público objetivo para persuadirlo de la compra transmitiendo los valores antes mencionados, y dejando patente las diferenciación existente entre su producto y cualquier otro aceite de la competencia que si ha sido procesado para uso alimentario. Por otro lado, desde el punto de vista del usuario, necesitamos una web donde éste pueda adquirir el producto con facilidad (tienda online), y que le resulte de utilidad por sus contenidos, y facilite la fielización del cliente, a través de un blog donde pueda encontrar recetas, remedios y usos de nuestro producto.

COMPETENCIA

Secundario

Principal - Cosmética ecológica no conocida (target ecologista). CARRITO - Tiendas on-line de productos ecológicos sin Usabilidad

Principal Usabilidad

productos propios.

Apariencia

Competencia de nuestro website La principal competencia de este producto en la red son: - Páginas que ofrezcan recetas similares con aceite - Tiendas online de productos ecológicos (jabones, cremas...) Respecto a la primera, nos diferenciamos en que el usuario podrá encontrar la información que busca bien organizada y documentada, además de ofrecerle la posibilidad de adquirir el material para hacerlo si entra en la categoría de los packs ofertados, y si no es así, siempre puede adquirir nuestro aceite, mucho más adecuado y acorde con lo que necesita.

NEWSLETTER

Apariencia

Grupo 1 “Jabones naturales con aceite de oliva específicamente” JABONES NATURALES JABONES CHURRUCA submenu menu principal submenu menu principal

NEWSLETTER

SECCIÓN quienes somos jabones naturales/ productos especial regalos venta online regalos de empresa contacto inicio

La ventaja respecto a los productos ecológicos es que ofrecémos la posibilidad de proveer al consumidor con lo necesario para que el mismo elabore lo que precise, dándole así la seguridad de un producto 100% artesano.

puntos de venta FAQ

Las empresas de venta online, más releantes como competencia, podemos dividirlas en cinco grupos: -Jabones naturales con aceite de oliva específicamente. - Competencia directa (producto similar) -Empresas más populares y accesibles (target que consume por que está de moda). - Cosmética ecológica no conocida (target ecologista). - Tiendas on-line de productos ecológicos sin productos propios.

CARRITO

FAQ

Secundario Principal Usabilidad Apariencia

submenu

Grupo 3 “ Empresas más populares y accesibles (target que consume por que está de moda) “ BOTTEGA VERDE THE BODY SHOP SECCIÓN submenu menu principal submenu menu principal quienes somos franquicias tiendas atc. al cliente *Vota por tu regalo/ regalos promocionales inicio novedades maquillaje rostro cuerpo cabello baño hombre otros outlet Naturaleza eficaz Fragancias Noticias *Body club Ofertas Regalos Top ventas Líneas *belleza con corazón

10 CARRITO NEWSLETTER

Grupo 2 “Competencia directa (producto similar) “ OLEA LA CHINATA menu principal submenu menu principal

SECCIÓN portada quienes somos notas productos nuestro entorno contacto enlaces blog cosmética regalos menaje nuestras tiendas

* secciones especiales

0 12

tienda boletín atc. al cliente

*belleza con corazón * secciones especiales

Secundario

Principal Usabilidad Apariencia

10CARRITO

SECCIÓN

Grupo 5 “Tiendas on-line de productos ecológicos sin productos propios. “ TRESOR DE TANIT SABIA NATURA submenu menu principal submenu menu principal

área del cliente contacto como comprar FAQ portada nosotros nuevos productos magazine/blog tienda boletín atc. al cliente

NEWSLETTER

Grupo 4 “Cosmética ecológica no conocida (target ecologista) “ MAHNAZ PAYMONI MARNYS submenu menu principal submenu menu principal

SECCIÓN ¿Dónde estamos? ¿Porqué cosmética ecológica? Certificaciones Productos servicios complementos ofertas/lotes marcas contacto

Mi empresa AZZAIT

SECCIÓN

INVESTIGACIÓN Entrevista a “cooperativa andaluza San Fco de Asís de Montefrío” Saludos, Soy estudiante de diseño web en la escuela de diseño Estación Diseño, en Granada, y me dirijo a usted para solicitar su ayuda en la recopilaión de información para mi proyecto final. Este consiste en crear una web autogestionable para una empresa ficticia de venta de aceites, por lo que su ayuda me sería de gran utilidad dados sus conocimientos y experiencia. Le explico en que consiste la empresa: se encarga de distribuir aceite lampante como producto no alimentario, con el fin de ser usado en la fabricación de remedios caseros talescomo, jabones, tratamientos capilares y cutáneos. A contiuación, le adjunto las preguntas que agradecería respondiera, muchas gracias porsu tiempo. Atentamente: Olga Murillo

1. ¿Cómo se obtiene el aceite lampante? Se obtiene de las aceitunas que caen al suelo, en malas condiciones y con un grado de acidez alto. 2. ¿Se vende sin procesar?¿Cuál es el coste? Sí, se venden por un 30% o 40% menos que el procesado. 3. ¿Cuáles son sus diferencias sobre uno procesado? No está filtrado ni decantado, ni sometido a un proceso de refinado. 4. ¿Es perjudicial de algún modo su uso no injerido? NO 5. ¿Encuentra alguna ventaja para el empresario en la venta de aceite lampante como producto en sí? Sí, porque se quita excedentes y “aceite malo” 6.¿Conoce algún producto similar? Todos los aceites vegetales sin procesar, su venta es en el molino. 7. ¿Cree que el cosumidor lo rechazaría o lo aceptaría? ¿Por qué? En un principio, lo rechazaria. 8. ¿Ve factible su venta al público?¿Por qué? No, pero si se potencian sus propiedades y beneficios en la venta tal vez.

Entrevista a distintos blog de remedios naturales http://nuestros-remedios-naturales.blogspot.com.es/ http://remedios-naturales-caseros.blogspot.com.es/ http://www.cebanatural.com/blog.php Saludos, Soy estudiante de diseño web en la escuela de diseño Estación Diseño, en Granada, y me dirijo a usted para solicitar su ayuda en la recopilaión de información para mi proyecto final. Este consiste en crear una web autogestionable para una empresa ficticia de venta de aceites, en la que se ofrecería información y recetas de remedios caseros con aceite de oliva. Le explico en que consiste la empresa: se encarga de distribuir aceite lampante como producto no alimentario, con el fin de ser usado en la fabricación de remedios caseros tales como, jabones, tratamientos capilares y cutáneos. A contiuación, le adjunto las preguntas que agradecería respondiera, muchas gracias por su tiempo.

1. ¿Podría describir brevemente al usuario de su blog (edad, sexo, intereses...)? 2.¿ Ve factible la venta de este aceite ?¿Cree que los usuarios del blog lo comprarían? 3. Le parece atractiva la venta de packs con los ingredientes necesarios para la elaboración de remedios caseros, teniendo que ser el consumidor quien elabore el producto final?¿Por qué? 4.¿Diría que el aceite tiene la suficiente presencia en los remedios caseros como para dedicarle un blog? 5.¿Con qué frecuencia actualiza contenidos para no perder la fidelidad del usuario? 6.¿Le facilita el usuario sugerencias o le sugiere contenidos para su blog?

Atentamente: Olga Murillo

MIni-encuesta para establecer el perfil del público objetivo. (A partir de ella se ha obtenido una muestra significativa en la que se ha basado el briefing) Edad: Sexo: Nº de hijos: 1. Del 1 al 10, ¿cómo valora los remedios caseros? 2. ¿Es consumidor/a de productos ecológicos?¿De qué tipo? 3.¿Emplea el aceite con uso no alimenticio?. Ponga un ejemplo. 4. Adquiriría aceite de oliva con características especiales para remedios cutáneos y capilares, no apto para el consumo alimentiio?¿Por qué? 5. Valore del 1 al 10, Sitio web donde pueda consultar usos alternativos y remedios elaborados con aceite.

CONCLUSIONES GENERALES · Éste tipo de producto se obtiene a partir de un aceite fácil de adquirir y económico, sin necesidad de que la empresa que lo distribuya tenga que disponer de olivares ni tenga que encargarse de su obtención, lo cual hace más viable económicamente el proyecto. · No existe en el mercado nada similar, aunque se venda en los molinos de aceite para ser usado en productos no alimenticios, el consumidor al por menor no puede adquirirlo. · No es fácil que el consumidor adquiera el producto, pero para que así sea, concluyo que hay que potenciar de manera muy obvia en la web sus propiedades y características que no poseen los aceites que usan para cocinar. · Aunque el número de encuestas realizadas no es suficiente para sacar datos realistas, a partir de estas y del estudio del ministerio de medio ambiente en España de consumidores de productos ecológicos, diría que el producto tiene más posibilidades de ser comprado por un público mayormente femenino, joven/adulto, y que consume productos ecológicos de otro tipo, destacando también a las mujeres con hijos. · Hay que destacar los valores: ECOLÓGICO, SALUDABLE y CERCANO o de confianza, ya que son los que más veces aparecen mencionados o implícitos en las valoraciones de los consumidores de productos ecológicos. · La web tiene que ser sencilla y muy intuitiva, para facilitar y guiar al usuario en la compra o encontrar el contenido que busca, que tiene que ser de calidad y profesional, además de estar bien clasificado por categorías, para diferenciarse de otras webs de contenidos similares.

Perfil ficticio de consumidor de aceite no alimenticio Fina, 36 años, tiene 2 hijos y una economía media-alta. Se preocupa por la salud de su familia, y procura no abusar de los fármacos y productos procesados. Le gusta que sus hijos merienden sano y que no coman bollería industrial, por lo que compra productos ecológicos. Se preocupa del medio ambiente y recicla, por lo que valora los recipientes reciclabes o reutilizables. No le importa gastar un poco más si tiene la certeza de que lo que compra es de calidad y natural.

LIBRO DE ESTILOS WEB AUTOGESTIONABLE

JERARQUÍAS

JERARQUÍA DE CONTENIDOS JERARQUÍA SEGÚN USUARIO

Para establecer uan jerarquía en los contenidos de la web, hemos tenido en cuenta que buscan los distintos perfiles de usuarios de la web (Tabla1). Concluyendo así con el siguiente orden de preferencias en los contenidos: Ofertas Productos Packs Recetas y consejos (Blog) Certificaciones (Calidad) Contacto Nosotros Preguntas frecuentes y RRSS Teniendo esto en cuenta, debemos priorizar los trres primeros, dando una mayor visibilidad en la web.

Cliente

Des-implicado

Preocupado por la salud

Ecologista

Convencido

Nosotros

Ofertas

Certificaciones

Contacto

Productos

Recetas y consejos

Productos

Packs

Recetas y consejos

Productos

Ofertas

Packs

Recetas y consejos

Certificaciones

Ofertas

Packs

Certificaciones

Nosotros

Packs

Productos

Recetas y consejos

FAQ

Packs

FAQ

Nosotros

Ofertas

Nosotros

Contacto

Nosotros

FAQ

Contacto

FAQ

Contacto

Inicio

Tabla 1

JERARQUÍAS

ESTRUCTURA JERÁRQUICA: HOME El contenido se divide en dos menús, el menu principal contiene los elementos que queremos hacer más visibles, y el secundario la información relevante para la empresa, pero que no tiene demasiado interés para el usuario. El objetivo final de esta jerarquía, es potenciar la venta del producto, facilitando al usuario el acceso a la compra del mismo. Además de a través del menú, podrá acceder a las tres secciones más destacables a partir del contenido de la propia home, como detallaremos más adelante.

header CARRITO RRSS

artículos seleccionados enlaces externos menu principal

menu secundario

OFERTAS PRODUCTOS PACKS ARTESANOS

CALIDAD CONTACTO NOSOTROS

Formulario Productos en oferta

Muestra solo los packs

ACEITE JABONES PIEL CABELLO Páginas con la misma estructura, contenido por categorías

Certificaciones

Contenido quienes somos

RECETAS CONSEJOS Blog

footer MENÚ

acceso rápido al menu

RRSS

Avisos Legales

FAQ

página de preguntas frecuentes

PUNTOS FUERTES DE LA WEB

DISTRIBUCIÓN DE ESPACIOS

PUNTOS FUERTES DE LA WEB

DISTRIBUCIÓN DE ESPACIOS

1. PRODUCTOS fáciles de encontrar, se encuentran

El ancho de la retícula donde se distribuye el contenido es de 970px.

divididos por categorías en el menú.

2. LA INFORMACIÓN poco relevante para el comprador, se encuentra en un menú secundario y no confunde al usuario.

3. EL CARRITO está visible en todo momento, indicando que hemos seleccionado para la compra.

El scroll varía según la sección, que variará en las de productos, dependiendo del número de artículos que se muestren. Todas las páginas se basan en la misma retícula de 12 columnas. El body de la web, se centrará en el navegador.

4. LOS CONTENIDOS DEL BLOG aparecen en el menú principal clasificados por categorías, y además se muestran los más relevantes en la home, puetso que es una información importante para el usuario. 5. EL ASPECTO GENERAL de la web es sencillo y facilita la navegación para los usuarios más inexpertos.

DISTRIBUCIÓN DE ESPACIOS

80px 10px

70px

RETÍCULA BASE CUERPO ancho: 970 px dividido en 12 columnas de 70px medianil de 10px

MÓDULOS 70px x 80px *el scroll de la página nunca cortará un módulo.

240px

320px 1250px (14 módulos de alto)

COLUMNAS 1 columna 970px 2 columnas 480px 3 columnas 320px 4 columnas 240px 6 columnas 160px

160px

480px

970px

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS 240 x 80 HEADER

240 x 170 550 x 80

HEADER (parte fija) · Logotipo, enlace a la HOME. · Redes sociales, enlace alas redes sociales de la empresa. · Carrito, ventana emergente que nos muestra los artículos que hemos añadido y desde donde podemos realizar la compra. · Menú principal desplegable, nos enlaza a las páginas del contenido principal. · Menú secundario, está oculto y aparece con un hover sobre la parte visible de este. Contiene la información menos relevante. SLIDE · Pase de 3 diapositivas (ofertas, packs y productos), en ellos habrá “una llamadaa la acción”, para que el usuario clicke y vaya directamente al producto. CONTENIDO · Entradas del blog, 2 bloques de distinto peso, con la última entrada de las dos categorías del blog (recetas y consejos) · Banner, en el que se muestran las últimas promociones estacionales, enlazan directamente al producto.

390 x 260

480 x 260

CONTENIDO

Ancho 970px Altura 1250px (14 módulos) 1,5 scroll

970 x 260

970 x 170

970 x 260 FOOTER

HOME

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

1250px (14 módulos de alto)

BOCETOS GUI

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS HEADER

240 x 80

240 x 170 550 x 80

320 x 170

HEADER (parte fija) · Logotipo, enlace a la HOME. · Redes sociales, enlace alas redes sociales de la empresa. · Carrito, ventana emergente que nos muestra los artículos que hemos añadido y desde donde podemos realizar la compra. · Menú principal desplegable, nos enlaza a las páginas del contenido principal. · Menú secundario, está oculto y aparece con un hover sobre la parte visible de este. Contiene la información menos relevante. CONTENIDO · Imagen de la sección, acompañada de texto explicativo. Los textos se colocan en el bloque derecho de (320 x 170), teniendo en cuenta el menú desplegable. · Miniaturas de los productos, se colocarán en las 4 columnas centrales. Contiene imagen del producto, nombre, precio, y posibilidad de añadir al carrito. Deben aparecer un mínimo de ocho productos por sección. En el caso de ampliar la galería, debe respetarse siempre el módulo de separación con el footer y el header.

150 x 170

CONTENIDO

Ancho 970px Altura 1250px, variable según el número de productos. (14 módulos mínimo) 1,5 scroll

630 x 260

970 x 260 FOOTER

OFERTAS/PACKS/CATEGORÍAS

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

1250px (14 módulos de alto)

BOCETOS GUI

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS HEADER

240 x 80

240 x 170 550 x 80

HEADER (parte fija) · Logotipo, enlace a la HOME. · Redes sociales, enlace alas redes sociales de la empresa. · Carrito, ventana emergente que nos muestra los artículos que hemos añadido y desde donde podemos realizar la compra. · Menú principal desplegable, nos enlaza a las páginas del contenido principal. · Menú secundario, está oculto y aparece con un hover sobre la parte visible de este. Contiene la información menos relevante. CONTENIDO ·Miga de pan. ·Imagen ampliada del producto y miniaturas del mismo a la izquierda. A la derecha, descripción del producto y posibilidad de añadir al carrito. · Pasarela de productos similares, que puedan intersar al usuario. Al clickar en ellas te enlaza al detalle del producto. FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes.

150 x 260

970 x 170

480 x 260

240 x 260

CONTENIDO

Ancho 970px Altura 1250px 1,5 scroll

320 x 80

970 x 260 FOOTER

DETALLE DEL PRODUCTO

· Enlaces a redes sociales · Avisos legales y política de privacidad.

1250px (14 módulos de alto)

BOCETOS GUI

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS HEADER

240 x 80

240 x 170 550 x 80 630 x 260

PRODUCTOS

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

970 x 260 FOOTER

CONTENIDO · Imagen de la sección, acompañada de texto explicativo. Los textos se colocan en el bloque derecho de (320 x 170), teniendo en cuenta el menú desplegable. · Cuatro bloques, uno para cada tipo de producto, al clickar te enlaza con la categoría elegida.

320 x 170

CONTENIDO

320 x 170

Ancho 970px Altura 1250px 1,5 scroll

1250px (14 módulos de alto)

BOCETOS GUI

DISTRIBUCIÓN DE ESPACIOS

240 x 80

240 x 170

HEADER

550 x 80 970 x 350

BOCETOS GUI ARTESANOS (BLOG)

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

CONTENIDO

320 x 260

970 x 260 FOOTER

CONTENIDO ·Imagen representativa del blog, con texto explicativo de las sección y lo que el usuario va a encontrar. · Imagen y texto de las dos últimas entradas. · En la parte derecha, categorías del blog, etiquetas, últimas entradas y widgets de facebook y twiter.

480 x 260

1350px (15 módulos de alto)

170 x 530

Ancho 970px Altura 1350px 1,5 scroll

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS HEADER

240 x 80

240 x 170 550 x 80

BOCETOS GUI

· Enlaces a redes sociales · Avisos legales y política de privacidad.

970 x 260

CONTENIDO ·Imagen de la entrada. ·Texto de la entrada. · Debajo, comentarios de los usuarios. · En la parte derecha, categorías del blog, etiquetas, últimas entradas y widgets de facebook y twiter. FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes.

CONTENIDO

480 x 170

970 x 260 FOOTER

480 x 350

1250px (14 módulos de alto)

Ancho 970px Altura 1250px (puede variar según el número de comentarios en la entrada) 1,5 scroll

170 x 530

DETALLE DE ENTRADAS/ARTESANOS (BLOG)

DISTRIBUCIÓN DE ESPACIOS

BOCETOS GUI

480 x 260

CONTENIDO ·Formulario de contacto · Información de la localización de las oficinas de la empresa y mapa. FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

HEADER

970 x 260

320 x 170

CONTENIDO

550 x 80

240 x 80 970 x 260 FOOTER

Ancho 970px Altura 980px 1,2 scroll

240 x 80

240 x 170

980px (11 módulos de alto)

CONTACTO

DISTRIBUCIÓN DE ESPACIOS

DISTRIBUCIÓN DE ESPACIOS HEADER

240 x 80

240 x 170 550 x 80

BOCETOS GUI

970 x 350

NOSOTROS

630 x 350

CONTENIDO ·Imagen de la empresa · Texto descriptivo del quienes somos (a dos columnas). · Eslogan que refleje los valores de la marca.

630 x 80 970 x 260 FOOTER

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

CONTENIDO

1250px (14 módulos de alto)

Ancho 970px Altura 1250px 1,5 scroll

DISTRIBUCIÓN DE ESPACIOS

240 x 80

240 x 170

CERTIFICACIONES

HEADER

BOCETOS GUI

550 x 80

Ancho 970px Altura 1080px 1,3 scroll

630 x 350

CONTENIDO

970 x 350 1080px (12 módulos de alto)

970 x 260 FOOTER

FOOTER (parte fija) · Acceso a las páginas del menú principal y secundario · FAQ, Accesoa págna de preguntas frequentes. · Enlaces a redes sociales · Avisos legales y política de privacidad.

NAVEGACIÓN

HEADER RRSS y carrito

MENÚ PRINCIPAL El Menú principal, contiene las secciones más destacables y que interesan al usuario. Tienes dos desplegables, productos; que se divide en cuarto categorías y artesanos, que es el blog de la empresa; se despliega dejando acceder al usuario directamente a la categoría que decida (consejos y recetas), que enlazan con las entradas del blog.

MENÚ (PRINCIPAL Y SECUNDARIO) desplegado y oculto

MENÚ SECUNDARIO El menú secundario está oculto a simple vista, tiene una llamada de atención con una pestaña que sobresale del menú principal, y que se hace visible al hacer hover en el. Contiene las secciones más irrelevantes de la web.

HEADER En él encontramos el carrito, bien visible y las redes sociales.

FOOTER Tenemos enlaces a todas las secciones de los dos menús, para permitir accedeer al usuario sin hacer scroll. Contiene también las redes sociales, preguntas frecuentes y los avisos legales.

FOOTER Acceso a menú, RRSS , información y avisos legales.

USO DEL COLOR

RECURSOS GRÁFICOS

COLORES CORPORATIVOS

RECURSOS GRÁFICOS

· La web tendrá un aspecto general en clave alta (colores claros). Los colores del logotipo se usarán para la tipografía y para los hover, resaltano los elementos.

Los recursos gráficos empleados se basan en el etiquetado del producto, se usan en el menú, y los títulos de las entradas.

#484840 # dac244 · La paleta cromática que se usa en los recursos gráficos con los colores corporativos es:

# f2f0e7 # dddbcd

PICTOGRAMAS Para el carrito de la compra, se usa un pictograma a modo de metáfora visual, que indica al usuario que hay puede consultar su compra. Se usarán iconos personalizados con el color corporativo para las redes sociales.

# beb889

TIPOGRAFÍAS

SOURCE SANS PRO REGULAR ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@ FAMILIAS TIPOGRÁFICAS AVERIA SANS LIGHT ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@ AVERIA SANS BOLD ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@

SOURCE SANS PRO BOLD ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@ SOURCE SANS PRO ITALIC ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@ SOURCE SANS PRO BOLDITALIC ABCDEFGHIJKLMNÑO PQRSTUVWXYZ abcdefghijklmnño pqrstuvwxyz 0123456789 ¿?¡!@

La tipografía para el cuerpo de texto será SOURCE SANS PRO REGULAR, usando sus variantes italic, bold y bolditalic, según el texto lo requiera.

Rejilla base de 14 px.

Para el menú, textos en banner y slides, h1 y h2, usaremos la familia AVERIA SANS LIGHT . Su versión bold, solo la usaremos en h1 y h2, que tiene relevancia para el posicionamiento de la web. Ambas tipografías son web fonts, descargables en : http://www.google.com/fonts Por lo tanto, habrá que implementarlas en el código para su uso. El color para los textos es el corporativo: #484840

TAMAÑOS TIPOGRÁFICOS

14px

12 px = 1em 1.16 em

Rejilla base de 14 px. Tamaños tipográficos.

1.3 em 1.5 em 1.7 em

La retícula, tiene una rejilla baseque se incrementa cada 14px. La tipografía del texto base tendrá un tamaño de 12px y un interlineado de 14px. Según el ancho de la columna, podemos encontrar mayor o menor número de palabras por líneas, en este gráfico se indica el tamaño de columna máximo y mínimo que podemos utilizar para una buena lectura del texto(tabla 2).

#484840

Color para la tipografía en la web.

TIPOGRAFÍAS

ancho 150px

Tabla 2. Anchura máxima y mínima de columna Menú secundario Categorías (desplegable) Titulos (h1 y h2) 14px

ancho 230px

PACKS | PRODUCTOS | ARTESANOS

Menú principal 18px

ancho 310px

Tipografías de slides y banner texto rasterizado, no se ajusta a la rejilla. ancho 390px

ancho 480px

USUARIO FINAL

GESTIÓN DE CONTENIDOS Las partes autogestionables de esta página web, son la sección ARTESANOS, y el catálogo de productos( TIENDA ). Para la primera, al tratarse de un blog de recetas y consejos, debe actualizarse semanalmente, ofreciendo al usuario material de interés y que puede consultar con periodicidad. Además, los propios usuarios se encargarán de dar contenido a esta sección con sus comentarios, lo cual es positivo para la imagen de la empresa. El apartado de productos sin embargo, debe actualizarse dependiendo de los artículos que la empresa tenga en stock, y actualizando las ofertas correspondiéndose con las promociones de cada momento.

CONCLUSIONES DEL PROYECTO - Para satisfacer las necesidades que tiene una empresa respecto de una web, hay que detectarlas llevando a cabo una investigación completa de la competencia. - Tenemos que buscar valores diferenciadores de otros portales, para destacar del resto y ofrecer contenidos novedosos y ventajas para el usuario. - La web, además de funcional debe adaptarse al lenguaje de la empresa. - Hay que tener en cuenta en todo momento al usuario, ya que es él quién va a interactuar con el website y debe resultarle una navegación cómoda e intuitiva. Además de mostrarle los contenidos jerarquizados de modo que le resulten interesantes y atractivos.