Difference between revisions of "Team:Pasteur Paris/Applied Design"

Line 108: Line 108:
 
function deletebaton3() {
 
function deletebaton3() {
 
     document.getElementById("batonbleu3").style.display = "none";
 
     document.getElementById("batonbleu3").style.display = "none";
}
 
 
function apparitionbaton3a() {
 
    document.getElementById("batonbleu3a").style.display = "block";
 
}
 
 
function deletebaton3a() {
 
    document.getElementById("batonbleu3a").style.display = "none";
 
}
 
 
function apparitionbaton3b() {
 
    document.getElementById("batonbleu3b").style.display = "block";
 
}
 
 
function deletebaton3b() {
 
    document.getElementById("batonbleu3b").style.display = "none";
 
 
}
 
}
  
Line 212: Line 196:
 
function deletebaton13() {
 
function deletebaton13() {
 
     document.getElementById("batonbleu13").style.display = "none";
 
     document.getElementById("batonbleu13").style.display = "none";
}
 
 
function apparitionbaton13b() {
 
    document.getElementById("batonbleu13b").style.display = "block";
 
}
 
 
function deletebaton13b() {
 
    document.getElementById("batonbleu13b").style.display = "none";
 
 
}
 
}
  
Line 331: Line 307:
 
}
 
}
  
function menuapparition(){
+
function BarthenteimNoiretBlanc() {
   if(document.getElementById("Team").style.display == "block" || document.getElementById("Project").style.display == "block" || document.getElementById("HumanPractice").style.display == "block" || document.getElementById("Achievements").style.display == "block" || document.getElementById("Design").style.display == "block" || document.getElementById("Labwork").style.display == "block")
+
   document.getElementById("BarthenteimBW").style.display = "block";
  {apparitionDesign();}
+
  document.getElementById("Barthenteim").style.display = "none";
 
}
 
}
  
function periodiqueapparition() {
+
function BarthenteimCouleur() {
    setInterval(menuapparition, 5000);
+
  document.getElementById("Barthenteim").style.display = "block";
 +
  document.getElementById("BarthenteimBW").style.display = "none";
 
}
 
}
  
Line 354: Line 331:
  
 
body{
 
body{
 +
  margin:30px;
 +
  padding:30px;
 
   background-color:white;
 
   background-color:white;
   width:100%;
+
   height:100%;
 
}
 
}
  
Line 450: Line 429:
 
   position:relative;
 
   position:relative;
 
   top:-10px;
 
   top:-10px;
   left:10px;
+
   left:0px;
 
   border-bottom:4px dotted black;
 
   border-bottom:4px dotted black;
   width: 35%;  
+
   width: 302px;
 +
}
 +
 
 +
.underline2{
 +
  display:block;
 +
  position:relative;
 +
  top:-10px;
 +
  left:0px;
 +
  border-bottom:4px dotted black;
 +
  width: 215px;
 +
}
 +
 
 +
.underline3{
 +
  display:block;
 +
  position:relative;
 +
  top:-10px;
 +
  left:0px;
 +
  border-bottom:4px dotted black;
 +
  width: 508px;
 +
}
 +
 
 +
.underline4{
 +
  display:block;
 +
  position:relative;
 +
  top:-10px;
 +
  left:0px;
 +
  border-bottom:4px dotted black;
 +
  width: 270px;
 +
}
 +
 
 +
.underline5{
 +
  display:block;
 +
  position:relative;
 +
  top:-10px;
 +
  left:0px;
 +
  border-bottom:4px dotted black;
 +
  width: 620px;
 +
}
 +
 
 +
.underline6{
 +
  display:block;
 +
  position:relative;
 +
  top:-10px;
 +
  left:0px;
 +
  border-bottom:4px dotted black;
 +
  width: 582px;  
 
}
 
}
  
Line 479: Line 503:
  
 
.subtitle{
 
.subtitle{
   margin-left:300px;
+
   margin-left:12.25px;
   margin-top:112.5px;
+
   margin-top:55px;
 
   cursor: default;
 
   cursor: default;
   font-size: 26.75pt;
+
   font-size: 18pt;
 
}
 
}
  
  
 
