4. ASU web standards

Featured image for Pitchfork Tutorial No. 4: ASU Web standards.

ASU has brand and style guidelines that are baked into the Pitchfork theme. Following these standards, you can create consistent, accessible and brand-aligned websites.

What are ASU web standards?

The ASU web standards are a set of guidelines that all ASU websites must follow. These standards are in place to ensure that all ASU websites are consistent, accessible, and user-friendly. They also help to ensure that ASU websites are aligned with ASU’s brand identity.

Pitchfork’s got the standards covered

ASU web standards may seem like a bunch of difficult rules to learn and follow, but we’ve built the ASU Web Standards into the Pitchfork theme. So if you stick to the defaults of the theme and the blocks provided, you’ll be meeting ASU Web Standards without doing anything extra.

What’s included in the ASU web standards?

ASU web standards define almost everything on the site, including fonts, colors, color combinations and even spacing. They make up a carefully crafted design system that takes into account accessibility, usability, design and the ASU Brand. Your site will look very professional and users will experience the confidence of knowing they are visiting an official ASU site.

The Unity Design System (UDS)

The ASU design system that follows ASU Web Standards is called the Unity Design System, or UDS. UDS components comprise many of the websites you see at ASU, and give the sites their “ASU feel.” 

You may notice as you look at many of the sites on ASU, that there are components that are the same or very similar. For example, the large images at the top of pages (hero images), story “cards” or the gold-highlighted text headings are all examples of UDS components.

Custom UDS blocks 

When you are working in Pitchfork websites, you’ll see UDS blocks and standard WordPress blocks.

UDS Blocks create those specially-built UDS components that exactly meet ASU web standards. You will mostly use UDS blocks in your website, though you are welcome to try others.

We will teach you how to use these blocks to make an awesome ASU website!

Where to find UDS blocks

When working in a page, you will insert or edit blocks. WordPress has a “+” button called the “block inserter.” When you click on it, every block is listed. Scroll down to the Pitchfork Blocks and Pitchfork People sections to see the UDS blocks:
Screenshot showing the location of UDS blocks in the WordPress block inserter interface.

Pitchfork patterns

WordPress has the ability to group blocks together to form patterns. For easy page construction, we’ve included Pitchfork Patterns which provide UDS blocks in pre-built layouts, such as a 3-card pattern, or an entire Directory page.

To insert a UDS block or Pattern, just select it from the list and it will go into the page, ready for you to edit.

Pitchfork card patterns
Screenshot of the UDS Pattern inserter in the Pitchfork WordPress theme.
Pitchfork directory patterns
Screenshot of the Pitchfork directory pattern interface in the Pitchfork WordPress theme.

More information

See the web standards and guidelines for asu.edu on the ASU Brand Guide.

Also helpful is the handy webstandards checklist, which can help you audit your own sites to make sure you are meeting ASU Web Standards.

Want to see all the UDS components in one place? Check out the ASU Unity Design System UI Kit.