Importance of grids in UI design and development
19
Lessons Learnt Design is science
description
Presentation of Vibhas Jain, Product Designer- PayTM. He discusses about Grids and their importance. Vibhas talks about the design process they follow at Paytm and what has he learned till now doing various designs. The flow he recommends all designers to take is Sketch → Atomic Designs → Grids. While all elements are important to the process, the right implementation of grids is what brings the design together. He also emphasized on baseline text and hierarchy of page. Size, color, text and spacing are the most important aspects where you can focus and drive a user to do certain things you want them to do.
Transcript of Importance of grids in UI design and development
![Page 1: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/1.jpg)
Lessons LearntDesign is science
![Page 2: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/2.jpg)
E-commerce DashboardsMy first design challenge @ Paytm
![Page 3: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/3.jpg)
![Page 4: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/4.jpg)
Tools which saved me
1. Sketching2. Atomic Design3. Grids
![Page 5: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/5.jpg)
SketchingFastest way to visualize anything
![Page 6: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/6.jpg)
+ It’s great for sprints!
![Page 7: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/7.jpg)
Atomic Design
![Page 8: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/8.jpg)
![Page 9: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/9.jpg)
Gridz.keep it real
![Page 10: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/10.jpg)
90% of digital content is textBaseline text is the most important design element on both web & mobile
Medium
![Page 11: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/11.jpg)
Elements that define heirarchy
• Size• Color• Weight• Spacing
![Page 12: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/12.jpg)
![Page 13: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/13.jpg)
Grids enforce clarity
![Page 14: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/14.jpg)
Success?
![Page 15: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/15.jpg)
Dribbble = Pretty Screens.Flow is King
![Page 16: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/16.jpg)
Other lessons
![Page 17: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/17.jpg)
Small teams deliver.Be a lean, mean , money making machine
![Page 18: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/18.jpg)
HiringThe hardest part
![Page 19: Importance of grids in UI design and development](https://reader033.fdocuments.net/reader033/viewer/2022061217/54b4eb504a7959294d8b45d7/html5/thumbnails/19.jpg)
Make stuff.Someone, somewhere will dig it