League of Code Thailand
Company
League of Code Thailand
My Contribution
Design Tokens
Design System
UI Design
Team
AJ Supant Pinyo (Me)
Engineer
Leagues of Code Expands Outreach to Engage More Students
Leagues of Code enlisted my expertise to design a comprehensive website, featuring a landing page, course page, about page, and additional sections.
Designing for Immediate Needs
With limited time and a substantial student base, Leagues of Code opted for a design strategy centered around their current students' experiences and feedback.
Start with user flow and sitemap
Rough Sketch for Leagues of Code Website Expansion
Low-Fidelity Wireframes
Setting Up Token Studio and Variables
Leagues of Code expressed their ambition to scale significantly. To support this growth, I decided to establish a robust foundation for the entire system. Additionally, everything needed to be prepared for seamless integration and deployment on GitHub for the development team
Setting Up Color Variables
I established a color system, transitioning from primitive aliases to semantic mappings. This setup includes a light mode and is designed to easily expand to a dark mode in the future without requiring a complete overhaul.
Setting Up Typography Variables
I configured the typography system to ensure consistency and scalability. This includes defining font families, sizes, weights, and line heights. The system is flexible, allowing for easy adjustments and expansions, such as adding new styles or adapting to different themes like dark mode, without requiring a complete redesign.
Linked the Token studio with Local Variables on Figma
Set up Design System
Hi-Fidelity and UI design
Approaching to UI design emphasizes high-fidelity visuals while ensuring responsiveness across all devices. Each design is meticulously crafted to maintain its integrity and usability, delivering a seamless user experience across various screen sizes and platforms.
