Learn The Difference Between UX Design & Product Design 👉 kzread.info/dash/bejne/g6WVxbuGmLXMZ7w.html Yours truly, Mizko

I apologize, I realised I was referring to margins as gutters and gutters as margins 😂 Explaining, calculating and filming at the same time can be a little tricky sometimes!

@hanaofangel

2 жыл бұрын

it's ok :) We got the gems 💎 in between

@Pollllz

2 жыл бұрын

New subscriber and loving your videos. I totally got what you meant despite the gutters/margins mix up 🤪

@lexib9516

2 жыл бұрын

No worries..I understood what you meant 🤣

Legend!!! Should start calling you Mizko Edison for all the light bulb moments!!! 😁💡🌈

@Mizko

17 күн бұрын

Please do 😂

I guess the important takeaway from this video (for anyone who may misinterpret it like I did when I first learnt this concept) is that we don't need to focus on the exact pixel values (329 or 332) when it comes to width. Because like mizko said, width of elements will be dynamic at different viewport sizes. You should rather focus on choosing what margin and gutter space you want to apply. Because in responsive layouts, your columns are dynamic but your margin and gutter remain static

@Mizko

2 жыл бұрын

100% responsive layouts are 'fluid'!

@harshitjoshi3082

Жыл бұрын

I remember seeing 2 classes with names container and container-fluid never really understand the purpose...

This was insanely helpful. I knew I was missing something in my designs, and now I'm going to go back and calculate new distances for all my elements. Thank you!

I spent the week+weekend with your marvelous Figma course. I didn't understand why it's 329px at the beginning, but now it's clear. Finally, it makes sense why I had a Mathematics degree and why I wanna be a designer, thank you! :)

Bro, I have 4 years of experience but always struggled with those numbers. Your step by step guide made all of this more simple to me!

OMG THANKYOU for this explanation. This has helped clear up so much about grid planning for me!

Thank you! This is the best way to explain vertical grid.

Thanks for explaining your point easily

I spent the weekend watching your youtube videos, They are crucial to me.

Now I learned the mechanism behind the responsive grid layout. Kindly teach the 'framer' prototyping tool.

I just watched this, and damn, I'm impressed!!!!!!

That was awesome. I have learned so much from you

That's definitely useful, never think of these guides this way

@Mizko

2 жыл бұрын

Thank you Miqdam!!

Awesome!

Great video! I saw the same Marvel movie, it's great!

Thanks man.

Seen Shang Chi too. Loved it!

@Mizko

2 жыл бұрын

Ha! It was the perfect balance of culture, entertainment and marvel legendary-ness. Thank you for being a TRUE SUPPORTER!

Thank YOU!!!!!

Great video!! This past weekend, I got a chance to visit a new zoo for a seven year old's birthday celebration and I also posted my first UI design project (my General Assembly final project). I have not watched Shang-chi yet. I've heard really good reviews but I may wait for it to be on Disney+ since I don't think it's in theaters near me anymore.

@Mizko

2 жыл бұрын

Thank you! Oh, congrats! What a splendid weekend. It's definitely worth the watch and thank you for being a TRUE SUPPORTER!

Hi Mizko, very nicely explained. Can you please help me how to set up the grids for desktop 1366 px? Also tell. me when creating side navigation, will it be the part of grid system (12 column) or after making the side navigation around 72 px or 256 px and then the rest of the available space has 12 column with offset 79 px? I am confused. Please help

Thank you so so so much !!

@Mizko

2 жыл бұрын

👌🏼

Love your thumbnails 👌

@Mizko

2 жыл бұрын

Haha! Thank you Prip you legend!

Genious!

What about when we have a side navigation menu. How do we do the responsive grid @Mizko

Hello @mizko, is there a rule also regarding accessibility for grids and breakpoints? Thank you very much in advance!

Hi, I am building my first saas application, it's a booking system but I wanted to know how do you decide how many columns something like that should have and is there a process you go through when deciding on the amount of columns. I have read that for complex saas applications with dashboards, sidebars, graphs etc that people start with 20 sometimes even 30 but I am struggling to understand how this is decided.

Explained well

@Mizko

2 жыл бұрын

Thank you Rohan you legend.

this is where you start to understand the level of people's real education )

wow would like to know more on App responsives

Loving your videos man! With responsive design - how do I make it so when I alter the width of the main frame (essentially a viewport), an image will keep its FULL aspect ratio? So when the viewport width increases, the width and height of an image increases? Thanks

@Mizko

2 жыл бұрын

You can maintain the width by using constraints of background images in shapes, but you can't increase the height yet. I'm sure there will be an update coming in the future.

@sonareclipse9810

2 жыл бұрын

@@Mizko Ah I see. That’s a bit of a bummer! So essentially, if I want an accurate responsive design … I have to keep resizing the images?

Off-Topic: After Avengers End Game movie Shang-Chi is one of the best movies I've ever seen. What a visually works on it! Just mind-blowing

Hey Mizko, thanks for showing us the math behind the grid layout. There was something I wasn't sure about though. Why set the grid to stretch instead of center? Thanks for your feedback.

@Mizko

Жыл бұрын

Stretch = Responsive because it will always stretch and constrain the the edges. Center = If you want your content to be centered of the page. You can choose either, depending on what type of layout you want to achieve.

@sonoftroy8572

Жыл бұрын

@@Mizko Thanks, I'm currently using Figma to create my portfolio. I never noticed that in the settings. Your video helps me better understand Figma's layout system.

want to know about types of layout used for web, mobile ,table can you make a video on this topic

Thanks Mizko. The basic question I ponder upon is - Is there any logic in choosing the margin & gutter spacing ? Why did you choose them 32 & 20 respectively ? Can we just choose any number ?

@ST-fl5fy

2 жыл бұрын

You can the container can be any size

I have a question about the page/section height. When I watch design videos, most often when designing for desktop screen sizes designers use a 1440x1024 frame however the actual viewport height of the browser is usually significantly less. As a developer I can either make the section vertically responsive and make each section fit perfectly into the vh(viewport height) or keep the height pixel perfect to the design and just accept that on many devices the bottom of the hero section for example would not be visible until the user scrolls down. I am a developer with a some design skills but I'm very green In web design so I imagine this may be obvious for some however I was curious if there was a concrete/industry standard solution or if this is more of a judgement call.

can you explain how to use layouts on diffrent websites or mobile or tablets

Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.

OK lets learn

@Mizko

2 жыл бұрын

Let's go!

💯🔥

@Mizko

2 жыл бұрын

⚡️

Isn't 20px space between the columns too small for you? I use 51 because if I put paragraphs next to each other, 20px space between them horizontally is too close.

Shang chi was good 😌 I’ve been to the theater a few times in the past couple months

@Mizko

2 жыл бұрын

Woo! Thank you for being a TRUE SUPPORTER 🎁

Is it okay that width of column is a decimal number?

You could simply design the container at 1200px. Everything is 8px grid. The container can be any size.

but this completely depens on the size of the gutters right?

it's not better to have 24px gutter+outside margins, to avoid decimals ?

👍 👍

I think you shuffled gutters and margins at around 4.20. 11 Margins? Those are actually gutters and you can have only 2 margins. Cheers to Legendary Designers!

It's not rocket surgery xD

Are you telling me you would rather do all that math then to take a rectangle tool and place it over the first 3 columns to get the width??? 🤔

@Mizko

2 жыл бұрын

My student asked 'Why'. Showing 3 rectangles doesn't tell why, it shows what the width is.

5m0lh1 #von.ngo