Once you set the macro-elements to the grid, you can start thinking about the content. You need to set some rules for yourself and your app. This is an essential step as following the grid is what makes the difference between a great app and a poorly designed app.Ī design that is correctly aligned to a grid will also be very beneficial for developers who will be able to follow correct sizes and regular shapes when coding the app or website. Now that our grid is set, lets see how we can start designing our layout in the correct way.Įverything you design from now on that will appear on your website or app will need to stick to the grid. We have already accounted for the right margin by removing from the total width of the grid. In our case, we need to add a 20px margin and so the Offset value should be 20px. The Offset pushes the full grid from left to right by the amount entered. To do so, we need to add the margin size to the Offset. We need to add manually the 20px left margin that we have removed initially from the Total Width. At the moment, our grid is the right size but sits on the left margin of the artboard without leaving any margin space on the left. So the new Total Width will be 1400px.īut our grid layout is not yet complete. In our case out total artboard size is 1440px and the total margins are 40px (20px left+20px right). So we need to edit the Total Width input to be the full margins width less than the initial size. We need to remove these margins from the total width of the grid. In our case, we are adding 20px on the right and 20px on the left There is a manual way to add your external margins to the gird using the Offset input.ĭecide what your external margins will be.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |