9

I'm redesigning iTunes desktop app and my first version of it was designed without grids. I was told I should have had to use grid to eliminate the chaos in my design. So for 1920 x 1080 px design canvas I created grid with 20 px column size. I chose this size because the smallest icon size, margin and font size will be 20px. In such a way I will have more flexibility aligning elements having such a fine grid.
Is this a right way to do it? Is there a better grid I can use in this case?

screenshot of my design

  • 3
    It's whatever grid works for you. – Evil Closet Monkey Oct 31 '16 at 13:29
  • Are you trying to add a layout grid? – Kristiyan Lukanov Oct 31 '16 at 13:29
  • @KristiyanLukanov, yes. And I don't know which one is the best in this case. Or what grid is used designing desktop apps. Like for web Bootstrap grid is widely used. And I don't know if there are any standard grids for desktop apps – Peter Oct 31 '16 at 13:36
  • 6
    If you were told to use a grid "to eliminate chaos" the problem you likely have is that your spacings, sizes, and styles are inconsistent. Consistency in these areas will give your app a more harmonious look and help users scan the layout for the things they're looking for. You may not actually need a grid; sometimes, just picking one or two consistent spacing values helps. Also, grid systems for web evolved partly because web layout tools are paltry compared to their desktop counterparts. You may not need to limit yourself to something like Bootstrap's grid model. – Nate Green Oct 31 '16 at 14:26
  • 3
    This seems like a pure UI question better suited for graphicdesign.stackexchange.com – Devin Oct 31 '16 at 15:11
15

For the purpose of reducing visual chaos, I think you need a different kind of grid. I don’t think the issue is dividing the page into the right size of little equally sized rectangles. Rather, it’s the division of the page into a small number of large rectangles neatly laid out for the eye to scan. These rectangles are not necessarily all the same size, nor is each rectangle necessarily an integer multiple of any of the others. Basically divide your window into functional and visual regions, and size and align the regions to each other using as few “lines” as you can without compromising other effects.

For example, in your illustration, I see that the left edge of the largest image (for Cadillactica) is not aligned with the left edge of the leftmost thumbnail (of Goddess) above. Likewise, the right edge for the largest image is not aligned with the right edge of the second thumbnail (An Open Letter to NYC) above. Resize your (default) images and spacing so these things come into alignment. Margins and edges of text should likewise align with other things to minimize your lines. You want something more like:

enter image description here

The Yale Style Manual has the best guidelines I know for defining grids, even though it could use some updating for modern technology. Googling for visual or graphic design grid could yield additional resources.

Older versions of the OSX Human Interface Guidelines (e.g., 2008) used to provide specific layout guidelines to help you select the dimensions of your grid, but that content appears to have been dropped in the latest HIG. You can measure layouts in existing Mac apps to get commonly used dimensions you may want to employ.

13

You've understood wrongly

Creating a layout grid means that you have to decide how you will structure your app. Where the navigation would reside, what will be the height of the header, body and footer, how elements inside will be positioned, etc. In other words, y you have to define the skeleton of your app.

enter image description here

This is what your colleague meant when suggesting you to have a grid.

What grid system to use?

You can use whatever grid system you like, they all do the same - use CSS rules to divide the screen on areas. Use one that seems more convinient to you.

  • 1
    Both Bootstrap and Google's Material design are talking about equal width columns when they're talking about "grids". Don't you contradicting your main argument? – curiousdannii Nov 1 '16 at 3:57
  • @curiousdannii What exactly do they talk about? Please, elaborate. Responsive design means changing grid widths based on the screen resolution. Why do you need equal widths of columns, grids? – Kristiyan Lukanov Nov 1 '16 at 11:34
  • 1
    You don't need equal column widths for a responsive design, or even a non responsive design. But the thing Bootstrap and Material refer to as a "grid" is just that. – curiousdannii Nov 1 '16 at 12:55
  • 1
    Yes. When Bootstrap and Material talk about "grids" they mean horizontal column systems. That is not the only meaning of grid, nor is it necessarily the best one. My only point is that it seems very strange to use Bootstrap and Material to support your point when your main point is that the OP's colleague was talking about vertical designs with headers and footers rather than horizontal columns. You cannot use the Bootstrap grid system to specify a height. – curiousdannii Nov 1 '16 at 13:28
  • 1
    This is a good answer with the exception of mentioning Bootstrap and Material Design which detract from this answer because neither CSS nor responsive design were mentioned in the question. Their grids have strictly proportional sizes which is far less flexible than grids implemented in proper widget toolkits. – user369450 Nov 1 '16 at 14:20
0

As others have mentioned, having a fine grid isn't necessarily what you want. Think of it like a city grid. You don't have streets or walkways between every individual room in a city, do you? You don't even have streets or walkways between every building on most occasions. The city grid marks off groups larger components, and within those blocks can be many things or just a few things, but they are all demarcated by the city streets.

Now, when you lay out your grid, divide the page into a reasonable number of columns first. I suggest a total of 12 columns, as this is what most great web frameworks use, such as Bootstrap. Next, as you decide what kinds of content you want on your page, determine the number of rows you might want, but don't feel you must stick that set number. It's easier to add rows than it is to add columns.

When you add content, like an image of album art, make your content's largest dimension be the guide if it's not a perfect square. Then, visually divide that into smaller "grids" and this can help act as a guide for you to create margins around pieces of content and rows of information.

Hopefully some of these guidelines will help you down the right path. Don't get discouraged!

0

I would suggest you take a look at this presentation by Andy Clarke who will inspire you to think again about how you use grids in your design around your content:

https://vimeo.com/181110882

I would also glance through this speaker deck for some great notes on applying the golden ratio to the screen and, combining grid methods which was also touched upon the video above.

https://speakerdeck.com/malarkey/designing-imaginative-grid-systems-port-80-newport

Not the answer you're looking for? Browse other questions tagged or ask your own question.