Example
Working with Design Systems
Thanks for putting the spotlight on this topic. Design systems are becoming more important than ever. As AI makes it increasingly easy to produce content and interfaces quickly, a shared visual language helps keep the results consistent, intentional and recognizable.
For this challenge, I’m sharing a small sneak peek at my ongoing work on FLaM∞ — Functional Layer Mapping.
The visual system brings together the colours, typography, surfaces, figures, diagrams, tables and interaction states that have gradually emerged during the development of the framework. It is not a finished brand manual, but a working system that makes recurring design decisions visible and reusable.
I also used the prompt from Challenge#562 as a small experiment in applying this visual language. With ChatGPT Sites, I translated the existing elements into an interactive website and refined the details iteratively.
View project here:
2 Replies
It's a great idea to build it as a minisite. I know it's just a project, so it's up to you, but something to look into - the pages are sticking to the bottom and not scrolling well, and a user expectation would also be to highlight your location in the menu - that would be really helpful as well :)
Thanks for the helpful feedback! The menu is the primary way to move through the site and already provides a hover state. I agree that adding a persistent active state for the current section could make orientation even clearer on desktop. Scrolling works normally on my devices, but I’ll keep an eye on it across different screen sizes and browsers.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.