Design principles

Last updated:

Use these design principles to help you build an accessible UW Theme 2.0 site that reflects the UW brand’s style and spirit. Anyone can follow them, whatever your role, and we showcase the sites that demonstrate them best so others have real examples to learn from and reference.

View showcase sites

On this page

  1. Accessible design
  2. Patterns and defaults
  3. Clear heading structure
  4. Plain language
  5. Visual balance
  6. Generous spacing
  7. On brand
  8. Meaningful imagery
  9. Clear navigation
  10. Consistent design

1

Accessible design

A strong site is one everyone can use, whatever device or assistive technology they rely on. Meeting the UW Digital Accessibility Policy and passing automated checks is required, but a strong sites also passes the visual checks that only a person can do.

What to look for

  • Sites meet the UW Digital Accessibility Policy.
  • Content stacks in a logical reading order on smaller screen sizes.
  • Visual hierarchy stays clear in the “squint test,” even when detail blurs.
  • Need-to-know content is visible on the page, not hidden in accordions or tabs.
  • Color contrast is high, and color is never the only way meaning is communicated.
  • Meaningful images have alternative text that describes them.

Learn how:

2

Patterns and defaults

A strong site is built from the UW Theme’s patterns and default styles, so pages look organized, work well on small screens, and stay on brand.

What to look for

  • Pages use the theme’s patterns so layouts and visual design stay cohesive across the site.
  • Pages are built from theme patterns, not from scratch.
  • Blocks keep their default styles, with no custom overrides.
  • Separators and borders are used sparingly, only to mark a deliberate shift between content.
  • Posts, people, and events use the theme’s blocks and plugins, so listings update automatically and look the same everywhere.
  • No custom code or styles are added through the code editor.

Learn how:

3

Clear heading structure

A strong site uses heading levels that form a logical outline that screen readers and people scanning the page can both follow.

What to look for

  • Each page has exactly one H1, set by the Title block.
  • Heading levels go down in order without skipping levels (an H2 is followed by an H3, not an H4).
  • Text size is changed with font size settings, never by changing the heading level.
  • Text that introduces a section uses a Heading block, not a paragraph made bold or larger to look like one.

Learn how:

4

Plain language

A strong site uses plain, scannable language that helps readers understand the page and complete their tasks.

What to look for

  • Link text is descriptive and makes sense on it’s own, never “Learn more” or “Click here.”
  • Headings are short and scannable, not paragraph-length statements.
  • Long passages are broken into short paragraphs under descriptive subheadings.
  • Headings, links, buttons, and navigation use sentence case.
  • All-caps text is avoided, except for acronyms, for readability and screen reader support.
  • Content is ordered by importance, with what readers need most at the top of the page and less important information after it.

Learn how:

5

Visual balance

A strong site makes intentional visual choices — size, spacing, contrast, and alignment — that guide users to what matters most and makes each page feel polished, not accidental.

What to look for

  • The most important content and actions carry the most visual weight.
  • Visual emphasis, like drop shadows, background colors, and red text, is saved for the few things that matter most, not applied everywhere.
  • Text uses a small set of deliberate font sizes and weights, not many competing ones.
  • Related content is grouped with the WordPress Group block to create content sections.
  • Cards hold a few lines of content, not mini-pages.

Learn how:

6

Generous spacing

A strong site gives content room to breathe and a comfortable reading width, so nothing feels cramped. Most pages are too tight, and long text is often set too wide.

What to look for

  • Content sections have generous top and bottom padding: 2XL ideally, XL at minimum.
  • Related items sit close together, and wider spacing separates sections from one another.
  • The same spacing values repeat across pages for predictable rhythm.
  • Long-form text stays at a comfortable reading width, not stretched to wide or full width.
  • Centered text is limited to a few lines, and longer passages are left-aligned.

Learn how:

7

On-brand design

A strong site uses a recognizable UW visual language that makes it feel part of the university.

What to look for

  • Colors come from the UW-branded palette in the theme, with nothing outside of it.
  • Red is used sparingly and intentionally.
  • Link text stay the standard blue.
  • The Red Mini Bar is used consistently across the site, for example on every page title.
  • Icons, photos, and other visual assets come from UW brand resources.

Learn how:

8

Meaningful imagery

A strong site uses high-quality, purposeful images that support the content.

What to look for

  • Photos are crisp, high-quality, and relevant to the content, not filler.
  • No text is embedded into images.
  • Text over an image (Cover block) has sufficient contrast to read easily.
  • Imagery is sourced from the UW Photo Library where possible.
  • Theme placeholder images in patterns are replaced with real photos.
  • Alt text describes the image rather than standing in for embedded text.
  • Icons next to text match its meaning, never replacing words on their own.

Learn how:

9

Clear navigation

A strong site has a predictable structure that helps visitors find what they need quickly.

What to look for

  • The site has a clear information architecture, organized around what visitors need to do rather than the unit’s internal structure, so content is easy to find.
  • Each dropdown within the Main Menu is short enough to see without scrolling.
  • Menu labels use clear, familiar words, not internal jargon, acronyms, or clever names.
  • Long, information-heavy pages use jump links, like an “Oh this page” list, that link to each section.
  • Every page has a clear purpose and is kept current. Outdated or duplicate pages are updated, combined, or removed.
  • URLs are readable, like /all-news instead of ?/post_type=post.

Learn how:

10

Consistent design

A strong site makes consistent design choices from page to page, so it feels unified instead of chaotic, and visitors always know what to expect and where to find information.

What to look for

  • Pages of the same type, like program or profile pages, use the same layout and section order.
  • Repeated elements, like jump links or contact information, appear in predictable places from page to page.
  • Buttons, links, and cars stick to a small set of styles and colors used across the site, not a new look on every page.
  • Spacing, content, and text alignment are applied the same way across the site.
  • If pages use a hero or mini-hero image, they should use the same height and title position.
  • Items in a set, like cards or carousel slides, match each other in structure and style.

Learn how:

Get more help

WiscWeb sites

If your UW Theme 2.0 site is hosted in the WiscWeb WordPress Service, contact their support team for help.

Contact WiscWeb support

Non-WiscWeb sites

If you manage or develop a custom
UW Theme 2.0 site outside of WiscWeb, email the UW Theme team.

Email the UW Theme team

Weekly Office Hours

Get one-on-one help with design, accessibility, and WordPress in weekly office hours.

Sign up for office hours

Not sure who to contact? Email the UW Theme Team or find additional resources.