How to UI Design WITHOUT Grids Like a PRO

[@osaroadade]

I love when you do deep dives like this. I would like to recommend visbug (a chrome extension) for any designer who wants to quickly perform UI audits or any kind of changes on the web without having to interact with the inspect element.

[@jameshskim]

Love this extension! I've tried similar tools in the past, but this is the best one yet!

[@billa5438]

hello i tried to this extension but when i click on it nothing happen

[@elusive5884]

This could be a matter of semantics, but I wouldn't consider this designing without a grid. It's just not a traditional 12/16 column grid that was so prevalent on the web for many years. I understand developers may not interpret it that way, but from a visual design perspective this is still a grid. It's just an unequal 3 column grid. Anyway, still enjoyed the video! 👍

[@majorDarkMonkey]

It's not a grid. Cause the developper won't use any grid.

[@elusive5884]

@@majorDarkMonkey From a design perspective, it's somewhat irrelevant if a developer uses a bootstrap grid system, flex box or magic to construct a page. Mizko spends the first 8 minutes of the video defining the perimeters of this responsive asymmetrical 3 column grid. So this is not designing "without" a grid.

[@Mizko]

Glad you enjoyed it! Yep, I think it's semantics. I'm referring to Strict, traditional 12 col grids as mentioned in the previous video about UI grids.

[@chidorirasenganz]

@@elusive5884 yeah it seems more of a discussion of hard grids vs soft grids

[@miracleolumor2628]

Hey Michael... I'm sending a truckload of thanks and love all the way from Nigeria. ❤️❤️ I stumbled on your course on Google and I'm getting it soon cos I'm new to UI design actually. Can't wait to be your student. Great contents you put out here man. I love and appreciate you Mizko. 💞

[@luongkhai6435]

This is exactly what I had thought when he said that we don't need columns system to do the web layout. Long time ago we don't have CSS that much powerful as today, so people stick to the 12-col layout. Of course, with Flex and Grid display, we don't really need the 12-col layout to make complex and fully responsive web layout. Grid and Flex are so powerful (display: grid; and/or display:flex;)

[@fqras]

I usually use percentages based on flexbox. I’m not a big fan of set pixels when everybody uses a different screen.

[@fqras]

Its actually already very old. I learned it when I was still in school over 5 years ago.

[@Mizko]

You can create breakpoints as well

[@chidorirasenganz]

Max width and percentages accomplish the same thing in implementation as the pixel value is flexible until it reaches a maximum value. Plus screen sizes/aspect ratios are pretty standardized nowadays

[@Underhills]

Guess I share the Dave Carson take on this. Gridniks tend to confide themselves in the grid, it doesn't release any spontaneity or flexibility. That's applicable to digitale work as well as tactile. There's stuff like tension and asymmetri you miss out on if your only looking to grid support. It becomes a crutch more than an aid. I've never used grids for anything although I've been a designer for a very long time, doing work in all industries. You can offer predictability and stability to developers and end users without grids. Grids are different to conventions and good practice. The latter will always be an important factor. You can use imagination and be within conventions.

[@jameshskim]

Great video! I love how you are leveraging the whiteboard more. Also, I would've thought the whiteboard had wheels so you don't have to lift the massive thing haha.

[@Mizko]

Hahah! It does have wheels, but I have a rug and it got clipped 🤣

[@farshadamirshoghi9323]

Thank you Mizko, it's amazing

[@DeignFilx]

Display grid on large containers and inside i would use flexbox.

[@1deplatt]

Very cool and useful info. What I usually do is create a grid in Figma and then break it when I need too, which I believe amounts to the same thing you're talking about here. Spacing tokens sounds like a good idea, the logical next step would be for Figma to incorporate them into the UI. Without Figma doing this, I see the need to create spacer components (pain in the ass). What do you think?

[@Mizko]

You can check out Figma Tokens - www.figma.com/community/plugin/843461159747178978 this might help :)

[@osaroadade]

@@Mizko Can you do a tutorial on this on this and similar topics?

[@samirfarid5539]

Great Video Mizko!

[@Mizko]

Thanks Samir!

[@robynbieber6312]

Brilliant!

[@sarapachontorre6926]

Thanks a lot, your videos help me a lot Mizko 🥳💗. You are such a great teacher.

[@alexlneto]

Interesting :) How would this concept work on layouts without the fixed side menus? And also, how can we scale down what you showed on the video, so its consistent on different breakpoints? Thanks for the videos, cheers Alex 🤝

[@Mizko]

Hey Alex, Glad you enjoyed it. I actually skipped an important part to keep the video as short as possible. Twitter uses 'max-width: 600px' for the main content area. Max-Width defines the maximum width of an element, but not the minimum. So that means when you scale the viewport narrower, the entire container starts to slowly collapse. What this means is that you can keep the other sidebars fixed as the middle content adjusts to the viewport. However what you will notice is that at a specific breakpoint, Twitter collapses the left menu into just icons.

[@tuams]

I really like these educational videos!

[@nehagupta5256]

Great videos

[@katherinegaspare1569]

Love this video... I have 1 question how can we know when to use grids in a project?

[@chidorirasenganz]

Always

[@megakillowning]

This is not a good example. Twitter doesn't need a gridding system since the layout of twitter is just 2 sidebars, and all the tweets in the content container follow the max width of the content container. You don't need a gridding system in the first place. Because the purpose of the gridding system is to provide consistency with the spacing and sizes "within" the content container.

[@siddarthasarkar9564]

How do we translate this into tablet/mobile view ?

[@artit91]

flex is for layout, grid is for grid :3

[@mikeparkerf3]

In the last 7 years Ive never used grids, never needed to and has had zero effect on my work

[@Mizko]

What's your split between web and UI design?

[@anasraza277]

I always use grid but this way isn't bad.

[@Mizko]

🙏

[@njengathegeek]

I can't go anywhere without grids,

[@DeepfriedBaby]

I hated grids from the beginning.

[@osajeyfo]

3rr comment

[@Mizko]

Niceeeee!

[@dilankamadushan9736]

Great Video