A slice of
dynamic content
A Webflow course project turned real-world problem: designing and building a dynamic, CMS-driven site for a Philly pizza spot that deserved more than a default Toast page
Role
Web Designer & Developer
Timeline
January - February 2023
Skills
Web design, Web Development, CMS
A course project with a real problem to solve
As part of ADPList's Intro to Webflow course, the final project required building a multi-page site using Webflow's CMS for dynamic content. The assignment offered a handful of directions to choose from. I took a different approach: rather than designing for a hypothetical, I used the brief as an opportunity to solve something real.
Circles & Squares is a local Philly pizza restaurant with a genuine following, a distinctive brand, and no real website. Their digital presence at the time was a default Toast ordering page. It worked for transactions, but it lacked the story and branding of who they are, surface their menu to glance, or connect customers to their sister operation, Pizza Plus.
This site was not published and was built as a learning project. The goal was to demonstrate Webflow CMS fundamentals through a real-world brief, not to ship a production site for the restaurant.
4
CMS collections built, including dynamic menu categories, item description pages, and landing templates
How might we give a local restaurant a web presence that reflects their brand, serves their customers, and keeps business outcomes, like ordering and catering, front and center?
The Toast page was doing one job: processing orders. But it was leaving a lot on the table. A customer finding Circles & Squares for the first time had limitations to understanding the brand, browse the menu before committing, or discover that the same team runs Pizza Plus, which offers catering that could drive additional revenue.
Project constraint. Real decisions.
Working from a real restaurant meant working from a real brand. Circles & Squares has a strong visual identity: bold red, clean black and white UI, geometric logo, and a confident typographic personality. The design had to honor that rather than impose something new on top of it.
The CMS architecture was the core technical challenge. The course requirement was to use Webflow's CMS for dynamic content, which meant making real decisions about how to structure collections, what fields each item needed, and how dynamic templates would pull and display data across pages.
Rather than designing static pages and adding CMS as an afterthought, I structured the data model first, asking what a menu item needs to know in order to render correctly on both an overview card and a dedicated detail page.
How the foundation was built
The menu is Circles & Squares' primary product surface. Getting the CMS structure right meant thinking about two things simultaneously: what data each menu item needed to carry, and how that data would render across different page templates.
I built four collections: Menu Items (the four categories: Circles, Squares, Sandwiches, Sides), Item Descriptions (the individual items within each category), Menu Item Landings (the dynamic detail pages per category), and a supporting Item Descriptions collection for sub-items and variations.
.svg){kind=small}
Simplified schema: key tables and linked record relationships.
Webflow CMS collections panel — displaying each collection with the Circles Menu Item selected
The visual direction required a deliberate choice upfront. Circles & Squares' own color profile is black and orange, distinct Halloween colors that in a more fully realized design risked feeling too heavy. Pizza Plus, the sister operation, uses a red palette that was easy to slot in, keeping each location visually distinct while tying them together as a group.
The typographic and textural direction drew from Pizza Plus' late 90s, early 2000s aesthetic, which reads almost like a printed menu, complete with a thick stylized border. I translated that concept into something more contemporary: a geometric circles and squares backsplash in greyscale, referencing the source material without reproducing it.
The UI itself leaned into a tactile, physical feel. Bold button callouts and thick border box shadows on UI cards were a deliberate choice to evoke something you could hold, like a pizza box. Modern in execution, familiar in feel.
The footer leaned into the brand's personality: oversized "Circles + Squares" typeface in red, a secondary nav surfacing Instagram, Careers, Catering, and a playful "Cats + Dogs" Instagrram link, and the ADPList course credit required by the brief.
Homepage hero — brand identity translated into Webflow with a simple Nav with prominent Order Now CTA and acompanying links
Custom animation — motion design logo provides a playful pop
Custom animation — pizza slice hamburger menu for mobile
Footer featuring red branding with oversized typeface and secondary nav
The menu section was the primary demonstration of Webflow's CMS capability. The "Menu at a Glance" section on the homepage used a Collection List bound to the Menu Items collection, pulling each category's image and name dynamically. Clicking through to a category landed on a dynamic template page that pulled all associated Item Descriptions from the linked collection.
This meant adding or editing a menu item anywhere in the CMS would automatically update every surface it appeared on, no template edits required.
Menu at a Glance — Collection List bound to Menu Items CMS collection
Circles dynamic page — category hero, item heading, description, and ingredient list pulling from CMS
Two Decisions Worth Calling Out.
Working within a course brief meant the scope was constrained, but constraint surfaces design thinking. Two decisions in particular reflect a systems and business lens applied to what could have been a purely visual exercise.
What the project delivered.
.svg)
Completed the ADPList Intro to Webflow course with a real-world brief, earning the course completion certificate.
Built a fully functional CMS-driven site with four collections, dynamic menu templates, and relational data pulling correctly across all page types.
Demonstrated Webflow fundamentals through a design problem with actual business constraints, not a hypothetical prompt.
Applied design and systems thinking to decisions that went beyond aesthetics, including conversion accessibility and hidden business opportunity.
What a course project taught when treated like a real one.
01
Working from a real restaurant meant every decision, even though hypothetical, had a real consequence. The CMS structure wasn't abstract, it had to work for an actual menu, with actual categories and items. That pressure produced better decisions than a hypothetical prompt would have.
constraints clarify thinking
02
Designing the CMS schema and designing the page templates were not separate steps. Decisions made in one directly shaped what was possible in the other. Getting the collections right first meant the design could actually do what it promised.
schema shapes the surface
03
The sticky order button and the Pizza Plus connection weren't in the course requirements. They came from asking what the business actually needed from the site. Bringing that lens to a learning project is what makes the work feel like product work, not just design work.
always ask: what's the outcome?
04
Webflow's CMS, dynamic templates, and collection bindings required real decisions about information architecture and data relationships. Understanding how no-code platforms work at a structural level, not just a visual one, directly informs how I scope and build product work.
Get to know your tools on a holistic level
