Preksha
Structuring a slot-based grid system on Tumblr to build a clean, manageable visual fashion archive.
The Client & Context
Preksha is a designer and visual artist who needed a digital portfolio to showcase her design catalog. With an upcoming academic and professional review, she required an elegant portfolio that prioritized quality over quantity and stayed completely free of visual clutter.
To reduce maintenance friction, the client chose to host the site on the Tumblr engine, enabling simple portfolio updates directly via her mobile phone.
The Challenge
Standard Tumblr themes are designed for blogging, not professional portfolios. The original reference site she shared was cluttered and visually overwhelming. Preksha wanted to clone the overall aesthetic but adapt it into a spacious, minimal layout that allowed intentional overlaps, custom GIFs, and distinct typography controls.
We needed to build a system where she could tag her Tumblr posts (e.g. `knitnest`, `clo`, `ai`) and have them automatically map to specific, styled grid slots on her custom website without breaking the layout alignment.
The System Diagnosis
Our audit of existing Tumblr theme templates highlighted three critical system issues:
- Rigid Layouts: Standard posts render in a single vertical column, preventing artistic layout variations.
- Asset Bloat: Uploading high-res fashion files caused vertical overlapping and visual glitches on mobile.
- Poor Font Control: Lack of dynamic font styling led to rendering problems with text overlays.
The Solicate Solution
We wrote a custom theme and built a dynamic layout engine using Tumblr's developer markup:
- Slot-Based Tagging: CSS grid classes map specific tags to creative layout slots automatically.
- Collapsible Font Switcher: Built a custom widget enabling typography previews.
- GIF Layering: Custom layering allowing GIFs (like a whale animation) to render cleanly behind the content.
- Mobile Handoff Guide: A straightforward tagging manual allowing the client to self-manage uploads from her phone.
The Implementation Timeline
Wireframe & Layout Selection
Drafted the page structures and mapped Tumblr tags (`adobe`, `banjara`, `textiles`) to grid cells. Approved a clean Georgia serif typography style.
Theme Development
Wrote custom HTML/CSS using Tumblr's API tags. Constructed a sandbox dummy account to test slot alignments before staging.
Widget Engineering
Built the interactive font selector and fixed character clipping on mobile browser renders.
Clean Handoff
Set the live domain and delivered the tagging manual, verifying layout consistency during final user testing.
The Outcome
Preksha received a scalable portfolio that she can manage completely on the go. The custom slot-based tagging system resolved layout breaking issues, providing a unique design archive that runs entirely on free hosting.
Need a custom system?
Learn more about our SEO-First Website Revamp, Website Redesign, or UI/UX Design services. We build high-performance assets designed to generate enquiries.
Request an SEO Revamp Audit