.maintext{
 
.maintext{
     font-size: 30pt;
+
     font-size: 9pt;
     margin-left:300px;
+
     font-family:Helvetica;
    margin-right:300px;
+
     margin-top:10px;
     margin-top:112.5px;
+
 
     text-align: justify;
 
     text-align: justify;
 
     cursor: default;
 
     cursor: default;
     font-family:Helvetica;
+
     width:75%;
 
}
 
}
  
 
.maintextsuite{
 
.maintextsuite{
     font-size: 30pt;
+
     font-size: 9pt;
    margin-left:300px;
+
    margin-right:300px;
+
 
     margin-top:10px;
 
     margin-top:10px;
 
     text-align: justify;
 
     text-align: justify;
 
     cursor: default;
 
     cursor: default;
 
     font-family:Helvetica;
 
     font-family:Helvetica;
 +
    width:75%;
 +
}
 +
 +
.maintextsuiteimage{
 +
    font-size: 9pt;
 +
    margin-top:10px;
 +
    text-align: justify;
 +
    cursor: default;
 +
    font-family:Helvetica;
 +
    width:40%;
 +
}
 +
 +
.text {
 +
  position:relative;
 +
  margin-left: 287.75px;
 +
  line-height:12pt;
 
}
 
}
  
Line 531: Line 568:
 
   color: #3298CB;
 
   color: #3298CB;
 
}
 
}
 +
 +
.Chili{
 +
  z-index:-1;
 +
  margin-left: 287.75px;
 +
  top:170px;
 +
  width:5vw;
 +
  height: 60vh;
 +
}
 +
 +
table{
 +
  border-collapse: collapse;
 +
  }
  
 
/*////////////////////////////////////////////*/
 
/*////////////////////////////////////////////*/
Line 669: Line 718:
 
}
 
}
 
/*////////////////////////////////////////////*/
 
/*////////////////////////////////////////////*/
 +
  
 
.rotate {
 
.rotate {
 
   -webkit-transform: rotate(180deg);
 
   -webkit-transform: rotate(180deg);
}
 
 
.list a{
 
  text-decoration: none;
 
  color:black;
 
 
}
 
}
  
Line 913: Line 958:
 
     background: #3298CB;
 
     background: #3298CB;
 
     content:""
 
     content:""
 +
}
 +
 +
li{margin:5px}
 +
 +
a:visited {
 +
    color: black;
 +
    text-decoration:none;
 +
}
 +
 +
 +
/*////////////////////////////////*/
 +
 +
 +
#title{
 +
  font-size: 60pt;
 +
  border-bottom:4px dotted black;
 +
  width: 182px;
 +
  z-index:-1;
 +
  margin-left: 287.75px;
 +
  margin-top: 90px;
 +
  line-height:59pt;
 +
}
 +
 +
#subtitles{
 +
  position:relative;
 +
  margin-left: 300px;
 +
  margin-top:-5vw;
 +
  font-size: 18pt;
 +
  font-weight: normal;
 +
  /*border-bottom:4px dotted black;*/
 +
  z-index:-1;
 +
  width: 160px;
 +
  border-bottom:4px dotted black;
 
}
 
}
  
Line 923: Line 1,001:
  
  
   <body onload="apparitionDesign(); periodiqueapparition()">
+
   <body>
 
   <a class="left" href="https://2017.igem.org/Team:Pasteur_Paris"><img src="https://static.igem.org/mediawiki/2017/d/d8/T--Pasteur_Paris--aether.png"; width="220px"; height="70px"></img></a>
 
   <a class="left" href="https://2017.igem.org/Team:Pasteur_Paris"><img src="https://static.igem.org/mediawiki/2017/d/d8/T--Pasteur_Paris--aether.png"; width="220px"; height="70px"></img></a>
 
   <a class="right" href="https://2017.igem.org/Team:Pasteur_Paris"><img src="https://static.igem.org/mediawiki/2017/1/10/T--Pasteur_Paris--iGEM.png"; width="90px"; height="70px"></img></a>
 
   <a class="right" href="https://2017.igem.org/Team:Pasteur_Paris"><img src="https://static.igem.org/mediawiki/2017/1/10/T--Pasteur_Paris--iGEM.png"; width="90px"; height="70px"></img></a>
Line 936: Line 1,014:
 
   </ul>
 
   </ul>
 
</nav>
 
