Componentized templating system
Using templates as components to create new pages quickly and efficently
While I was at PuppySpot, I worked with the business, marketing, and product teams to create a system that will facilitate converting their older "legacy" web pages to a new, modern design. This system also needed to help them to rapidly deploy new pages and update sections when needed.
I designed a component system based on a series of templates that can easily be stitched together in arbitrary order.
Once the component templates were created, the frontend team could quickly create a new page layout by simply including the components in the order that Marketing wants. At the same time, they can tie each component to the CMS.
Creating new pages becomes trivial for the Frontend team, and Marketing is now able to adjust and fine-tune content and images without needing to go through another development/release cycle.
Examples: The basic component system was created in Sketch to hand off to developers and designers, showing all the templates and how they should change depending on viewport size. I then created a prototype of the templates and individual pages. For a quick overview, see the Sketch and full template overviews below, or explore a more in-depth before/after comparison.
Design stage 1: Sketch Templates
Sketch templates showing all templates and how they behave across different viewport widths.
Design stage 2: Prototypes
Working prototype showing example of how all the components behave. Some with a parallax scrolling effect, and some without. The parallax effect is 100% CSS, and can be applied to any component, although it is best on A, B, C, or D.