Is Youtube following a grid system? Then why is Google Images breaking it?
History of Grid systems and their applications in UX.
Disclaimer: You can find a friendly conversational style in my articles and it is intended for the sole purpose of making learning fun.
Let’s rock and roll then.
This won’t be the first time and this definitely won’t be the last that you come across grids. It’s an amazing concept and it has been saving designers from countless troubles and obstacles they can fall into.
It’s possible that non-designers might not know about it and have never noticed it but it is always there.
Please allow me to start our journey here with these provoking statements. Pun intended. :D
“A grid system is like underwear. You wear it but it’s not to be exposed.”— Massimo
You’ll soon understand the gravity of this statement.
What is a grid system?
What if I told you that you already know the answer to this question? Won’t that be awesome? Genius you are, already.
Let’s take a quick ride to our childhood days. And we’ll take those old good roads to home.
Wait a moment! Roads?
Have you ever realised how beautifully these roads intersect with each other and take you to your destinations in the least possible time? Not just that they look good, they provide flexibility and help you navigate quickly.
Most probably because some good engineer or planner sat down with a notebook to create a well-connected network of roads.
Wait a moment! Notebook?
Remember the notebook you used in your childhood! And most of us are still using it.
Those horizontal lines which gave support to our alphabets and provided us the space to write things down are nothing but grids.
So to make my point again, this isn’t the first time. You already know a lot than you assume.
What is the history of the grid system?
I love history and I love the concept of evolution. It is because of this that we are able to connect the dots in hindsight and realise why we are standing here today.
The creators before us wanted to make good use of the canvas they had. Their goal was to put as much content as possible on a blank canvas and that too in a way that it could easily be scanned and navigated.
Here’s an interesting fact. Grid started as a helper line in the written books. Basic questions were needed to be answered so that books could be mass-produced to meet the needs of a printing revolution and then advertising revolution.
Where to start the writing from?
What should be the scale of headings and body?
How to divide the page into different sections?
The grid system was the answer to all of such questions and it kept evolving with new requirements.
Movements like the Bauhaus and the Futurists investigated the use of grid systems, and how to play within these constraints
There were some great creators who played with the constraints. Swiss Style designers like Brockmann and Gerstner took this entire grid system to new heights and they are called the masters of the modern grid system.
Why do you need this grid system?
There is no surprise if I say that alignment brings aesthetics. Probably you have heard of knolling — the art of putting things are right angles. Just look at the picture below and you would understand what I’m talking about and.
This trend of knolling is exploding in photography these days.
Of course, you could counter me with wabi-sabi and similar concepts but let’s keep it for another day.
Grid systems are foundations for our designs. They allow us to create designs that not just look better but feel better. Just like the notes of music which aren’t random, grids create a perfect rythm for our designs.
We can play with the layout and other design elements to create something magical but the grid system holds everything together.
We need the grid system for a structure and framework to build upon.
What are the components of a grid system?
Let’s make it very simple for you. Imagine that you have a digital canvas and you would like to place three images on it, equally spaced. How would you do it?
Take a moment and think about it.
Column
Modern standard are to follow 12 columns grid system.
Gutter
It’s the spacing between these columns
Margin
Space between the edges of the canvas the body of columns
I’m sure that you thought about all of them while completing the above task.
What are the different kinds of grid systems?
Though it’s not important to know about all of them I think it would be a good idea to take a quick glimpse of it.
The most basic and simplest of them are the baseline grid and the manuscript grid. And they are used only to define the margins and vertical spacing.
If we take a step ahead, we would come across a column grid system and a modular grid system. They are what the name says, so it is better to visualise them.
But what about those designs which do not fit into these grid systems? You must have seen a lot of interesting concepts in magazines and on web too that seems as if they don’t belong to any of these above grid systems.
For them, we have a hierarchical grid system.
A hierarchical grid is described by not having equal spacing between modules.
You can use any of these grid systems to create balance and alignment in your designs.
Is Youtube following a grid system?
I’m sorry that I kept you waiting for this. But my intention wasn’t only to answer this question as yes or no.
I would be glad if you can figure that out by just having a glimpse at Youtube interface. It would mean that I’m successful at making you learn a few new things.
Why don’t you open Youtube right now and see it for yourself?
Wait! You don’t have to do that. You might go there and never come back to finish this. :D
I’ll put the screenshot here for you with the grids and everything.
You must have noticed that you the videos are aligned and follows a modular grid. But what about the filters on the top? They don’t seem like they are aligned with the grid.
Let’s talk more about that in Google Images.
Why is Google Images breaking the rule?
Again, Goggle images won’t be the first one to break the grids. There have been others who went off the grids (pun intended) to discover something new.
Just have a quick look at this.
Do you see any column grids here?
Yes! The one in yellow. So it seems they aren’t using grid system.
No! They are. They are using the baseline grid systems. The one in green. I didn’t mark all the baselines intentionally but you could easily trace it.
It often depends on the kind of content you want users to consume. Google Images need to deal with a lot of different images sizes and they had a critical question to answer.
Would it impact the user if they crop the images to fit the standard aspect ratio?
And they realised it’s not cool to do that. So they decided to not follow column grids. They did the same for filters above and every other component on the top.
But they strictly followed the baseline grid system with good use of margins and gutter space.
With this, I hope that you are all set to use the grid systems in all aspects of your life.
One more thing…
Yes! I would like you to realise that constraints give us the freedom to be creative. It’s good to know the rules before you break them like a gladiator.
I’m going off the grids now. See you again soon with something exciting to learn :)
Continue reading…
UX crash course
