My UI/UX Design Learning Journey — DAY 8
Grids serve as the skeleton for the layout of designs, this helps designers arrange content on a page.
What is a Grid?
A grid is a structure comprising a series of lines that divides the page into columns. We have vertical and horizontal, and this structure helps designers arrange content on a page; these are things we never include in our final designs.
These basics impact the different decisions surrounding sizing, measuring, and spacing in design.
Base units
This is what defines what every measurement will be a multiple of. it makes our design consistent and also improves how we hand it off to developers.
Sizing
All user interface elements should be measured in increments of our base unit. This helps us with things like precise alignment, consistency, and hierarchy.
Padding
This is the spacing between all of our elements and should be based on our base unit. It makes spacing consistent, and readable to our users. It also increases uniformity.
Layout
All grids consist of 3 key things columns, gutters, and margins.
Types of Grid
Manuscript grid
This is useful for defining margins and for large blocks of text.
Column grid
This is commonly used and these columns are evenly spaced, which helps in designing a responsive screen.
Modular grid
This is a variation of the column grid, they have both vertical and horizontal roles.
Baseline grid
This is very important and consists of horizontal rows, it provides guidance for typography and user interface elements.
Thanks for reading, feel free to share your thoughts, clap, like, follow, and share with others.
Available on socials
LinkedIn
https://www.linkedin.com/in/bashirat-amoo-94175921a/
Twitter
https://twitter.com/AmooBashirat
Catch up from the start here:
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-1-df2b21e12
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-2-6ec9945e8ae9
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-3-56d5f20f8b4
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-4-2f43df296d9c
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-5-fdd39ce5ab39
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-6-40d3e6183be7
https://medium.com/@bashiratamoo22/my-ui-ux-design-learning-journey-day-7-5d091de363c2
