Seleccionar página

Campaña Black Friday.

Diseño UI | Frontend
Contexto

 

Por lo general, en cada Q del año, se lanzaban diferentes campañas enfocadas en la temporalidad. Este proyecto está centrado en Black Friday.

El software que se utilizó fue: Adobe XD, Illustrator, Photoshop.

Para la maquetación se utilizó: HTML 5, CSS3 y Javascript.

Assets | Wireframes | Maquetación | Implementación
Rol en el proyecto
Sofía González. Avatar

UI, Frontend

Assets.

Los assets utilizados, fueron compartidos por el equipo de EE.UU. En la guía de campaña para Black Friday, se mostraban íconos, colores, backgrounds, tipo de imágenes, textos… Lo que que se hizo fue a partir de esa guía, diseñar un master graphic para el home y las redes sociales.

guia_bf

Wireframes.

Low fidelity wireframes

 

Al ser una estructura nueva en el portal, se realizó un wireframe en baja calidad para visualizar la estructura y tener visto bueno del líder de área. 

High fidelity wireframes

 

Una vez que se tuvo visto bueno con el wireframe de baja calidad, se realizó un prototipo en alta para representar el diseño final en el home.

Maquetación.

Esta estructura del home, no contaba con un componente de la plataforma. Lo que se hizo fue crear el código en HTML5, CSS3 y Javascript y utilizar algunas clases de Bootstrap ya que el sitio estaba desarrollado con este framework.

Cuando el código estuvo listo, se testeo primero de forma local y luego en el sitio web en modo prueba.

Código
HTML

<html>
<div class=»total-wrapper espacio-03″>
<div class=»container»>

<div class=»col-lg-12 col-md-12 col-sm-12 col-xs-12 content-align espacio-festivo»>
<div class=»col-lg-4 col-md-4 col-sm-4 col-xs-12 hidden-desk»>
<img src=»https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/blackfriday_icon-01-01-203728.svg»
alt=»»>
</div>

<div class=»col-lg-6 col-md-8 col-sm-8 col-xs-12″>
<div class=»countdownOferta»>
<div class=»center-content»>
<div id=»text» class=»numbers-content col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<p class=»small-disclaimer»> <img class=»hidden-desk»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/blackfriday_icon_countdoun-203844.png»
alt=»»> <img class=»hidden-mobile»
src=»https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/blackfriday_icon-01-01-203728.svg»
alt=»»><b>¡Solo online!</b> Quedan:</p>
<div class=»row» id=»clockdiv»>
<div><span class=»hours»></span> Hrs</div>
<div style=»font-size: 25px; font-weight: 600;»>:</div>
<div><span class=»minutes»></span> Min</div>
<div style=»font-size: 25px; font-weight: 600;»>:</div>
<div><span class=»seconds»></span> Seg</div>
</div>
</div>

 

<div id=»textFin»>
<div class=»col-lg-12 col-md-12 col-sm-12 col-xs-12″>
<div>
<div class=»w-mkt-02″> <span style=»font-size: 14px;»> Black Fridy Finalizó
¡Gracias! </span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class=»col-lg-12 col-md-12 col-sm-12 col-xs-12 content-align espacio-festivo»>
<div class=»col-lg-10 col-md-9 col-sm-9 col-xs-12″>

 

<a
href=»/c/black-friday-2020/1003333?promo_id=w4748_20_hm&promo_name=w4748_20_hm_bnc_ofr_multicategoria_w4748&promo_creative=bnc_ofr&promo_position=slot1″>
<img class=»img-responsive hidden-mobile space-mobile»
src=»https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_oferta_balckfriday_w4748_bf_mobile-01-203928.svg»
alt=»»></a>

<a
href=»/c/black-friday-2020/1003333?promo_id=w4748_20_hm&promo_name=w4748_20_hm_bnc_ofr_multicategoria_w4748&promo_creative=bnc_ofr&promo_position=slot1″>
<img class=»img-responsive hidden-desk»
src=»https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_oferta_balckfriday_w4748_desk-01-203765.svg»
alt=»»>
</a>
</div>

 

