Heley Pinto Theme

Services

Client

Completed

Jan 22, 2014

Back in the glory days of the Harbinger, workhorse and blue-eyed California dream Logan Heley and I got to know each other pretty well behind the broadcast box. Of course we'd been friends before the online edition took off, but we'd never been forced into so many high-pressure (or so we believed at the time) situations so often. We'd go on to freelance together for family friends in need of a site, but for me, my relationship with Logan has always been about putting an obscene amount of dedication and attention towards a goal without a break before the next one.

Four years later, he's running for student body president of USC. After work with the Ad Astra campaign and the Harvard council site, he dropped me a line and recruited me to the team.

Crafted by Irene Lee, the logo was contentious for some time before its subtle allusions were brilliant. The idea of gears matched the slogan "Empower YouSC" (emphasis mine), and the idea of separate parts working together to achieve a whole movement really appealed to the crew.

Ribbons

I wanted to take a quick approach - text that was captivating, but not a give-away. The collegiate audience would be more inclined to a website without excessive flair but with digestible portions. So the ribbons were born (on that note, I sincerely did not realize how remarkable the ribbons were to the Ad Astra stripe until I did a cover photo the morning of launch).

But making the ribbons...that was a new challenge altogether. I ended up using a fairly new take on an old spec in SVG clip-paths. CSS clip has been around since the dawn of the browser, and clip-paths were added to SVGs a couple years ago. The real value, though, is in the ability to clip HTML, which is more-or-less a bleeding-edge feature. Each ribbon will hide overflow at the edges, maintaining the effect around a gradient background wrap. IE9+ doesn't support this yet (and feature detection isn't there yet for clipping HTML), so fallback PNGs on psuedo elements are used.

Of course, some sections would have to be more creative. Mix it up a bit. Some cut-outs here, some text here. Every section stands to operate on its own, and therefore, it doesn't fall into a droll, predictable formula.

Every good website has a gimmick. Something that makes you stop and stay a while. For this one, it's the turning gears in the background. They're fixed, giving a light parallax impression, but watching over shoulders at friends interacting with this site has been immensely rewarding. Everyone has stopped and scrolled back up and back down and back up and back down.

Other Pages

There also had to be pages for overflow, like the rest of the platforms, elaborated quotes from the candidates, and their qualifications. And a volunteer signup management system, run through the backend.