Cactuslab · Work · Matariki Festival

<!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: Matariki Festival"> <meta name="twitter:description" content="We worked with the team at Alt Group to deliver this site for the Auckland Council, based on Alt’s design direction. It served as a comprehensive festival programme during the M膩ori new year festivities, fetching announcements from Facebook, mapping the locations of all events and providing multi-lingual content in selected areas."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/fn/il/a1/qe/mf-cropped-0-500-0-0.jpg?k=21c1ead4f1"> <meta property="og:url" content="https://cactuslab.com/work/matariki-festival/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Matariki Festival at Cactuslab"> <meta property="og:description" content="We worked with the team at Alt Group to deliver this site for the Auckland Council, based on Alt’s design direction. It served as a comprehensive festival programme during the M膩ori new year festivities, fetching announcements from Facebook, mapping the locations of all events and providing multi-lingual content in selected areas."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/fn/il/a1/qe/mf-cropped-0-500-0-0.jpg?k=21c1ead4f1"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="1146"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Matariki Festival </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: #F9680E; } .external-link { color: #F9680E; } .external-link:hover, .external-link:focus { border-color: #F9680E; } </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">Matariki Festival</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 the team at <a href="http://altgroup.net" target="_blank">Alt Group</a> to deliver this site for the Auckland Council, based on Alt’s design direction. It served as a comprehensive festival programme during the M膩ori new year festivities, fetching announcements from Facebook, mapping the locations of all events and providing multi-lingual content in selected areas.</p> </div> <p><a class="external-link" target="_blank" href="http://www.matarikifestival.org.nz">Visit site</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-no-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="2.291818181818182" src="/assets/resized/sm/upload/jz/yx/q0/75/mf-cropped-0-1100-0-0.jpg?k=05215b293d" srcset="/assets/resized/sm/upload/jz/yx/q0/75/mf-cropped-0-2200-0-5040-crop-1.jpg?k=a6c56ce3cf 2x" alt="Detail image for Matariki Festival" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.7041666666666667" src="/assets/resized/sm/upload/l7/xe/ai/6w/best-matariki-0-1100-0-0.jpg?k=852b9fec3b" alt="Detail image for Matariki Festival" style="margin-top:8rem;margin-bottom:8rem;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="1.29" src="/assets/resized/sm/upload/gd/27/9j/k6/mf-events-cropped-0-1100-0-0.jpg?k=916ad36dc2" srcset="/assets/resized/sm/upload/gd/27/9j/k6/mf-events-cropped-0-2170-0-2799-crop-1.jpg?k=ab48c04dab 2x" alt="Detail image for Matariki Festival" style="margin-top:8rem;margin-bottom:8rem;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.8936363636363637" src="/assets/resized/sm/upload/5g/2y/ij/1e/mf-map-0-1100-0-0.jpg?k=7e384f909d" srcset="/assets/resized/sm/upload/5g/2y/ij/1e/mf-map-0-2170-0-1939-crop-1.jpg?k=6642cf3835 2x" alt="Detail image for Matariki Festival" style="margin-top:8rem;margin-bottom:8rem;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="1.4036363636363636" src="/assets/resized/sm/upload/17/ny/zl/mi/mf-event-0-1100-0-0.jpg?k=b6809f25a0" srcset="/assets/resized/sm/upload/17/ny/zl/mi/mf-event-0-2200-0-3086-crop-1.jpg?k=280741875d 2x" alt="Detail image for Matariki Festival" style="margin-top:8rem;margin-bottom:8rem;" /> </figure> </section> <section class="page-section project-recognition"> <div class="best-award -large -finalist"> <div class="sticker"></div> <p class="detail">Finalist at the 2016 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:#2F46AB"> <a class="repositioning" href="/work/webstock/"> <h3 class="name">Webstock</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/2c/sw/ir/cq/ws-home-orange-0-440-0-0-0-0-0-660-crop-1.jpg?k=801f9f047d" srcset="/assets/resized/resized/sm/upload/2c/sw/ir/cq/ws-home-orange-0-880-0-1712-crop-1-0-0-0-1320-crop-1.jpg?k=8e2c7a42b8 2x" alt="Image for Webstock" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#8060D0"> <a class="repositioning" href="/work/the-good-in-movies/"> <h3 class="name">The Good In Movies</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.356818181818182" src="/assets/resized/sm/upload/h1/yv/xp/94/tgim-home-1600-2x-crop-0-440-0-0.jpg?k=94cc44edad" srcset="/assets/resized/sm/upload/h1/yv/xp/94/tgim-home-1600-2x-crop-0-880-0-1194-crop-1.jpg?k=559129389b 2x" alt="Image for The Good In Movies" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#3D81AE"> <a class="repositioning" href="/work/healthpoint/"> <h3 class="name">Healthpoint</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.2363636363636363" src="/assets/resized/sm/upload/g4/xg/kh/1k/hp1-0-440-0-0.jpg?k=c41eae1ea7" srcset="/assets/resized/sm/upload/g4/xg/kh/1k/hp1-0-880-0-1088-crop-1.jpg?k=ece9f43bff 2x" alt="Image for Healthpoint" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#A0A8B0"> <a class="repositioning" href="/work/back-of-a-napkin/"> <h3 class="name">Back of a Napkin</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.875" src="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-440-0-0.jpg?k=afe89655ce" srcset="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-880-0-770-crop-1.jpg?k=8602cd4578 2x" alt="Image for Back of a Napkin" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#0079C4"> <a class="repositioning" href="/work/aozora-trading-co/"> <h3 class="name">Aozora Trading Co</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/4g/fr/9x/2k/aozora-oranges-0-440-0-0-0-0-0-660-crop-1.jpg?k=30f3ce70c9" srcset="/assets/resized/resized/sm/upload/4g/fr/9x/2k/aozora-oranges-0-880-0-1452-crop-1-0-0-0-1320-crop-1.jpg?k=30f3ce70c9 2x" alt="Image for Aozora Trading Co" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#AABBCC"> <a class="repositioning" href="/work/loop/"> <h3 class="name">Loop</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/6o/ir/xx/a3/loop-sfs-2x-0-440-0-0-0-0-0-660-crop-1.jpg?k=031c11cd62" srcset="/assets/resized/resized/sm/upload/6o/ir/xx/a3/loop-sfs-2x-0-880-0-1760-crop-1-0-0-0-1320-crop-1.jpg?k=031c11cd62 2x" alt="Image for Loop" /> </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/dictionary-stories/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/webstock/" 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 · Matariki Festival