</nav>
 +
 
<div id="Team" style="display:none">
 
<div id="Team" style="display:none">
 
   <div class="outer">
 
   <div class="outer">
Line 949: Line 1,028:
 
     <div class="inner"; onmouseover="apparitionbaton1()"; onmouseout="deletebaton1()">
 
     <div class="inner"; onmouseover="apparitionbaton1()"; onmouseout="deletebaton1()">
 
       <div class="list rotate">  
 
       <div class="list rotate">  
         <a href="https://2017.igem.org/Team:Pasteur_Paris/Team#Sponsors">Sponsors </a>
+
         <a href="https://2017.igem.org/Team:Pasteur_Paris/Team#pagesponsors">Sponsors </a>
 
         <div id="batonbleu1">
 
         <div id="batonbleu1">
 
         </div>
 
         </div>
Line 1,141: Line 1,220:
 
   </div>
 
   </div>
 
</div>
 
</div>
<ul class="com">
 
  <li style="text-align:center"><a href="https://www.facebook.com/igem.pasteur/" target="_blank"><i id="logo" class="fa fa-facebook"></i></a></li>
 
  <li><a href=" https://twitter.com/igem_pasteur " target="_blank"><i id="logo" class="fa fa-twitter"></i></a></li>
 
  <li><a href="https://www.instagram.com/igem.pasteur2017/" target="_blank"><i id="logo" class="material-icons">photo_camera</i></a></li>
 
  <li><a href="mailto:igem.pasteur@gmail.com " target="_blank"><i id="logo" class="material-icons">email</i></a></li>
 
</ul>
 
  
<div>
 
  
<div class="subtitle">
+
<div style="height:75vh">
   <p style="font-size:50pt; font-family: CrimsonTextRoman, serif;">Under construction<br></p><br>
+
  <img src="https://static.igem.org/mediawiki/2017/a/ab/T--Pasteur_Paris--MainDesign.jpeg"; style="position:absolute; left:390px; height: auto;width: 55vw; z-index:-2;top:-70px"/>
 +
   <p id="title" style="font-size:50pt; font-family: MinionPro, serif;">Design </br>methodology</p>
 +
  <div class="Chili"></div>
 +
  <p id="subtitles" style=" font-family: MinionPro, serif; font-size:18pt;margin-top:55vh">What is design?</p>
 +
</div>
 +
 
 +
<div class="text">
 +
<p class="maintext" style="margin-top:75vh"> <b><span style="font-size:15pt; font-family: MinionPro">We </span>should understand “design” as a discipline enabling designers to invent creative solutions in order to solve issues. We are used to say that engineering focus on technical problems, and that “design” focus on human issues. From there, there are thousands of different design practices : some design products - industrial design -, others design apps - digital design -, sounds - sound design - or food - culinary design -, for example. It is about adapting a solution - an idea, a technology, etc. - in a human context which contains social, cultural or economic constraints. It is like thinking as a sociologist - knowledge - and acting like an engineer - tools -. To do so, designers use specific tools and methodologies. To illustrate this way to imagine tomorrow’s products or services, we decided to share our methodology in the following part “design methodology”. Enjoy !</b></p>
 +
 
 +
<div class="subtitle" style="font-size:18pt">
 +
  <p style="font-family: MinionPro, serif;font-size:18pt">Setting up a design&science approach</p>
 
   <div class="underline"></div>
 
   <div class="underline"></div>
 
</div>
 
</div>
  
<p class="maintext"></p>
+
<p class="maintext"><b> Getting through iGEM’s experience and working on Æther’s project is a way to experiment new approaches of our future jobs, far away from the traditional laboratory, design studio or lawyer’s office. As curious students, but also as citizens living in a complex world, we strongly believe we could play a role in solving tomorrow’s big issues. </b></p>
  
<p class="maintextsuite"></p>
+
<p class="maintextsuite"><b>We feel concerned about environmental, health and social issues. We also think major innovations in these field will emerge from the meeting point between disciplines : at the frontier of science, engineering and design. Thus, in order to propose a relevant and realistic response to a contemporary issue, we have endeavored to design and maintain strong interactions between our skills, knowledge, methods and tools all along the project, from Ideation to the Prototyping of a product and a service based on an app.</b></p>
  
