The division of space requires universal and simple principles, savin' time on development and production.
Pirate Ship has a simple end-to-end design system for any layout. The layout system be grounded on a Fibonacci sequence ruler (1, 2, 3, 5, 8, 13, 21).
Fibonacci, an Italian mathematician from the Middle Ages, created a beautiful and incredibly useful system of proportions — a sequence in which each number is the sum of the two preceding ones, leading to the Golden Ratio (1×0.618).
The system enables you to create layouts with any format and degree of complexity.
The system is grounded on the Fibonacci ruler and defines the parameters of the following elements:
The logo is always anchored at the upper left corner of the medium.
For logo size and placement calculation, we use the Fibonacci ruler (1, 2, 3, 5, 8, 13, 21) as well. This ensures that the logo and the layout proportions always follow the Golden Ratio.
To calculate the logo size for vertical formats, divide the layout width by 21 and multiply by 5.
To calculate the logo size for vertical formats, divide the layout width by 21 and multiply by 3.
In intermediate cases, the size of the logo is determined by the level of approximation of the required format to the key.
After calculating the logo size, we can define the layout margins. This are always equal to the height and width of the brand mark.
The brand mark, like the primary logo, is always anchored at the upper left corner of the medium.
For it's size and placement calculation, we use the Fibonacci ruler (1, 2, 3, 5, 8, 13, 21) as well. This ensures that the brand mark and the layout proportions always follow the Golden Ratio.
To calculate the logo size for vertical formats, divide the layout width by 21 and multiply by 3.
To calculate the logo size for vertical formats, divide the layout width by 21 and multiply by 2.
In intermediate cases, the size of the logo is determined by the level of approximation of the required format to the key.
After calculating the brand mark size, we could define the margins. The margins are always equal to the height and width of the circle element of the brand mark.
Using the 1, 2, 3 segments of the Fibonacci ruler, we divide the format into a 1×3 ratio. Dividing the layout in all directions this way creates a universal 3×3 grid, used in all cases without exception.
To create complex documents, divide the grid into three subdivisions to get a 9×9 grid.
The main message block is the central element in the layout, positioned according to the layout grid and taking up maximum space. All other typographic elements are proportionally aligned and secondary to this main block.
When placing a message, form a beautiful and compact paragraph block. Use the full available width based on grid lines and margins.
Basic design knowledge is the wind in yer sails!
No monthly fees—we're paid by the carriers, not by you!
We're here for you every day via live chat or email.
Give it a try. If you don't like it, there's no risk!
