Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Mikita Shcherba Edited

Need help to understand how to make Grid for differents screens

Hi everybody,


I'm new to web/mobile design and struggling with understanding of how to build the correct grid for mobile, web or desktop apps.
I'm nearly exhausted, I've searched a lot of information about the grid, but this is theory only and general information.
Do you know where i can find some useful exercises on how to make the correct grid for particular screen?
A step by step guide would be the best to understand this topic. 

 

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Preston McCauley
InVision ambassador Preston McCauley , ambassador Edited
Comment actions Permalink

Good Morning Mikita

This is actually a pretty complicated topic. The grid is often going to depend on your team and the way they want to approach design standards. The grid can also be changed quite drastically depending on the devices, and expected screen sizes you are going to be designing for. My general rule of thumb is to keep my grid simple. I use the grid mainly so others and myself can stay with in the balance of the design. There are books out there on grid design theory, some of these don't transfer over well. 

While providing a step by step guide isn't really possible because of the variations depending on your situation, hopefully this will provide some insight.

Here are a few items to keep in mind when thinking about how to approach your design grids.

  • Are you designing for multiple devices?
  • What are the base density and pixel sizes for these devices?
  • Are you designing for a responsive experience?
  • Are you working with a large team?
  • Do you already have pre-existing design guidelines (these may impact your approach on spacing, etc..)
  • Different frameworks will have different grid bases (bootstrap, foundation)
  • Not all grid types work for every permutation (especially In mobile

When using a grid think of it as a guideline to help you in making design decisions as you get further down the process. As you become more proficient you may completely design outside the grid and create variations that still provide balance and symmetry but yet are unique and not "boxy." It's important to understand how pixel density can impact your grid and design base settings (x2, x3, hdp), etc.

Here are a few more resources that are more directed at web / and mobile based design guidelines. I believe most of the Invision templates below are using a guide based system. It's always great to deconstruct some of these items to help you get a handle on where may want to take your own design. In the end I find it works best to find what suits you, your team and working style.

 

 

0

Lala Galindo
InVision ambassador Lala Galindo , ambassador
Comment actions Permalink

Hi Mikita!

I understand, I've found downloading templates help me understand better. I also found this InVision article, Designing with Developers in Mind: Guides, Grids and Frameworks, it is very helpful and helped me understand more about responsive design and grids.

Let me know what you think!

Lala

0

Mikita Shcherba
InVision ambassador Mikita Shcherba , ambassador Edited
Comment actions Permalink

Thank you for the comprehensive answer @Preston!
I will definitly follow your advices and ask this questions. I understand that the topic is complex and it is always easier to skip everything and start to design without the rules. But i really want to understand this.


@Lala galindo thank you! This is a very good article. It covers a lot in this topic. I think that one of the most right things to do is to look at the designer workflow from start to finish. Maybe then i will realize how to calculate grid and consider the necessary layout. I also think that the content plays the key role in choosing grid. If you have any usefull insights here is my skype: nshcherba

0

join the conversation

to comment, sign up or sign in.