Overview Within the framework of the iGEM project, the Team Wiki is not merely an information carrier; it also serves as a holistic medium to convey the team’s ethos, scientific progress, and public engagement. We consistently adhered to the principle of “the parallel progression of scientific content and visual storytelling”. Our design emphasizes using artistic strategies to enhance the dissemination of scientific research, transforming complex results into intuitive, comprehensible, and emotionally resonant forms. The following text presents our understanding and conceptualization of the webpage design from multiple perspectives. Core Visual Concept:
The Blue–Green-Haired Female Knight Rationale for Character Selection We created the “female knight” as our central visual emblem of the webpage, based on the following considerations: Symbol of courage and protection The detection and prevention of breast cancer, at its essence, entails safeguarding health. The knight is a universal symbol of courage, guardianship, and righteous struggle. The figure acts as a powerful metaphor for our team’s scientific “battle” against breast cancer, embodying our commitment to protecting life. Gendered connotations Breast cancer predominantly affects women. By adopting a female knight as the principal character, the imagery resonates with the project’s subject and underscores our dedication to women’s health. Distinctiveness and memorability Compared with conventional abstract icons, a character-driven symbol possesses greater human connection and recognizability. A vivid and relatable “female knight” ensures that the project leaves a distinct and lasting impression on all visitors to our Team Wiki.Compared with conventional abstract icons, a character-driven symbol possesses greater human connection and recognizability. A vivid and relatable “female knight” ensures that the project leaves a distinct and lasting impression on all visitors to our Team Wiki.
Homepage Main Visual Collection 1
Chromatic Design: Blue–Green Hair The choice of a blue-to-green hair for the knight’s hair is not a purely aesthetic decision, each color possesses symbolic meanings centered to our project ethos: Blue As the chromatic foundation, blue represents rationality, precision, and science. Evoking the profundity of the night sky or deep ocean, it reflects our courage to explore the unknown while conveying rigor and reliability. Green Green directly represents our project’s ultimate mission: promoting life, health, and healing. Just like burgeoning sprouts, it signifies the hope and renewal that we aim to provide through early detection, and infuses our design with vitality and humanitarian concern. The color gradient The smooth transition from blue to green illustrates the intersection of science and life. It is neither mere rational detachment nor simple gentle solace, but rather a balance of both—paralleling our project’s integration of synthetic biology with the mission of safeguarding life.
Homepage Main Visual Collection 2
Gestures and Postures of the Female Knight The female knight is conceived not as a static figure but as one embodying dynamic tension. Across different webpages, her posture changes to reflect the specific theme of the content. This design enhances immersive experience, allowing visitors to perceive the interplay between the character and each page’s theme.
Homepage Main Visual Collection3
Integration with Project Theme The webpage design must closely align with our project’s core theme. Our research focuses on utilizing adipocytes to detect breast cancer, grounded in medicine and biology. So the goal is to transform such abstract science into an informative yet aesthetically engaging user experience. In achieving this, we strove to find a balance between science and art. A clear structure and precise wording ensure effective communication, while visuals and atmosphere add emotional resonance. By incorporating a subtle sense of grandeur, the design maintains scientific accuracy while conveying aesthetic sophistication. In this way, reason and beauty intertwines, allowing the webpage to reflect both professionalism and artistic depth.
Homepage Main Visual Collection 4
Web Structure and User Experience Color System The dominant palette blends blue–green with golden brown. The blue–green symbolizes science, rationality, and vitality, evoking calmness, depth, and futurity; the golden brown conveys warmth, humanity, and resilience, representing stability and hope. The interplay of cool and warm hues yields a refined balance: simultaneously forward-looking and compassionate. This color strategy enables the webpage to highlight scientific rigor while expressing emotional resonance, thereby embodying the dual commitment to science and humanity. Typography Typography was carefully designed to balance aesthetic appeal with readability. From major to minor headings, we chose fonts with a sense of strength and modernity, reinforcing narrative depth and visual impact. Body text employs clean, legible fonts, ensuring reading comfort, while annotations and data displays use lighter styles to ensure visual rhythm and layered clarity. Through such deliberate typographic hierarchy, we aim to immerse users in a reading experience that conveys both the seriousness of scientific storytelling and the smoothness of narrative flow. Navigation Bar and Index Design Accessibility considerations guided our design of navigation and indexing, with particular attentions to users with color vision deficiencies. Subtle interactive elements, such as star icons and varied hues, facilitate clarity and distinguish selected options, improving both inclusivity and usability. Team Visual Identity Design Homepage Design For the homepage, aside from the top cover illustration, we adopted a richly textured picture-book style for the scrolling content. This offers several advantages: Continuation of narrative atmosphere The picture-book style visually resonates with the cover illustration, ensuring a consistent artistic language across the homepage and strengthening the viewer’s sense of immersion. Layered visual expression The fine textures and soft transitions characteristic of this style facilitate the presentation of complex scientific information in a more accessible, stratified manner, thereby lowering the threshold of comprehension. Enhanced narrativity As users scroll down, the transitions between illustrated scenes evoke the experience of leafing through the chapters of a storybook, rendering the project introduction more coherent and immersive. Strengthened humanistic care The quality of the illustration conveys warmth and guardianship, reflecting the project’s central theme of caring for women’s health. Adaptability and extendibility The illustrative elements can be readily applied to subpages or promotional materials, ensuring stylistic consistency and cross-platform adaptability.
Content Preview of the Picture Book-Style Homepage
Overall Form: Shield
  • Symbolism: The shield represents protection and safety, a symbol frequently associated with medical emblems.
  • Relevance: Emphasizes breast cancer detection through adipocytes as a form of protective screening.
Design Meaning of Each Part of the Logo
Mascot Design Overall Concept—“The Adipocyte Knight” The mascot originates from the rounded form of adipocytes, our core research focus. Rather than adopting a purely abstract depiction, it is reimagined as a small knight in armor. This design preserves the cellular form while infusing it with symbolic meanings of guardianship. In this way, the audience encounters a character that is both scientifically grounded and approachable.
Mascot Design and the Meaning of Its Elements
Conceptual Summary As an “Adipocyte Knight”, the mascot fuses the scientific essence of our project with imagery of protection and detection. by translating complex ideas into an intuitive and personable form, it conveys both scientific rigor and humanistic warmth. Conclusion The role of the art designer extends beyond that of a “draughtsman” or “typesetter.” It functions simultaneously as the storyteller and the bridge.
  1. storyteller: Transforming scientific content into coherent, emotionally resonant narratives through visual symbolism and structural composition.
  2. bridge: Linking researchers with the public, ensuring that experimental results are effectively visualized and comprehensible to a wider audience.
Within our Wiki, the blue–green-haired female knight stands as both an artistic emblem and a medium of scientific communication. She embodies guardianship not only for patients affected by breast cancer but also for our ongoing pursuit of scientific truth. Thus, the overarching design philosophy is to employ this figure as a central symbol, merging courage, protection, and women’s health with the scientific endeavor of adipocyte-based breast cancer monitoring. Through integrating color, typography, animation, and structured page architecture, we hope to present an art that is aesthetically compelling, user-friendly, artistically expressive, and scientifically precise.