Maintaining 4/8px consistency with odd elements.

almost 2 years ago from Anmol Bahl, UX Designer - Feminist | Say hi@anmolbahl.com

  • Raphael LoderRaphael Loder, almost 2 years ago

    What you're describing is a rigid, "hard" grid, where each element sits perfectly on the underlying grid. Doable in your design software by cheating a bit, but since it's also not really technologically feasible, I'd advise against it.

    It would be better to use a "soft" grid, where you space your elements relatively to their position, rather than rigid.

    Here's a quote from spec.fm about the 8-Point-Grid:

    There are actually two prominent versions of this system. One that places elements into a system-displayed grid defined in 8-point increments (we’ll call this the “Hard Grid” method) and another that simply measures 8-point increments between individual elements (we’ll call this the “Soft Grid” method).

    The primary argument for the Hard Grid method is that by using additional transparent background elements and then grouping them to small groups of foreground elements, you can keep track of margin and padding on a per-element basis and just snap these containers to the grid like bricks. Material Design - where everything is already designed to a 4pt grid - naturally conforms to this method.

    The argument for the Soft Grid method is that when it comes time to code up an interface, using an actual grid is irrelevant because programming languages don’t use that kind of grid structure - it’ll just get thrown away. When the speed at which you arrive at a high-quality, programmable set of mockups is a priority, bypassing Hard Grid’s extra overhead of managing additional layers in favor of Soft Grid’s more fluid, minimal structure can be an advantage. This also can be more favorable to iOS where many system UI elements are not defined by an even grid.

    By cheating I mean you could use 0% opacity rectangle layers as background elements and draw 1px shadow or inner shadow. This way the group will remain the "right" size, but you'll have your divider in there.

    Area17, for example, solves this "problem" similar to this, just by setting lines off by 1px:

    Image listing with 1 pixel horizontal separation lines → Lines are on the 5 x 5 pixel grid which creates asymmetric spacing above and below the lines (like 30 versus 29 px). Here it is possible to “cheat” and forget about 1 px spacing difference, rather keeping the content on the 5 x 5 pixel grid. This is easier to work with and developers will know the space should be the same.

    7 points