How do you share your grid system with others?

1 Why share your grid system?

Sharing your grid system is not only a matter of courtesy, but also a way to ensure that your design vision is respected and implemented correctly. Explaining the logic and structure behind your layout choices, providing clear guidelines and specifications for development, facilitating feedback and revisions from clients or stakeholders, and showcasing your professionalism and attention to detail are all benefits of sharing your grid system.

2 How to document your grid system?

Documenting your grid system in a separate file or page is one of the most common and effective ways to share it. This documentation should include the type and name of the grid system you used, the dimensions and measurements of the elements, the alignment and spacing rules, the grid variations for various screen sizes and devices, and examples and annotations for main pages or components. By providing this information, you can ensure that your grid system is understood and used correctly.

3 How to present your grid system?

Presenting your grid system in a live or recorded session is another way to share it with others. Begin with a brief introduction and overview of the grid system, then show the documentation and emphasize the key features and benefits. Demonstrate how you applied the grid system to your layout decisions during the design process. Utilize tools or plugins that can overlay or toggle the grid on your design, such as Gridulator and GuideGuide. Lastly, be prepared to answer any questions or address any concerns from the audience.

4 How to export your grid system?

When sharing your grid system with developers or other designers, you should export it in a format that is compatible and convenient for them. Depending on the software or platform you used, you can export your grid system as a CSS file with the grid properties and classes, a JSON file with the grid data and metadata, a PSD or Sketch file with the grid layers and guides, or a PDF or PNG file with the grid documentation and examples.

5 How to test your grid system?

Prior to sharing your grid system with others, it is essential to test it for functionality and design requirements. You can use browser tools or extensions to inspect and validate your grid, such as Chrome DevTools or Firefox Grid Inspector. Additionally, online tools or services like CSS Grid Generator and Grid Critic can check and optimize your grid. Mockup or prototyping tools like Figma or Adobe XD can simulate and preview your grid on various devices and resolutions. Lastly, user testing or feedback tools like UserTesting or Hotjar can collect and analyze how your grid performs and impacts the user experience.

6 How to improve your grid system?

Sharing your grid system with others is not only a way to communicate your design, but also a great opportunity to learn and improve your design skills. By doing so, you can gain constructive feedback and suggestions from others, discover new ideas and inspiration from other grid systems, identify and fix any issues or errors in your grid system, and experiment and refine your grid system to achieve better results.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?