<br><br><br><br><br><br><br><br><br><br><br><br></p>
+
<div class="subtitle" style="font-size:18pt">
 +
  <p style="font-family: MinionPro, serif;font-size:18pt">Setting up a Design&Science approach</p>
 +
  <div class="underline"></div>
 
</div>
 
</div>
 +
 +
<p class="maintext"><b> Ideation is a key factor to design successful projects and innovative ideas. As we are a multidisciplinary team, we used specific tools (brainstorming, mapping tools, ideation tools, post-it sessions, etc.) to communicate between us. They are common tools for designers, engineers and scientists, helping us to mix our skills in order to :</b></p>
 +
 +
 +
<p class="maintextsuite"><b>We feel concerned about environmental, health and social issues. We also think major innovations in these field will emerge from the meeting point between disciplines : at the frontier of science, engineering and design. Thus, in order to propose a relevant and realistic response to a contemporary issue, we have endeavored to design and maintain strong interactions between our skills, knowledge, methods and tools all along the project, from Ideation to the Prototyping of a product and a service based on an app.</b></p>
 +
 +
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -identify contemporary major issues ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -imagine biological solutions ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -create products and services using these biological solutions to solve previously identified issues, taking into account social, economic, cultural, ecological or technical aspects, amongst others.</i></p>
 +
 +
<div style="width:75%">
 +
<div style="width:100%">
 +
  <img src="https://static.igem.org/mediawiki/2017/e/eb/T--Pasteur_Paris--Design1.jpeg"; style="width:100%"></img>
 +
</div>
 +
</div>
 +
 +
<p class="maintextsuite"><b>These exercises led to schemas and maps : a starting point to draw innovative ideas through sketches. Thus, we decided to focus on air pollution and we started to imagine different ways - scenarios, materials, products, services - to fight it. This choice - air pollution -, comes from a twofold observation :</b></p>
 +
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -First, we understand outdoor/indoor air pollution as an issue to solve thanks to design and science : it causes major health issues all around the world. There is no frontier to stop airborne pollutants and we are all exposed to it.</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -Then, we understand air pollution as an opportunity for sustainability : pollutants can be degraded and recovered into useful raw materials - such as metals - we could use to feed industries, rather than using non sustainable extraction/transformation processes, harmful for the environment.</i></p>
 +
 +
<p class="maintextsuite"><b>From there and thanks to the tens of ideas we had, we jumped to the next stage : research.</b></p>
 +
 +
<div class="subtitle" style="font-size:18pt">
 +
  <p style="font-family: MinionPro, serif;font-size:18pt">RESEARCH</p>
 +
  <div class="underline"></div>
 +
</div>
 +
 +
<p class="maintext"><b>After selecting the more relevant ideas regarding air pollution, we started to :</b></p>
 +
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -meet with experts ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -identify related literature ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -meet and question potential users through - meetings, surveys - ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -look for past and present solutions and to identify their limits ;</i></p>
 +
<p class="maintextsuite" style="margin-left:12.25px"><i> -identify the codes - semiotics, signs, ergonomics, shapes - induced in health related products.</i></p>
 +
 +
<p class="maintextsuite"><b>Finally, all these steps led us to understand the context in which we would use our device/service. Analyzing the existing products led us to identify opportunities to create the more relevant product and service regarding the context and the User. This analysis let us think that creating an affordable, energy self-sufficient and efficient product as well as a user-friendly service would be way for mass adoption that would benefit health in our societies.</b></p>
 +
 +
 +
</div>
 +
<ul class="com">
 +
  <li style="text-align:center"><a href="https://www.facebook.com/igem.pasteur/" target="_blank"><i id="logo" class="fa fa-facebook"></i></a></li>
 +
  <li><a href=" https://twitter.com/igem_pasteur " target="_blank"><i id="logo" class="fa fa-twitter"></i></a></li>
 +
  <li><a href="https://www.instagram.com/igem.pasteur2017/" target="_blank"><i id="logo" class="material-icons">photo_camera</i></a></li>
 +
  <li><a href="mailto:igem.pasteur@gmail.com " target="_blank"><i id="logo" class="material-icons">email</i></a></li>
 +
</ul>
  
 
<div id="toparrow">
 
<div id="toparrow">
Line 1,166: Line 1,297:
 
   </div>
 
   </div>
  
 +
