Brand execution guidelines

Building a website on asu.edu

The ASU web ecosystem (asu.edu) is a complex website that fulfills diverse needs and audiences. Data shows that visitors to asu.edu view it as one ASU website versus a collection of subdomains maintained by individual units. As such, ASU has worked diligently to support community-driven efforts to build the Unity Design System, a platform-agnostic design system, designed to build high-quality, brand-aligned digital experiences.

Unity Design System

Unity Design System (UDS) is an ASU brand standards-aligned, research, user testing and data-informed platform-agnostic UI kit and component library that enables all units to deliver a consistent user experience across asu.edu. Developed to be platform agnostic, UDS can be used with any back-end platform like Drupal 9, Wordpress, Webspark and more. As the standard for user interface design and user experience for asu.edu, UDS empowers units to focus their resources on the content and the needs of their audiences and limits the duplication of development and design resource expenditures across the enterprise.

Get started with UDS

Web development at ASU

ASU uses Drupal 9 as a tool and framework for mainstream website development. Pantheon is the preferred hosting environment for Drupal sites. Currently, all enterprise web products and platforms are led by Enterprise Technology.

To learn more about ASU’s web products and platforms, contact the ASU web consulting team.

Glossary

Web standards: The university wide standards for all aspects of asu.edu.
Web Standards 2.0: The first standards for asu.edu were launched in 2015. Web Standards 2.0 is the next, and more comprehensive, overhaul of standards for asu.edu.
Web standards 2.0 limited: The first compliance state for the web standards 2.0 project (Jan. 31, 2021) — WS2L addressed the most problematic user experiences across asu.edu, navigation and site identification. The Jan. 31 deadline required that the new header and footer be installed on asu.edu sites and including updating sites to Arial (used in the new header and footer component) from Roboto.
CMS — Content Management System: Helps users create, manage and modify content on a website without the need for technical knowledge. They provide a web-based tool that enables users to build on-brand and best practices-based sites through a simple content editing interface — similar to formatting text in Microsoft Word or Google Docs — no coding knowledge required.
Drupal: An open-source web content management system that can be customized and used to build websites and platforms. Drupal is the foundation for ASU’s Unity Design System and Webspark. It is the back-end framework for more than 13% of the top 10,000 websites worldwide.
Webspark: ASU’s customized version of Drupal that allows anyone to create a website that has the ASU standards baked into the site, components and templates. The first version of Webspark, Webspark 1 was initially released in 2015 and is built on Drupal 7 and has been continually updated since its release. Webspark 1 has been replaced by Webspark 2 so the university is no longer supporting Webspark 1 sites. The current version, Webspark 2, is built on Drupal 9 and includes the UI kit components developed throughout the Web Standards 2.0 project.
Unity Design System, “Unity,” UDS: Unity Design System, named after Unity Avenue on ASU’s Polytechnic campus, is the platform-agnostic UI kit/code library (built with Bootstrap 4 and React.js frameworks) based on user experience and accessibility best practices, data, research, user testing and ASU brand standards. It is the outcome of many months of work by the community throughout the Web Standards 2.0 project. Having a design system allows all of asu.edu to adopt a unified set of standards that represents the ASU brand and prioritizes an optimal user experience, regardless of how each individual website is built — creating a more seamless experience for asu.edu visitors.
Pantheon: ASU’s web hosting and sharing environment. Webspark 2 can be installed from Pantheon.
Bootstrap: This is a CSS framework for front-end web development. It contains HTML, CSS and JavaScript based design templates for buttons, spacing, typography and other interface components.
React: React open-source front-end JavaScript library for more interactive components, e.g. degree pages. React can be used to develop single-page, mobile, or server-rendered applications with frameworks
Module: a pre-coded component that can be used to build a website. Drupal has core modules created to help developers build websites. ASU created custom modules in Drupal which make up our Unity Design System. UDS is created from multiple custom modules to ensure ASU components are branded to ASU standards. ASU also uses some contributed Drupal modules made by the Drupal community.
Component: A standardized component to feature or display common content needs across a website (ie. asu.edu). Having standardized components for common content display needs across asu.edu ensures brand alignment and reduces resource expenditures across the university by providing standardized solutions for components units ]might otherwise have to spend time researching, developing and testing. This also improves user experience across asu.edu as users do not have to relearn or reorient to new content display and styles.
UI kit — user interface kit: A collection of shareable, reusable design elements such as components to display content and navigation, spacing grid and text styles. The UI kit components in Storybook is the code of the Unity Design system. The UI Kit in Adobe XD is the design library of components that comprise the Unity Design System
Design system: A collection of reusable components (UI kit), guided by clear standards, that can be assembled together to build any number of websites and maintain standards alignment.