Published on | Prototyping: From UX to Front End — Medium Ivan Tsanko

I hope someone will be helped this list. Tried to collect the most interesting systems.

Bootstrap Grid System

Bootstrap · The world’s most popular mobile-first and responsive front-end framework.

The most popular option for us. More often 12 columns with indents. Standard and simple system. Most of the interface market is built on these principles, and many of the below listed systems are created on this basis. Very quickly learn, but this grid creates an internal standardization.
Although most likely this similarity will be see only designers.

Bootstrap Grid System

Material Responsive Grid

Responsive UI – Layout

Google material design. Most designers have come across this system, it is very convenient in its essence, the guides are well described. One of the most advanced solutions on the market. But unfortunately obliges to use the systems that Google offers, but does not stop changing them 😉

Material design grid

Flexbox Grid

Flexbox Grid

Old system of block building HTML, now it is not used everywhere though it gives enough interesting variability.
Personally for me, it’s quite difficult to work with it.

Flexbox grid

Custom modular grid based HTML

There are many examples when taking the bootstrap base principles. It’s a 6 or 12-column system and designers much rework it. Change the size of individual blocks, make them unequal, and so on. It’s a trend now.

Custom grid system 100px / 200px / 300px / 400px

Crow Grid Framework

Crow v3.0 – a smart grid framework

Not very popular in comparison with other system, reminded grid constructivist posters, interesting and fresh. Maybe once it becomes very popular.
Developer twitter: kortekim

Human Interface Guidelines

Design Principles – Overview – iOS Human Interface Guidelines

Apple. Very little said about modular systems, but principles so intersting. Suitable of course, first for iOS.

Human Inter

http://ift.tt/2rG0gpY

Human Inter grid

A rather peculiar system, which is not suitable for every project. The principle is based on the golden section and the Vitruvian man. When used, one of the most important aspects is the horizontal line. Grid, which based on bootstrap.
If you want to see rules and guidelines, write to me on email: ivantsanko11@gmail.com
Developer twitter: ivantsankoart

Karl Gerstner: Designing Programmes

Karl Gerstner

A very interesting system, at the moment it is difficult to apply it to modern interfaces. I was interested reading about this system how it works and what principles. If you have desire, it’s could be very interesting realize in the modern web.

Fluent Design System

Fluent Design System

Absolutely new system from Microsoft. Today it is little known, but the presentation video very interestingly shows how they represent modern design.

<a href="http://ift.tt/2qHAQLz">http://ift.tt/2qHAQLz</a>

In conclusion, I want to say
I was happy to help you find new systems and talk about them.

Social networks
Twitter: https://twitter.com/ivantsankoart
Behance: http://ift.tt/2rFvHko
Email: tsankoivan11@gmail.com

9 best grid system for web/mobile UI was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

9 best grid system for web/mobile UI

Cool stuff, every week

More Articles