<div class="sponsors"; style="width:100vw">
 +
  <a href="http://www.centralesupelec.fr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/b/ba/T--Pasteur_Paris--AssociationCentralien.png"; id="Centrale" style="position:absolute; margin-top: 120px; left:21%; width: 121px; height: 57px; display:none"; onmouseout="centraleNoiretBlanc()"></a>
 +
  <a href="http://www.centralesupelec.fr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/3/39/T--Pasteur_Paris--AssociationCentralien_BW.png"; id="CentraleBW" style="position:absolute; margin-top: 120px; left:21%; width: 121px; height: 57px"; onmouseover="centraleCouleur()"></a>
 +
  <a href="http://www.geneious.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/6/61/T--Pasteur_Paris--genious.png"; id="genious"; style="position:absolute; margin-top: 140px; left:37%; width: 136.5px; height: 58.42px; display:none"; onmouseout="geniousNoiretBlanc()"></a>
 +
  <a href="http://www.geneious.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/7/71/T--Pasteur_Paris--genious_BW.png"; id="geniousBW"; style="position:absolute; margin-top: 140px; left:37%; width: 136.5px; height: 58.42px"; onmouseover="geniousCouleur()"></a>
 +
  <a href="http://www.mt.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/c/cc/T--Pasteur_Paris--Mettler_Toledo.png"; id="MettlerToledo"; style="position:absolute; margin-top: 160px; left:54%; width: 160px; height: 20px; display:none"; onmouseout="MettlerToledoNoiretBlanc()"></a>
 +
  <a href="http://www.mt.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/d/dd/T--Pasteur_Paris--Mettler_Toledo_BW.png"; id="MettlerToledoBW"; style="position:absolute; margin-top: 160px; left:54%; width: 160px; height: 20px"; onmouseover="MettlerToledoCouleur()"></a>
 +
  <a href="http://www.france-science.org" target="_blank"><img src="https://static.igem.org/mediawiki/2017/b/b5/T--Pasteur_Paris--Ambassade.jpeg"; id="ambassade"; style="position:absolute; margin-top: 120px; right:21%; width: 100.8px; height: 105px; display:none"; onmouseout="ambassadeNoiretBlanc()"></a>
 +
  <a href="http://www.france-science.org" target="_blank"><img src="https://static.igem.org/mediawiki/2017/7/70/T--Pasteur_Paris--Ambassade_BW.png"; id="ambassadeBW"; style="position:absolute; margin-top: 120px; right:21%; width: 100.8px; height: 105px"; onmouseover="ambassadeCouleur()"></a>
 +
</div>
  
<div class="sponsors"; style="width:100%">
+
<div class="sponsors"; style="width:100vw">
   <a href="http://www.centralesupelec.fr"><img src="https://static.igem.org/mediawiki/2017/8/8f/T--Pasteur_Paris--Centrale.jpeg"; id="Centrale" style="position:absolute; margin-top: 120px; left:20%; width: 121px; height: 61.6px; display:none"; onmouseout="centraleNoiretBlanc()"></a>
+
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms" target="_blank"><img src="https://static.igem.org/mediawiki/2017/d/d1/T--Pasteur_Paris--GC.jpeg"; id="GlobalCare" style="position:absolute; margin-top: 250px; left:28%; width: 150px; height: 60px; display:none"; onmouseout="GlobalCareNoiretBlanc()"></a>
  <a href="http://www.centralesupelec.fr"><img src="https://static.igem.org/mediawiki/2017/5/56/T--Pasteur_Paris--Centrale_BW.png"; id="CentraleBW" style="position:absolute; margin-top: 120px; left:20%; width: 121px; height: 61.6px"; onmouseover="centraleCouleur()"></a>
+
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms" target="_blank"><img src="https://static.igem.org/mediawiki/2017/c/cc/T--Pasteur_Paris--GC_BW.png"; id="GlobalCareBW" style="position:absolute; margin-top: 250px; left:28%; width: 150px; height: 60px"; onmouseover="GlobalCareCouleur()"></a>
  <a href="http://www.geneious.com"><img src="https://static.igem.org/mediawiki/2017/6/61/T--Pasteur_Paris--genious.png"; id="genious"; style="position:absolute; margin-top: 135px; left:32%; width: 136.5px; height: 58.42px; display:none"; onmouseout="geniousNoiretBlanc()"></a>
