{"id":13571,"date":"2017-11-20T11:18:26","date_gmt":"2017-11-20T11:18:26","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13571"},"modified":"2020-12-21T06:14:10","modified_gmt":"2020-12-21T06:14:10","slug":"better-grid-systems-ui-design-tools","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/","title":{"rendered":"Better Grid Systems in UI Design\u00a0Tools"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the first part of this article, \u201c<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/p\/are-grid-systems-still-relevant-in-digital-407beb4128c1\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Are Grid Systems Still Relevant in Digital Product Design?<\/strong><\/a>\u201d, I took a look at the history of grid systems and their practical advantages. In short: grids are still useful for interface design, but the screen is much more complex than the printed page, as both the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@ryanwlucas\/grid-systems-in-ui-design-407beb4128c1\/#ace1\">output media and content are highly variable<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">So what\u2019s wrong with grids in UI design\u00a0tools?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Software developers have tools to help manage screen layout complexity: constraint systems like iOS\u2019 <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/UserExperience\/Conceptual\/AutolayoutPG\/\">AutoLayout<\/a> and Android\u2019s <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.android.com\/training\/constraint-layout\/index.html\">ConstraintLayout<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexbox<\/a>, and even grid-specific frameworks like the upcoming <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/gridbyexample.com\/examples\/\">CSS Grid<\/a>. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But layout decisions should be made by designers, not delegated to developers. They\u2019re critical to the form and function of an interface. <\/strong>Designers must be able to explore the consequences of grid layout decisions visually, not just in code.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/tools.subtraction.com\/interface-design.html\">75% of interface designers<\/a> primarily use Photoshop, Illustrator, or Sketch. Each of these tools was created around the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/viljamis.com\/2017\/design-tools-processes\/\">metaphor of the page<\/a>, not the screen. Unsurprisingly, the methods for working with grids in these tools are <em>also<\/em> based on the print tradition. For digital product designers, this leads to some big pain points in everyday use.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Responsiveness<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To create a grid, you typically set parameters like total width, number and width of columns, gutters, and margins:<\/p>\n<div id=\"attachment_6580\" style=\"width: 1410px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ubaKD_TgW9wTh09chSlgeg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ubaKD_TgW9wTh09chSlgeg.png\" alt=\"Sketch and Photoshop\u2019s grid\u00a0controls\" width=\"1400\" height=\"1142\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Sketch and Photoshop\u2019s grid\u00a0controls<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This creates a grid scaffold that is drawn as a set of guide lines on top of the artboard. Elements can then be manually snapped to these guide lines:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/207977677?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F40c36a7313f00d49ae6678b7911e96fd%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Print-legacy grids: <\/strong>in existing tools, grids are just visual guide lines to which elements can be snapped.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This works fine for print. The designer knows that their publication is going to use, say, the A4 paper size. But what happens in digital, when you need to simulate a different device size? Changing the artboard dimensions means that the grid either is either too big or too small:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/207978164?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fea32311f6cba9ff8de9f9ca117c5a657%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">No responsiveness: <\/strong>resizing the artboard in existing tools doesn\u2019t resize the grid.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The most common workaround to this problem is to create multiple artboards, each corresponding to a unique device category, like smartphones, tablets, and desktops. Individual grids can then be created separately for each device\/artboard:<\/p>\n<div id=\"attachment_6580\" style=\"width: 1410px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/15E2CIUjbiiVgzXECgiW-RQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/15E2CIUjbiiVgzXECgiW-RQ.png\" alt=\"creating grids for a few different device sizes can help, but details still fall\u00a0through.\" width=\"1400\" height=\"608\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Simulating responsive: <\/strong>creating grids for a few different device sizes can help, but details still fall\u00a0through.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is a pretty lousy simulation of output media, though, as it only represents three potential device resolutions. (In the above example, it\u2019s the iPhone 7, the iPad, and a 13\" Macbook Pro.) Are the grid decisions still sound on a Google Pixel or an iMac 5K? What about in landscape orientations or <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/codemotionapps.com\/wp-content\/uploads\/2015\/11\/sizes.pdf\">split views<\/a>?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Working with only few fixed grid configurations makes it easy to miss problems while you\u2019re working. Either the developer will find them during implementation \u2014 necessitating a lot of annoying back-and-forth \u2014 or the broken layouts will end up in your final product.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Propagating changes<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the influential <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.amazon.com\/Grid-Systems-Graphic-Design-Communication\/dp\/3721201450\"><em>Grid Systems in Graphic Design<\/em><\/a><em>,<\/em> <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.historygraphicdesign.com\/the-age-of-information\/the-international-typographic-style\/258-josef-mu-ller-brockmann\">Josef M\u00fcller-Brockmann<\/a> calls for grids to be specified at the start of a project, <em>before<\/em> any page layout occurs. In fact, M\u00fcller-Brockmann suggests knowing all the variables of a project before specifying the grid:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"Before work can begin [\u2026] questions regarding the format, the text and illustrations, the typeface, the printing method and the quality of paper must be cleared up.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These variables, of course, can have an impact on the grid system. For example: reading distance influences font size decisions and font sizes impact column widths and row heights. In print, these variables are knowable and don\u2019t typically change. A book doesn\u2019t suddenly become a newspaper.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So it\u2019s not surprising that print-legacy visual design tools were never designed to handle these kinds of changes. Subtracting a few units of width from the gutters\u2014or adding in a couple more columns\u2014means that you have to manually realign all elements to the new grid lines:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/207978777?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Ffb638ecad3f386350e7c33f0d4fd8dab%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pixel pushing:<\/strong> in existing tools, changing the gutters or adding columns means manually realigning every element.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For UI designers, grid changes are often necessary. <\/strong>It\u2019s just not possible to account for every output and content variable before starting visual design.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Furthermore, while print projects are complete when they go to press, software interfaces are never \u201cfinished.\u201d They\u2019re constantly being iterated and improved.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As shown above, though, a simple change to the grid means manually realigning every element in a design. Multiplied by hundreds of screens, a grid change can mean hours (or days) of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/subform\/hey-ui-ux-designers-stop-pushing-pixels-892b972ebfa6#.6gthoire0\">miserable pixel pushing<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Experimentation<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When constructing a new grid, M\u00fcller-Brockmann would make small hand sketches of potential configurations. The technical difficulty of the process was apparent even to him:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cIn sketching a grid, care must be taken to ensure that the sketch corresponds as closely as possible to the proportions of the final printed format. [\u2026] Only in this way is it possible gradually to acquire the ability to produce, even in very small sketches, typographic patterns which are realistic, i.e. which can be transferred to the final format without difficulty.\u201d\u00a0\u2014 Josef M\u00fcller-Brockmann, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.amazon.com\/Grid-Systems-Graphic-Design-Communication\/dp\/3721201450\/ref=pd_bxgy_14_img_2?_encoding=UTF8&amp;pd_rd_i=3721201450&amp;pd_rd_r=RMFAT4E8ZC6BK2G1EZ2J&amp;pd_rd_w=WcFhP&amp;pd_rd_wg=0AVpv&amp;psc=1&amp;refRID=RMFAT4E8ZC6BK2G1EZ2J\">Grid Systems in Graphic Design<\/a>, pgs. 94, 49<\/span><\/p>\n<div id=\"attachment_6580\" style=\"width: 2010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ns8TDWJ8LpDM15KiANeh_Q.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/11\/1ns8TDWJ8LpDM15KiANeh_Q.png\" alt=\"Some of Joseph M\u00fcller-Brockmann\u2019s hand sketches from Grid Systems in Graphic\u00a0Design.\" width=\"2000\" height=\"684\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Some of Joseph M\u00fcller-Brockmann\u2019s hand sketches from Grid Systems in Graphic\u00a0Design.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Of course, this was the only means for M\u00fcller-Brockmann to cheaply experiment with possible grid layouts: he didn\u2019t have access to the computer in 1981. It\u2019s pretty puzzling, though, that nearly 40 years later, computer-based design tools <em>still<\/em> don\u2019t facilitate this sort of experimentation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Much of the time, you quickly want to divide up some elements across the available space, either evenly or in proportion. This is a grid like any other, but defining a grid scaffold to do this feels premature in the early process of exploring layouts.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Time to break out the calculator. Get the width of the containing space, subtract the number of gutters multiplied by their width, then divide the remainder by the number of elements. Draw an element with the result, duplicate it for each column, then distribute all of them evenly:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/207979756?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F1f439aeb64ee92e56b6324e953a9b75b%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Doing maths: <\/strong>dividing up available space equally in existing tools is tedious.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is straightforward enough, but <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">manually doing calculations like this doesn\u2019t keep up with the speed of thought.<\/strong> When you start asking questions like \u201cwill it be too small if I put 8 photos on this row instead of 6?\u201d, doing the maths each time is tedious and discourages quick experimentation.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What might better grid tools look\u00a0like?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All of these pain points lead to one conclusion: UI\/UX designers need better ways to work with grids during visual design. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/lynaghk\">Kevin Lynagh<\/a> and I have been working on some solutions in our UI design tool, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/subformapp.com\">Subform<\/a>. Let\u2019s look at the principles (and examples) that we\u2019ve come up with thus far. (All of these demos were recorded directly from Subform.)<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Grids should be responsive by\u00a0nature.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For grid systems to work across lots of different devices, you should to be able to specify values in flexible percentages and proportions, not just exact pixels.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These values allow you to build a simple responsive grid very quickly, without doing any arithmetic. You simply set a number of columns and tell each column to stretch. The columns then evenly divide up the available space, based on the width of the artboard:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Responsive grids in Subform: <\/strong>when the artboard resizes, so does the grid.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208043309?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F83b7c52bcf5743ca4a4f1c69be9e3d49%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Stretchable columns can be mixed with fixed columns, gutters, and margins. The gutters in the above example are set to 12px, so their width stays fixed as the artboard resizes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A stretchable column can also accept proportions. This opens up interesting possibilities for non-uniform grids, like specifying that one column should always be three times as wide as the others:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208045791?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F110905b38042f9e529cd094e4d24f58a%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Responsive proportions in Subform:<\/strong> a column set to always be 3 times as wide as other columns.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Working this way makes it much easier to understand how a grid will work across different device sizes and orientations \u2014 and catch any edge cases before they get passed to the development team.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Forget guides and snapping\u2014elements should have a formal relationship to the\u00a0grid.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In existing tools, the grid is just a collection of guide lines that overlay the artboard. Elements can be snap-aligned to these guides, but that\u2019s all. The elements don\u2019t know anything about their larger relationship to the grid.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The thing is, a grid <em>is <\/em>the relationship between elements. Guide lines are a visual hack to assist in creating those relationships <em>manually.<\/em> It\u2019s far better to build those relationships <em>directly.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, you should be able to place an element using a rule like \u201cstart in column 2, then span 4 columns.\u201d This can be done implicitly via direct manipulation, or explicitly by using a shorthand like 2 \/ span 4. Now when the grid changes, the elements will automatically resize and preserve their alignments:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208053895?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F6e9fcc09bf87a90fc47ce02e5d8ec9b8%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Element\/grid relationships in Subform: <\/strong>elements automatically preserve their alignments.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This also opens up new possibilities for the direct manipulation of the grid itself, like resizing gutters and columns:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208053895?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F6e9fcc09bf87a90fc47ce02e5d8ec9b8%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Adjusting grids in Subform: <\/strong>directly resizing gutters and columns in context.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Grids should enable fast experimentation.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Being able to define grids informally while working\u2014without using a calculator\u2014is also a much needed feature. You might want to add some elements to the artboard that automatically divide up the available space, then insert evenly sized gutters between them:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/207971892?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fe2a75f4df82ac5571a871645967b3122%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Informal grids in Subform: <\/strong>dividing up available space evenly, without using a calculator.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Having the design tool do these calculations on the fly \u2014 instead of painstakingly doing the math by hand \u2014 makes experimentation fast and visual. Questions like \u201chow many photos should display in a row on the smartphone?\u201d can be easily tried out in seconds, rather than after lots of painstaking, tedious pixel pushing:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208064037?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Ffe5df167ab88f73fbbe8f8a067173b7d%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Two-dimensional grids shouldn\u2019t be overlooked.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Column grids cover a lot of use cases, but many layouts require both columns and rows, similar to M\u00fcller-Brockmann\u2019s modular grid. You should be able to describe elements in both of these dimensions: \u201cHorizontally, this element should start in column 3 and span 2 columns. Vertically, it should start on row 1 and end on row 2.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208069715?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F357874307747ba3b17d9e518208b6eb4%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating 2D grids in Subform: <\/strong>Elements can be described across both rows and columns.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As with one-dimensional grids, resizing the grid in either direction automatically reflows the content. Subform can also calculate changes to the grid, like adding gutters, in real-time:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208068036?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fae3433db6f55a0cfd223386e21c26142%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Manipulating 2D grids in Subform: <\/strong>element relationships persist, even when the grid is changed.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Anything should be able to contain a\u00a0grid.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Existing tools only allow a grid to be defined for the entire artboard, but that\u2019s an arbitrary boundary. Grids are helpful to solve lots of design problems, not just screen-level layout.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Any rectangular element should be able to contain a grid. A table, for example, might need a separate grid structure from the screen it lives on:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" id=\"player\" src=\"https:\/\/player.vimeo.com\/video\/208068036?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fae3433db6f55a0cfd223386e21c26142%3FpostId%3D495dc35c5791\" width=\"700\" height=\"350\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The ability to use multiple grids and nest them also opens up a lot of creative expressiveness for the designer. (Karl Gerstner did some <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/thinkingform.com\/2011\/11\/28\/thinking-capital-magazine-no1-designed-by-karl-gerstner\/\">pretty cool work<\/a> with multiple overlaid grids for Capital Magazine in 1962.)<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While building Subform, Kevin and I are constantly exploring how we can create a tool that maintains the immediacy and expressiveness of visual design, but adds the dynamic power of computation.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/worrydream.com\/MediaForThinkingTheUnthinkable\/\"><em>Media for Thinking the Unthinkable<\/em><\/a><em>,<\/em> Bret Victor proposes that to think about complex systems, new representations are needed \u2014 representations more powerful than the paper medium. The representations that we\u2019re developing for grid-based layout are, we hope, a step in the right direction.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And perhaps they\u2019re even something that Joseph M\u00fcller-Brockmann might recognize: design tools for the \u201c<em>clearly intelligible, objective, functional, and aesthetic quality of mathematical thinking.<\/em>\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re interested in learning more about Subform, our UI design tool, <\/strong>check out the website. And be sure to sign up to get early access and receive occasional updates like this article.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/subform\/better-grid-systems-in-ui-design-tools-495dc35c5791\">Ryan's Medium page<\/a>. <\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/4px-baseline-grid\/\" target=\"_blank\" rel=\"noopener noreferrer\">The 4px Baseline Grid<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/designing-styleguide-elements-building-compelling-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Designing a Styleguide: Elements That Go Into Building Compelling Products<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/lightbulb-moment-modular-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">My Lightbulb Moment with Modular Design<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/get-unstuck-design-process\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Get Unstuck in Your Design Process<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/need-ui-guidelines\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why You Need UI Guidelines?<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/design-systems\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design Systems<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In the first part of this article, \u201cAre Grid Systems Still Relevant in Digital Product Design?\u201d, I took a look at the history of grid systems and their practical advantages. In short: grids are still useful for interface design, but the screen is much more complex than the printed page, as both the output media and content are highly variable&#8230;. <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":187,"featured_media":13573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-13571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Grid systems are still useful for interface design, but the screen is much more complex than the printed page, as both the output media and content are highly variable.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Better Grid Systems in UI Design\u00a0Tools | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Grid systems are still useful for interface design, but the screen is much more complex than the printed page, as both the output media and content are highly variable.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-20T11:18:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-21T06:14:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1bWwRZ4TRmoYa7jlM2Lve8Q.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"602\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/11\/1bWwRZ4TRmoYa7jlM2Lve8Q.png\",\"width\":2000,\"height\":602},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\",\"name\":\"Better Grid Systems in UI Design\\u00a0Tools | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#primaryimage\"},\"datePublished\":\"2017-11-20T11:18:26+00:00\",\"dateModified\":\"2020-12-21T06:14:10+00:00\",\"description\":\"Grid systems are still useful for interface design, but the screen is much more complex than the printed page, as both the output media and content are highly variable.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/11e6d78fdc5d2b3c79d422240df3cb17\"},\"headline\":\"Better Grid Systems in UI Design\\u00a0Tools\",\"datePublished\":\"2017-11-20T11:18:26+00:00\",\"dateModified\":\"2020-12-21T06:14:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/better-grid-systems-ui-design-tools\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/11e6d78fdc5d2b3c79d422240df3cb17\",\"name\":\"Ryan Lucas\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79cc44de698937a2e3bf3851ef7a1c6cad14c472f4c260f77382ab7b06d40398?s=96&d=mm&r=g\",\"caption\":\"Ryan Lucas\"},\"description\":\"Industrial designer mostly pushing bits instead of atoms. Currently building Subform, a new digital product design tool. Say hi on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/187"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=13571"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/13571\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/13573"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=13571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=13571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=13571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}