Sacramento Festival

Digital Brand Development

Motion Graphics



This is just a very small sample of the dozens of motion graphic elements, spots, and longer promos we would make for each festival.

Emphasis was placed on turning videos around as soon as possible, and re-using themes and elements between events.

We also created hundreds of Keynote, ProPresenter, and pre-rendered animations for use during the live shows. 

These 30-second, seamless animations were used to highlight or introduce artists and speakers. They were rigged in After Effects using 3D cameras with expressions for movement.

This short 15-second promo aired the weeks before the festival. I extended the "colored discs" theme in the logo.
Yes, the client made me slap the website at the top. ;)

Summary report. Done very quickly with Motion 5 & FCPX. 

Web concepts

Prototyping

The way I approach user experience design (UX) is this: it can be as formal, or as simple, as the project demands. 

For some clients, whiteboards and napkins are sufficient. For others, or for situations where there's many layers of approval required, wireframes and interactive prototypes can really help clients visualize what it is we're building.

Wireframes were created with MockFlow. We had a lot of non-technical, very visual stakeholders who really needed an interactive prototype that they could explore and make notes with.

Another advantage: an easily printable spec document, in multiple formats!

You can see the full prototype here.
It's Flash, I know!


The "Front Door"

Previous festival campaign sites had been fairly simple visually, not much more than information dumps. 

The initial phase of the campaign is persuasional, focusing on savvy - and sometimes skeptical - city leaders and large church pastors.

Studies show homepage sliders rarely effective, but clients sure love 'em, don't they? Since the site would focus initially on casting a big vision for a city, rather than the details, I figured, why not impress visitors with the key big ideas? Just let the slider fill the screen. 

I wrote 5 taglines and selected images to match, and presented these landing page concepts.

Image: a special day-for-night comp.


 

The slider was based on SuperSized JS library. A server-side client detection library was in a conditional block in the homepage template, and deliver a simple, action-focused page.


Second-level pages

 

 Section-Level Page 

 

Content Page 

Custom Section:
"Amazing Wonders"

This festival was to have a large mini-festival and outreach to children. They needed to tie in to some existing branding.


Original Brand elements. Busy enough for you?

Sketches

I never cease to be amazed how much delight clients have when we set aside all the high-tech tools for prototyping, and just playfully sketch with them. In this case, it was the perfect choice. 

Based on their need for a high, "wow factor", I envisioned a parallax-scrolling landing page. I started with a really large, tall piece of paper, and just sketched it out.

Navigate down to see the sketches, and the final product.
Note: mobile browsers have issues with parallax design experiences. Handset users get a simpler experience.

Full Sketch (marker comp)

Detail

Site Tech Notes

  • Built with the Expression Engine CMS
  • Key plugins: Assets, Playa, Matrix. Playa in particular was important for easily creating rich slideshows and banners in entries - simply by selecting other pages/assets from a bucket.
  • PHP mobile_detect library for in-template mobile optimizations
  • SuperSized! JS slideshow for the intro
  • Built on a SASS version of Bootstrap 2
  • Custom webfonts and icons via Font Awesome

Sacramento Festival Digital Brand

By allanwhite

Sacramento Festival Digital Brand

This deck explores a few of the products created for the Sacramento Festival campaign in 2012.

  • 3,806