Grid and UI

[Morten_Hjort]

I'm used to design straight in code, but in a new job I now have to do the UI design and pass on to the developers, which makes using Affinity Designer for UX/UI more obvious. However when I need to design boxes in a grid its important for me to show the same spacing no matter if 3,4,5 boxes in a row. Something css "margin" takes care of.

 

How can you recommend my approach in AD when the size if the boxes ain't as important as the space between?

 

You can see a screenshot of the issue here: https://cl.ly/3r1e20273D1A

[carl123]

AD has built in commands to align objects horizontally or vertically, with equal spacing between objects

 

Search the built-in help for..

 

aligning objects

 

 

 

post again if you still need more help on this

[Morten_Hjort]

AD has built in commands to align objects horizontally or vertically, with equal spacing between objects

 

Search the built-in help for..

 

aligning objects

 

 

 

post again if you still need more help on this

 

Thanks, but ain't that just for equal distances between objects?

[carl123]

Thanks, but ain't that just for equal distances between objects?

 

The picture you have attached shows the bottom row of 4 pictures with uneven horizontal spacing. 

 

I assumed you wanted to know how to align the 4 pictures with equal spacing.  If so, you just select all 4 pictures and use the Align Horizontally command (space horizontally) to do so.

 

If not, can you elaborate on what it is you want to do?

[Morten_Hjort]

The picture you have attached shows the bottom row of 4 pictures with uneven horizontal spacing. 

 

I assumed you wanted to know how to align the 4 pictures with equal spacing.  If so, you just select all 4 pictures and use the Align Horizontally command (space horizontally) to do so.

 

If not, can you elaborate on what it is you want to do?

 

Almost what I tried to write at least, but I can see its not that easy to figure out :)

I want equal spacing between the content-boxes in both lines. The space is equal for each row, but not when comparing both rows. Does it make sense?

[jburgers]

For the past 10 years, I have been designing web user interfaces with a lot of different tools. Affinitiy designer is one of them (and a very nice one!).

 

If you have multiple rows with different number of 'boxes' that, per row, must have the same distance between each box, the approach of using the Align Horizontally (space horizontally) command is the way to go.

However, in what I believe you want to reach, the steps would be as follows:

 

• First roughly place all the rows of boxes with the sizes they should have (equal or unequal, whatever the client wishes), make sure that you place the outer boxes with their 'outside' side on the webpage margin that you what to apply. You might want to use the grid for that or maybe you have already put some guides at the right webpage margins that you can use to snap to.
• Then select all leftmost boxes and align them to their left sides (just to be sure, as they should have snapped to the grid or the guides)
• Then select all rightmost boxes and align them to their right sides (also just to be sure)
• Then select, row by row, all boxes in that row and align them with Align Horizontally (space horizontally)

In that way you get, per row the same spacing between the boxes, but these spaces can differ per row, depending on the widths of the boxes and the number of boxes in a row.

 

Hope this is what you are aiming at.

[Morten_Hjort]

Thanks! Yeah it could work! I figured out to do a "transparent" margin for each box and then use the constrain-tool to make sure only the inside content scales, so the margin is at a fixed size.