Diagrammar
Portfolio website for architecture studioTools: Webflow, Figma, Adobe Creative Suite
Diagrammar is an architecture firm based in Chennai, India. The studio required a portfolio website of their range of services from architecture and interior design to visual design.
![](https://freight.cargo.site/t/original/i/3c1fc93e0e6321b46e1d6e924ff495d14685578529d4f92dbc7711f8a2e1bd8c/DGR.png)
Screenshots: Landing screen; Project List
Design: The wireframe showcases the range of services offered through a quick walkthrough seen on the landing page. This offers walk-in clients the chance to glance at existing work provided by the studio. Alternatively, an in-depth range can be previewed within the archive of work.
The colour palette leans on the existing brand language of the firm. The design uses the Montserrat family to create a heirarchy in terms of the range of information about each work and red as a hover animation for contrast.
![](https://freight.cargo.site/t/original/i/06ecb31771550b2fd4e3ef3b4654ee525e3d43f5ee628433097174bb0e17a7b9/Asset-2.png)
![](https://freight.cargo.site/t/original/i/d0b5e8422cca3ff01f1a7fccab4d3e08f6b93d58eaa0ef6563a150e1bfaa11b1/Asset-3.png)
![](https://freight.cargo.site/t/original/i/38257a2d3ee7adb22729355a24d4e92f4b56447bc5047945c8a6a237e91ef30a/Asset-1.png)
![](https://freight.cargo.site/t/original/i/f1ec08761bc51778c84c28dd6d81288ed2d06b78497523468d37a2355a8993d2/Asset-4.png)
Screenshots: Style guide development
![](https://freight.cargo.site/t/original/i/3139abee7b28129d4f2c091fe46b88b7900bd5c8418c578c7c188ab87aa38bb8/Project.png)
Screenshots: Project details template