ACC Design System

What is a Design System?

A design system is a series of components, elements, or templates that can be used and reused in different combinations to build websites and applications. Design systems allow designers and developers to develop and manage design at a large scale.

ACCDS

The ACC Design System (ACCDS) was created so that developers and designers across the Austin Community College District can build websites and applications that carry forward a consistent user experience as well as a distinctive ACC branded look and feel.

Using ACCDS in conjunction with best practices in content development, information architecture planning, accessibility, and usability testing will help designers and developers at ACC produce websites and web applications that have a consistent user experience, while maximizing efficiency by eliminating the need to recreate a new user interface (UI) for each new digital web-based deliverable.

Brand

Successful brands communicate a strong vision through words and visuals that are consistent with ACC’s image and relevant to its audiences. Branding impacts how the community perceives the college’s mission, vision, and values.

The ACC brand is recognized in the community, for its reputation as both an accessible and quality college destination. It is the charge of ACCDS to reinforce and safeguard the ACC brand identity through consistent visual design and seamless user experiences.

Consistent branding across ACC’s websites and applications is crucial because of the overall impact it makes on the community and its audience. Our brand embodies the value we provide and its consistent implementation results in trust and motivates audiences to stay engaged through every phase of their journey.

Design

Color

Use of the brand colors helps to emphasize the ACC brand throughout our digital assets. The colors incorporated into the ACCDS use the ACC Web palette [link to it on OCM website] and are optimal for displays. Colors were chosen based not only on the ACC brand but on how well they appear on different monitors and screens. The colors incorporated into the design system also provide enough contrast to meet accessibility design standards.

Typography

Using consistent typography plays a major role in establishing brands and reinforcing strong messages. With consistent use, typographic styles create clear paths for users allowing them to move through a website or application easier and with greater positive user experience. ACCDS uses a Hoefler & Co. ScreenSmart font which is part of a fully-featured type family that offers outstanding quality at multiple text sizes on all platforms. ACCDS provides this typeface as well as alternatives for use in some cases.

Components

ACCDS provides a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. These help ACC developers and designers focus on solving user problems, rather than reinventing interface elements. A component-based design system gives webpages and applications both visual and functional consistency, helping make users feel at home and easily navigate their way to complete the desired interactions with an ACC product. New components are being developed and are integrated as they become available.

Content

Ceontent should be formatted a certain way to provide consistency. This content ranges from phone numbers and addresses to testimonials and special page templates. Content standards are derived from the ACC Web Style Guide and integrated into ACCDS when possible.

Using ACCDS

If you are building web pages using Drupal, ACC’s main content management system (CMS), then you are already using ACCDS. ACCDS is the foundation for the main website theme that Drupal uses by default.

Not all websites and applications at ACC are built on the same framework, but they can all share similar and consistent looking components and content structures that are within brand standards to lend a feeling of cohesiveness. If you are developing an application or website outside of ACC’s main CMS, contact us and work with the OCM web team on the best way to deploy ACCDS to your project.

ACCDS was developed for designers and developers so that they can create component-based user interfaces which reflect ACC’s brand. Using ACCDS saves time and can ensure a consistent experience across any ACC website or application.