Hide&Jack
E-Commerce
[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”align-center”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text css=”.vc_custom_1583422804422{margin-bottom: 40px !important;}”]Web Restyle for Autumn/Fall ’17-’18
[/vc_column_text][vc_column_text]Un Brand di sneakers di alta gamma in grande ascesa, è risaputo, per mantenere il trend di crescita, deve rinnovarsi costantemente.Nel prodotto così come pure nella comunicazione, offline e online.
Seguendo i ritmi del mondo cui appartiene: il fashion.
Collezione dopo collezione, campagna dopo campagna, l’immagine muta ed evolve.
Così il cliente ha commissionato all’agenzia un restyle, essenzialmente grafico, del proprio e-commerce.
La difficoltà maggiore è stata riuscire a modificare radicalmente l’estetica del sito senza però andare a modificare funzioni, struttura e maggior parte dei contenuti.[/vc_column_text][vc_empty_space][vc_btn title=”visit website” style=”outline” shape=”square” color=”black” link=”url:http%3A%2F%2Fweb.archive.org%2Fweb%2F20170709173153%2Fhttps%3A%2F%2Fhideandjack.com%2F||target:%20_blank|”][vc_empty_space][thb_portfolio_attribute style=”style2″][/vc_column][/vc_row][vc_row thb_row_padding=”true” css=”.vc_custom_1583512379469{margin-top: 5vh !important;margin-bottom: 5vh !important;}”][vc_column thb_color=”thb-light-column” animation=”animation fade-in” el_class=”text-center”]
Push the “Double” Concept
through the use of copy, graphics and effects.
L’immaginario del Brand, tutto incentrato sul tema del doppio, ha fornito spunti interessanti, non soltanto nella realizzazione di scatti fotografici ad hoc destinati al sito e a campagne ADV online, ma anche nel definire alcuni capisaldi stilistici e funzionali del sito.
Se le foto sono risultate già abbondanti di contrasti cromatici e di luci, nell’inserirle all’interno di banner e showreel, è stata ancor più enfatizzata questa caratteristica, associandole a coppie di parole in contrasto.
Show/Hide, True/Lies, Hate/Love venivano svelati o nascosti dall’interazione dell’utente, in un gioco di maschere e trasparenze.[/vc_column_text][/vc_column][/vc_row][vc_row thb_full_width=”true” thb_row_padding=”true” css=”.vc_custom_1581066768736{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_overlay_color=”rgba(0,0,0,0.23)”][vc_column][vc_row_inner][vc_column_inner offset=”vc_col-lg-12 vc_col-md-12 vc_col-xs-12″ css=”.vc_custom_1583496683339{padding-top: 9% !important;padding-right: 26% !important;padding-bottom: 27% !important;padding-left: 26% !important;background-image: url(https://www.lucabrandolini.com/wp-content/uploads/2020/03/icg-mac.png?id=2998) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}”][thb_image full_width=”true” alignment=”aligncenter” video=”true” image=”3074″ video_url=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/hj.mp4″][/thb_image][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row css=”.vc_custom_1583507048918{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}”][vc_column width=”1/2″ skrollr=”true” skrollr_speed=”1000″ css=”.vc_custom_1583506964448{margin-top: -100vh !important;padding-top: 20vh !important;padding-right: 10% !important;padding-bottom: 29vh !important;padding-left: 10% !important;background-color: #efebe8 !important;}”][thb_image animation=”animation top-to-bottom” image=”3076″][/thb_image][vc_empty_space height=”10vh”][thb_image animation=”animation top-to-bottom” image=”3084″][/thb_image][vc_empty_space height=”10vh”][thb_image animation=”animation top-to-bottom” image=”3085″][/thb_image][vc_empty_space height=”10vh”][vc_column_text]
Scrolling Galleries
to smooth Site Usage
Avevamo stabilito che il risultato dovesse essere tanto semplice graficamente, quanto semplice da fruire.
Una delle migliorie possibili è stata rendere più fluida la gallery all’interno della scheda prodotto.
Cliccare su una thumbnail o una freccia per passare da uno scatto all’altro, nell’era dello scroll, in un sito che generava la maggior parte del suo traffico su mobile, ci pareva anacronistico.
Si è deciso pertanto di creare una gallery “continua” consultabile semplicemente scorrendo la pagina verso il basso.[/vc_column_text][vc_empty_space height=”10vh”][thb_image animation=”animation top-to-bottom” image=”3086″][/thb_image][/vc_column][vc_column width=”1/2″ skrollr=”true” skrollr_speed=”1″][vc_row_inner thb_row_padding=”true” css=”.vc_custom_1583507968575{margin-left: -40% !important;}”][vc_column_inner width=”1/2″][vc_raw_html]JTNDc3ZnJTIweG1sbnMlM0QlMjJodHRwJTNBJTJGJTJGd3d3LnczLm9yZyUyRjIwMDAlMkZzdmclMjIlMjB2aWV3Qm94JTNEJTIyMCUyMDAlMjA0MDAlMjAzMDAlMjIlM0UlM0N0aXRsZSUzRWglMjZhbXAlM0JhbXAlM0JqLXRpdGxlJTNDJTJGdGl0bGUlM0UlM0NwYXRoJTIwZCUzRCUyMk0yMDcuNjMlMkMxMTYuMjhhNy41OSUyQzcuNTklMkMwJTJDMCUyQzAlMkM1LjYtMi4wOXEyLjA5LTIuMSUyQzIuMDktNy4yM3YtNTFjMC0zLjQyLS43LTUuODItMi4wOS03LjIyYTguNTUlMkM4LjU1JTJDMCUyQzAlMkMwLTExLjIlMkMwYy0xLjQlMkMxLjQtMi4xJTJDMy44LTIuMSUyQzcuMjJ2NTFxMCUyQzUuMTMlMkMyLjElMkM3LjIzQTcuNTglMkM3LjU4JTJDMCUyQzAlMkMwJTJDMjA3LjYzJTJDMTE2LjI4WiUyMiUyMHN0eWxlJTNEJTIyZmlsbCUzQSUyM2ZmZiUyMiUyRiUzRSUzQ3BhdGglMjBkJTNEJTIyTTAlMkMwVjMwMEg0MDBWMFpNMTg1LjA4JTJDNTYuODhxMC0xMS40OCUyQzUuODEtMTcuNjJ0MTYuNzQtNi4xNHExMC45NCUyQzAlMkMxNi43NCUyQzYuMTR0NS44JTJDMTcuNjJWMTA2cTAlMkMxMS40OC01LjglMkMxNy42MnQtMTYuNzQlMkM2LjE0cS0xMC45NCUyQzAtMTYuNzQtNi4xNFQxODUuMDglMkMxMDZaTTgzLjg0JTJDMzQuMkg5OC42OXY3Mi45YzAlMkMzLjQyLjY5JTJDNS44JTJDMi4wOSUyQzcuMTVhOC43NCUyQzguNzQlMkMwJTJDMCUyQzAlMkMxMS4yJTJDMHEyLjEtMiUyQzIuMS03LjE1VjM0LjJoMTR2NzJxMCUyQzExLjQ3LTUuNjElMkMxNy42MlQxMDYlMkMxMjkuOTFxLTEwLjk0JTJDMC0xNi41NC02LjE0dC01LjYtMTcuNjJaTTc0JTJDMTY3LjdINTguNDZ2ODFINDMuNjF2LTgxSDI4LjA4VjE1NC4ySDc0Wk03NS40NyUyQzY2LjA2aC0xNFY1NS45M2MwLTMuNDItLjctNS44Mi0yLjEtNy4yMmE3LjU4JTJDNy41OCUyQzAlMkMwJTJDMC01LjYtMi4wOSUyQzcuNTglMkM3LjU4JTJDMCUyQzAlMkMwLTUuNiUyQzIuMDljLTEuNCUyQzEuNC0yLjA5JTJDMy44LTIuMDklMkM3LjIydjUxYzAlMkMzLjQyLjY5JTJDNS44MSUyQzIuMDklMkM3LjE2YTcuNyUyQzcuNyUyQzAlMkMwJTJDMCUyQzUuNiUyQzIlMkM3LjclMkM3LjclMkMwJTJDMCUyQzAlMkM1LjYtMnEyLjEtMiUyQzIuMS03LjE2VjkzLjQ2aDE0VjEwNnEwJTJDMTEuNDgtNS42MSUyQzE3LjYydC0xNi41MyUyQzYuMTRxLTEwLjk0JTJDMC0xNi41NC02LjE0VDMxLjE5JTJDMTA2VjU2Ljg4cTAtMTEuNDglMkM1LjYtMTcuNjJ0MTYuNTQtNi4xNHExMC45NCUyQzAlMkMxNi41MyUyQzYuMTR0NS42MSUyQzE3LjYyWk05NS4zMSUyQzI0OC43SDgwLjQ2VjE1NC4ySDk1LjMxWm01Mi4zOC04MUgxMzIuMTZ2ODFIMTE3LjMxdi04MUgxMDEuNzlWMTU0LjJoNDUuOVptLTEzLjc3LTEyMFYzNC4yaDQ1LjlWNDcuN0gxNjQuMjl2ODFIMTQ5LjQ0di04MVptNTkuNTMlMkMyMDFIMTU0LjE3VjE1NC4ySDE2OXY4MWgyNC40M1ptNDctODFIMjE0Ljc4VjE5NGgyMC4zOXYxMy41SDIxNC43OFYyMzUuMmgyNS42NXYxMy41aC00MC41VjE1NC4yaDQwLjVabS0xLjM1LTYxLjU1VjM0LjJoMTQuODV2NzIuOXEwJTJDNS4xMyUyQzIuMDklMkM3LjE1YTguNzUlMkM4Ljc1JTJDMCUyQzAlMkMwJTJDMTEuMjElMkMwcTIuMDgtMiUyQzIuMDktNy4xNVYzNC4yaDE0djcycTAlMkMxMS40Ny01LjYlMkMxNy42MnQtMTYuNTQlMkM2LjE0cS0xMC45NCUyQzAtMTYuNTMtNi4xNFQyMzkuMDglMkMxMDYuMTVaTTI4NiUyQzI0My42NHEtNS42JTJDNi4xMy0xNi41MyUyQzYuMTR0LTE2LjU0LTYuMTRxLTUuNjEtNi4xNS01LjYxLTE3LjYydi01LjgxaDE0VjIyN3EwJTJDNS4xMyUyQzIuMSUyQzcuMTZhOC43NyUyQzguNzclMkMwJTJDMCUyQzAlMkMxMS4yJTJDMHEyLjEtMiUyQzIuMS03LjE2YTE2Ljc0JTJDMTYuNzQlMkMwJTJDMCUyQzAtMi4xNy04LjU3JTJDMzYuMzElMkMzNi4zMSUyQzAlMkMwJTJDMC01LjM5LTdjLTIuMTctMi4yLTQuNDgtNC40MS03LTYuNjFhNjclMkM2NyUyQzAlMkMwJTJDMS03LTcuMjMlMkMzNi43NiUyQzM2Ljc2JTJDMCUyQzAlMkMxLTUuNC04LjkxJTJDMjkuMzklMkMyOS4zOSUyQzAlMkMwJTJDMS0yLjE2LTExLjc0cTAtMTEuNDglMkM1LjQ3LTE3LjYydDE2LjQtNi4xNHExMC45NCUyQzAlMkMxNi40JTJDNi4xNHQ1LjQ3JTJDMTcuNjJ2M2gtMTR2LTMuOTJjMC0zLjQyLS42NS01LjgyLTItNy4yMmE4LjE5JTJDOC4xOSUyQzAlMkMwJTJDMC0xMC45MyUyQzBjLTEuMzElMkMxLjQtMiUyQzMuOC0yJTJDNy4yMmExNi43NyUyQzE2Ljc3JTJDMCUyQzAlMkMwJTJDMi4xNiUyQzguNTglMkMzNiUyQzM2JTJDMCUyQzAlMkMwJTJDNS40JTJDN3EzLjI0JTJDMy4zJTJDNi45NSUyQzYuNjFhNjYuMDklMkM2Ni4wOSUyQzAlMkMwJTJDMSUyQzclMkM3LjIyJTJDMzcuMDglMkMzNy4wOCUyQzAlMkMwJTJDMSUyQzUuNCUyQzguOTFBMjkuNjIlMkMyOS42MiUyQzAlMkMwJTJDMSUyQzI5MS41OSUyQzIyNlEyOTEuNTklMkMyMzcuNDklMkMyODYlMkMyNDMuNjRaTTMzNS4wNyUyQzQ3LjdIMzE5LjU0djgxSDMwNC42OXYtODFIMjg5LjE3VjM0LjJoNDUuOVolMjIlMjBzdHlsZSUzRCUyMmZpbGwlM0ElMjNmZmYlMjIlMkYlM0UlM0MlMkZzdmclM0U=[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/2″][/vc_column_inner][/vc_row_inner][vc_row_inner thb_row_padding=”true” css=”.vc_custom_1583507912617{margin-top: -2vh !important;margin-left: -20% !important;}”][vc_column_inner el_class=”background-txt” width=”2/3″][vc_column_text]& qualche altro testo importante.
Trattato con un campo nero di sfondo.
Quasi come creato da una etichettatrice,
quasi il tratto di un marker.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][/vc_column_inner][/vc_row_inner][vc_empty_space][vc_column_text]
Effects & Styles
to boost Titles
Che fossero grandi titoli o paragrafi di testo, sapevamo di dover dare risalto ad alcuni concetti.
Per i primi abbiamo perciò scelto un font maiuscolo e bold (bebas neue) lavorando sempre sul contrasto e talvolta utilizzandolo come maschera di alcuni elementi sottostanti.
Per i secondi la dimensione e tipografia del testo poteva funzionare, avremmo semplicemente invertito i colori, creando così nuovamente un gioco di positivo/negativo.[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”align-center” css=”.vc_custom_1586433024305{margin-top: 10vh !important;margin-bottom: 10vh !important;}”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]
Easy cross platform
Un sito con un’audience contemporanea, per un bene facilmente acquistabile online, non poteva trascurare la sua scalabilità su tutti i device; e i dati lo confermavano senza timore di smentite.
Abbiamo quindi dedicato particolare attenzione a conservare stile e funzionalità su tutte le piattaforme, senza compromessi.[/vc_column_text][/vc_column][/vc_row][vc_row thb_row_padding=”true”][vc_column][thb_image animation=”animation top-to-bottom” alignment=”aligncenter” image=”3078″][/thb_image][/vc_column][/vc_row][vc_row thb_full_width=”true” thb_row_padding=”true” css=”.vc_custom_1583512596957{margin-top: -50vh !important;padding-top: 20vh !important;background-color: #000000 !important;}”][vc_column width=”1/2″ skrollr=”true” skrollr_speed=”150″ offset=”vc_col-xs-8″][vc_row_inner][vc_column_inner width=”1/4″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][vc_column_inner width=”3/4″ offset=”vc_col-xs-8″ css=”.vc_custom_1583514748641{padding-right: 10% !important;padding-left: 10% !important;}”][thb_image full_width=”true” animation=”animation right-to-left” image=”3079″][/thb_image][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/2″ skrollr=”true” skrollr_speed=”50″ offset=”vc_col-xs-8″][vc_row_inner][vc_column_inner width=”1/2″ offset=”vc_col-xs-8″ css=”.vc_custom_1583514842691{padding-right: 25% !important;padding-left: 25% !important;}”][thb_image full_width=”true” animation=”animation right-to-left” image=”3080″][/thb_image][/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_hidden-sm vc_hidden-xs”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”align-center” css=”.vc_custom_1586433016607{margin-top: 10vh !important;margin-bottom: 10vh !important;}”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]
Styling the whole purchase process
Dare uniformità all’intero percorso dell’utente, fosse di acquisto o di semplice consultazione, era necessario per raggiungere un risultato convincente e coerente.
Dal carrello al check-out, passando dalle pagine informative e dalla legenda taglie abbiamo definito un unico stile… o meglio, un solo doppio stile![/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1583514225057{margin-bottom: 10vh !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}”][vc_column][thb_cascading_parent][thb_cascading image_x=”-10%” animation=”animation top-to-bottom” thb_box_shadow=”thb_box_shadow” image=”3090″][thb_cascading image_x=”30%” image_y=”-40%” animation=”animation top-to-bottom” thb_box_shadow=”thb_box_shadow” image=”3091″][thb_cascading image_x=”40%” image_y=”50%” animation=”animation top-to-bottom” thb_box_shadow=”thb_box_shadow” image=”3092″][/thb_cascading_parent][/vc_column][/vc_row][vc_row css=”.vc_custom_1569686950383{margin-top: 80px !important;}”][vc_column el_class=”portfolio-limit”][vc_column_text]
