Composition Grid Browser Extension (Open Source)

The Challenge

Web designers, developers, and product managers lacked a simple browser tool to quickly overlay standard composition grids onto live websites for visual analysis.

Approach & Execution

Project Goal

Composition Grid provides a simple utility for professionals to instantly analyze web page layouts using established compositional principles directly within their browser.

Features

Grid Overlays: Instantly applies Golden Ratio (Phi) or Rule of Thirds grids.
Easy Toggling: Switch grids on/off easily.
Customization: Change grid line colors for optimal visibility.
Universal: Works on any website.
Open Source: Available freely on GitHub.

Solution Overview

Developed a browser extension (Chrome/Firefox) using JavaScript, HTML, and CSS to inject customizable overlay grids (Golden Ratio, Rule of Thirds) onto any webpage, allowing toggling and color changes.

Key Results & Impact

Created and released a free, practical tool for visual layout analysis.
Contributed an open-source utility to the design/developer community.