3.14 DC specializes in food hall and retail consulting, design management, and concept development. They are experts in the entire process from researching location specific and global market trends in food and customer service to designing interiors and wayfinding. They know the standards for building spaces, especially for the food industry.

314.DC needed a rebrand, and with that, a new website that could easily be updated.  Their previous site being on Wix, they wanted something modular, with the ability to slowly roll out sections when they were ready, with out relying on a developer to publish new sections for them.

Working closely with the design team and the design system they built, I built a custom WordPress theme from scratch, using both custom post types and Advanced Custom Fields to create a robust dashboard to add new content, projects and case studies to the site.

Bodymovin & Lottie SVG animation

The designs also called for fluid animations in a number of places, with strict guidelines of color combinations to use. For areas where animation needed to be precise, they were created in After Affects.  Using the bodymovin plugin I assisted in creating SVG based animations with them using Lottie to create a seamless interactive experience.

SVG Animation dynamically created with GSAP

For more customizable animations, I used GSAP to smoothly morph different shapes of one path to another. Additional shapes can easily be added or removed as needed.

SVG Hover Animation

Lastly, for more basic things like button hover states, simple CSS animations  using the stroke dash array trick.

Timeline:

3 Months

Software & Services Used

  • Sketch App
  • Adobe Illustrator
  • Adobe After Effects
  • Github
  • Atom Editor

Frameworks & Languages Used

  • WordPress
  • Advacned Custom Fields (ACF)
  • PHP
  • Bootstrap
  • SCSS
  • jQuery
  • GSAP
  • Lottie
  • Git