Morten_Hjort Posted December 29, 2016 Share Posted December 29, 2016 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 Quote Link to comment Share on other sites More sharing options...
carl123 Posted December 29, 2016 Share Posted December 29, 2016 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 Quote To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time. Link to comment Share on other sites More sharing options...
Morten_Hjort Posted December 29, 2016 Author Share Posted December 29, 2016 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? Quote Link to comment Share on other sites More sharing options...
carl123 Posted December 30, 2016 Share Posted December 30, 2016 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? Quote To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time. Link to comment Share on other sites More sharing options...
Morten_Hjort Posted December 30, 2016 Author Share Posted December 30, 2016 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? Quote Link to comment Share on other sites More sharing options...
jburgers Posted January 1, 2017 Share Posted January 1, 2017 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. Quote Link to comment Share on other sites More sharing options...
Morten_Hjort Posted January 2, 2017 Author Share Posted January 2, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.