Euclidean Algorithm In Web Designing

Design layouts for rectangular devices with Euclidean algorithm

Posted on 2017-05-12

All the mobile devices are out there are rectangular size and each individual block can divided in proportions with various ratios like Golden Ratio, Euler Number and Euclidean algorithm or Greatest Common Divisor.

I will be using Euclidean algorithm to divide a rectangular mobile layout by considering its width and dividing it with 2 equal width square blocks.

The Euclidean algorithm is based on the principle that the greatest common divisor of two numbers does not change if the larger number is replaced by its difference with the smaller number. For example, 21 is the GCD of 252 and 105 (252 = 21 × 12 and 105 = 21 × 5). Source - Wikipedia

Assume your overall width of the device is 38px, by staring 2 squares of 16px would further divide the squares into width of 8px. And then to 4px and finally of 2 squares of width and height of 2px.

This method was used to build product rail for a category listing page. I ended up making 2 layouts, one with 6 blocks and another with 4 blocks. Where 6 block layout can hold 4 product images and 2 navigation buttons or icons and 4 block layout can hold 4 product images.

Sketch plugins like “AUTO LAYOUT” can help us in maintaining this ration for multiple devices. And the final layout from the actual app.