Template Framework — Squarespace
With Squarespace, I created template frameworks as part of a CMS platform enabling over one million users to build their own website. I released each framework with a dedicated team, including product concept, feature and development strategy, design, and creative direction.
For context, a framework is a codebase comprised of the primary features of a template experience. Targeting various end users, process included designing UX patterns, UI conventions, and building modular system components for the platform. A framework will yield multiple templates — there are three featured in the gallery below, each exposing various features of the framework.
This framework: At its core, a customizable project and image slideshow, integrated together with a flexible organic grid as the project list.
The relationship between the grid and slideshow was designed to be utilized in two ways — 1. Grid as collection of all projects: Choose project thumbnail to view full slideshow of all images within that particular project. 2. Switch between views: Grid and slideshow are interchangeable displays of all the images in a single gallery.
Beyond that, various components enhance the presentation of projects and images including flexible grid columns and gutter, an automatic 'featured' grid mode displaying double-width project thumbnails at optional frequencies, three slideshow modes with optional project intro and progress indicator, and a preview panel of slideshow contents.
Further, the slideshow modes were conceived to accommodate various aspect ratios and to allow a user to best represent their work; a continuous stream, viewed individually putting focus on a centered image, and full bleed.
Finally, project navigation is made possible with an animated UI for advancing to the next project, with various image and text modes.
Featured below are the three templates conceived and built as part of the initial release of the framework.