1<!-- 2 3Made by 4 5========================================================================== 6========================================================================== 7========================================================================== 8==== === ==== == ==== == == == == === 9=== ==== == ==== == === ====== ===== ========= == ====== ====== 10=== ==== == ==== == ==== ===== ===== ========= == ====== ====== 11==== ======= ==== == === ====== ===== ========== ======= ====== 12====== ===== ==== == ======= ===== ======= ======== ====== 13======== === ==== == === ====== ===== ========== ======= ====== 14=== ==== == ==== == ==== ===== ===== ========= == ====== ====== 15=== ==== == == == === ====== ===== ========= == ====== ====== 16==== ==== === ======= ===== == ==== ===== ====== 17========================================================================== 18========================================================================== 19========= === == ==== == === ==== ============== 20======== ==== ===== ===== ==== == ==== === ==== == ============= 21======== ==== ===== ===== ==== == ==== === === ==== ============ 22========= ========== ===== ==== == ==== === === ==== ============ 23=========== ======== ===== ==== == ==== === === ==== ============ 24============= ====== ===== ==== == ==== === === ==== ============ 25======== ==== ===== ===== ==== == ==== === === ==== ============ 26======== ==== ===== ===== == == ==== === ==== == ============= 27========= ====== ====== === === ==== ============== 28========================================================================== 29========================================================================== 30========================================================================== 31 32www.subtext.studio 33 34--> 35 36<!DOCTYPE html> 37<html lang="en"> 38 39<head> 40 41 <meta name="description" content="CR â Graphic & UI/UX Design"> 42 <title> CR </title> 43 44 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 45 <meta charset="utf-8" > 46 47 <meta name="apple-mobile-web-app-capable" content="yes"/> 48 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 49 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 50 51 <link rel="apple-touch-icon" href="/site/assets/files/1016/cr.png"/> 52 <link rel="shortcut icon" type="image/png" href="/site/assets/files/1016/cr_fav_32.png" /> 53 <link rel="icon" type="image/png" href="/site/assets/files/1016/cr_fav_32.png" /> 54 55 <style> 56 /* latin-ext */ 57@font-face { 58 font-family: 'font1'; 59 font-style: normal; 60 font-weight: 300; 61 src: local('Work Sans Light'), local('WorkSans-Light'), url(https://fonts.gstatic.com/s/worksans/v2/FD_Udbezj8EHXbdsqLUpl4joYw3YTyktCCer_ilOlhE.woff2) format('woff2'); 62 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 63} 64/* latin */ 65@font-face { 66 font-family: 'font1'; 67 font-style: normal; 68 font-weight: 300; 69 src: local('Work Sans Light'), local('WorkSans-Light'), url(https://fonts.gstatic.com/s/worksans/v2/FD_Udbezj8EHXbdsqLUplxampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); 70 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 71} 72/* latin-ext */ 73@font-face { 74 font-family: 'font1'; 75 font-style: normal; 76 font-weight: 500; 77 src: local('Work Sans Medium'), local('WorkSans-Medium'), url(https://fonts.gstatic.com/s/worksans/v2/Nbre-U_bp6Xktt8cpgwaJIjoYw3YTyktCCer_ilOlhE.woff2) format('woff2'); 78 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 79} 80/* latin */ 81@font-face { 82 font-family: 'font1'; 83 font-style: normal; 84 font-weight: 500; 85 src: local('Work Sans Medium'), local('WorkSans-Medium'), url(https://fonts.gstatic.com/s/worksans/v2/Nbre-U_bp6Xktt8cpgwaJBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); 86 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 87} 88/* latin-ext */ 89@font-face { 90 font-family: 'font1'; 91 font-style: normal; 92 font-weight: 700; 93 src: local('Work Sans Bold'), local('WorkSans-Bold'), url(https://fonts.gstatic.
93com/s/worksans/v2/4udXuXg54JlPEP5iKO5AmYjoYw3YTyktCCer_ilOlhE.woff2) format('woff2'); 94 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 95} 96/* latin */ 97@font-face { 98 font-family: 'font1'; 99 font-style: normal; 100 font-weight: 700; 101 src: local('Work Sans Bold'), local('WorkSans-Bold'), url(https://fonts.gstatic.com/s/worksans/v2/4udXuXg54JlPEP5iKO5AmRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'); 102 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 103} body { background-color: #FFFFFF !important;} #panel, #subtitle { background-color: #000000 !important;} #panel, #subtitle { color: #FFFFFF !important;} #panel a { color: #FFFFFF !important;} #panel a:hover { color: #B5B5B5 !important;} ::selection { background: #FF0066 !important;} ::selection { color: #FFFFFF !important;} ::-moz-selection { background: #FF0066 !important;} ::-moz-selection { color: #FFFFFF !important;} </style> 104 105 <link rel="stylesheet" type="text/css" href="/site/templates/styles/main.css" /> 106 107 108</head> 109 110<body> 111 112 <div id="splash"> 113 <img class='rotate' src="/site/assets/files/1016/cr_fav_256.png"> 114 </div> 115 116 <div id="all"> 117
118 <input id="drawer-toggle" name="drawer-toggle" type="checkbox"/> 119 <div id="drawer-button" class="transition no-select grad"> 120 <canvas id="cr-button"></canvas> 121 </div> 122 123 <div id="panel" class="drawer transition editor"> <p><strong>Hi! My name is Romain. Iâm Art Director & Senior UI/UX Designer living in Lausanne, Switzerland. In 2013, I received a BA in visual communication from <a href="http://www.ecal.ch" rel=""nofollow"" target=""_blank"">ECAL</a> & in 2017, I earned a MAS in design research for digital innovation from the <a href="http://www.epfl-ecal-lab.ch/" rel=""nofollow"" target=""_blank"">EPFL+ECAL Lab</a>.</strong><br /> 124<br /> 125I believe that design should be intuitive & revolve around the user. To strengthen this, I learned inclusive design methodologies at the <a href="https://www.rca.ac.uk/research-innovation/helen-hamlyn-centre/" rel=""nofollow"" target=""_blank"">RCA</a> & honed my skills in icon design at the <a href="https://www1.bournemouth.ac.uk/" rel=""nofollow"" target=""_blank"">University of Bournemouth</a>. For the latter, I manipulated iconsâ aesthetics to evaluate their effect on perceived usability. Many of my projects deal with notions of big data, data visualization & search algorithms. These play a large role in my research work, where I explore navigation principles & aggregation of content in mass information environments. Currently, Iâm working on a major social network system for elderly people.<br /> 126<br /> 127I am methodical, logical, detail-oriented & a bit of a perfectionist. For my <a href="http://collaudromain.cr/gridastic-relation/">BA thesis</a>, I explored the omnipresence of the grid in our daily visual landscapes. After that, I worked as a graphic designer at ECAL for its communication platform as well as a freelancer for other organisations. I also co-founded a workshop that specializes in graphic design for unique mediums as well as a <a href="http://everydayismonday.co/" rel=""nofollow"" target=""blank"">design collective</a> for conceptual ideas. Today, I work in a <a href="https://epfl-ecal-lab.ch">design research lab</a> where I confront my point of view with engineers & psychologists.</p> </div> 128 <div id="subtitle" class="drawer transition"> <h1>Collaud<br /></h1> 129<h1>Romain</h1> </div> 130 <div id="social" class="drawer transition"> <p class='transition'><a href='https://www.behance.net/collaudromain' target='_blank'><img src='/site/assets/files/1056/behance.png' alt='behance'></a></p><p class='transition'><a href='https://twitter.com/RomainCollaud' target='_blank'><img src='/site/assets/files/1057/x.png' alt='x'></a></p><p class='transition'><a href='mailto:[email protected]?Subject=Hello%20CR' ><img src='/site/assets/files/1058/email.png' alt='email'></a></p><p class='transition'><a href='http://linkedin.com/in/collaudromain/' target='_blank'><img src='/site/assets/files/1059/linkedin.png' alt='linkedin'></a></p> </div> 131 132 <div id="lg" class="no-opacity transition"> 133 <div class="ajax-insert" data-id="lg"> 134 135 <a href='/fr/'>FR</a> <b class='current'> EN </b> 136 </div> 137 </div> 138 139 <div id='zoom-box' class='transition'></div> 140 141 <main id="content" class="shad"> 142 <div class="ajax-insert" data-id="content"> 143 144 <div class='crs-col crs-row-l-2 crs-row-r-1'><div class='crs-col-wrapper crs-row-t-35 crs-row-b-35' id='crs-l'><div class='crs-row p5' id='p5ls'></div><div class='crs-row'><img src='/site/assets/files/1070/rfw_02-1.jpg' alt=''><a href='/race-for-water/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>RACE FOR WATER<br /></h3> 145<p>Boat Design â Identity â 3D</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1081/ecal_yb14_01-1.jpg' alt=''><a href='/ecal-yearbook/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>ECAL YEARBOOK<br /></h3> 146<p>Book Design â Portfolio â Publication</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1083/has_01.jpg' alt=''><a href='/handgloves-sketches/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>HANDGLOVES SKETCHES<br /></h3> 147<p>Letterings â Handmade â Type Design</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1079/fbf_cover-1.jpg' alt=''><a href='/friends-buddies/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>FRIENDS +/â BUDDIES<br /></h3> 148<p>Facebook â Social Media â Data Visualisation</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1088/let_cover.jpg' alt=''><a href='/cr-letterings/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CR LETTERINGS<br /></h3> 149<p>Sketches â Handmade â Type Design</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1075/cr-afty_05-1.jpg' alt=''><a href='/afty/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CR AFTY<br /></h3> 150<p>Type Design â Aerobatics â Loop</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1074/adb_cover-1.jpg' alt=''><a href='/atlas-de-borha/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>ATLAS DE BORHA<br /></h3> 151<p>Atlas â Cartography â Topography</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1082/rns_01.jpg' alt=''><a href='/rise-n-shine/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>RISE & SHINE<br /></h3> 152<p>Identity â Lettering â Leaflet</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1072/gri_cover_01-1.jpg' alt=''><a href='/gridastic-relation/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>GRIDASTIC RELATION<br /></h3> 153<p>Grid System â Thesis â Semiotics</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1085/sou_pages_05-1.jpg' alt=''><a href='/calendar-experience/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CALENDAR EXPERIENCE<br /></h3> 154<p>Offset â Photosensitive â Poster</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1092/com_ecal_01.jpg' alt=''><a href='/ecal-viscom/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>ECAL VISCOM<br /></h3> 155<p>Identity â Branding â Corporate</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1080/hkdi_pages_01-1.jpg' alt=''><a href='/ecal-hkdi/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>ECAL HKDI<br /></h3> 156<p>Identity â Big Scale â Poster</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1078/lex_pages_01.jpg' alt=''><a href='/london-experience/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>LONDON EXPERIENCE<br /></h3> 157<p>Data Visualisation â Infographics â Poster</p> </div> </a></div><div class='crs-row p5' id='p5le'></div></div></div><div class='crs-col crs-row-l-1 crs-row-r-2'><div class='crs-col-wrapper crs-row-t-35 crs-row-b-35' id='crs-r'><div class='crs-row p5' id='p5rs'></div><div class='crs-row'><img src='/site/assets/files/1073/bkg_pages_01-1.jpg' alt=''><a href='/breaking-good/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>BREAKING GOOD<br /></h3> 158<p>Data Visualisation â Infographics â Poster</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1091/cr-own_03.jpg' alt=''><a href='/own/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CR OWN<br /></h3> 159<p>Type Design â Font â Humanist</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1090/ecal_milano_2014-2.gif' alt=''><a href='/ecal-milano/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>ECAL MILANO<br /></h3> 160<p>Identity â Letterings â Leaflets</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1071/dis_cover-3.jpg' alt=''><a href='/debate-insight/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>DEBATE INSIGHT<br /></h3> 161<p>Big Data â Interaction â UI/UX</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1076/var_cover-1.jpg' alt=''><a href='/vargas/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>VARGAS<br /></h3> 162<p>Book Design â Publisher â Collection</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1094/faveeo.png' alt='https://www.youtube.com/watch?v=u3QDCgPGW3I'><a href='/faveeo/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>FAVEEO<br /></h3> 163<p>Content Aggregator â Interaction â UI/UX</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1077/cr_ooner_01-1.jpg' alt=''><a href='/ooner/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CR OONER<br /></h3> 164<p>Type Design â Font Family â Script</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1084/ham_low.gif' alt='https://youtu.be/-5QNilV0Q_4'><a href='/hamilton-watches/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>HAMILTON WATCHES<br /></h3> 165<p>Ad â Video â After Effects</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1093/graphiclock.gif' alt=''><a href='/graphiclock/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>GRAPHICLOCK<br /></h3> 166<p>Coding â Processing â Clock</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1052/cr-griphen_01-1.jpg' alt=''><a href='/griphen/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>CR GRIPHEN<br /></h3> 167<p>Type Design â Font Family â Specimen</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1095/eel_mil.jpg' alt=''><a href='/massive-is-light/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>MASSIVE IS LIGHT<br /></h3> 168<p>UI/UX â Big Data â Heuristics</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1089/stau_01.jpg' alt='https://youtu.be/_u7fqmDViuQ'><a href='/stau/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>STAU<br /></h3> 169<p>Interaction â UX â Concept</p> </div> </a></div><div class='crs-row'><img src='/site/assets/files/1087/fon_pages_01.jpg' alt=''><a href='/how-to-make-a-fondue/' class='ajax-link'> <div class='overlay grad transition editor'> <h3>HOW TO MAKE A FONDUE?<br /></h3> 170<p>Instructions â Infographics â Folded Poster</p> </div> </a></div><div class='crs-row p5' id='p5re'></div></div></div> 171
171<script type="text/javascript"> 172 var config = 173 {"title":"CR","template":"home","home":"\/","log":"session - set works_list"} ; 174 </script>
174 175 176 </div> 177 </main> 178 179 </div> <!-- all --> 180 181
181<script type="text/javascript" src="/site/templates/dist/jquery-3.2.1.min.js"> </script>
181 182
182<script type="text/javascript" src="/site/templates/dist/p5.min.js"> </script>
182 183
183<script type="text/javascript" src="/site/templates/dist/jquery.mousewheel.min.js"> </script>
183 184 185
185<script type="text/javascript" src="/site/templates/dist/viewport-units-buggyfill.hacks.js"></script>
185 186
186<script type="text/javascript" src="/site/templates/dist/viewport-units-buggyfill.js"></script>
186 187
187<script> 188 window.viewportUnitsBuggyfill.init({ 189 refreshDebounceWait: 50, 190 hacks: window.viewportUnitsBuggyfillHacks 191 }); 192 </script>
192 193 194
194<script type="text/javascript" src="/site/templates/scripts/Utils.js"> </script>
194 195
195<script type="text/javascript" src="/site/templates/scripts/CResponsive_C.js"> </script>
195 196
196<script type="text/javascript" src="/site/templates/scripts/CResponsive_R.js"> </script>
196 197
197<script type="text/javascript" src="/site/templates/scripts/CRScroll.js"> </script>
197 198
198<script type="text/javascript" src="/site/templates/scripts/CRButton.js"> </script>
198 199
199<script type="text/javascript" src="/site/templates/scripts/main.js"> </script>
199 200 201</body> 202</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.