Temple University
Design System
Design System
In 2018, Temple University began discovering a new creative direction for the its brand language, enrollment and advertising work at both the institutional and school/college level. These discoveries have led to a unified brand language from both a content and design perspective.
With this new creative direction, a group of web developers, content writers, and a designer formed the Web Collaboration Center, and developed a new design system to be used on all of Temple’s web properties. This was also an opportunity to ensure that all the schools and colleges are within the same framework (where Drupal is used as the CMS). This guaranteed not only that the entire university was consistent through visual language, but also ensured that content and code was coming from a single source of truth, rather than spread out from multiple sources.
Web Design, Drupal
Web Typography Refresh
With the new brand work using Harfang and URW Din in advertising, new typefaces needed to be selected for the web. The only restriction was that the selections had to be open source and look similar. This was especially important for matching a typeface with Harfang, as it has incredibly distinct serifs. We selected Faustina and Roboto, which closely resemble the brand fonts.
Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Roboto Condensed
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Faustina
Faustina is part of the Omnibus-Type Press Series, designed by Alfonso Garcia for editorial typography (books, newspapers and magazines) in print and online.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Components
The essence of any design system is its components, on which the team focused the majority of its work. An inventory of the current design system was performed to better analyze how each component would change visually. The visual change to existing components is in line with the new brand work out in market.
Developer Guide
Working closely with both back and front-end developers is key for a project of this magnitude. The work for a design system goes beyond just the visual aspect, as naming conventions and fields for the backend of our CMS needs to be taken into consideration. As well as different contexts for where these components will be utilized. This guide gives more in-depth information than InVision’s inspect mode.
TU Docs, A Custom Replacement for InVision’s DSM
Initially, we used InVision’s DSM as a way to catalogue our components. We currently use it as a way to communicate usage guidelines for content writers and it serves as a design library for Sketch.
However, InVision lacks capabilities for our developers (detailed redlined designs and integration with GitHub to name a few). With our custom solution, we can not only consolidate use cases for internal (our team) and external (campus partners) use, but we again show how the design system can be applied to new components not seen in school/college framework sites.
