Golden Spiral Grid Template Sketch + Steps via Dribbble
Hey guys! I’ve created this golden spiral grid and distributing as freebie for anyone who wants to use this as a template. But, before using this grid you need to understand how to create a golden spiral & its ratio first so that you know what you’re creating and comparing at the end of your design project; it could be a poster, a logo, or even a layout grid. The following guidelines are the steps in order to create a golden spiral grid having a custom value. So let’s get this started!
Press L from desktop to show some love :)
To construct a golden rectangle, choose a number that will be the length of the rectangle’s short side. For argument’s sake, let’s say 500 pixels. Multiply that by 1.618. The result, 809 pixels, is the length of the long side of your rectangle. Therefore, a rectangle that is 500 pixels by 809 pixels is a golden rectangle. It obeys the golden ratio—Hongkiat
Steps to create a golden spiral grid
Check out my step by step process in order to create this golden spiral grid.
1. Draw a rectangle, and check its shortest side (in my case it’s 100); this is shortest side of your golden rectangle or let’s call it side A.
2. Multiply this shortest value into 1.618, in my case 100 X 1.618 = 161.8 is the longest side of your golden rectangle or let’s call it side B.
That’s the proportion of your golden rectangle in this case. Now..to create nth number of division as part of your golden spiral grid in order to use as your design template..you need to
3. Use the value of your last & longest side of your rectangle. This value (161.8) is going to be the side of the square you will just add next to it (towards its bottom); see figure 3.1. So your new square will have 161.8 (height & width) as shown in figure 3.2. After adding this square, we will have a new rectangle having its longest side 261.8 as shown in figure 3.3.
* Make sure you follow anti-clockwise (bottom ↓, right →, up ↑, and left ←) or follow the direction of a virtual spiral from center of your screen to outwards whenever you add more squares to it. This is important!
4. Similarly, you can create additional squares based on its previous/longest side of your rectangle as shown in figure 3.4
Download Golden Spiral Template in SVG
Download Golden Spiral Template in Native Sketch
Download Golden Spiral Template in Native illustrator
Download Golden Spiral Template in EPS
Enjoy :)
Would you like to be part of our biggest UX Discord community? Join GSIUXD on Discord now. Thank you so much for your 💖