A spatial system is a set of rules for how you measure, size, and space your UI elements. Uniformity on a spatial level allows your product to be more consistent, your team to communicate better, and reduce the number of decisions designers have to make in a day. As an example, notice how the login form feels when it does not have an immediately recognizable spatial pattern. To users, the design can feel cheap, inconsistent, and generally untrustworthy. When this same login form is adjusted to follow an 8pt spatial system the rhythm becomes predictable and visually pleasing.
For users, the experience is polished and predictable. This increases trust and affection for the brand. You can easily pick up where another designer left off or comfortably build in parallel. Since these decisions are also captured in the codebase you save time on red-lining for engineers.
Defining your base unit will allow you to create the scale of supported sizes in your spatial system. There is no wrong answer here as long as you are aware of what some of these directions promote and prevent. My preferred method is an 8pt linear scale for elements with a 4pt half step for spacing icons or small text blocks.
I prefer a 4pt baseline grid for my typography which means the line-heights of my font choices will always be divisible by 4. This system is meant to reduce confusion but also be easy to implement. Be reasonable about your needs as you explore building your own spatial system. Here are some things to consider:. Do you want a spacious UI with large font styles and a limited number of actions?
Do you need to build for information density with intricate data tables and multiple actions for a technical user? Survey your existing designs and create a mood board to get clarity and alignment for you and your team. Choosing a smaller base unit like 4pt, 5pt, or 6pt can open you up to too many variables in your system. It becomes more difficult to eyeball the difference between a 12pt and 16pt padding difference, which can make it hard to enforce consistency across a team. I find that 8pt increments are the right balance of being visually distant while having a reasonable number of variables.
I also utilize a half unit of 4pts for spacing icons or adjusting small blocks of text. Introducing odd numbers, like a 5pt base, into spatial rules can make it difficult to center elements without splitting pixels. For example, centering text and icons in a 25px height button could create blurry split pixels for some users. On a similar front, scaling UIs for different mobile and desktop screens that require 1. Applying the spatial scale to your UI elements can come in the form of padding, margin, height, and width definitions.
The following examples show that sometimes your paddings cannot be enforced at the same time as a strict height definition. In this example, you can see that the line-height of this text is 20px but if I used an 8px padding on the top and bottom, the button will have a height of 36px. Which measurement should I prioritize? There are two ways to address this:. In this approach, the sizing of solid elements takes priority when matched to your predetermined spatial system..
This includes things like buttons and form inputs. These elements are more likely to have predictable content and are key to creating rhythm in the overall composition. When the content is less predictable and we care about its display, we will want to enforce strict internal padding and allow element sizes to be dictated by their content.
This is useful for tables with indeterminate user content. Outlined elements like buttons or cards can throw a wrench in things. How do you count that 2px border? Which one is your source of truth? Figma measures the element and not its border. On the web, this is handled in two different ways. If you focus more on quick deliverables in tight deadlines, use the recommended numeric values, and conquer the grid game like a PRO.
I appreciate that! I hope this guide brings some help to kickstart your responsive design projects with a solid grid foundation. Feel free to get in touch elsewhere — Instagram , Twitter , or Dribbble. I am a seasoned Product Designer — I aim for meaningful and functional design experiences. Say hello! All the design inspiration you need. It's like crack for designers. And good for you too! Sign in. Responsive Grid Design: Ultimate Guide. Nitish Khagwal Follow. Grid Anatomy A grid is composed of 3 primary components that include columns, gutters, and margins.
Gutters Gutters are the spaces between the columns. Margins Margins are the space between content and the edges of the screen. How to design interface using responsive grid? Column Structure The number of columns used to compose a grid is called a column structure.
Breakpoint A breakpoint is the specific range of screen sizes where the layout re-adjusts to the available screen size for the best possible layout view. Grid Behavior A grid can function in three different ways across different breakpoints. Fluid or Full-Width Grids A fluid grid has fluid-width columns, fixed gutters and fixed side margins. Hybrid Grids A hybrid grid has both fluid-width and fixed-width components. How to setup layout grid in prototyping tools? Mobile View For mobile devices, we use a fluid grid where gutters and side margins have fixed numeric values.
Tablet View We set up grids for tablets in a very similar way as we did for mobile devices. Layout Variations Grid layout variation decides the main content structure of the layout. Two-Column Layout The two-column layout has two page-level containers. Three Column Layout The three-column layout has three page-level containers. Fixed-Width Sidebar Layout The fixed-width sidebar layout functions a bit differently. Grid Dev Hand off First of all, we need to understand that designing a layout in a prototyping tool and coding has a significant difference.
Thank You! Muzli - Design Inspiration All the design inspiration you need. Muzli - Design Inspiration Follow. Written by Nitish Khagwal Follow. More From Medium.
Making Communication Easier. Mohammad Yasin. Leesa Williams. Atomic Design: Getting Started. We Are Mobile First. Protect your highlights. Web design trends: What to look for in Steve Ohanians. Grids are helpful to solve lots of design problems, not just screen-level layout. 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:. The ability to use multiple grids and nest them also opens up a lot of creative expressiveness for the designer.
Karl Gerstner did some pretty cool work with multiple overlaid grids for Capital Magazine in 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. In Media for Thinking the Unthinkable , Bret Victor proposes that to think about complex systems, new representations are needed — representations more powerful than the paper medium. And be sure to sign up to get early access and receive occasional updates like this article.
This article was originally published on Ryan's Medium page. Industrial designer mostly pushing bits instead of atoms. Currently building Subform , a new digital product design tool. Say hi on Twitter. Help your business uncover the value of design. Got a great post you've written that would benefit our awesome community of , readers?
Or maybe you've just got an idea in the works? Let us know! Someone from our team will be in touch shortly. Subscribe below and get them delivered right to your inbox every week. Read more. Contribute to the blog. Categories Accessibility. Case Study. Design Club. Design Process. Design Systems. Design Thinking. Design Thoughts. In the Spotlight.
Inside Marvel. Learn with Marvel. Product Design. Product Updates. Remote Working. Small Ships. Spilling Tea. User Experience. User Testing. Visual Design. Web Design.
0コメント