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.
Rol en el proyecto
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.
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.
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>