CINXE.COM

<!doctype html>  <html lang="en" class="js--html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.2d537cba.png"> <meta name="theme-color" content="#ffffff"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab: Loop"> <meta name="twitter:description" content="Our friends at Loop asked us to give their site some love. Together we mapped out an improved structure, customised our CMS platform to handle their catalogue of artists, releases and events, and made use of the several third-party music-related services for previewing and purchasing. The new site is responsive for small-screen devices, and cross-referenced up the yin yang, so visitors can jump between artists, releases and related events. In 2017, a sister site was created for Fly My Pretties."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/6o/ir/xx/a3/loop-sfs-2x-0-500-0-0.jpg?k=ce73169276"> <meta property="og:url" content="https://cactuslab.com/work/loop/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Loop at Cactuslab"> <meta property="og:description" content="Our friends at Loop asked us to give their site some love. Together we mapped out an improved structure, customised our CMS platform to handle their catalogue of artists, releases and events, and made use of the several third-party music-related services for previewing and purchasing. The new site is responsive for small-screen devices, and cross-referenced up the yin yang, so visitors can jump between artists, releases and related events. In 2017, a sister site was created for Fly My Pretties."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/6o/ir/xx/a3/loop-sfs-2x-0-500-0-0.jpg?k=ce73169276"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="1000"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Loop </title> <link rel="stylesheet" href="/static/css/main.min.9fa619f9.css" type="text/css" media="all"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.f5d574c5.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.8aa9891b.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-icon-72x72.f8a44f32.png"> <link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-icon-76x76.8b365de5.png"> <link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-icon-114x114.27bae8dc.png"> <link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-icon-120x120.5d2efb29.png"> <link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-icon-144x144.2d537cba.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-icon-152x152.ec29f70b.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-icon-180x180.83b0e344.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/android-icon-192x192.fdddf555.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/favicon-96x96.d4326dad.png"> <link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="manifest" href="/static/img/favicon/manifest.1caa16a2.json"> <script type="text/javascript" src="/static/js/main.min.ecc35a3c.js"></script> </head> <body class="js--body -is-not-scrolled"> <div id="wrapper" class="js--wrapper"> <style> .site-logo { color: #AABBCC; } .external-link { color: #AABBCC; } .external-link:hover, .external-link:focus { border-color: #AABBCC; } </style> <div class="context js--context"> <header class="site-header js--site-header"> <div class="scrollbar-offset js--scrollbar-offset -is-fixed"> <div class="constraint js--constraint"> <a class="site-logo js--site-logo" href="/"> <span class="_sr-only">Cactuslab · </span> <svg class="glyph" xmlns="http://www.w3.org/2000/svg" width="36" height="50" viewBox="0 0 36 50" preserveAspectRatio="xMaxYMid meet"> <title>Cactuslab Glyph Logo</title> <g fill="none" fill-rule="evenodd" transform="translate(6 5)"> <circle class="bubble js--bubble" cx="16" cy="38" r="3"/> <circle class="bubble js--bubble" cx="6" cy="28" r="6"/> <circle class="bubble js--bubble" cx="16" cy="9" r="9"/> </g> </svg> <svg class="wordmark" xmlns="http://www.w3.org/2000/svg" width="123" height="25" viewBox="0 0 123 25" preserveAspectRatio="xMinYMid meet"> <title>Cactuslab Wordmark Logo</title> <g fill-rule="evenodd" stroke-width="0"> <path d="M16.14 4.01c-.987-.707-1.393-.943-2.264-1.238-1.16-.472-2.38-.65-3.658-.65C4.645 2.122.406 6.488.406 12.21c0 6.015 4.18 10.32 10.044 10.32.93 0 1.684-.06 2.67-.295.988-.236 1.452-.412 2.613-.943l-.638-2.005c-1.568.648-2.845.943-4.47.943-4.587 0-7.548-3.243-7.548-8.197 0-4.48 2.96-7.725 7.083-7.725 1.858 0 3.31.472 4.76 1.474l1.22-1.77zm9.36 14.744c-1.916 1.415-2.612 1.71-3.6 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.06-.825.407-1.473l4.993-1.29v2.83zm3.367 1.887c-.696-.11-1.045-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.116-.23-.116-.35-.116-.53 0-.76.638-1.18 2.032-1.18 1.683 0 2.554.59 2.554 1.65v2.42l-4.644 1.12c-1.974.47-2.96 1.77-2.96 3.78 0 2.127 1.392 3.54 3.598 3.54.93 0 2.032-.292 2.845-.763.464-.235.755-.47 1.393-1.06.117 1.296.755 1.77 2.613 1.886l.464-1.83zM42 21.06l-1.16-1.77c-1.103.826-1.916 1.12-3.193 1.12-2.845 0-4.644-1.945-4.644-5.012 0-3.007 1.8-5.13 4.47-5.13 1.22 0 1.974.294 3.02 1.18l1.276-1.83c-.93-.648-1.34-.884-2.21-1.12-.64-.177-1.28-.236-1.98-.236-4.13 0-6.97 3.007-6.97 7.253 0 4.13 2.78 6.96 6.85 6.96 1.33 0 2.61-.295 3.71-.943.11-.06.4-.237.81-.473zm10-.236l-.93-1.474c-.928.707-1.392.943-1.915.943-.464 0-.754-.236-.754-.65-.05-.116-.05-.41-.05-.824l-.06-.59v-7.67h3.54V8.67h-3.54V4.717h-2.21v3.95l-2.26.59v1.298h2.27v8.906c0 1.77 1.04 3.01 2.55 3.01 1.05 0 1.8-.35 3.37-1.65zm13.83 1.297V8.61h-2.263v8.257c-1.51 2.123-3.658 3.656-5.05 3.656-1.104 0-1.57-.708-1.57-2.36V8.61h-2.205v10.144c0 2.477 1.22 3.774 3.54 3.774 2.033 0 3.775-1.06 5.343-3.184v2.83h2.206v-.06zm12.496-3.48c0-2.12-.813-3.06-3.6-4.24-2.438-1-2.786-1.24-3.31-1.77-.23-.23-.347-.53-.347-.82 0-1 .98-1.71 2.49-1.71.52 0 .98.06 1.56.24.69.18 1.04.36 1.91.89l1.1-1.83c-1.108-.65-1.63-.822-2.618-1-.58-.06-1.16-.116-1.685-.116-3.13 0-5.05 1.47-5.05 3.83 0 1.65.87 2.537 3.485 3.657 2.38 1 3.02 1.355 3.544 2.12.174.177.29.59.29.944 0 1.06-.987 1.77-2.38 1.77-.93 0-2.148-.3-3.077-.77-.236-.12-.58-.294-.99-.53l-.93 1.887c1.336.707 1.86.88 3.136 1.12.7.118 1.28.177 1.86.177 2.845 0 4.587-1.415 4.587-3.833z"/> <path d="M81.836.413h2.206v21.703h-2.206z"/> <path d="M94.62 18.754c-1.915 1.415-2.61 1.71-3.598 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.058-.825.406-1.473l4.993-1.29v2.83zm3.31 1.887c-.696-.11-1.044-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.05-.23-.11-.35-.11-.53 0-.76.64-1.18 2.03-1.18 1.69 0 2.56.59 2.56 1.65v2.42l-4.65 1.11c-1.97.47-2.96 1.77-2.96 3.78 0 2.127 1.39 3.54 3.6 3.54.93 0 2.03-.293 2.85-.764.467-.236.757-.472 1.396-1.062.116 1.298.754 1.77 2.61 1.888l.466-1.83zm11.973-5.77c0 2.24-.522 3.54-1.974 4.54-.64.47-1.34.77-2.15.95-.41.06-.76.12-1.16.12-.82 0-1.34-.11-1.92-.41v-8.61c1.1-.76 2.09-1.06 3.31-1.06 2.44 0 3.89 1.65 3.89 4.49zm2.44-.12c0-3.89-2.265-6.49-5.633-6.49-.813 0-1.8.12-2.496.3-.523.18-.813.3-1.51.65V.42h-2.206v21.29c.64.29.87.41 1.335.47.697.18 1.916.292 2.67.292 4.762 0 7.84-3.01 7.84-7.728z"/> </g> </svg> </a> <nav class="site-nav"> <ul class="navlist"> <li class="navitem"><a class="label" href="/about/">About</a></li> <li class="navitem active"><a class="label" href="/work/">Work</a></li> <li class="navitem"><a class="label" href="/ventures/">Ventures</a></li> </ul> </nav> </div> </div> </header> <article class="site-content context-transition -fade-in js--context-transition"> <div class="constraint page-layout -has-no-aside"> <div class="page-body"> <header class="page-section project-information"> <div class="header"> <h1 class="title">Loop</h1> </div> <div class="body"> <div class="rich-text"> <p>Our friends at Loop asked us to give their site some love. Together we mapped out an improved structure, customised our <a rel="noopener noreferrer" href="http://www.supermodel.co.nz" target="_blank"><abbr title="Content Management System">CMS</abbr> platform</a> to handle their catalogue of artists, releases and events, and made use of the several third-party music-related services for previewing and purchasing. The new site is responsive for small-screen devices, and cross-referenced up the yin yang, so visitors can jump between artists, releases and related events. In 2017, a sister site was created for <a rel="noopener noreferrer" href="http://www.flymypretties.com" target="_blank">Fly My Pretties</a>.</p> </div> <p><a class="external-link" target="_blank" href="http://www.loop.co.nz">Visit site</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/ai/gb/sn/4e/loop-1a-0-1100-0-0.jpg?k=531aebc520" srcset="/assets/resized/sm/upload/ai/gb/sn/4e/loop-1a-0-2200-0-1550-crop-1.jpg?k=83237f975a 2x" alt="Detail image for Loop" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7045454545454546" src="/assets/resized/sm/upload/n4/4n/un/ue/loop-2a-0-1100-0-0.jpg?k=0ed68833d6" srcset="/assets/resized/sm/upload/n4/4n/un/ue/loop-2a-0-2200-0-1550-crop-1.jpg?k=3e230a1b5a 2x" alt="Detail image for Loop" /> </figure> </section> <section class="page-section project-recognition"> <div class="best-award -large -bronze"> <div class="sticker"></div> <p class="detail">Bronze at the 2013 Best Awards</p> </div> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More Web work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#009BDD"> <a class="repositioning" href="/work/art-of-the-title/"> <h3 class="name">Art of the Title</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.1886363636363637" src="/assets/resized/sm/upload/ce/xa/j2/kn/neon-demon-1400-2x-crop-0-440-0-0.jpg?k=d1f555eca4" srcset="/assets/resized/sm/upload/ce/xa/j2/kn/neon-demon-1400-2x-crop-0-880-0-1044-crop-1.jpg?k=3986c34017 2x" alt="Image for Art of the Title" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#AA8844"> <a class="repositioning" href="/work/the-coconet/"> <h3 class="name">The Coconet</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.2931818181818182" src="/assets/resized/sm/upload/4o/u9/9d/ot/home-0-440-0-0.jpg?k=f5a5dda230" srcset="/assets/resized/sm/upload/4o/u9/9d/ot/home-0-880-0-1138-crop-1.jpg?k=7180244123 2x" alt="Image for The Coconet" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#E41A13"> <a class="repositioning" href="/work/westpac-calculators/"> <h3 class="name">Westpac Calculators</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/sm/upload/ha/i0/qs/xy/property-investment-crop-0-440-0-0.jpg?k=5b02e57010" srcset="/assets/resized/sm/upload/ha/i0/qs/xy/property-investment-crop-0-880-0-1320-crop-1.jpg?k=1ef5f30315 2x" alt="Image for Westpac Calculators" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#556677"> <a class="repositioning" href="/work/letterboxd/"> <h3 class="name">Letterboxd</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-440-0-0-0-0-0-660-crop-1.jpg?k=dad5fcdddc" srcset="/assets/resized/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-880-0-1594-crop-1-0-0-0-1320-crop-1.jpg?k=4feb6029ff 2x" alt="Image for Letterboxd" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#009BDD"> <a class="repositioning" href="/work/48hours/"> <h3 class="name">48Hours</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/8a/sg/ov/a3/48-home-crop-0-440-0-0-0-0-0-660-crop-1.jpg?k=734377b32b" srcset="/assets/resized/resized/sm/upload/8a/sg/ov/a3/48-home-crop-0-880-0-1830-crop-1-0-0-0-1320-crop-1.jpg?k=734377b32b 2x" alt="Image for 48Hours" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#00B9BC"> <a class="repositioning" href="/work/stqry/"> <h3 class="name">STQRY</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.8727272727272727" src="/assets/resized/sm/upload/zy/n3/mz/jr/stqry-home-0-440-0-0.jpg?k=3cd8bb6241" srcset="/assets/resized/sm/upload/zy/n3/mz/jr/stqry-home-0-880-0-768-crop-1.jpg?k=a08bc32131 2x" alt="Image for STQRY" /> </div> </div> </div> </div> </a> </div> </article> </div> <a class="moreoftypetitle -allworklink" href="/work/">All<span class="extendedtext"> work</span></a></h3> </section> </div> </div> </article> <div class="adjacent-project-navigation"> <a class="arrow -previous" href="/work/aozora-trading-co/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/art-of-the-title/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">© Cactuslab, est. 2001 <a class="backtotop js--backtotop -is-hidden">↑</a> </div> </div> </footer> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-748523-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>