How to design better

Chapter 1Grid system04Chapter 2 Gradients12Chapter 3Final wordShadows 17Chapter 4 Style guides 21Chapter 5 28ButtonsChapter 6 Forms 37Chapter 7 Product filters 46Chapter 8 Pricing pages 55Chapter 9Shopping carts 64Chapter 10Navigation bars72Chapter 11Search boxes77Chapter 12Modal windows86Chapter 13Sign up flow92Chapter 14Dashboards107Chapter 15Hero section116Chapter 16Pagination126Chapter 17Tab bars133

A grid system is one of the best and simplest ways to structure a layout, and generate a consistent, and well organised design.

Grid system links together many design elements and establishes effective hierarchy, alignment, and consistency. Simply put, a grid system is a structure of vertical or intersecting lines that split a page into columns or modules.

It is extremely helpful when laying out the foundation for a properly organised and responsive design. Here are a few tips and best practices I personally follow when creating my grids.

Before you start your designs, you should create a custom grid layout to help you place out elements in an organised way.

Here are my (personal) best settings for web:20px inner-padding100px margins1440px art board20px gutters1240 px working space12 columns HOW TO DESIGN GRID SYSTEM 06TIP 2Mobile GridI use an iPhone 11 Pro Max size to start out my designs as it gives me enough room to work with but if you use Figma’s auto-layout functions and constrain your components it shouldn’t matter as much as it will remain responsive regardless of the artboard size.414 x 896 art board6 columns16 px margins8 px gutters HOW TO DESIGN GRID SYSTEM07TIP 3Row GridOk, we’ve covered columns, but what if you want to have your designs be pixel perfect, align perfectly, and be easier for developers to transfer to an actual code?

Add rows to help align your components horizontally.type: Top8px height8px gutter8px offsetcount: 800make it a high number if your artboard takes a lot of vertical space

ConsistencyA clear grid layout provides you and your team with a set of consistent sizes, spacing values, and patterns for your projects.

It can help you create a layout template for all your key UI components and pages with ease.