Templates

Getting Detailed with Margins, Measurements, and Grids

Having a proper measurement system for the grids and margins is really important for a design to visually appear consistent across the board. In creating this, we are able to create a design that follows a layout that can be adapted easily in design and development.


Grid Systems and Layout Structures




Layouts follow the grid systems established but are flexible based on device. The grids measurements are incremented based on platform. To the right are some samples of grids for a few key screens.



Discover’s margins needed to utilize a grid system because I needed to ensure key information would be displayed correctly, even when the device got very small or very big.



Newsfeed has a lot more grid requirements than the others because of the variety of post types. However, we were able to utilize the height of a list item as a base size and duplicate or divide it incrementally to accommodate the content types.