<div class=»col-lg-2 col-md-3 col-sm-3 col-xs-12 border-left-toppers»>
<h1 class=»title-medium»><span class=»hidden-desk» style=»font-weight: 300;»>Grandiosas
ofertas</span><br class=»hidden-desk»>
<p class=»hidden-mobile small-disclaimer»>Vigencia 27 de noviembre de 2020.</p>
</h1>

<h1 class=»title-medium hidden-desk»><span style=»color: #FFF200;»>Black Friday</span></h1>

<a class=»btn btn-primary btn-sm»
href=»/c/black-friday-2020/1003333?promo_id=w4748_20_hm&promo_name=w4748_20_hm_bnc_ofr_multicategoria_w4748&promo_creative=bnc_ofr&promo_position=slot1″>Compra
ya ›</a>
</div>
</div>
</div>

<div class=»container espacio-01″>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 circle-milticategorico espacio-02″>
<a
href=»/c/ofertas-en-linea-blanca/1002232?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_hgr_multicategoria_hogar_venta_azul_w37&promo_creative=bnc_hgr&promo_position=slot1″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_hogar_bf-203814.png»
alt=»»>
<p class=»title-milticategorico»>Hogar</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-computadoras-y-mas/1002222?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_cop_multicategoria_computo_venta_azul_w37&promo_creative=bnc_cop&promo_position=slot2″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_computo_bf-203812.png»
alt=»»>
<p class=»title-milticategorico»>Cómputo</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-celulares/1002225?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_cyt_multicategoria_celulares_venta_azul_w37&promo_creative=bnc_cyt&promo_position=slot3″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_celulares_bf-203811.png»
alt=»»>
<p class=»title-milticategorico»>Celulares</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-tabletas/1002226?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_cyt_multicategoria_tablets_venta_azul_w37&promo_creative=bnc_cyt&promo_position=slot4″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_tablets_bf-203818.png»
alt=»»>
<p class=»title-milticategorico»>Tablets</p>
</a>
</div>

<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-camaras/1002230?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_cam_multicategoria_camaras_venta_azul_w37&promo_creative=bnc_cam&promo_position=slot5″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_sony_bf-203817.png»
alt=»»>
<p class=»title-milticategorico»>Cámaras</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-de-audio/1002224?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_adi_multicategoria_audio_venta_azul_w37&promo_creative=bnc_adi&promo_position=slot6″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_audifonos_bf-203809.png»
alt=»»>
<p class=»title-milticategorico»>Audífonos</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-bocinas/1002227?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_adi_multicategoria_bocinas_venta_azul_w37&promo_creative=bnc_adi&promo_position=slot7″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_bocinas_bf-203810.png»
alt=»»>
<p class=»title-milticategorico»>Bocinas</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-videojuegos-y-consolas/1002223?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_vdj_multicategoria_videojuegos_venta_azul_w37&promo_creative=bnc_vdj&promo_position=slot8″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_videojuegos_bf-203824.png»
alt=»»>
<p class=»title-milticategorico»>Videojuegos</p>
</a>
</div>

<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-wearables/1002228?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_wer_multicategoria_wearables_venta_azul_w37&promo_creative=bnc_wer&promo_position=slot9″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_wearables_bf-203827.png»
alt=»»>
<p class=»title-milticategorico»>Wearables</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-en-hogar-inteligente/1002231?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_shg_multicategoria_hogar_inteligente_venta_azul_w37&promo_creative=bnc_shg&promo_position=slot10″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_hogar_conectado_bf-203813.png»
alt=»»>
<p class=»title-milticategorico»>Hogar inteligente</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/ofertas-salud-bienestar/1003186?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_sld_multicategorico_salud_y_belleza_w37&promo_creative=bnc_sld&promo_position=slot11″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_saludybelleza_bf-203816.png»
alt=»»>
<p class=»title-milticategorico»>Salud y belleza</p>
</a>
</div>
<div class=»col-lg-3 col-md-3 col-sm-3 col-xs-4 espacio-02 circle-milticategorico»>
<a
href=»/c/productos-exclusivo-online/1002276?promo_id=w37_20_hm&promo_name=w37_20_hm_bnc_msc_multicategoria_exclusivos_online_venta_azul_w37&promo_creative=bnc_msc&promo_position=slot12″>
<img class=»img-responsive»
src=»https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_images_balckfriday_w4748_pantallas_bf-203815.png»
alt=»»>
<p class=»title-milticategorico»>Exclusivos online</p>
</a>
</div>
</div>
</div>
</html>

 

CSS
<style>
.total-wrapper {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
background-image: url(https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_back_balckfriday_w4748_02_large07-01-203873.svg);
background-repeat: no-repeat;
background-color: #1D252C;
background-size: cover;
background-position: top;
background-attachment: fixed;
}
.espacio-01 {
padding: 30px 0 50px 0;
}

.espacio-02 {
padding: 20px;
}

.espacio-03 {
padding: 20px 0 0 0;
}

.espacio-04 {
padding: 10px 0 0 0;
}
.title-milticategorico {
color: #fff;
text-align: center;
font-size: 16px;
}
.content-align {
display: flex;
justify-content: space-between;
align-items: center;
}

h1.title-medium {
font-size: 16px;
line-height: 2;
font-weight: 500;
color: #fff;
}
p.small-disclaimer {
font-size: 14px;
color: #D2D8E2;
font-weight: lighter;
padding-top: 15px;
}
.circle-milticategorico {
transform: scale(.9);
transition: .5s;
background-image: url(https://pisces.bbystatic.com/image2/BestBuy_US/Gallery/w37_20_hm_bnc_hgr_multicategoria_hogar_venta_azul_w37_transparent-183648.png);
background-repeat: no-repeat;
background-size: 90%;
background-position: 12px 11px;
}
.circle-milticategorico:hover {
transform: scale(.95);
transition: .5s;
background-image: none;
}
.module-wrapper {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display: table;
content: » «;
box-sizing: border-box;
}
@media only screen and (max-width: 500px) {

.total-wrapper {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
}

}
@media (min-width: 992px) {
.module-wrapper {
width: 970px;
}

.espacio-festivo {
padding: 10px 40px;
}

.espacio-festivo-02 {
padding: 0 0 40px 0;
}

.ml-20 {
margin-left: 20px;
}

}

@media (max-width: 767px) {

.mt-30 {
margin-top: 30px;
}

h1.title-medium {
font-size: 13px;
line-height: 2;
font-weight: 500;
color: #fff;
}

p.small-disclaimer {
font-size: 11px;
line-height: 2;
color: #D2D8E2;
font-weight: lighter;
padding-top: 0px;
}

.content-align {
display: block;
padding: 0;
}

.module-wrapper {
padding-right: 15px;
padding-left: 15px;
margin-right: 0;
margin-left: 0;
display: flow-root;
content: » «;
box-sizing: border-box;
}

}

@media (max-width: 767px) {

.img-bf {
width: 50%;
}

.hidden-desk {
display: none;
}

.space-mobile {
padding: 0px;
}

.title-milticategorico {
font-size: 12px;
text-shadow: 2px 2px 2px #000000;
}

.espacio-01 {
padding: 10px 0 0 0;
}

.total-wrapper {
background-position: top center;
background-size: contain;
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
background-image: url(https://pisces.bbystatic.com/image2/vector/BestBuy_US/Gallery/w4748_20_hm_bnc_msc_back_balckfriday_w4748_02_mobile-01-203886.svg);

}

.circle-milticategorico:hover {
transform: scale(.95);
transition: .5s;
background-image: none;
}

}

@media (min-width: 768px) {
.module-wrapper {
width: 750px;
}

.hidden-mobile {
display: none;
}
}

@media (min-width: 1024px) {
.module-wrapper {
max-width: 1008px;
}
}
/*Clases contador*/
.contenedor-full {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
}

.size-l .grid-manager.container .widget-wrapper {
margin-bottom: 0px;
}

img.img-moon {
width: 90%;
}

.btn-line-bby {
border: 1px solid #fff;
color: #fff;
text-decoration: none;
}

.btn-line-bby:hover {
border: 1px solid #0046be;
color: #0046be;
text-decoration: none;
background-color: #fff;
}

.numbers-content {
display: flex;
justify-content: space-around;
align-content: center;
align-items: center;
}

.container.center-content {
display: flex;
justify-content: center;
align-items: center;
}

.w-mkt {
font-size: 20px;
font-weight: 400;
color: #fff;
}

.w-mkt-text {
font-size: 12px;
font-weight: 300;
color: #fff;
text-align: left;
}

.w-mkt-02 {
font-size: 11px;
font-weight: 400;
color: #fff;
text-align: left;
}

.n-mkt {
font-size: 1.9em;
font-weight: 500;
color: #ed1f2d;
margin-right: 2px;
}

.section-contador {
padding: 5px 0px 70px 0px;
}

.countdownOferta {

flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 0;
margin: auto;
}

#clockdiv {
font-family: sans-serif;
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
font-weight: 100;
text-align: center;
font-size: 16px;
}
#clockdiv>div {
border-radius: 2px;
display: inline-block;
font-weight: 550;
margin: 5px;
padding: 5px;
}

