<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Christophe da Silva — UX/Product Designer</title>
        <meta name="author" content="Christophe da Silva">
        <meta name="Description" content="I create digital products that help people interact with information." />
        <meta name="Copyright" content="copyright Christophe da Silva 2020" />

        <meta property="og:title" content="Christophe da Silva — UX/Product Designer">
        <meta property="og:description" content="I create digital products that help people interact with information.">
        <meta property="og:image" content="http://cslv.me/img/thumbnail.jpg">
        <meta property="og:url" content="http://cslv.me/index.html">
        <meta name="twitter:card" content="http://cslv.me/img/thumbnail.jpg">

        <link rel="shortcut icon" href="/img/favicon.png" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <link rel="author" href="humans.txt" />
        
        <script src="./js/main.js"></script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-543852-7"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-543852-7');
        </script>
    </head>
    <body class="index">
        <canvas id="renderer"></canvas>
        <div id="container">

            <header class="hide">
                <nav class="index">
                    <h4><a href="/index.html">Christophe da Silva</a></h4>
                    <h4><a href="/index.html">Product Designer <br class="rwd-break"/>/ App Developer</a></h4>
                    <h4><a href="/index.html">Work</a><a href="/about.html" id="aboutbutton">Info</a></h4>
                </nav>
            </header>

            <!-- Intro -->
            <div class="content intro" id="statement">
                <section class="grid">
                    <div class="spacer"></div>
                    <div class="name over">
                        <h2><a href="#work" class="gotowork">UX, Product designer, App developer.</a></h2>
                        <h4 class="vertvp-only"><a href="#work" class="gotowork">Recent Work ↓</a></h4>
                    </div>                    
                    <div class="desc over">
                        <p class="emphasis">Hi, I work in the digital industry since two decades, mostly leading UX, Interaction Design, and building digital products. I am currently UX Design Director at AREA 17, in NYC.</p>
                        <h4><a href="#work" class="gotowork">Recent Work ↓</a></h4>
                    </div>
                </section>               
            </div>

            <!-- Selected work -->
            <div class="content index">
                <a id="work"></a>
                <!-- AIC -->
                <div class="grid feature aic">
                    <div class="info">
                        <a href="/work/aic.html">
                            <h4>Art Institute of Chicago</h4>
                            <h2>A museum in the digital age</h2>
                        </a>
                        <p>
                            Museums are unique physical spaces in such that they provide a very genuine experience: being in presence of art.
                            <a href="/work/aic.html" class="noanim">Read more →</a>
                        </p>
                    </div>
                    <div class="asset1">
                        <a href="/work/aic.html" class="pic"><img src="/assets/feature_house.jpg" srcset="/assets/feature_house.jpg 1x, /assets/feature_house@2x.jpg 2x" alt="Art Institute of Chicago view"/></a>
                        <span class="caption">Art Institute of Chicago Grand Staircase</span>
                    </div>
                    <div class="asset2">
                        <a href="/work/aic.html" class="pic"><img src="/assets/feature_buste.jpg" srcset="/assets/feature_buste.jpg 1x, /assets/feature_buste@2x.jpg 2x" alt="Bust of a Youth. Francesco Mochi."/></a>
                        <span class="caption">Bust of a Youth. Francesco Mochi.</span>     
                    </div>
                </div>

                <!-- PHALLAINA -->
                <div class="grid feature phallaina">
                    <div class="asset1 device">
                        <a href="/work/phallaina.html" class="pic">

                            <img src="/assets/phallaina/idevice_outline@2x.png" alt="iOS device"/>
                         
                            <img src="/assets/feature_phallaina.preview.jpg" data-src="/assets/feature_phallaina.jpg" data-srcset="/assets/feature_phallaina.jpg 1x, /assets/feature_phallaina@2x.jpg 2x" alt="Phallaina App" class="asset reveal lazy"/>
                              
                            <!--
                            <video autoplay playsinline loop muted poster="/assets/feature_phallaina@2x.jpg" class="asset"> 
                                <source src="/assets/phallaina/phallaina_app.mp4" type="video/mp4">
                                <source src="/assets/phallaina/phallaina_app.webm" type="video/webm; codecs=vp9,vorbis">
                            </video>
                            -->
                        </a>
                    </div> 
                    <div class="info">
                        <a href="/work/phallaina.html">
                            <h4>Phallaina</h4>
                            <h2>On the making of a graphic novel app</h2>
                        </a>
                    </div>
                    <div class="moreinfo">
                        <p>
                            Phallaina is a singular app that breaks from the canonical graphic novel format by delivering a narrative scrolling experience.
                            <a href="/work/phallaina.html">Read more →</a>
                        </p>
                        <div class="awards">
                            <a href="https://www.webbyawards.com/winners/2016/mobile-sites-apps/general-sites-apps/entertainment/phallaina/?" target="_blank" rel="noopener"><img src="/assets/award_webby@2x.png" alt="Webby nominee"/></a>
                            <a href="https://thefwa.com/cases/phallaina" target="_blank" rel="noopener"><img src="/assets/award_mfwa@2x.png" alt="Mobile FWA"/></a>
                            <a href="http://archive.j-mediaarts.jp/en/festival/2017/manga/works/20mj_phallaina/" target="_blank" rel="noopener"><img src="/assets/award_jmaf@2x.png" alt="Japan Media Art Festival"/></a>
                        </div>
                    </div>  
                </div>

                <!-- NYTCO -->
                <div class="grid feature nytco">
                    <div class="info">
                        <a href="/work/nytco.html">
                            <h4>The New York Times Company</h4>
                            <h2>Radical<br class="rwd-break"/> Simplification</h2>
                        </a>
                        <p>
                            The New York Times Company website addresses a wide range of user motivations and content offering, the challenge was to create a scalable system that delivers a simple and consistent user experience.<BR/>
                            <a href="/work/nytco.html">Read more →</a>
                        </p>
                    </div>  
                    <div class="asset1">
                        <a href="/work/nytco.html" class="pic"><img src="/assets/feature_nytco.preview.jpg" data-src="/assets/feature_nytco.jpg" data-srcset="/assets/feature_nytco.jpg 1x,/assets/feature_nytco@2x.jpg 2x" class="reveal lazy" alt="The New York Times Company"/></a>
                    </div>
                </div>

                <!-- PUP -->
                <div class="grid feature pup">
                    <div class="col bottom asset1">
                        <a href="/work/pup.html" class="pic"><img src="/assets/feature_book1.preview.jpg" data-src="/assets/feature_book1.jpg" data-srcset="/assets/feature_book1.jpg 1x,/assets/feature_book1@2x.jpg 2x" class="reveal lazy" alt="Princeton University Press"/></a>
                    </div>                      
                    <div class="col bottom info">
                        <a href="/work/pup.html">
                            <h4>Princeton University Press</h4>
                            <h2>Exploring an influential book catalog</h2>
                        </a>
                        <p>
                            Princeton University Press has a 100 years old book catalog from various expertise fields, our goal was to help users in finding the right book.
                            <br/><a href="/work/pup.html">Read more →</a>
                        </p>
                    </div>
                    <div class="col bottom asset2">
                        <a href="/work/pup.html" class="pic"><img src="/assets/feature_weiweiisms.preview.jpg" data-src="/assets/feature_weiweiisms.jpg" data-srcset="/assets/feature_weiweiisms.jpg 1x,/assets/feature_weiweiisms@2x.jpg 2x" class="reveal lazy" alt="Princeton University Press"/></a>
                    </div>  
                    <div class="col bottom asset3">
                        <a href="/work/pup.html" class="pic"><img src="/assets/feature_book2.preview.jpg" data-src="/assets/feature_book2.jpg" data-srcset="/assets/feature_book2.jpg 1x,/assets/feature_book2@2x.jpg 2x" class="reveal lazy" alt="Princeton University Press"/></a>
                    </div>     
  
                </div>

                <!-- Other work -->
                <div class="grid clients"> 
                    <h4>&nbsp;</h4>
                    <ul>
                        <li><p class="emphasis"><a href="http://getty.edu/" target="_blank" rel="noopener">Getty</a></p></li>
                        <li><p class="emphasis"><a href="https://www.engadget.com/" target="_blank" rel="noopener">Engadget</a></p></li>
                        <li><p class="emphasis"><a href="https://www.newschool.edu/" target="_blank" rel="noopener">The New School</a></p></li>
                        <li><p class="emphasis"><a href="https://www.zappos.com/a/the-style-room/" target="_blank" rel="noopener">Zappos Style Room</a></p></li>
                    </ul>
                    <ul>
                        <li><p class="emphasis"><a href="https://www.nyrr.org/" target="_blank" rel="noopener">New York Road Runners</a></p></li>
                        <li><p class="emphasis"><a href="https://www.opensocietyfoundations.org/" target="_blank" rel="noopener">Open Society Foundation</a></p></li>
                        <li><p class="emphasis"><a href="https://www.aspenideas.org/" target="_blank" rel="noopener">Aspen Ideas Festival</a></p></li>
                        <li><p class="emphasis"><a href="https://apps.apple.com/us/app/nespresso/id342879434" target="_blank" rel="noopener">Nespresso iOS apps</a></p></li>
                    </ul>
                </div>

                <div class="grid hello">
                    <p>Hi, I work in the digital industry since two decades, mostly leading UX, Interaction Design, and building digital products. I am currently UX Design Director at AREA 17, in NYC.</p>
                    <h2><a href="/about.html">Say Hello!</a></h2>
                </div> 
            </div>

            <div id="aboutoverlay" class="embed"></div>

            <!-- Footer -->
            <footer class="grid">
                <p class="caption">Copyright © 2020 Christophe da Silva, All assets, arworks, and screenshots are copyright of their respective owners.</p>
            </footer>

        <!-- End of container -->
        </div>
    </body>
</html>