<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>ARToverMATTER Creative Studio / Design for Social Good, Inclusion & Social Impact</title>
  <meta name="description" content="Brand & marketing designers with a passion for social impact and social justice, based in Vancouver and Calgary, Canada.">
  <meta name="keywords" content="web design, wordpress, graphic design, design, communication, branding, identity, graphic, print, web, website design, webdev, web development, UX, UI, vancouver, calgary, alberta, canada, logo, poster, brochure, advertisement, ads, magazine, custom, user interface, experience, interactive, motion graphics">
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-25914750-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-25914750-1');
  </script>
  <!-- <script>
    var _tip = _tip || [];
    (function(d, s, id) {
      var js, tjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.async = true;
      js.src = d.location.protocol + '//app.truconversion.com/ti-js/16472/32331.js';
      tjs.parentNode.insertBefore(js, tjs);
    }(document, 'script', 'ti-js'));
  </script> -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet" type="text/css">
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="css/master.css" type="text/css">

</head>

<body class="home">

  <header>
    <div class="row">
        <!-- <img src="img/AOM_Logo.svg" alt="AOM Logo" class="logo" width="120"> -->
        <a href="index.html"><img src="img/AOM_Logo-Reverse.svg" alt="AOM Logo in white" class="logo-rev" width="120"></a>

      <nav>
        <a href="#" class="menuicon">Menu</a>

        <ul>
          <li><a href="index.html" class="active">Home</a></li>

          <li><a href="work.html">Work</a></li>

          <li><a href="motion.html">Motion</a></li>
          <li><a href="resources.html">Resources</a></li>
          <li><a href="mailto:hello@ARToverMATTER.com" target="_blank">Email Us</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <section id="intro" style="margin-top:80px;">
    <div class="row">
      <h1 class="accessible">AOM Creative: Design for Social Good</h1>
      <p class="text-accent text-s text-yellow" data-aos="fade-right">Hello, Nice to meet you!</p>
      <h2 class="text-white weight-300" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="1200">
        <span class="text-white weight-800" data-aos="fade-up" data-aos-delay="1200" style="text-transform: none;">ARTOVERMATTER</span> is a creative studio who <span class="text-white weight-800" data-aos="fade-up" data-aos-delay="1500" data-aos-offset="0"><em>gives&nbsp;a&nbsp;damn</em></span> &amp; believes in&nbsp;using our <span class="text-white weight-800" data-aos="fade-up" data-aos-delay="1800">creative powers</span> for <span class="text-white weight-800" data-aos="fade-up" data-aos-delay="2100">social&nbsp;good.</span>
      </h2>
      <p class="text-accent text-s" data-aos="fade-up" data-aos-delay="2400" style="font-weight:300;font-size: 0.7em;letter-spacing: 0.3em;color:#9a9a9a;">PS: We are working on a new website, stay tuned!</p>

    </div>
  </section>

  <section id="value-1">
    <div class="row">
      <div class="five columns" data-aos="fade-right" data-aos-delay="300">
        <h2 class="subhead">We value<br><span class="font-large">Diversity &amp; Inclusion</span></h2>
      </div>

      <div class="three columns"><img class="valimg1a" src="img/home/vqff2018.jpg" data-aos="fade-down" alt="Vancouver Queer Film Festival 2017"></div>

      <div class="three columns"><img class="valimg1b" src="img/home/vqff2017.jpg" data-aos="fade-up" data-aos-delay="100" alt="Vancouver Queer Film Festival 2016"></div>
    </div>
  </section>

  <section id="value-2">
    <div class="row">
      <div class="six columns" data-aos="fade-left" data-aos-delay="300">
        <h2 class="subhead">We care about<br><span class="font-large">Social Issues &amp; Social&nbsp;Justice</span></h2>
      </div>

      <div class="six columns" data-aos="zoom-out"><img class="valimg2" src="img/home/fh-overdose.png" alt="Fraser Health #StopOverdose Campaign"></div>
    </div>
  </section>

  <section id="value-3">
    <div class="row">
      <div class="six columns" data-aos="fade-right" data-aos-delay="300">
        <h2 class="subhead">We love working with<br><span class="font-large">Community Leaders &amp; Change-Makers</span></h2>
      </div>

      <div class="six columns" data-aos="flip-up"><img class="valimg3" src="img/home/cq2017.png" alt=""></div>
    </div>
  </section>



  <section id="about-services">
    <div class="row">
      <div id="about" class="eight columns" data-aos="fade-up">
        <h2 class="accessible">About</h2>

        <h3 data-aos="fade-in">Who we are</h3>

        <p style="margin-bottom:15px;"><strong>ARToverMATTER</strong> is an inclusive creative studio who partner with purpose-driven organizations and change-makers in making an impact in their communities. We work alongside a diverse group of talented collaborators from all disciplines to bring you innovative digital and print solutions that fit your organization’s needs and budget. We can help you make an impact, with purpose and style. AOM Creative specializes on projects with a focus on equity, inclusion, accessibility, social justice, and social impact. <a href="mailto:hello@ARToverMATTER.com"><strong>Let’s talk!</strong></a></p>

        

        <div class="row nopadding" style="width:100%;">
          <div class="team-member six columns" data-aos="fade-up" data-aos-delay="100" style="max-width: 480px;">
            <img class="team-photo" src="img/home/xandr.jpg" alt="Photo of Xandr">

            <p class="team-name"><strong>Xandr Sutjiadi, RGD</strong></p>
            <p class="pronouns">(pronouns: he / him)</p>
            <p class="team-title dashed">Principal + Creative Director</p>
            <p class="team-bio">Xandr is a multi-hyphenated queer trans creative director, designer, illustrator, front-end developer, occassional speaker and educator. He is also a co-founder of <a href="https://rippleofchangemag.com" target="_blank">Ripple&nbsp;of&nbsp;Change Magazine</a>.</p>
            
          </div>

          <div class="team-member six columns" data-aos="fade-up" data-aos-delay="200" style="max-width: 480px;">
          
          
          <p class="team-bio">Outside of AOM, you might find Xandr as a guest speaker sharing stories about his queer trans immigrant life journey or advocating for inclusive and accessible design. Xandr also sits on the Board of the <a href="https://www.rgd.ca/" style="font-weight: bold;" target="_blank"><em>Association of Graphic Designers (RGD) Canada</em></a> and Chairs the Diversity & Inclusion Committee.
           
          </p>
            
            <p class="team-bio">Our team of collaborators proudly represents rebels, allies, feminists, immigrants, human-rights and mental-health advocates, climate-change and sustainability champions, members of the 2SLGBTQQIA+, BIPOC, and other marginalized communities.</p>
      

          </div>
        </div>
      </div>

      <div id="services" class="four columns">
        <h2 class="accessible">Services</h2>
        <h3 data-aos="zoom-in">What we do</h3>
        <h4 data-aos="zoom-in-left">Brand Development</h4>
        <ul data-aos="zoom-in-left">
          <li>Organization Brand Identity</li>
          <li>Social Event or Campaign Branding</li>
          <li>Brand Strategy & Accessibility Audit</li>
        </ul>

        <h4 data-aos="zoom-in-left">Print Design</h4>

        <ul data-aos="zoom-in-left">
          <li>Custom Illustrations</li>
          <li>Communications & Marketing Collateral</li>
          <li>Poster, & Signage Design</li>
          <li>Annual Report Design & Microsite</li>
        </ul>

        <h4 data-aos="zoom-in-left">Digital / Interactive</h4>

        <ul data-aos="zoom-in-left">
          <li>UX / UI Design</li>
          <li>WCAG AA Compliant Accessibility Audit</li>
          <!-- <li>Motion Graphics / Video Production</li> -->
          <!-- <li>iOS & Android App / Web-App Design</li> -->
          <li>Custom Website Design & Development (WordPress, Gutenberg block-based design, Squarespace, WebFlow, Oxygen, etc.)</li>
          <!-- <li>WordPress to iOS & Android App Development</li> -->
          <!-- <li>Custom Shopify, SquareSpace Websites</li> -->
          <!-- <li>Web Training & Maintenance Support</li> -->

        </ul>
      </div>
    </div>
  </section>

  <section id="clients">
    <div class="row" style="padding-bottom:20px;">
      <h2 class="accessible">Clients</h2>

      <h3 data-aos="zoom-in-up" class="align-center">Organizations We've Worked With</h3>

      <div id="clients-list" class="row nobottom nopadding">

        <div class="four columns">
          <h4 data-aos="zoom-in-up">Public, Health &amp; Education</h4>
          <ul data-aos="zoom-in-up">
            
            <li>BC's Office of the Human Rights Commissioner</li>
            <li>Vancouver Chinatown Foundation</li>
            <li>Real Estate Foundation of British Columbia</li>
            <li>Stigma and Resilience Among Vulnerable Youth Centre, UBC</li>
            <li>SFU Sexual Violence Support & Prevention Office</li>
            <li>Centre For Gender & Sexual Health Equity</li>
            <li>Ministry of Environment and Climate Change Strategy</li>
          </ul>


        </div>

        <div class="four columns">

          <h4 data-aos="zoom-in-up">Non-Profit &amp; Communities</h4>
           <ul data-aos="zoom-in-up">
             <li>Indigenous Climate Action</li>
           <li>MOSAIC BC</li>
            <li>Gordon Neighbourhood House</li>
            <li>Collingwood Neighbourhood House</li>
            <li>Mount Pleasant Neighbourhood House</li>
            <li>Quest Theatre</li>
            <li>Kids Cancer Care</li>
            <li>Growing Chefs</li>
            <li>Canada Learning Code</li>
            <li>Camp Qwanoes at Vancouver Island</li>
          </ul>


        </div>



        <div class="four columns nobottom">

          <h4 data-aos="zoom-in-up">Events, Festivals & Media</h4>
          <ul data-aos="zoom-in-up">

            <li>CBC Vancouver</li>
            <li>Out On Screen / Vancouver Queer&nbsp;Film Festival</li>
            <li>Stratagem Conference</li>
            <li>Calgary Pride Festival</li>
            <li>Giving Tuesday - Vancouver Chapter</li>
            <li>The Voice Newspaper at Langara</li>
            <li>News Photographers Association of&nbsp;Canada</li>
            <li>The Digital Nonprofit Conference</li>
           


          </ul>


        </div>



      </div>
    </div>
  </section>

  <section id="cta">
    <div class="row align-center">
      <h4 class="text-white" data-aos="zoom-in">Want to learn more?</h4><a class="button button-primary" href="work.html" data-aos="zoom-in" data-aos-delay="500">View our work</a>
    </div>
  </section>

  <footer>
    <div class="row">
      <div id="contact" class="ten columns">
        <p><strong>Let's talk!</strong><br>
          <a href="mailto:hello@ARToverMATTER.com">hello@ARToverMATTER.com</a>
        </p>
        <p class="territorial-acknowledgement" style="font-size: 12px;">In the spirit of reconciliation, we humbly acknowledge that we live, work and play on the unceded territories of the Musqueam, Squamish, and Tsleil-Waututh peoples, as well as Moh’kinsstis, the traditional Treaty 7 territory of the Blackfoot Confederacy (Siksika, Kainai, Piikani), the Tsuut’ina, the Îyârhe Nakoda Nations, and the Métis Nation (Region 3). <a href="https://native-land.ca/resources/territory-acknowledgement/" target="_blank" style="font-size:10px;">Learn more</a></p>
        <p class="credit">&copy;2007 - 2023 <a href="https://ARToverMATTER.com">ARToverMATTER Creative</a>. Made with <span style="color: #e25555;">&#9829;</span> in Canada. </p>
      </div>

      <!-- <div class="info two columns clearfix location">
        <p class="align-right"><strong>Calgary, AB</strong></p>
      </div> -->
  

      
    </div>
  </footer>


  <!-- <script src="https://unpkg.com/headroom.js"></script> -->
  <script src="js/createjs-2015.11.26.min.js"></script>
  <script src="js/global.js">
  </script>
</body>

</html>