#clockdiv>div>span {}

#clockdiv>div>div {
color: #fff;
padding-top: 5px;
font-weight: 100;
font-size: 11px;
}

#textFin {
display: none;
text-align: center;
}

.magin-lados {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
margin: 0 20px;
}
@media screen and (max-width: 767px) and (min-width: 600px) {
.countdownOferta {
height: auto;
}

.numbers-content {
display: block;
}

img.img-moon {
width: 70%;
}

}
@media screen and (max-width: 599px) and (min-width: 300px) {

.numbers-content {
display: block;
}

#clockdiv>div>span {
border-radius: 3px;
display: inline-block;
}

#clockdiv>div {
border-radius: 2px;
display: inline-block;
font-weight: 550;
margin: 0px 0px 10px;
}

.container.center-content {
display: flex;
}

img.img-moon {
width: 95%;
}

#clockdiv {
font-size: 13px;
}

.btn-line-bby {
font-size: 11px;
}

.btn-line-bby:hover {
font-size: 11px;
}

.w-mkt {
font-size: 11px;
font-weight: 400;
color: #fff;
}
}
@-webkit-keyframes bounceIn {

from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes bounceIn {

from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.bounceIn {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
</style>
Script
<script>
var deadline = new Date(«November 28, 2020 00:00:01»).getTime();

function time_remaining(endtime) {
var now = new Date().getTime();
var t = deadlinenow;

var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
return { ‘total’: t, ‘hours’: hours, ‘minutes’: minutes, ‘seconds’: seconds };
}

function run_clock(id, endtime) {
var clock = document.getElementById(id);

// get spans where our clock numbers are held
var days_span = clock.querySelector(‘.days’);
var hours_span = clock.querySelector(‘.hours’);
var minutes_span = clock.querySelector(‘.minutes’);
var seconds_span = clock.querySelector(‘.seconds’);
console.log(clock);

function update_clock() {
var t = time_remaining(endtime);

// update the numbers in each part of the clock
hours_span.innerHTML = (‘0’ + t.hours).slice(-2);
minutes_span.innerHTML = (‘0’ + t.minutes).slice(-2);
seconds_span.innerHTML = (‘0’ + t.seconds).slice(-2);

if (t.total <= 0) {
document.getElementById(«text»).style.display = «none»;
document.getElementById(«textFin»).style.display = «block»;
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
run_clock(‘clockdiv’, deadline);
</script>

Implementación.

Con el código listo, se subió a la plataforma por bloques.
Primero el bloque de los estilos, luego el de HTML y al final el de Javascript y se puso en producción.