Adobe Creative Cloud

Playground innovates for SportsNet with Adobe Creative Cloud for teams

Playground already has a reputation for creating eye-catching designs for clients including Random House of Canada and Grammys.ca. The Toronto-based agency’s latest achievement is scalable animations for Canada’s SportsNet using Adobe Creative Cloud for teams. Owned by Rogers Digital Media, SportsNet is a multiplatform producer of sports-related content. SportsNet hired Playground to design a new digital app.

Playground decided to use scalable vector graphics (SVG) and smart objects to create the app’s dynamic page transitions. SVG animations automatically adjust and adapt to displays with different sizes and resolutions without losing quality or legibility. The process begins by drawing each frame of an animation with Photoshop CC. The shapes are then converted to vector images by hand-tracing them in Illustrator CC. Through trial and error, Playground wrote its own script to convert each frame built as a Photoshop document (PSD) file to SVG.

“We wanted users to navigate through the app with a natural ease, and the transitions from section to section needed to reflect the excitement of live action,” says Dave Senior, Partner + Strategist, Playground. “We worked closely with an animator who translated our ideas for the dev team, allowing us to keep focusing on the UX, instead of pouring ourselves into code based prototyping.”

Creative Cloud for teams helped simplify the project by reducing technical hurdles. Users can switch easily between apps and leverage features such as Smart Objects to streamline workflows. Creative Cloud for teams also encourages collaboration at Playground. Creative Cloud Libraries lets designers create and share palettes, design elements, and assets, enabling Playground to maintain greater consistency when multiple contributors work on a project.

Learn more about Creative Cloud for teams.

For Business, Member Stories