How to build great layouts?

Are there any tutorials on best practices for formatting/layouts, particularly for the Drag n Drop interface? I’ve looked around and pretty much every demo video you guys have just shows someone slapping UI elements around haphazardly, so I don’t understand how to line things up precisely and responsively, so they will look good across various size devices, especially for non-trivial forms. The “snap” features only go so far.

I guess Groups are part of the solution there? But Groups have seemed very finicky - if I drop something onto a group in the editor, chances are less than 50/50 that they actually get associated with the group. Dragging the elements in the nav on the left doesn’t seem any more reliable.

It’d be really great if you guys could show a video really showing how complex layouts can be achieved with some level of polish and cross-device compatibility. Any help would be much appreciated. Thanks!

Hey, welcome to Thunkable! Since you’ve already posted this question in ‘The future of new UI design in Thunkable’, could you please either delete your posts there or this topic? Posting the same question on multiple topics clutters the forum and makes it harder for others to find your topic when they’re searching the community. Thanks!

1 Like

Sure thing, done.

1 Like

Good question @joel4u79gw .
Anyways i think creating UI’s
Is not eaaily Done with tutorials you can learn the best by messing around
With designing.
And see What fits the best.
That’s how i’ve learned to design.

Hi there,

There are lots of blogs, videos, and more online with advice on how to create easy-to-use, engaging layouts for your apps.

You may be interested in checking out the Creator Lounge - Community, as this forum is more design-focused than the broader Thunkable Discuss forum.

You can even check out our weekly design challenges and see what other Thunkers create from a given prompt!

2 Likes

Sorry, I guess I wasn’t clear enough in my post. I’m not asking how to create a great design, I’m asking how to implement a design. I find that there are few tools/guard rails that help me position items in Thunkable, so I know they are all lined up and evenly spaced out.

For instance, the first thing I needed to do was build a form with several fields stacked vertically. I can line them up with each other on the left using your snap guides, but when I tried to put labels above each one, there were no snap guides that helped me line up the label with the top of the input field, so I have to eyeball the height. And then there was no way to ensure that the input fields were a consistent distance away from each other, so again I was trying to eyeball it, or use numeric positioning, but that’s super rigid and difficult if you need to re-arrange fields later.

As I said, your demo videos all use trivial layouts, so they never demonstrate how to align and position elements (esp for the Drag & Drop IDE), so they’ll be consistent, maintainable, and responsive.

Do you guys have any guidance/best practices on that?

Thanks!

1 Like

Sorry for misunderstanding your first post!

Could you make a Github feature request for the extra implementations of guidelines that you are looking for?

You can find more info on making a Github feature request here: Report Bugs and Submit Feature Requests in Our Public Github Repository

3 Likes

Alrighty, bug filed, thanks.