There are over 2.7 billion mobile devices. Unfortunately, the sizes of their screens change as well. When creating for a mobile device, we can use grids as an approach to how content is laid out on the screen.
Using Grids
Grids are fantastic because they create a structure that enables designers to organize information quickly.
How so? By making the site look cleaner and aligned, giving the website a professional look and feel. As well, grids can also help establish breakpoints when you’re making device-independent designs.
Breaking the Rules
You can strategically “break” the grid to emphasize valuable content.
Wayfair uses a three-column grid system.
But they break the grid at specific moments to draw attention toward certain things.
- For instance, the hero image is big, falling outside the grid area.
- This CTA is also slightly outside the grid, drawing the user’s eye
- Then, these two other sections have their grid: a two-column structure; which breaks the three-column grid but in a way that emphasizes the contents of that section.
Yes, a grid can seem rigid at first. But it does provide a set of boundaries and rules that allows users to find information quickly, and also enables designers to organize information quickly.
Good designers know when to follow the rules. GREAT designers know when and why to break them.
Grid Calculator
Let’s create a grid for a mock-up sized at 1920 pixels wide x 1020 high. First, I go to my trusty site the Grid Calculator. And enter how many columns and size. This will be dependent on you what works well. Over time, you will figure out what works well for you. Once you have your measurements, either keep these numbers written down or leave this screen up so you can refer to this when you need too.
In Photoshop
Let’s go to Photoshop and create a new document. In Photoshop, we can use the size presets under Web and select Web Large. We will choose the Artboards. If it’s already selected, there will be a checkmark. If it’s blank, then go ahead, and make a checkmark on it.
To create guides, we can use Photoshop Guide Layouts. Under View > Scroll down to New Guide Layout and enter the dimensions from the Grid Calculator. Do make sure we have selected that columns center and preview is on so you can see in real-time.
Check out the video on ‘Using Grids and Create Guide Layouts in Photoshop,’ for more detail.