Growing by Leaps and Bounds

How incredible it is to see the growth recognized by the Central Pennsylvania Youth Ballet over the years. It’s amazing to think that some of the finest ballet performers in the country were, at one time, students at CPYB studios in Carlisle, PA. Just as the school has grown — originally conducting classes in the auditorium at Carlisle High School, to its current 10-studio facility that’s instructed over 20,000 students — so too must their identity.

A brand overhaul was in order to re-align how CPYB viewed themselves with how they were perceived by peers. The former identity didn’t fully express the excitement, dedication, and skill put forth every day by the faculty, staff, and student body. Fresh off a redesigned logo, color palette, and standards guidelines, Triple Strength began the extensive process of interpreting CPYB’s fresh look in a visually-striking, functionally-sound web presence that would announce to dance and ballet companies around the globe that the Central Pennsylvania Youth Ballet was taking center stage as a premier institution for learning and development.

The Concepts
Starting out with a handful of concepts, we narrowed the list to three primary layouts, each with their own strengths and style.

Concept 1

Using dark background colors, Concept 1 featured elements that worked to build a hierarchy of information based on a bright playful color scheme, which drew from CPYB’s freshly updated palette. The site layout optimized search engine features with main content areas dedicated to news and events, which would drive up numbers for unique and returning visits.

Concept 1 also made use of a detailed grid system that replicated CPYB’s focus on perfection and rigorous attention to detail. Spacing, alignment, weight and balance were key components to pulling off the effect. This layout such as this adds a structured quality to the site, recalling CPYB as a trusted and established institution.

Concept 2

The second concept focused more on the student visitor’s perspective of the site. Using imagery that showcased human interaction, whether it be a teacher helping students with technique, performers celebrating their first on-stage experience with loved ones, or some playful time between classes, a large primary image area was meant to draw kids to the program. One of CPYB’s biggest accomplishments was the successful establishment of coed classes. As other schools often lack the numbers to match male and female dancers, CPYB realized this capability and was now able to advertise it to potential dancers. The site would tout that accomplishment.

Concept 2′s design also further enabled users to take an interactive approach. Using different style sheets, at the click of a button visitors would be able to adjust the color scheme of the entire site, giving each user a new experience with each visit.

Concept 3

The final concept looked to mimic the on-stage experience in layout and design, with the key element being CPYB’s extensive catalog of event photography. The easiest way to illustrate CPYB’s top-notch performances was to put them front and center.

Again utilizing a black background, images bleed into the margins of the webpage, creating a stark contrast between performers and page boundaries. The design was meant to recreate an actual theater performance. The lights lower, and the dancers appear from dimly lit wings to create a whimsical experience for the audience to enjoy. Now … imagine that with javascript and css styling.

Review and Production
After meeting again with our clients to gather their feedback and which layout they were drawn to the most, we learned Concepts 1 and 3 seemed to be the crowd favorites, but neither one was a show-stopper (pun intended). We took the strongest elements of the two and began to mesh a stronger, more specialized layout. Merging the large format images of Concept 3 with the SEO-friendly content of Concept 1, the new site was ready to begin the transition for development.

While the introductory work had begun on the homepage, layouts were created for sub-level page templates. Pages were assigned a template according to their depth in the directory. Each main landing page, navigable from the primary navbar, was given Template A. Pages below that were assigned Template B, and below that, Template C. With each lower template, the ratio of image to content decreased. Homepage = 85% image to 15% text, whereas Template C is primarily text, with supplementary images for explanatory purposes.

CPYB was then connected to the TS custom content management system (CMS). This allows CPYB staff and faculty to update and maintain content, images, and other materials with little knowledge of programming. Styles and layout functionality are also programmed into the CMS, keeping pages consistent across the site.

To handle the ballet’s videos, the YouTube API is used as a secondary content management system. With the use of this trusted video management software, the site runs faster by hosting large video files on separate servers, gains greater SEO visibility, and saves money on development costs.

Another cost-cutting measure was to develop a public, and access-only calendar, driven through Google Calendars. Much like the YouTube API, this technique uses a free, dynamic, real-time solution for calendaring software. The API also integrates seamlessly, so the front-end matches the look and design of the rest of the site.

With the new cpyb.org now live, the Central Pennsylvania Youth Ballet’s brand reinvention is complete. A sum of all the parts — from logo, to color palette, to website — the new CPYB symbolizes energy, sophistication, and fun.

