DESSfluence
Un proyecto 360 elaborado para NETT Digital School
DESSfluence – DESSliza. DESScubre. DESStaca. Un proyecto 100% mío, inventado, de corazón y con mucha ilusión para el Máster en Marketing, Publicidad y Diseño de NETT Digital School. Empezó como una idea simple sin forma y creció para ser un proyecto completo y preparado para ser llevado a cabo.
Desde la idea del negocio, objetivos e investigación de la competencia hasta la creación de la marca y sus web y tienda online, DESSfluence es una muestra de lo que puedo hacer por ti, da igual si empiezas de 0 o ya tienes una base bien firme.
Marketing digital
Preparación del plan de marketing completo que incluye la estrategia de posicionamiento, buyer persona, campañas publicitarias y el plan de medios, análisis de la competencia, también como análisis interno, estrategia de social media, plan de contingencia y reputación online, etc.
Campañas publicitarias
Configuración y gestión de campañas publicitarias en Google Ads (Red de Búsqueda, Display, YouTube) y Social Ads (Alcance, tráfico y compras)
Imagen corporativa
Logotipo, tarjetas de visita, paleta corporativa, tipografías, etc.
Diseño gráfico
Apoyo para redes sociales y campañas publicitarias y manual de identidad con InDesign
Diseño web de tienda online
Responsive, dinámica, optimizada para SEO, creada y gestionada con PrestaShop. Unificación total de los dos proyectos web para una excelente experiencia del usuario
Diseño web de la marca/corporativa
Responsive, optimizada, creada y gestionada con WordPress
Edición de vídeo
Grabación y elaboración de vídeo corporativo para el proyecto, también como su adaptación en versión loop para la página web
Packaging
Diseño del packaging de ejemplo
Diseño. Packaging
Grafismos para redes sociales y campañas publicitarias. Ejemplo de diferentes creatividades preparadas según la estrategia de social media y plan de medios.
Diseño web y e-commerce
Web corporativa con WordPress. La parte del proyecto que trataba la creación de una página web se centraba en la forma de crear una sinergia entre la parte más «corporativa» de la marca DESSfluence, es decir, los apartados típicos de contacto, quiénes somos y el blog, elaborados en WordPress y su tienda online elaborada en PrestaShop.
Diseño web y e-commerce
Web corporativa con WordPress. La parte del proyecto que trataba la creación de una página web se centraba en la forma de crear una sinergia entre la parte más «corporativa» de la marca DESSfluence, es decir, los apartados típicos de contacto, quiénes somos y el blog, elaborados en WordPress y su tienda online elaborada en PrestaShop.
Diseño. Manual de identidad
El manual de identidad que incluye la creación e inspiración de la marca, su logotipo principal y las diferentes versiones, también como algunos usos y ejemplos que puedes ver abajo también.
La marca DESSfluence es una plataforma online para la compraventa de artículos de segunda mano que ofrece un producto mucho más específico y orientado a un público mucho más concreto: las “wanna-be influencers. Se ha combinado su naturaleza “second hand”, presentada por el degradado en las tonalidades de turquesa, con la esencia “influencer”, representada por el degradado cálido, al estilo de Instagram y otras apps parecidas. Estas dos “S” a su vez son las dos caras del público objetivo de la marca, la compradora impulsiva que quiere ser una influencer de Instagram y la compradora calculadora que tiene un presupuesto estricto y por eso acude a la plataforma.
Diseño. Grafismos para redes sociales y campañas publicitarias
Podemos ver diferentes ejemplos de diseños preparados tanto para las redes sociales como para imprenta, cartelería de la calle, etc. Además hay ejemplos de packaging para los diferentes productos de la marca DESSfluence.
Obviamente todo eso son mockups, es decir, la magia de Photoshop de sobreponer los diseños que creo a imágenes reales. Siento si he roto la burbuja, pero todas esas versiones chulas de vuestros logos en la calle, en vinilos y posters es un truco de 1º de diseñadores jeje
Web corporativa
Empezando por WordPress, podemos ver el proyecto en la dirección www.dessfluence.com donde lo migré del servidor dedicado de NETT Digital School tras finalizar los estudios. Tanto en el vídeo arriba, como en estas diferentes capturas se puede ver el desarrollo del proyecto 100% personalizado. El contenido en su mayoría sirve de ejemplo y en algunas ocasiones está tomado de otras web para demostrar los diferentes recursos que se pueden llegar a elaborar (ejemplo: los artículos del blog o los términos y condiciones).
1. Header
- transparente
- centrado
- protagonismo del logo
- navegación centrada debajo del logo
- barra superior con menú secundario, redes sociales y correo de contacto
3. Nuestros mejores productos
Sección principal que muestra los mejores productos con acceso directo a cada artículo
5. Últimas publicaciones
- enlace directo a las últimas tres entradas del blog
- proporciona contenido dinámico que se renueva periodicamente
- fuente de posicionamiento y tráfico orgánico
7. Banner «Call to action»
- Mensaje corto a modo de conclusión
- Enlaces directos a la página de registro o al test de estilo
- Sirve como gancho para que la gente no abandone la web
2. Banner principal
Vídeo en loop reflejando la identidad de la marca y su mensaje.
Así de fácil.
4. ¿Cómo funciona DESSfluence?
- Llamada a la acción para los dos tipos de buyer persona
- Resumen de la sección típica de «Quiénes somos» o «About»
6. Las marcas
- Un slider con todas las marcas que hay en la web
- Proporciona acceso directo a los artículos de cada marca
- Sirve como una especie de presentación de colaboraciones que refuerza la confianza en el sitio
8. Footer
Footer corporativo con enlaces útiles: categorías principales de la tienda, preguntas frecuentes, gestión de la cuenta, enlaces legales y políticas.
Header
- transparente
- centrado
- protagonismo del logo
- navegación centrada debajo del logo
- barra superior con menú secundario, redes sociales y correo de contacto
Banner principal
Vídeo en loop reflejando la identidad de la marca y su mensaje.
Así de fácil.
Nuestros mejores productos
Sección principal que muestra los mejores productos con acceso directo a cada artículo
¿Cómo funciona DESSfluence?
- Llamada a la acción para los dos tipos de buyer persona
- Resumen de la sección típica de «Quiénes somos» o «About»
Últimas publicaciones
- enlace directo a las últimas tres entradas del blog
- proporciona contenido dinámico que se renueva periodicamente
- fuente de posicionamiento y tráfico orgánico
Las marcas
-
Un slider con todas las marcas que hay en la web
-
Proporciona acceso directo a los artículos de cada marca
-
Sirve como una especie de presentación de colaboraciones que refuerza la confianza en el sitio
Banner «Call to action»
-
Mensaje corto a modo de conclusión
-
Enlaces directos a la página de registro o al test de estilo
-
Sirve como gancho para que la gente no abandone la web
Footer
Footer corporativo con enlaces útiles: categorías principales de la tienda, preguntas frecuentes, gestión de la cuenta, enlaces legales y políticas.
Web. Tienda electrónica con PrestaShop
Como dije antes, la parte del proyecto que trataba la creación de una página web se centraba en la forma de crear una sinergia entre la parte más «corporativa» de la marca DESSfluence, es decir, los apartados típicos de contacto, quiénes somos y el blog, elaborados en WordPress y su tienda online elaborada en PrestaShop.
En cuanto a la tienda de PrestaShop, lo importante era conseguir crear un tema suborinado (o tema hijo en el argot wordpressiano) basado en el tema Classic de PrestaShop, que sea una copia exacta (en la medida de lo posible) a la apariencia visual del resto de la web corporativa. Todos sabemos que a la hora de diseñar, WordPress nos ofrece muchas más posibilidades estéticas que PrestaShop, que se basa en la fincionalidad.
Otro punto importante era cosneguir que el paso entre una plataforma y otra sea fluido para el usuario y que este ni se de cuenta del cambio. Mi perfeccionismo y ojo para los detalles no me dejó tranquila hasta que conseguí bastante más de lo necesario y convertí el tema de PrestaShop básicamente en un espejo de la apariencia de WordPress. Será por eso que obtuve un 10/10 en este proyecto, ¿no?
Abajo puedes ver una comparación de dos partes del proyecto elaboradas en las dos diferentes plataformas y el vídeo que demuestra el cambio de una página a otra:
Barra superior
He conseguido el mismo efecto de degradado, enlaces, carrito e incluso he cambiado los iconos de redes sociales que PrestaShop usa para que sean los mismos.
He logrado poner el logo del mismo tamaño y centrado junto con el menú de navegación. En el caso de la página de WordPress es header transparente para fusionarse con los elementos decorativos del slider, así que no se ve el borde inferior del mismo
La sección del cuerpo depende de cada página, en este caso es la categoría “Ropa” y los productos destacados de esta categoría o la página de contacto en WordPress.
He conseguido el mismo degradado y enlaces dentro del las cuatro secciones.
He conseguido imitar el socket de WordPress en la apariencia del footer de PrestaShop (originalmente no existía una diferenciación entre footer y socket) con el copyright a la izquierda y las redes sociales a la derecha.
Vídeo de muestra
Puedes ver también un vídeo de estos chulos que van toqueteando toda la web, metiéndose en todos los riconcitos y hasta hacen como que van a comprar..,
Ojo, te van a entrar ganas de revisar esta colección de Zara de segunda mano que se ofrece eh
P.D. no te saltes la intro, que salimos muy chulas, no nos lo merecemos.
¿Convencido?
Elige los módulos que necesitas o pide una consulta gratuita y creeremos el mejor pack para tu negocio.
O sigue mirando y descubre la magia que hago en marketing también.
Marketing Digital. Estrategia de marketing completa
El plan de marketing completo incluye todos los puntos a tratar necesarios para la creación, lanzamiento y gestión de una marca o negocio. Se hizo un análisis exhaustivo externo e interno que incluye la competencia y el nicho, y los buyer persona. A partir de allí se forma la estrategia de posicionamiento SEO, en las redes sociales y el plan de medios que seguir para las campañas publicitarias pagadas. Por supuesto, se crearon los apartados necesarios que tratan la reputación online y el plan de contigencia, el equipo implicado y sus tareas dentro de la gestión de la marca y la revisión periódica del plan. Todos los ejemplos se pueden econtrar a continuación en el plan de marketing online elaborado para DESSfluence:
Diseño audiovisual. Vídeo corporativo y vídeo loop
Tal y como ya dije, el vídeo que sirve de introducción en la web es realmente parte del proyecto audiovisual y adaptación del vídeo corporativo completo que se puede ver a continuación. Ojo, no soy especialista en audiovisuales, es la rama que menos domino, pero realmente tengo un uso avanzado de Adobe Premiere Pro y After Effects que me permite realizar vídeos y otros materiales específicos para diferentes campañas publicitarias. ¡Es que no puedo estar al 100% en todo!