I’m a full-stack dev with 0 design experience or education. I’m trying to design some pages out for my startup in figma.

There are probably a lot of things wrong with this page, and I suppose you can feel free to pick it apart and let me know why this is a bad workflow, but I have a specific question around the ‘Scheduled Actions’ block.

I like the gray block around all of the business logic on the page. I feel like that’s a thing –I’d love to be educated on how to separate ‘this is where you’re working’ from ‘this is navigating you’ if it is not a thing. But with the colored background, I feel like I have to put every piece into a card. With Scheduled actions, I feel like each action should be it’s own card, and hence I’m getting into stacked cards. Maybe these could be grouped without a card and just a flat separation line but I think it’s better for it to be a card.

Anyways, I don’t think stacked cards are right, so I’d love to know a better approach to this need. Trying to stick to solutions that are available in default Material packages (Vuetify, to be specific)

Also, I couldn’t figure out how to google questions like this (I searched things like ‘how to structure input heavy pages’ and got firstname, lastname etc fields with a look and feel from 2008 from every link’) so if you can point me towards resources that would answer these questions on a more general level that’d be much appreciated.

PS: Any example websites that have a similar feel to this would be much appreciated (i.e. stepper to take you through a lot of input/setup). I couldn’t think of any spots on my normal consumer-facing apps that I use where this exists, but it seems pretty standard for B2B SaaS stuff.

r/web_design - UX Question: How to not stack cards

Source link

Write A Comment