#programming #code #UX #design
A mock up of a way to visually organise code in a more intuitive way.
I also use value (brightness) to establish a heirarchy of importance to draw your eye function decs like titles of a chapter.
The value of the line numbers also reflects this, keeping our focus on the code.
Even just dimming any line with no characters helps you connect the code to the numbers.
Visual room is automatically give around the frames, so even code without spaces becomes a little easier to digest at a glance.
You never want a frame touching a line of code or another frame.
The curly braces visually match the fame coloring, which ties the concepts together. The frame only appears once both braces are entered.
The collapsible plus and minus is now on the title of the frame, appearing at one or both sides.
Mousing over a function that is collapsed and hovering could show the first comment after the declaration.
So
BuyDelaneySnacks()
// This text would show.
delaney.Snacks ++;
// This text would not.
(The custom colours for each function header could be stored in the code itself using a keyword in the first comment?)
If this has taught you anything about improving your user experience design you can always donate a few bucks to my "survive late stage capitalism" fund.
ko-fi.com/dellak
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.