Cactuslab · Work · Auckland City of Music

<!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: Auckland City of Music"> <meta name="twitter:description" content="We worked with creative director Tyrone Ohia and designer Rob Lewis (of Auckland Council’s partner agency, Extended Wh膩nau) to build the website for this initiative that recognises Auckland/T膩maki Makaurau as a part of the UNESCO Creative Cities Network. The overall brand approach won a Gold Pin at the 2019 Best Design Awards."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/l5/3a/tu/dw/acom-0-500-0-0.png?k=c12678c7b0"> <meta property="og:url" content="https://cactuslab.com/work/auckland-city-of-music/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Auckland City of Music at Cactuslab"> <meta property="og:description" content="We worked with creative director Tyrone Ohia and designer Rob Lewis (of Auckland Council’s partner agency, Extended Wh膩nau) to build the website for this initiative that recognises Auckland/T膩maki Makaurau as a part of the UNESCO Creative Cities Network. The overall brand approach won a Gold Pin at the 2019 Best Design Awards."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/l5/3a/tu/dw/acom-0-500-0-0.png?k=c12678c7b0"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="2008"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Auckland City of Music </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: #999999; } .external-link { color: #999999; } .external-link:hover, .external-link:focus { border-color: #999999; } </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">Auckland City of Music</h1> <div class="client rich-text -secondary-font-family -smaller"> Auckland Council </div> </div> <div class="body"> <div class="rich-text"> <p>We worked with c<span>reative director Tyrone Ohia and d</span><span>esigner Rob Lewis (</span>of Auckland Council’s partner agency, Extended <span>Wh膩nau)</span> to build the website for this initiative that recognises Auckland/T膩maki Makaurau as a part of the UNESCO Creative Cities Network. The overall brand approach <a rel="noopener noreferrer" href="https://bestawards.co.nz/graphic/large-brand-identity/extended-whanau/tamaki-makaurau-unesco-pa-puoro-auckland/" target="_blank">won a Gold Pin</a> at the 2019 Best Design Awards.</p> </div> <p><a class="external-link" target="_blank" href="https://www.aucklandcityofmusic.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="4.015454545454546" src="/assets/resized/sm/upload/4k/08/hu/p3/acom-0-1100-0-0.jpg?k=525061c148" srcset="/assets/resized/sm/upload/4k/08/hu/p3/acom-0-2200-0-8832-crop-1.jpg?k=185aa9eb5b 2x" alt="Detail image for Auckland City of Music" /> </figure> <figure class="mediaitem -iphonex deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#222222" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/nw/fm/xh/rd/IMG_1993-0-850-0-0.jpg?k=aa3d5a6336" alt="Detail image for" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phonex"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <div class="notch"> <svg width="670" height="100" viewBox="0 0 670 100" xmlns="http://www.w3.org/2000/svg"><path d="M670 1.008C648 1.387 648 14.334 648 27v1c0 27.794-21.206 63-70 63H92c-48.794 0-70-35.206-70-63v-1C22 14.334 22 1.387 0 1.008V0h670v1.008z" fill="#222222" fill-rule="evenodd"/></svg> </div> <img data-aspect-ratio="2.1642512077294684" src="/assets/resized/sm/upload/hl/dd/69/ob/IMG_1994-0-850-0-0.jpg?k=43bba4befc" alt="Detail image for" /> </div> </div> </div> </div> </figure> </section> <section class="page-section project-recognition"> <div class="best-award -large -gold"> <div class="sticker"></div> <p class="detail">Gold at the 2019 Best Awards</p> </div> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#224B7E"> <a class="repositioning" href="/work/orix-new-zealand/"> <h3 class="name">ORIX New Zealand</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.3136363636363637" src="/assets/resized/sm/upload/oy/67/zb/ct/orix-crop-0-440-0-0.jpg?k=b0a387c77f" srcset="/assets/resized/sm/upload/oy/67/zb/ct/orix-crop-0-880-0-1156-crop-1.jpg?k=0ef5b5adb9 2x" alt="Image for ORIX New Zealand" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#000000"> <a class="repositioning" href="/work/gill-gatfield/"> <h3 class="name">Gill Gatfield</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.8090909090909091" src="/assets/resized/sm/upload/f1/05/jj/je/zealandia-0-440-0-0.jpg?k=fc55708729" srcset="/assets/resized/sm/upload/f1/05/jj/je/zealandia-0-880-0-712-crop-1.jpg?k=1d5365efeb 2x" alt="Image for Gill Gatfield" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#402F50"> <a class="repositioning" href="/work/zoomy/"> <h3 class="name">Zoomy</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(17,17,17)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-330-0-0.jpg?k=203e1024f9" srcset="/assets/resized/sm/upload/nr/kk/gs/vm/z2-0-660-0-1172-crop-1.jpg?k=d861f7bf1e 2x" alt="Mobile image for Zoomy" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#00A163"> <a class="repositioning" href="/work/cloudcheck/"> <h3 class="name">Cloudcheck</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.0" src="/assets/resized/sm/upload/xi/qk/s3/2b/cloudcheck-cropped-small-0-440-0-0.jpg?k=e0cc34111b" srcset="/assets/resized/sm/upload/xi/qk/s3/2b/cloudcheck-cropped-small-0-880-0-880-crop-1.jpg?k=b7d0f7367d 2x" alt="Image for Cloudcheck" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#F93F3F"> <a class="repositioning" href="/work/food-lovers-guide-to-paris/"> <h3 class="name">Food Lover鈥檚 Guide to Paris</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(0,2,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/a0/fd/qj/if/map-0-330-0-0.jpg?k=3ad4fc49f9" srcset="/assets/resized/sm/upload/a0/fd/qj/if/map-0-660-0-1172-crop-1.jpg?k=48fad935aa 2x" alt="Mobile image for Food Lover鈥檚 Guide to Paris" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#0D7C82"> <a class="repositioning" href="/work/retrospace/"> <h3 class="name">Retrospace</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.2204545454545455" src="/assets/resized/sm/upload/s8/3f/y0/z1/rs-harry-0-440-0-0.jpg?k=80e304a2f6" srcset="/assets/resized/sm/upload/s8/3f/y0/z1/rs-harry-0-880-0-1074-crop-1.jpg?k=835e772a83 2x" alt="Image for Retrospace" /> </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/geneva-healthcare/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/orix-new-zealand/" 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>

CINXE.COM

Cactuslab · Work · Auckland City of Music