Team:KCIS NewTaipei/Contribution
CONTRIBUTION
CONTRIBUTION
Introduction
Before the iGEM wiki, we had no fundamental knowledge of web design or
development. Therefore, we consulted Madeline Hsia, a UI/UX
professional; she recommended us a web-based software called Figma for
designing and prototyping our wiki. This tool really improved our
overall workflow and helped us formulate an overall theme for our wiki.
Our wiki was then built from the ground up via HTML/CSS/JAVASCRIPT
without utilizing any existing framework (although inspiration was
collected from previous iGEM wikis).
Knowing that wiki is a challenging and perhaps foreign part for many iGEM teams, we created an instruction video that might help by giving future teams a general guide to Figma and a way to establish an efficient workflow.
Knowing that wiki is a challenging and perhaps foreign part for many iGEM teams, we created an instruction video that might help by giving future teams a general guide to Figma and a way to establish an efficient workflow.
Video
The video attached below includes a brief introduction of Figma, a brief
tutorial on how to use it, and some suggestions on designing and
implementing your wiki based on our experience. The video is uploaded
onto YouTube for ease of access. If you have any questions, feel free to
contact us via Instagram.
Tools
Figma has its dimension. So when we implement the units from Figma, we
often have to use a DP/PX converter to code. To accomplish this, the
wiki team uses
pixplicity.com/dp-px-converter
to fix such problems.