Difference between revisions of "Team:Fudan/Design Intention"
m |
|||
| (31 intermediate revisions by 5 users not shown) | |||
| Line 5: | Line 5: | ||
We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2. | We make it compatible on laptop and mobile devices by using Materialize 1.0.0-rc.2. | ||
--> | --> | ||
| + | <!-- LC check on 2018-10-18 --> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| Line 12: | Line 13: | ||
<!-- Font-awesome icons 4.7.0 --> | <!-- Font-awesome icons 4.7.0 --> | ||
| − | <link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan/font-awesome.css&action=raw&ctype=text/css" rel="stylesheet"> | + | <link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan/font-awesome.css&action=raw&ctype=text/css" rel="stylesheet" /> |
<!-- Materialize 1.0.0-rc.2 (Material Design like) --> | <!-- Materialize 1.0.0-rc.2 (Material Design like) --> | ||
| Line 18: | Line 19: | ||
<!-- Clear default CSS settings; CSS reset --> | <!-- Clear default CSS settings; CSS reset --> | ||
| − | <style | + | <style> |
*{margin: 0;padding: 0;list-style: none;} | *{margin: 0;padding: 0;list-style: none;} | ||
/* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */ | /* via: https://blog.csdn.net/weixin_41014370/article/details/79523637 */ | ||
| Line 57: | Line 58: | ||
</style> | </style> | ||
| + | <title>2018 iGEM Team:Fudan - Design intention</title> | ||
</head> | </head> | ||
| Line 71: | Line 73: | ||
<div class="nav-wrapper"> | <div class="nav-wrapper"> | ||
<div id="teamLogo" class="brand-logo"> | <div id="teamLogo" class="brand-logo"> | ||
| − | <a href="https://2018.igem.org/Team:Fudan" target="_self"><img src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--teamLogo.svg"></a> | + | <a href="https://2018.igem.org/Team:Fudan" target="_self"><img alt="2018 team Fudan logo" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan--teamLogo.svg"></a> |
</div> | </div> | ||
<ul id="nav-mobile" class="right orangeBorder"> | <ul id="nav-mobile" class="right orangeBorder"> | ||
| Line 91: | Line 93: | ||
<!-- Dropdown and List elements in navigation bar --> | <!-- Dropdown and List elements in navigation bar --> | ||
<ul id="dropdown1" class="dropdown-content"> | <ul id="dropdown1" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li> |
| + | <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li> | ||
</ul> | </ul> | ||
<ul id="dropdown2" class="dropdown-content"> | <ul id="dropdown2" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand kinetics</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Software">Software</a></li> |
</ul> | </ul> | ||
<ul id="dropdown3" class="dropdown-content"> | <ul id="dropdown3" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Notebook">Our notebook</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Primers">Primers used</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Protocols">Protocols</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Safety">Safety</a></li> |
</ul> | </ul> | ||
<ul id="dropdown4" class="dropdown-content"> | <ul id="dropdown4" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Optimization">Optimization</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Improve">Parts improvement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Measurement">Quantification</a></li> |
</ul> | </ul> | ||
<ul id="dropdown5" class="dropdown-content"> | <ul id="dropdown5" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li> |
</ul> | </ul> | ||
<ul id="dropdown6" class="dropdown-content"> | <ul id="dropdown6" class="dropdown-content"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Attributions">Attributions</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Heritage">Heritage</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Team">Members</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li> |
</ul> | </ul> | ||
| Line 146: | Line 149: | ||
<li class="onThisPageNav"><a href="#section3">Bio-Art display</a></li> | <li class="onThisPageNav"><a href="#section3">Bio-Art display</a></li> | ||
<li class="onThisPageNav"><a href="#section4">wiki design </a></li> | <li class="onThisPageNav"><a href="#section4">wiki design </a></li> | ||
| − | |||
<li>Navigator on wiki</li> | <li>Navigator on wiki</li> | ||
<li> | <li> | ||
| Line 152: | Line 154: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li> |
| − | + | <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li> | |
| + | <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 161: | Line 164: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | + | <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li> | |
| − | + | <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li> | |
| − | + | <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li> | |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand kinetics</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Software">Software</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 174: | Line 177: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Notebook">Our notebook</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Primers">Primers used</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Protocols">Protocols</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Safety">Safety</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 186: | Line 189: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Optimization">Optimization</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Improve">Parts improvement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Measurement">Quantification</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 199: | Line 202: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 211: | Line 214: | ||
<div class="collapsible-body"> | <div class="collapsible-body"> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Attributions">Attributions</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Heritage">Heritage</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Team">Members</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 229: | Line 232: | ||
| − | <div id="contentBanner" class="figureBanner | + | <div id="contentBanner" class="figureBanner"> |
<div class="row"> | <div class="row"> | ||
<div class="col s12 hide-on-med-and-up"> | <div class="col s12 hide-on-med-and-up"> | ||
| Line 235: | Line 238: | ||
</div> | </div> | ||
<div class="col s12 hide-on-med-and-up"> | <div class="col s12 hide-on-med-and-up"> | ||
| − | <span></span> | + | <span>Good design is not something the average user look at and says “wow, that’s a great design!” Good design is something which makes users want to engage and experience.</span> |
</div> | </div> | ||
</div> | </div> | ||
<div id="figureBannerTitle" class="hide-on-small-only"> | <div id="figureBannerTitle" class="hide-on-small-only"> | ||
<h1>Design intention</h1> | <h1>Design intention</h1> | ||
| − | <p><span></span></p> | + | <p><span>Good design is not something the average user look at and says “wow, that’s a great design!” Good design is something which makes users want to engage and experience.</span></p> |
</div> | </div> | ||
| − | <div class="hide-on-small-only"> | + | <div class="hide-on-small-only" style="background:#000;"> |
| − | <img style="opacity:0. | + | <img style="opacity:0.7;" src="https://static.igem.org/mediawiki/2018/1/15/T--Fudan--title_designintention.jpg"> |
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;"> | <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:0;top:0; width: 4%;height: 100%;"> | ||
<defs> | <defs> | ||
| Line 273: | Line 276: | ||
<!-- side navigator of page content --> | <!-- side navigator of page content --> | ||
<ul id="pageContentNav" class="hide-on-med-and-down z-depth-0"> | <ul id="pageContentNav" class="hide-on-med-and-down z-depth-0"> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li> |
<li>Design intention</li> | <li>Design intention</li> | ||
<li class="onThisPageNav"><a href="#section1">Choosing colors</a></li> | <li class="onThisPageNav"><a href="#section1">Choosing colors</a></li> | ||
| Line 280: | Line 283: | ||
<li class="onThisPageNav"><a href="#section3">Bio-Art display</a></li> | <li class="onThisPageNav"><a href="#section3">Bio-Art display</a></li> | ||
<li class="onThisPageNav"><a href="#section4">wiki design </a></li> | <li class="onThisPageNav"><a href="#section4">wiki design </a></li> | ||
| − | + | <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li> | |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li> |
| − | <li><a href=" | + | |
</ul> | </ul> | ||
<!-- side navigator of page content --> | <!-- side navigator of page content --> | ||
| Line 290: | Line 292: | ||
<div class="figureHolder col s12 m6" style="padding:0 20px;"> | <div class="figureHolder col s12 m6" style="padding:0 20px;"> | ||
| − | <p style="text-align:center;"><img class="width45" src="https://static.igem.org/mediawiki/2018/0/02/T--Fudan--design_yff.jpg"></p><p style="margin-top:0;"><b>Fangfei Ye</b><br>I’m the art designer of our team, mainly responsible for graphic design. I think the best kind of design is to show the project faithfully. | + | <p style="text-align:center;"><img class="width45" src="https://static.igem.org/mediawiki/2018/0/02/T--Fudan--design_yff.jpg"></p><p style="margin-top:0;line-height:24px"><b>Fangfei Ye <i>(YFF)</i></b><br>I’m the art designer of our team, mainly responsible for graphic design. I think the best kind of design is to show the project faithfully. |
</p> | </p> | ||
</div> | </div> | ||
<div class="figureHolder col s12 m6" style="padding:0 20px;"> | <div class="figureHolder col s12 m6" style="padding:0 20px;"> | ||
| − | <p style="text-align:center;"><img class="width45" src="https://static.igem.org/mediawiki/2018/3/3d/T--Fudan--Tian_Huang.jpg"></p><p style="margin-top:0;"><b>Tian Huang</b><br>I’m the wiki designer of our team, mainly responsible for wiki design. I’d like to tell you the story behind the design. | + | <p style="text-align:center;"><img class="width45" src="https://static.igem.org/mediawiki/2018/3/3d/T--Fudan--Tian_Huang.jpg"></p><p style="margin-top:0;line-height:24px"><b>Tian Huang <i>(HT)</i></b><br>I’m the wiki designer of our team, mainly responsible for wiki design. I’d like to tell you the story behind the design. |
</p> | </p> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <div id="section1" class="section container | + | <div id="section1" class="section container scrolSpy"> |
<h2> | <h2> | ||
| − | How | + | How were the colors chosen? |
</h2> | </h2> | ||
<p> | <p> | ||
<img class="right-on-med-and-up width20" src="https://static.igem.org/mediawiki/2018/6/61/T--Fudan--design_color.jpg"> | <img class="right-on-med-and-up width20" src="https://static.igem.org/mediawiki/2018/6/61/T--Fudan--design_color.jpg"> | ||
| − | YFF: I | + | <i>YFF:</i> I used tuned orange, yellow and blue for the logo for three reasons. First, they are bright attractive colors, giving people a <b>fresh and lively feeling</b>. Second, they represent three different cells. Third, these three colors were mixed with a bit of grey to give a balanced effect. This symbolizes that synthetic biology not only relies on biological experiments, but also requires contributions of various <b>other fields</b> such as computer science, mathematics, sociology, etc. |
</p> | </p> | ||
</div> | </div> | ||
| − | <div id="section2" class="section container | + | <div id="section2" class="section container scrolSpy"> |
<h2> | <h2> | ||
Logo design | Logo design | ||
</h2> | </h2> | ||
<p> | <p> | ||
| − | YFF: I | + | <i>YFF:</i> I designed the logo to reflect the focus of our project: <b>transmembrane signaling</b>. I used three <b>polygons</b> to represent three cells, with two on the left providing signals to the cell on the right. I also used <b>curved corners</b> on some regions to indicate where two adjacent cells contact. Furthermore, I used two bold arrow lines to emphasize that the signals are transduced from the left to the right. Finally, the arrangement of the arrowheads with <b>our project name</b> suggests that the signals are integrated to generate the output. Overall, my design utilizes simple and clean displays to allow easy and instant understanding! |
</p> | </p> | ||
| − | <p><img src="https://static.igem.org/mediawiki/2018/1/15/T--Fudan--design_logo.jpg"></p> | + | <p style="text-indent:0"><img src="https://static.igem.org/mediawiki/2018/1/15/T--Fudan--design_logo.jpg"></p> |
</div> | </div> | ||
| − | <div id="section3" class="section container | + | <div id="section3" class="section container scrolSpy"> |
<h2> | <h2> | ||
| − | Bio-Art display | + | Bio-Art display |
</h2> | </h2> | ||
| + | <p style="text-align:right"> | ||
| + | (see our detailed page for <a href="/Team:Fudan/Bio-Art" target="_blank">Bio-Art Display</a>) | ||
| + | </p> | ||
| + | |||
<p> | <p> | ||
| − | YFF: I am | + | <i>YFF:</i> I am wholly in charge of the Bio-Art Exhibition, which combines synthetic biology and art to engage the public in understanding synthetic biology and our projects. |
</p> | </p> | ||
<p> | <p> | ||
| − | In fact, Display | + | In fact, organizing the Display was initially very difficult for me, because I had very limited experience. I would like to thank the designers of <a href="https://2017.igem.org/Team:Fudan/Teamers" target=_blank>Team 2017 Fudan</a> and <a href="https://2017.igem.org/Team:Fudan_China" target=_blank>Team 2017 iGEM Fudan_China</a> for their help and advice. Without their help, I couldn’t hold such a beautiful display. To make the exhibition look attractive, I also inquired my friends who major in the exhibition design, and they all gave me constructive advice. |
</p> | </p> | ||
<p> | <p> | ||
| − | + | To help the audience navigate the Display, there were a lot of <b>humanized details</b> in the exhibition. For example, we designed <b>small note papers</b>, on which the audience could write down their thoughts at any time throughout the display. In each exhibition area, our team members were always present to help explain the project and also communicate with the audience. We also carefully designed the <b>guidebook</b>, which provides a brief explanation of the contents of the exhibition to help the audience have a better understanding. | |
</p> | </p> | ||
| − | <p><img src="https://static.igem.org/mediawiki/2018/6/6d/T--Fudan--design_guidebook0.jpg"></p> | + | <p style="text-indent:0"><img src="https://static.igem.org/mediawiki/2018/6/6d/T--Fudan--design_guidebook0.jpg"></p> |
| − | <p><img src="https://static.igem.org/mediawiki/2018/a/a2/T--Fudan--design_guidebook1.jpg"></p> | + | <p style="text-indent:0"><img src="https://static.igem.org/mediawiki/2018/a/a2/T--Fudan--design_guidebook1.jpg"></p> |
| − | + | <div class="tableHolder"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<table> | <table> | ||
<tr> | <tr> | ||
| − | <th>File | + | <th>File used in Bio-Art Display</th> |
<th>Download</th> | <th>Download</th> | ||
</tr> | </tr> | ||
| Line 399: | Line 379: | ||
</table> | </table> | ||
</div> | </div> | ||
| + | |||
| + | </div> | ||
| + | <div id="section4" class="section container scrolSpy"> | ||
| + | <h2> | ||
| + | wiki design | ||
| + | </h2> | ||
| + | <p><i>HT:</i> I made this wiki template for Team:Fudan based on <a href="https://materializecss.com/" target="_blank">Materialize</a>.</p> | ||
| + | <ul> | ||
| + | There are many useful features you should know on this wiki website: | ||
| + | <li>On most sites, a <b>page navigator</b> was added on the right side of main content as a quick guide of the page; you can find related links in this navigator | ||
| + | </li> | ||
| + | <li>The wiki displays well on either <b>large screen devices (such as laptops) or small ones (such as mobile phones)</b> | ||
| + | </li> | ||
| + | <li>The wiki is made to be <b>print-friendly</b> | ||
| + | </li> | ||
| + | <li>Footer contains the <b>sitemap</b> of our wiki, making it easy to surf to anywhere | ||
| + | </li> | ||
| + | <li>A yellow <b>abstract button</b> can be found at the lower right corner of the screen, clicking that will display the abstract of our project ENABLE | ||
| + | </li> | ||
| + | <li>Pages use <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies" target="_blank">cookie</a> to record the positions; when you open the same page on the same device again, it will resume to where you previously were | ||
| + | </li> | ||
| + | </ul> | ||
</div> | </div> | ||
| Line 406: | Line 408: | ||
<!--Abstract on content page--> | <!--Abstract on content page--> | ||
<div id="abstractContent" class="z-depth-2"> | <div id="abstractContent" class="z-depth-2"> | ||
| − | <a href="#!"><img src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a> | + | <a href="#!"><img alt="2018 team Fudan abstract" src="https://static.igem.org/mediawiki/2018/9/96/T--Fudan--X.svg"></a> |
<div class="container"> | <div class="container"> | ||
<h2 style="margin: 0;padding: 10px 0;">Abstract</h2> | <h2 style="margin: 0;padding: 10px 0;">Abstract</h2> | ||
| Line 433: | Line 435: | ||
<i class="fa fa-sticky-note" style="font-size: 30px;line-height: 50px"></i> | <i class="fa fa-sticky-note" style="font-size: 30px;line-height: 50px"></i> | ||
</a> | </a> | ||
| − | <a href="# | + | <a href="#FudanWrapper" class="btn"> |
<i class="fa fa-angle-up" style="font-size: 48px;line-height: 45px"></i> | <i class="fa fa-angle-up" style="font-size: 48px;line-height: 45px"></i> | ||
</a> | </a> | ||
| Line 443: | Line 445: | ||
<div class="row"> | <div class="row"> | ||
<div id="sponsor" class="col m3 s12 row"> | <div id="sponsor" class="col m3 s12 row"> | ||
| − | <a href="https://2018.igem.org/Team:Fudan" target="_blank"><img class="col s3 m6 l3" style="position:relative; padding: 0 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2018/7/73/T--Fudan--teamLogoWhite.png"> | + | <a href="https://2018.igem.org/Team:Fudan" target="_blank"><img alt="2018 Team:Fudan logo white" class="col s3 m6 l3" style="position:relative; padding: 0 0.3rem; margin:-0.15rem 0; left: -0.45rem;" src="https://static.igem.org/mediawiki/2018/7/73/T--Fudan--teamLogoWhite.png"> |
</a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> | </a><a href="http://www.fudan.edu.cn/en/" target="_blank"><img class="col s3 m6 l3" alt="Fudan University" src="https://static.igem.org/mediawiki/2018/f/f7/T--Fudan--schoolLogo.png"> | ||
</a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点，排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> | </a><a href="http://life.fudan.edu.cn/" target="_blank"><img class="col s3 m6 l3" style="margin-bottom: 4%;/* 该图比其他小一点，排版需要 */" alt="School of Life Sciences, Fudan University" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan--schoolOfLifeSciencesIcon.png"> | ||
| Line 455: | Line 457: | ||
<span>Project</span> | <span>Project</span> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Demonstrate">Demonstration</a></li> |
| − | + | ||
| + | <li><a href="/Team:Fudan/Antigen_Receptors">Antigen, Receptors</a></li> | ||
| + | <li><a href="/Team:Fudan/Results">Transmembrane logic</a></li> | ||
<li><a href="https://2017.igem.org/Team:Fudan">2017.iGEM</a></li> | <li><a href="https://2017.igem.org/Team:Fudan">2017.iGEM</a></li> | ||
</ul> | </ul> | ||
| Line 463: | Line 467: | ||
<span>Dry lab</span> | <span>Dry lab</span> | ||
<ul> | <ul> | ||
| − | + | <li><a href="/Team:Fudan/Addon#ribo">Addon: ribo</a></li> | |
| − | + | <li><a href="/Team:Fudan/Addon#TALE">Addon: TALE</a></li> | |
| − | + | <li><a href="/Team:Fudan/Addon#T2">Addon: T2</a></li> | |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#Transcriptional_Amplifer">Model: transcriptional amplifer</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Model#NotchLigandKinetics">Model: Notch-ligand kinetics</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Software">Software</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| − | <div class="col s12 m4 | + | <div class="col s12 m4"> |
<span>Wet lab</span> | <span>Wet lab</span> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/InterLab">iGEM interLab</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Notebook">Our notebook</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Primers">Primers used</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Protocols">Protocols</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Safety">Safety</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 486: | Line 490: | ||
<span>Toolbox</span> | <span>Toolbox</span> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Basic_Parts">Basic parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Composite_Parts">Composite parts</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Optimization">Optimization</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Parts_Collection">Parts collection</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Improve">Parts improvement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Measurement">Quantification</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| − | <div class="col s12 m4"> | + | <div class="col s12 m4 active"> |
<span>Outreach</span> | <span>Outreach</span> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Bio-Art">Bio-Art display</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Collaborations">Collaborations</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Design_Intention">Design intention</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Human_Practices">Human practices</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Public_Engagement">Public engagement</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 507: | Line 511: | ||
<span>Team</span> | <span>Team</span> | ||
<ul> | <ul> | ||
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Acknowledgement">Acknowledgement</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Attributions">Attributions</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Heritage">Heritage</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Team">Members</a></li> |
| − | <li><a href=" | + | <li><a href="/Team:Fudan/Sponsors">Sponsors</a></li> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 520: | Line 524: | ||
<div class="footer-copyright"> | <div class="footer-copyright"> | ||
<div class="container"> | <div class="container"> | ||
| − | + | <div class="contactUS row"> | |
| − | + | <div class="col s12 m6 l4"><i class="fa fa-location-arrow"></i> Life Sci Bldg E301, 2005 Songhu Rd, Shanghai | |
| − | + | </div><div class="col s12 m6 l2"><i class="fa fa-fax"></i> +86-21-31246727 | |
| − | + | </div><div class="col s12 m6 l2"><i class="fa fa-envelope-o"></i> igem@fudan.edu.cn | |
| − | + | </div><div class="col s12 m6 l4"><i class="fa fa-twitter"></i> <i class="fa fa-wechat"></i> Fudan_iGEM | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
</div> | </div> | ||
</footer> | </footer> | ||
Latest revision as of 15:12, 7 November 2018
- Addon: ribo
- Addon: TALE
- Addon: T2
- Model: transcriptional amplifer
- Model: Notch-ligand kinetics
- Software
Design intention
Fangfei Ye (YFF)
I’m the art designer of our team, mainly responsible for graphic design. I think the best kind of design is to show the project faithfully.
Tian Huang (HT)
I’m the wiki designer of our team, mainly responsible for wiki design. I’d like to tell you the story behind the design.
How were the colors chosen?
YFF: I used tuned orange, yellow and blue for the logo for three reasons. First, they are bright attractive colors, giving people a fresh and lively feeling. Second, they represent three different cells. Third, these three colors were mixed with a bit of grey to give a balanced effect. This symbolizes that synthetic biology not only relies on biological experiments, but also requires contributions of various other fields such as computer science, mathematics, sociology, etc.
Logo design
YFF: I designed the logo to reflect the focus of our project: transmembrane signaling. I used three polygons to represent three cells, with two on the left providing signals to the cell on the right. I also used curved corners on some regions to indicate where two adjacent cells contact. Furthermore, I used two bold arrow lines to emphasize that the signals are transduced from the left to the right. Finally, the arrangement of the arrowheads with our project name suggests that the signals are integrated to generate the output. Overall, my design utilizes simple and clean displays to allow easy and instant understanding!
Bio-Art display
(see our detailed page for Bio-Art Display)
YFF: I am wholly in charge of the Bio-Art Exhibition, which combines synthetic biology and art to engage the public in understanding synthetic biology and our projects.
In fact, organizing the Display was initially very difficult for me, because I had very limited experience. I would like to thank the designers of Team 2017 Fudan and Team 2017 iGEM Fudan_China for their help and advice. Without their help, I couldn’t hold such a beautiful display. To make the exhibition look attractive, I also inquired my friends who major in the exhibition design, and they all gave me constructive advice.
To help the audience navigate the Display, there were a lot of humanized details in the exhibition. For example, we designed small note papers, on which the audience could write down their thoughts at any time throughout the display. In each exhibition area, our team members were always present to help explain the project and also communicate with the audience. We also carefully designed the guidebook, which provides a brief explanation of the contents of the exhibition to help the audience have a better understanding.
wiki design
HT: I made this wiki template for Team:Fudan based on Materialize.
-
There are many useful features you should know on this wiki website:
- On most sites, a page navigator was added on the right side of main content as a quick guide of the page; you can find related links in this navigator
- The wiki displays well on either large screen devices (such as laptops) or small ones (such as mobile phones)
- The wiki is made to be print-friendly
- Footer contains the sitemap of our wiki, making it easy to surf to anywhere
- A yellow abstract button can be found at the lower right corner of the screen, clicking that will display the abstract of our project ENABLE
- Pages use cookie to record the positions; when you open the same page on the same device again, it will resume to where you previously were
Abstract
Contact-dependent signaling is critical for multicellular biological events, yet customizing contact-dependent signal transduction between cells remains challenging. Here we have developed the ENABLE toolbox, a complete set of transmembrane binary logic gates. Each gate consists of 3 layers: Receptor, Amplifier, and Combiner. We first optimized synthetic Notch receptors to enable cells to respond to different signals across the membrane reliably. These signals, individually amplified intracellularly by transcription, are further combined for computing. Our engineered zinc finger-based transcription factors perform binary computation and output designed products. In summary, we have combined spatially different signals in mammalian cells, and revealed new potentials for biological oscillators, tissue engineering, cancer treatments, bio-computing, etc. ENABLE is a toolbox for constructing contact-dependent signaling networks in mammals. The 3-layer design principle underlying ENABLE empowers any future development of transmembrane logic circuits, thus contributes a foundational advance to Synthetic Biology.