+
   <a href="http://www.pasteur.fr/fr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/8/86/T--Pasteur_Paris--pasteur.png"; id="pasteur"; style="position:absolute; margin-top: 250px; left:46%; width: 130.2px; height: 50.07px"></a>
   <a href="http://www.geneious.com"><img src="https://static.igem.org/mediawiki/2017/7/71/T--Pasteur_Paris--genious_BW.png"; id="geniousBW"; style="position:absolute; margin-top: 135px; left:32%; width: 136.5px; height: 58.42px"; onmouseover="geniousCouleur()"></a>
+
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms" target="_blank"><img src="https://static.igem.org/mediawiki/2017/e/eb/T--Pasteur_Paris--Carnot.jpeg"; id="Carnot"; style="position:absolute; margin-top: 250px; right:28%; width: 130px; height: 58px; display:none"; onmouseout="CarnotNoiretBlanc()"></a>
  <a href="http://www.mt.com"><img src="https://static.igem.org/mediawiki/2017/c/cc/T--Pasteur_Paris--Mettler_Toledo.png"; id="MettlerToledo"; style="position:absolute; margin-top: 160px; left:44.5%; width: 160px; height: 20px; display:none"; onmouseout="MettlerToledoNoiretBlanc()"></a>
+
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms" target="_blank"><img src="https://static.igem.org/mediawiki/2017/f/f5/T--Pasteur_Paris--Carnot_BW.png"; id="CarnotBW"; style="position:absolute; margin-top: 250px; right:28%; width: 130px; height: 58px"; onmouseover="CarnotCouleur()"></a>
  <a href="http://www.mt.com"><img src="https://static.igem.org/mediawiki/2017/d/dd/T--Pasteur_Paris--Mettler_Toledo_BW.png"; id="MettlerToledoBW"; style="position:absolute; margin-top: 160px; left:44.5%; width: 160px; height: 20px"; onmouseover="MettlerToledoCouleur()"></a>
+
   <a href="http://www.pasteur.fr/fr"><img src="https://static.igem.org/mediawiki/2017/8/86/T--Pasteur_Paris--pasteur.png"; id="pasteur"; style="position:absolute; margin-top: 130px; left:59%; width: 130.2px; height: 50.07px"></a>
+
   <a href="http://www.france-science.org"><img src="https://static.igem.org/mediawiki/2017/b/b5/T--Pasteur_Paris--Ambassade.jpeg"; id="ambassade"; style="position:absolute; margin-top: 120px; right:20%; width: 100.8px; height: 105px; display:none"; onmouseout="ambassadeNoiretBlanc()"></a>
+
   <a href="http://www.france-science.org"><img src="https://static.igem.org/mediawiki/2017/7/70/T--Pasteur_Paris--Ambassade_BW.png"; id="ambassadeBW"; style="position:absolute; margin-top: 120px; right:20%; width: 100.8px; height: 105px"; onmouseover="ambassadeCouleur()"></a>
+
 
</div>
 
</div>
  
<div class="sponsors"; style="width:100%">
+
<div class="sponsors"; style="width:100vw">
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms"><img src="https://static.igem.org/mediawiki/2017/d/d1/T--Pasteur_Paris--GC.jpeg"; id="GlobalCare" style="position:absolute; margin-top: 250px; left:19%; width: 150px; height: 60px; display:none"; onmouseout="GlobalCareNoiretBlanc()"></a>
+
   <a href="http://www.qiagen.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/a/a7/T--Pasteur_Paris--Qiagen.png"; id="Quiagen"; style="position:absolute; margin-top: 350px; left:21%; width: 100px; height: 86px; display:none"; onmouseout="QuiagenNoiretBlanc()"></a>
  <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms"><img src="https://static.igem.org/mediawiki/2017/c/cc/T--Pasteur_Paris--GC_BW.png"; id="GlobalCareBW" style="position:absolute; margin-top: 250px; left:19%; width: 150px; height: 60px"; onmouseover="GlobalCareCouleur()"></a>
