Review Create a Grid System by Rob Sutcliffe
In this Skillshare course, entitled Create a Grid System, Rob Sutcliffe covers creating and using grid systems for mobile and web design. This course is part of a series entitled UI Design Bootcamp also by Rob Sutcliffe.
Sutcliffe begins the course by discussing the history of the use of grids, first in print and later in digital. From there, he introduces the types of grids, including manuscript, column and modular grids. He also discusses the importance of grids for alignment of design elements and consistency in your project designs.
Moving on to more detail, Sutcliffe introduces the CSS box model and how each CSS div can have three important features which are border, padding and margin. He discusses each of these three features and how to control them in your design work, using the grid system. Next, Sutcliffe discusses the differences between the CSS Flexbox and the CSS Grid. He also discusses responsive and fluid layouts and how to use both of these together in your design for maximum user experience.
The anatomy of the grid is the next major topic covered. Sutcliffe works from the ground up, by demonstrating how a grid system is developed. He starts with the horizontal lines, which are determined by the font size and line height of the text. Next, he adds columns, gutters and margins to the line grid, to create a more comprehensive grid system. Finally, he discusses more complex features and how to create modules and fields in your grid design.
Once the basic grid is established, Sutcliffe discusses how to add your design elements in to the grid, such as headings. He demonstrates the use of flow lines and the importance of whitespace. Next, he discusses how to align your design elements to the grid. He also discusses how to embed a second grid into your main grid system.
Using the popular Figma app, Sutcliffe demonstrates how to build a grid system, starting with a line grid based on the font line height and adding 12 columns. Next, he demonstrates how to build components, which are reusable grid sections, and how to add design elements to the components. Finally, he demonstrates how to use breakpoints to determine how the grid will change with the width of the page.
Rob Sutcliffe is a UI Designer and Developer with over 20 years of experience.
Create a Grid System by Rob Sutcliffe affiliate link
Screenshots used by permission of Skillshare, Inc.
Sutcliffe begins the course by discussing the history of the use of grids, first in print and later in digital. From there, he introduces the types of grids, including manuscript, column and modular grids. He also discusses the importance of grids for alignment of design elements and consistency in your project designs.
Moving on to more detail, Sutcliffe introduces the CSS box model and how each CSS div can have three important features which are border, padding and margin. He discusses each of these three features and how to control them in your design work, using the grid system. Next, Sutcliffe discusses the differences between the CSS Flexbox and the CSS Grid. He also discusses responsive and fluid layouts and how to use both of these together in your design for maximum user experience.
The anatomy of the grid is the next major topic covered. Sutcliffe works from the ground up, by demonstrating how a grid system is developed. He starts with the horizontal lines, which are determined by the font size and line height of the text. Next, he adds columns, gutters and margins to the line grid, to create a more comprehensive grid system. Finally, he discusses more complex features and how to create modules and fields in your grid design.
Once the basic grid is established, Sutcliffe discusses how to add your design elements in to the grid, such as headings. He demonstrates the use of flow lines and the importance of whitespace. Next, he discusses how to align your design elements to the grid. He also discusses how to embed a second grid into your main grid system.
Using the popular Figma app, Sutcliffe demonstrates how to build a grid system, starting with a line grid based on the font line height and adding 12 columns. Next, he demonstrates how to build components, which are reusable grid sections, and how to add design elements to the components. Finally, he demonstrates how to use breakpoints to determine how the grid will change with the width of the page.
Rob Sutcliffe is a UI Designer and Developer with over 20 years of experience.
Create a Grid System by Rob Sutcliffe affiliate link
Screenshots used by permission of Skillshare, Inc.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
