This repository contains the website developed for the Specialization Project. The site was built through a structured workflow combining systems thinking, design research, and AI-assisted development.
Our team planned and recorded design research in Notion. During this phase, we break down the entire system into clear sections and logic blocks following each deliverables. The works include - Define the FishOn vision, fishing problem space, community of practice
- Outline each section of the website or system (e.g. background, methodologies, radical prototype, etc)
- Clarify inputs, outputs, and relationships between variables and stages of our system
- Write content in a semi-structured way that is easy to translate into webpages and code later
Once the content structure is clear, we identified suitable website layout references and design systems. We made low-fidelity prototype at Figma to ensure the consistency and complexity of website. We layouted the section based on hierarchy and narrative flow that ensure the clarity and readbility. We also strictly followed the color pattern: black and white are used for section division and emphasis. We also illuatrate a few diagrams for clarifying the product structure in both design layer and tech layer.
The website was implemented mainly using Cursor. High-level design and system constraints—such as typography, color palette, spacing, radius, and spacing—were defined manually in css stylesheet. AI tools were used to support codespace and interaction logic. Before pushing to the final publishment, all outputs were reviewed, refined, and finalized through manual development to ensure accuracy, consistency, and alignment with the design.
After implementating our preset designs, we reviewed the website in life and finally decided to add more scroll behavior and responsive effect for more interactivity.
#Frameworks & Tools
Notion — project documentation, system mapping, and content planning Cursor — AI-assisted development, code generation, and interaction prototyping Figma - design diagrams and user interfaces