+
   <a href="http://www.qiagen.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/2/2b/T--Pasteur_Paris--Quiagen_BW.png"; id="QuiagenBW"; style="position:absolute; margin-top: 350px; left: 21%; width: 100px; height: 86px"; onmouseover="QuiagenCouleur()"></a>
  <a href="http://www.qiagen.com"><img src="https://static.igem.org/mediawiki/2017/a/a7/T--Pasteur_Paris--Qiagen.png"; id="Quiagen"; style="position:absolute; margin-top: 240px; left:33%; width: 100px; height: 86px; display:none"; onmouseout="QuiagenNoiretBlanc()"></a>
+
   <a href="http://www.eurofins.fr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/e/ed/T--Pasteur_Paris--eurofins.png"; id="eurofins"; style="position:absolute; margin-top: 370px; left:37%; width: 142.5px; height: 48px; display:none"; onmouseout="eurofinsNoiretBlanc()"></a>
   <a href="http://www.qiagen.com"><img src="https://static.igem.org/mediawiki/2017/2/2b/T--Pasteur_Paris--Quiagen_BW.png"; id="QuiagenBW"; style="position:absolute; margin-top: 240px; left: 33%; width: 100px; height: 86px"; onmouseover="QuiagenCouleur()"></a>
+
   <a href="http://www.eurofins.fr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/e/ea/T--Pasteur_Paris--eurofins_BW.png"; id="eurofinsBW"; style="position:absolute; margin-top: 370px; left: 37%; width: 142.5px; height: 48px"; onmouseover="eurofinsCouleur()"></a>
   <a href="http://www.eurofins.fr"><img src="https://static.igem.org/mediawiki/2017/e/ed/T--Pasteur_Paris--eurofins.png"; id="eurofins"; style="position:absolute; margin-top: 255px; left:44.5%; width: 142.5px; height: 48px; display:none"; onmouseout="eurofinsNoiretBlanc()"></a>
+
   <a href="http://www.thermofisher.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/d/d7/T--Pasteur_Paris--Thermofisher.png"; id="Thermofisher"; style="position:absolute; margin-top: 370px; left:54%; width: 142.5px; height: 48px; display:none"; onmouseout="ThermofisherNoiretBlanc()"></a>
   <a href="http://www.eurofins.fr"><img src="https://static.igem.org/mediawiki/2017/e/ea/T--Pasteur_Paris--eurofins_BW.png"; id="eurofinsBW"; style="position:absolute; margin-top: 255px; left: 44.5%; width: 142.5px; height: 48px"; onmouseover="eurofinsCouleur()"></a>
+
   <a href="http://www.thermofisher.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/1/17/T--Pasteur_Paris--Thermofisher_BW.png"; id="ThermofisherBW"; style="position:absolute; margin-top: 370px; left: 54%; width: 142.5px; height: 48px"; onmouseover="ThermofisherCouleur()"></a>
   <a href="http://www.thermofisher.com"><img src="https://static.igem.org/mediawiki/2017/d/d7/T--Pasteur_Paris--Thermofisher.png"; id="Thermofisher"; style="position:absolute; margin-top: 255px; left:58.7%; width: 142.5px; height: 48px; display:none"; onmouseout="ThermofisherNoiretBlanc()"></a>
+
   <a href="http://www.thermofisher.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/f/fe/T--Pasteur_Paris--Barthenteim.png"; id="Barthenteim"; style="position:absolute; margin-top: 350px; right:21%; width: 81px; height: 90px; display:none"; onmouseout="BarthenteimNoiretBlanc()"></a>
   <a href="http://www.thermofisher.com"><img src="https://static.igem.org/mediawiki/2017/1/17/T--Pasteur_Paris--Thermofisher_BW.png"; id="ThermofisherBW"; style="position:absolute; margin-top: 255px; left: 58.7%; width: 142.5px; height: 48px"; onmouseover="ThermofisherCouleur()"></a>
