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: Marine Field Guide"> <meta name="twitter:description" content="We’re still young enough at heart to love exploring rock pools, so we were chuffed to be asked by Digital Arts Network to work on Auckland Museum’s marine field guide app. Originally built using open-source code from Victoria University, the Marine Field Guide is a fantastic companion for coastline adventures—replacing your pocket or backpack reference—whether in the field, at the beach or on a boat. We gave the app a design refresh in 2015, and it now contains a database of over 360 species, including the aforementioned rock-pool crustaceans, sea reptiles, fish and coastal birds."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/0u/fp/9r/yn/Screen%20Shot%202016-09-13%20at%2010.13.23%20AM-0-500-0-0.png?k=ef1bd8a7e2"> <meta property="og:url" content="https://cactuslab.com/work/marine-field-guide/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Marine Field Guide at Cactuslab"> <meta property="og:description" content="We’re still young enough at heart to love exploring rock pools, so we were chuffed to be asked by Digital Arts Network to work on Auckland Museum’s marine field guide app. Originally built using open-source code from Victoria University, the Marine Field Guide is a fantastic companion for coastline adventures—replacing your pocket or backpack reference—whether in the field, at the beach or on a boat. We gave the app a design refresh in 2015, and it now contains a database of over 360 species, including the aforementioned rock-pool crustaceans, sea reptiles, fish and coastal birds."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/0u/fp/9r/yn/Screen%20Shot%202016-09-13%20at%2010.13.23%20AM-0-500-0-0.png?k=ef1bd8a7e2"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="667"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Marine Field Guide </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: #037CFD; } .external-link { color: #037CFD; } .external-link:hover, .external-link:focus { border-color: #037CFD; } .project-media .mediaitem { background-color: #037CFD; } .project-media .deviceset { color: #004BCD; } </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">Marine Field Guide</h1> <div class="client rich-text -secondary-font-family -smaller"> Auckland Museum </div> </div> <div class="body"> <div class="rich-text"> <p>We’re still young enough at heart to love exploring rock pools, so we were chuffed to be asked by <a href="http://www.dan.co.nz" target="_blank">Digital Arts Network</a> to work on Auckland Museum’s marine field guide app. Originally built using open-source code from Victoria University, the Marine Field Guide is a fantastic companion for coastline adventures—replacing your pocket or backpack reference—whether in the field, at the beach or on a boat.</p> <p>We gave the app a design refresh in 2015, and it now contains a database of over 360 species, including the aforementioned rock-pool crustaceans, sea reptiles, fish and coastal birds.</p> </div> <p><a class="external-link" target="_blank" href="https://itunes.apple.com/nz/app/new-zealand-marine-life/id661468952">In the App Store</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/uu/5b/8l/w1/IMG_7069-0-850-0-0.jpg?k=63a8291243" alt="Detail image for Marine Field Guide 1" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/ww/uj/d8/ho/IMG_7065-0-850-0-0.jpg?k=63a8291243" alt="Detail image for Marine Field Guide 1" /> </div> </div> </div> </div> </figure> <figure class="mediaitem deviceset"> <div class="device js--device -tablet -portrait" data-device-type="tablet"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.3329411764705883" src="/assets/resized/sm/upload/j5/fq/zd/nb/Screen%20Shot%202016-09-13%20at%2010.24.32%20AM-0-850-0-0.jpg?k=5145a13c63" srcset="/assets/resized/sm/upload/j5/fq/zd/nb/Screen%20Shot%202016-09-13%20at%2010.24.32%20AM-0-1536-0-2047-crop-1.jpg?k=ba6336101a 2x" alt="Detail image for Marine Field Guide 2" /> </div> </div> </div> </div> </figure> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More iOS work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#326178"> <a class="repositioning" href="/work/essential-new-zealand/"> <h3 class="name">Essential New Zealand</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(2,49,72)"> <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/h4/7e/ug/IMG_7061-0-330-0-0.jpg?k=afe89655ce" srcset="/assets/resized/sm/upload/a0/h4/7e/ug/IMG_7061-0-660-0-1172-crop-1.jpg?k=aed393f5a1 2x" alt="Mobile image for Essential New Zealand" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#FBD240"> <a class="repositioning" href="/work/aa-roadservice/"> <h3 class="name">AA Roadservice</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(34,34,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/6a/rb/dp/e0/Reporting%20a%20breakdown-0-330-0-0.jpg?k=05122511f5" srcset="/assets/resized/sm/upload/6a/rb/dp/e0/Reporting%20a%20breakdown-0-660-0-1172-crop-1.jpg?k=728c293d4c 2x" alt="Mobile image for AA Roadservice" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#013672"> <a class="repositioning" href="/work/barfoot-thompson/"> <h3 class="name">Barfoot & Thompson</h3> <div class="device js--device -tablet -landscape" data-device-type="tablet" style="color: rgb(0,17,34)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.75" src="/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-440-0-0.jpg?k=6dbba56d85" srcset="/assets/resized/sm/upload/j9/wu/vx/r9/IMG_0175-0-880-0-660-crop-1.jpg?k=5933c76212 2x" alt="Tablet image for Barfoot & Thompson" /> </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:#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:#42CB82"> <a class="repositioning" href="/work/vend-counter/"> <h3 class="name">Vend Counter</h3> <div class="device js--device -phone -portrait" data-device-type="phone" style="color: rgb(17,34,51)"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7787878787878788" src="/assets/resized/sm/upload/gk/bj/2m/uy/vendc-1-0-330-0-0.jpg?k=ab868331b3" srcset="/assets/resized/sm/upload/gk/bj/2m/uy/vendc-1-0-660-0-1172-crop-1.jpg?k=60407d3ecd 2x" alt="Mobile image for Vend Counter" /> </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/vend-register/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/essential-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>