Genstyl — Design Tool | Organising nodes
#DesignSystems #UIUX #FrontEnd #BuildInPublic #WebDesign #DesignToCode #ComponentsLibrary
Waitlist 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
When it comes to software and its influence on my career I can’t help but think of Photoshop. I started as a web designer and web developer, back in 2009, and have spent thousands of hours working in it. The layouts I was designing and coding at the time, during the skeuomorphism era, meant a lot of layers! Organisation and keeping things tidy was a necessity!
It’s no surprise I was inspired by the “giant” and felt that adding similar features to Genstyl was not only useful for the tool, but also an homage to these UX patterns and design decisions. They are timeless!
Double-clicking to rename layers felt like a no-brainer. In Genstyl, this pattern is used in multiple places, but one that feels closer to home is customising the display names of nodes in a layout; and when you’re done, hit Return to confirm.
Colour-coding layers and groups of layers was also a big thing back in the day. Since I’m not working with canvas layers, and there’s no preview thumbnail, each node in the sidebar can only be differentiated from other nodes by their icons and display names; this is not enough most of the time. That’s why I added custom display colours, with a limited, static palette that goes well with the overall feel of the UI. Nested nodes inherit from parents, but can also override the parent’s colours, making a monotone and visually-ambiguous list into a colour-coded, familiar landscape.
One of the first few nodes I implemented for the layout builder was the Group node. It’s purely organisational, as it doesn’t affect the layout HTML structure. I’ve experimented with it a bit, and I must admit that it’s less useful for my particular app than it was in Photoshop, hence I’m treating it as experimental for now, since it has deep implications regarding parent-child relationships (which nodes can be nested in what nodes). It seems that the natural nesting of HTML elements in a web layout carries within itself the inherent grouping behaviour anyways.
What organisational methods would you like to see in a design tool? Do these feel like they cover your needs? Do let me know!