# How to build great layouts?

**URL:** <https://community.thunkable.com/t/how-to-build-great-layouts/1357265>\
**Category:** Questions about Thunkable X\
**Tags:** design\
**Created:** [June 22, 2021, 4:04am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265 "2021-06-22T04:04:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![joel4u79gw](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@joel4u79gw](https://community.thunkable.com/u/joel4u79gw)\
**Post date:** [June 22, 2021, 4:04am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/1 "2021-06-22T04:04:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 22, 2021, 4:19am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/2 "2021-06-22T04:19:22Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![joel4u79gw](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@joel4u79gw](https://community.thunkable.com/u/joel4u79gw)\
**Post date:** [June 22, 2021, 4:47am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/3 "2021-06-22T04:47:10Z")

</div>

Sure thing, done.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [June 22, 2021, 7:12am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/4 "2021-06-22T07:12:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [June 22, 2021, 9:34am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/5 "2021-06-22T09:34:32Z")

</div>

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](https://community.thunkable.com/c/creator-lounge/57), 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!

---

<div class="post-metadata">

**Author:** ![joel.d](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@joel.d](https://community.thunkable.com/u/joel.d)\
**Post date:** [June 22, 2021, 4:38pm UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/6 "2021-06-22T16:38:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [June 23, 2021, 10:17am UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/7 "2021-06-23T10:17:32Z")

</div>

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](https://community.thunkable.com/t/report-bugs-and-submit-feature-requests-in-our-public-github-repository/31760)

---

<div class="post-metadata">

**Author:** ![joel.d](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@joel.d](https://community.thunkable.com/u/joel.d)\
**Post date:** [June 23, 2021, 4:39pm UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/8 "2021-06-23T16:39:33Z")

</div>

Alrighty, bug filed, thanks.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/how-to-build-great-layouts/1357265/9 "2024-11-08T13:20:08Z")

</div>