+
   <a href="http://www.thermofisher.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/b/ba/T--Pasteur_Paris--Barthenteim_BW.png"; id="BarthenteimBW"; style="position:absolute; margin-top: 350px; right:21%; width: 81px; height: 90px"; onmouseover="BarthenteimCouleur()"></a>
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms"><img src="https://static.igem.org/mediawiki/2017/e/eb/T--Pasteur_Paris--Carnot.jpeg"; id="Carnot"; style="position:absolute; margin-top: 250px; right:19%; width: 130px; height: 58px; display:none"; onmouseout="CarnotNoiretBlanc()"></a>
+
   <a href="http://www.instituts-carnot.eu/fr/institut-carnot/pasteur-ms"><img src="https://static.igem.org/mediawiki/2017/f/f5/T--Pasteur_Paris--Carnot_BW.png"; id="CarnotBW"; style="position:absolute; margin-top: 250px; right:19%; width: 130px; height: 58px"; onmouseover="CarnotCouleur()"></a>
+
 
</div>
 
</div>
 
  </body>
 
  </body>
 
</html>
 
</html>

Revision as of 21:53, 1 November 2017

Design
methodology

What is design?

We should understand “design” as a discipline enabling designers to invent creative solutions in order to solve issues. We are used to say that engineering focus on technical problems, and that “design” focus on human issues. From there, there are thousands of different design practices : some design products - industrial design -, others design apps - digital design -, sounds - sound design - or food - culinary design -, for example. It is about adapting a solution - an idea, a technology, etc. - in a human context which contains social, cultural or economic constraints. It is like thinking as a sociologist - knowledge - and acting like an engineer - tools -. To do so, designers use specific tools and methodologies. To illustrate this way to imagine tomorrow’s products or services, we decided to share our methodology in the following part “design methodology”. Enjoy !

Setting up a design&science approach

Getting through iGEM’s experience and working on Æther’s project is a way to experiment new approaches of our future jobs, far away from the traditional laboratory, design studio or lawyer’s office. As curious students, but also as citizens living in a complex world, we strongly believe we could play a role in solving tomorrow’s big issues.

We feel concerned about environmental, health and social issues. We also think major innovations in these field will emerge from the meeting point between disciplines : at the frontier of science, engineering and design. Thus, in order to propose a relevant and realistic response to a contemporary issue, we have endeavored to design and maintain strong interactions between our skills, knowledge, methods and tools all along the project, from Ideation to the Prototyping of a product and a service based on an app.

Setting up a Design&Science approach

Ideation is a key factor to design successful projects and innovative ideas. As we are a multidisciplinary team, we used specific tools (brainstorming, mapping tools, ideation tools, post-it sessions, etc.) to communicate between us. They are common tools for designers, engineers and scientists, helping us to mix our skills in order to :

We feel concerned about environmental, health and social issues. We also think major innovations in these field will emerge from the meeting point between disciplines : at the frontier of science, engineering and design. Thus, in order to propose a relevant and realistic response to a contemporary issue, we have endeavored to design and maintain strong interactions between our skills, knowledge, methods and tools all along the project, from Ideation to the Prototyping of a product and a service based on an app.

-identify contemporary major issues ;

-imagine biological solutions ;

-create products and services using these biological solutions to solve previously identified issues, taking into account social, economic, cultural, ecological or technical aspects, amongst others.

These exercises led to schemas and maps : a starting point to draw innovative ideas through sketches. Thus, we decided to focus on air pollution and we started to imagine different ways - scenarios, materials, products, services - to fight it. This choice - air pollution -, comes from a twofold observation :

-First, we understand outdoor/indoor air pollution as an issue to solve thanks to design and science : it causes major health issues all around the world. There is no frontier to stop airborne pollutants and we are all exposed to it.

-Then, we understand air pollution as an opportunity for sustainability : pollutants can be degraded and recovered into useful raw materials - such as metals - we could use to feed industries, rather than using non sustainable extraction/transformation processes, harmful for the environment.

From there and thanks to the tens of ideas we had, we jumped to the next stage : research.

RESEARCH

After selecting the more relevant ideas regarding air pollution, we started to :

-meet with experts ;

-identify related literature ;

-meet and question potential users through - meetings, surveys - ;

-look for past and present solutions and to identify their limits ;

-identify the codes - semiotics, signs, ergonomics, shapes - induced in health related products.

Finally, all these steps led us to understand the context in which we would use our device/service. Analyzing the existing products led us to identify opportunities to create the more relevant product and service regarding the context and the User. This analysis let us think that creating an affordable, energy self-sufficient and efficient product as well as a user-friendly service would be way for mass adoption that would benefit health in our societies.