The Central Pennsylvania Youth Ballet has seen tremendous increases in attendance and overall awareness since its start in 1955. Today’s organization now has an identity that matches its true spirit — standing center stage among other highly reputable dance companies across the country and abroad.

For the Love of Interstate

If you spend as much time as I do driving, road signs and highway markers often fly by at increased speeds without so much as a glance. Interstate, the typeface most closely related to that of highway signage, tends to fade into the landscape as attention can be diverted else where. With its recent adoption by TS for internal and client work, no matter how fast I get to the office, I’m surrounded by the font and it’s many faces and weights. With its growing popularity, I’m waiting for an Interstate film to replace Helvetica as the typography documentary to see.

Interstate is a neo-grotesque typeface, designed by Tobias Frere-Jones, to model closely after the font the US Federal Highway Administration developed in 1949 for road signage. It is also used in Canada, Mexico, The Netherlands, and elsewhere because of its readability at a distance and high speeds. When not applied to signage, Interstate is also used as display font for headings, call-outs and other featured content in publications and branding.

With the recent redesign of the TS brand, Interstate was chosen to replace Helvetica and Weidemann, as our studio fonts of choice. The past identity began to feel dated, and Interstate offered a modern alternative, with a number of faces to accompany. The font is strong enough to stand alone, so many applications are derived from typographic word art where the focus is on message.

Clients such as NSVRC and the Institute for Strategic Management Inc. have also been brought into the fold with Interstate being one of, if not the, primary typeface. For the National Sexual Violence Resource Center, Interstate pairs with Trajan to balance modern sans serif with a classic serif typeface. With the text-heavy nature of NSVRC publications, Interstate is used in the majority of copy to produce utmost readability in body and focal attention to callouts with bold and other heavier faces. In the case of the Institute for Strategic Management, everything from the logo and brochure, to web site headers and video production elements are all handled with Interstate. The brand is built upon the technical and modern applications of the font and showcases the state-of-the-art techniques ISM utilizes.

With its modern characteristics and contemporary style, it’s hard not to appreciate Interstate for it ability to represent action and progress. Companies and institutions looking to replicate these ideas often employee Interstate somewhere in their identity system. This has been just a tiny sample and there are countless to explore, but, at the very least, this may get you to focus a little longer on the next exit sign you pass.

Some other examples of Interstate

A Fish of a Different Color

In an ocean of electronic downloads, online radio stations, and shady sharing software, Grooveshark rises to the top through intuitive player controls, an expansive library, and a structure that keeps all parties involved, happy … a rockin’ logo doesn’t hurt either.

Grooveshark is an online music site that enables users to setup playlists from a library of tracks uploaded by other users. A rival of other popular sites like Pandora, Last fm, and rdio, Grooveshark enables total and complete personalization of what does, and does not, get played. A free service initially, upgrades are available to remove ads and other fund generating pieces from display on the site. With greater levels of activation, greater flexibility and customization of the application are available.

This site is quickly becoming one of my favorites. Often times, for whatever reason, there’s a song stuck in my head that I just have to hear. Whether you heard 3 seconds of it on your commute to the office, or just woke up humming it, if you don’t own the song on your iPod, or your work machine, you’re kind of out of luck. The beauty of Grooveshark, is that you can find that pesky song, and others like it, for free. You can’t download it, but you can feed-the-need. Online music sharing is a very gray area and just the words ‘FREE Music’ start to throw up red flags in our subconscious. GS works to provide licensers and other industry financiers with money from advertising and subscriptions. As a user, you can also be compensated for uploads. It keeps users, advertisers and music execs coming back time and time again.

The overall strength of the site is the intuitive nature of its playlist setup. Search for a song and then drag it to the player. The song starts to play as you continue to build. For someone who listens to a lot of music for an extended period of time, this is fast becoming my go to player. Unlike the other online apps, where you choose the first song and it builds a database of music per your preferences, you can pick as many, or as few songs, as you like, and let it expand from there. Users can setup favorites, and save certain tracks you love, making it even easier to get pumped up for your next presentation, or start to wind down on a Friday afternoon. Either way Grooveshark can make it happen … for free.

(above) Mobile upgrades for the Grooveshark app. My one complaint, more-so with Apple than Grooveshark, is that the iPhone has been rejected from the App Store.

Customized listing for user account. Add songs to the list, or mark them as a favorite for easy access.