DETAILS You've seen the Golden Canon Grid. Now we're introducing a new tool: a set of 90 pre-made layouts based on the Golden Canon Grid, to speed up your process of designing with this grid, and to suggest different types of layouts that you could create so you don't have to think from scratch, or to force you to think a bit outside the box of what you usually do.
MADE FOR Sketch 70.4 and onwards, Figma & Adobe XD. Responsive: 1920x1080px (Desktop)
INCLUDES
3 types of navigation:
· 30 layouts with a nav frame.
· 30 layouts with horizontal nav
· 30 layouts with vertical nav
· 6 examples (2 for each nav), including paddings so you can see exactly where we used the grid, and where we didn't.
INSTRUCTIONS:
___
SKETCH
1. Install the file called “Bont-GoldenCanonLayouts-Library.sketch” (which is inside the ZIP) as a library.
2. Open the template called “Bont-GoldenCanonLayouts-Template.sketch”, and save it as a template (File > Save as Template). You need to do this step only once.
3. Create a new file from the template you saved (File>New from Template>Bont-GoldenCanonLayouts-Template).
4. Use the default layout, or choose any of the layouts that you will find in the dropdown of the layout symbol, and you're ready to start designing.
___
FIGMA
With paid version:
1. Install the file called “Bont-GoldenCanonLayouts-Library.fig” (which is inside the ZIP) as a library.
2. Make a copy of the template called “Bont-GoldenCanonLayouts-Template.fig”, and open it. Make sure you are on the “Design” page.
3. Choose the default layout, or use any of the layouts that you will find in your already installed library, and you're ready to design.
Without paid version:
1. Make a copy of the template called “Bont-GoldenCanonLayouts-Template.fig”, and open it. Make sure you are on the “Design” page.
2. Use the default layout, or choose any of the ones found on the “Layouts" page by copy-pasting it on your artboard, and you're ready to design.
3. Alternatively, you can just open a new file, open the “Bont-GoldenCanonLayouts.fig” file, and copy-paste one layout to your new file.
___
ADOBE XD
1. Install the file called “Bont-GoldenCanonLayouts-Library.xd” (which is inside the ZIP) as a library.
2. Make a copy of the template called “Bont-GoldenCanonLayouts-Template.xd”, and open it.
3. Use the default layout, or drag any of the layouts that you will find in your already installed library, and you're ready to start designing.