How to use 8pt grid system to design app UI

  Рет қаралды 11,181

Akash Yadav

Akash Yadav

Күн бұрын

Пікірлер: 66
@bl7937
@bl7937 Жыл бұрын
I’ve been watching NUMEROUS videos on the explanation on how to use the 8pt grid and this video by far has explained this topic the best. You helped me understand how to use the 8pt grid for typography. Thank you!😊
@luckyuwaoma4127
@luckyuwaoma4127 2 жыл бұрын
I love the way you taught this carefully. Not everyone teaches this way. Thank you!
@ShelbyParton-zu2wx
@ShelbyParton-zu2wx Жыл бұрын
Thank you for such a thorough explanation - it was helpful in understanding why people choose 8pt grid systems so often.
@jerryjacob47
@jerryjacob47 2 жыл бұрын
I was oblivious about this rule & nobody even told me that there is an 8 pt grid rule in visual design. This really opened my mind & will definitely apply this to all my designs. Thanks @Akash
@jerryjacob47
@jerryjacob47 2 жыл бұрын
@Akash Yadav Does the same rule apply when we make it for Web design or is it just for Mobile Apps design?
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Hey Jerry Thanks for the comment. 8pt grid system is used only for mobile design. For Website design we a different framework which is called column layouts. It's a different approach as making things responsive is the main goal in website design. I will explain 12 column system in upcoming videos✌️
@JRipz
@JRipz 2 жыл бұрын
@@AkashYadavUX is there a video you made for grid for web design?
@moniaafi6943
@moniaafi6943 Жыл бұрын
As a beginner that video is really really helpful for me. I learn a lotttt..... your way of teaching things is soooooo good, clear, and understandable... thanks a lott...
@chamaranuwan3956
@chamaranuwan3956 2 жыл бұрын
I was struggling with the term 8px grid in figma.Thank you Akash to creating these videos☺️these helped me a lot
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Happy to help!
@niwala2546
@niwala2546 2 жыл бұрын
very clear and neat explanation of 8pt grid system, I watched a lot of videos about grid system but its a great information. thank you so much sir.🙂🙏
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
😇😇
@ChayonShaah
@ChayonShaah 10 ай бұрын
Tell me about bootstrap it has only 12 grid system
@chbmnya
@chbmnya Жыл бұрын
best video, the things which i was looking for finally someone showed up properly thanks
@divyanshudv5539
@divyanshudv5539 2 жыл бұрын
Love this format. Would love to see more like these. 😋
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
You got it!🤓🤓
@chau.graphic
@chau.graphic Жыл бұрын
When designing and using 8/4pt grid system, do you measure the spacing between elements by their bouding box (like in 11:48), or measure from the text's baseline itself? And if you are using the bounding box to measure, isn't the box is adjustable with line height? So how do you define that if you are using the bounding box to measure? Im so confuse with this for a pretty long time, please explain. Thank you
@laceincission88
@laceincission88 Жыл бұрын
Same doubt, could you figure it out?
@sanketjadhav7062
@sanketjadhav7062 2 жыл бұрын
Hey please make presentations in dark background, I'm watching in the dark at night, on a oled display of the phone, the white just pops out too much. Love the video, all the best. I'm your subscriber now
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Hey Sanket, Actually I was recording the older videos on darker background, but after a few subscriber complained of it being harsh I switched to light theme. Guess will revert to dark theme as I personally like it as well✌️
@sanketjadhav7062
@sanketjadhav7062 2 жыл бұрын
You can try pastel or beige color, it's more soothing to the eyes.
@WizardOP276
@WizardOP276 2 жыл бұрын
sir jese ki apne kaha ki icons bhi 8 ka divisible hona chahiye toh sir ek doubt hai jo software mai H and W hai usme kesa present karna hai like jese 8x2= 16 so H=16 and W= 16 karna hai ya phir H=8 and W=2 karna hai? konsa wala apply karna hai sir?
@sakshigupta3079
@sakshigupta3079 2 жыл бұрын
you really taught it in very easy way . Really helpful
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Glad it was helpful!
@ismailtajudeen805
@ismailtajudeen805 2 жыл бұрын
Thank you Akash for this wonderful video.
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
I am glad it was helpful✌️✌️
@ashishmishra238
@ashishmishra238 2 жыл бұрын
Waited for this 💥, thank you for sharing with us akash!
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
More to come!
@talhashaikh1435
@talhashaikh1435 Жыл бұрын
nicely and cleary explain
@judecruz1565
@judecruz1565 2 жыл бұрын
Say I am designing a UI with cards and have the width of the 1x device say an iPhone i.e. w-375points (not exactly an even number) how would you centre a card in this do you use the gutter sizes for the cards and grid for UI elements that are left-aligned only ? loved the NFT video BTW !
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Hey Jude So for artboard sizes that are not divisible by 8, we follow the same approach. You have to understand the absolute length of UI elements doesn't matter in app design.what matters is relative spacing between the UI elements and that should follow the 8pt system. You leave the 16pt margins from the edges regardless and make sure all the margins and padding between elements follow 8pts system that it. For eg What's the exact length of button is irrelevant. I will make some content on this soon :)
@judecruz1565
@judecruz1565 2 жыл бұрын
@@AkashYadavUX yeah, cool that makes sense, i guess I will have to try it out in practice a few times with different elements, thanks
@NoContentVlogs
@NoContentVlogs 2 жыл бұрын
Hey! This is awesome! But i have one problem. My Shape/objects/components is snapping only to a pixel grid (Snap to pixel grid) not Snapping to my custom grid that i have created?? why?? Help me with this!
@laceincission88
@laceincission88 Жыл бұрын
Learned a lot but I have a doubt, do we align based on the bounding box OR rather as per the elements inside the bounding box?
@AkashYadavUX
@AkashYadavUX Жыл бұрын
For no text elements align by bounding box. For text, Figma has a setting to trim the bounding box to x height, use that for more precise layouting✌️
@rakshaslog3058
@rakshaslog3058 2 жыл бұрын
Hi Aakash, thanks for explaining it so smoothly but could you explain the columns and rows, gutters and margin system used by designers?☺
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
That's literally comming in my next design system video😎
@rakshaslog3058
@rakshaslog3058 2 жыл бұрын
@@AkashYadavUX thanks would be waiting for that 😀
@saiviswanath396
@saiviswanath396 2 жыл бұрын
Thank you akash 💥🔥
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Welcome 😊
@JRipz
@JRipz 2 жыл бұрын
Is there a video you have on grids for desktop?
@playpiano2264
@playpiano2264 Жыл бұрын
Hi Akash! I always use auto-layout for all my design components with the multiples of 4&8 in padding, margin and other spacing. So do I need to implement this as well for my mobile screens?
@AkashYadavUX
@AkashYadavUX Жыл бұрын
i am not sure if i understood your problem correctly, but 8-4 grid is only applicable for Ui elements and spacing, not the artboards.
@sashanarlie2832
@sashanarlie2832 2 жыл бұрын
Thank you so much! This was very informative! I learned something that I will use and take with me from now on. Does this apply to web design layouts as well?
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Hey Sasha! No the grid system is only for app designs there is a different framework called "Column layouts" for responsive web design. i will explain that in upcoming videos🤓🤓
@priyanshunegi02
@priyanshunegi02 Жыл бұрын
Can you make video on 4 col and 12 col grid?
@AkashYadavUX
@AkashYadavUX Жыл бұрын
Sure! Will work on this :)
@ajithr1458
@ajithr1458 11 ай бұрын
Useful content, thank you
@vishal.thakur
@vishal.thakur 2 жыл бұрын
Nice informative video. Thanks!
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Glad it was helpful!
@AliceS-uk6ng
@AliceS-uk6ng Жыл бұрын
Great video!!
@whimsical.me1
@whimsical.me1 Жыл бұрын
very nice video thanks a tonne man
@WizardOP276
@WizardOP276 Жыл бұрын
Does this same 8point grid applies in websites?
@AkashYadavUX
@AkashYadavUX Жыл бұрын
No! 8pt grids are not ideal for website design. for website we use column layouts, specifically 12 column layout. I have talked about this here kzbin.info/www/bejne/oaOXqoOLZq54paM
@jericoherrera1331
@jericoherrera1331 2 жыл бұрын
Thanks for this !
@jasmines6768
@jasmines6768 Жыл бұрын
This was great thank you
@AkashYadavUX
@AkashYadavUX Жыл бұрын
You are so welcome!
@kadmieljoseph170
@kadmieljoseph170 2 жыл бұрын
Good day sir, please any recommendations on how I can be a better UI designer? although am still learn. but would love your advice... THANKS
@judecruz1565
@judecruz1565 2 жыл бұрын
I would say try recreating effects you see in the designs that inspire you, later you can learn basic principles to make them better !
@Aaron-dv2rm
@Aaron-dv2rm 9 ай бұрын
I'm leaning towards the opinion that this seems a little irrelevant considering any good designer would use a single component with autolayout to keep all measurements of it's instances consistent. I wonder if there is any need for a physical 8pt grid in figma if we are only ever manually entering measurements once when we first create the component. You can also save autolayouts to add to new components at the click of a button, leaving even fewer decisions to be made.
@anuragtiwari6393
@anuragtiwari6393 2 жыл бұрын
Thanks !
@ALLNALLProductions
@ALLNALLProductions 2 жыл бұрын
That was really informative.
@AkashYadavUX
@AkashYadavUX 2 жыл бұрын
Thanks Sanu 🤓
@bhargavpatel_
@bhargavpatel_ Жыл бұрын
Thank you bhaiya!!
@AkashYadavUX
@AkashYadavUX Жыл бұрын
😇
@v3i6v9
@v3i6v9 Жыл бұрын
4. Principle of Emphasis | Principles of design with examples
8:51
World’s strongest WOMAN vs regular GIRLS
00:56
A4
Рет қаралды 6 МЛН
Smart Sigma Kid #funny #sigma
00:14
CRAZY GREAPA
Рет қаралды 87 МЛН
Will A Basketball Boat Hold My Weight?
00:30
MrBeast
Рет қаралды 126 МЛН
Advanced Grids in UI & Web Design
9:45
Jesse Showalter
Рет қаралды 15 М.
The missing guide to grids
24:15
Flux Academy
Рет қаралды 271 М.
Master Responsive Grids (Rows & Columns) in Figma
10:17
Tim Gabe
Рет қаралды 139 М.
Using a 4pt grid system | Product Design (UX/UI) | Free Template
10:04
Baseline Grids | The basics of Baseline Grids in UI & Web Design
9:33
Jesse Showalter
Рет қаралды 109 М.
The Secret Science of Perfect Spacing
9:40
Chainlift
Рет қаралды 450 М.
Hard and Soft 8 Point Grids
7:46
Christopher Deane
Рет қаралды 23 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 835 М.
World’s strongest WOMAN vs regular GIRLS
00:56
A4
Рет қаралды 6 МЛН