Guides for Designers

Everything you need to design for a uthscsa.edu website

Pattern Library

At the core of all Web Initiatives sites is the Pattern Library. Here you will find all the patterns we use to assemble templates and pages. Using these patterns will build websites that are consistent with UT Health San Antonio branding guidelines.

If you’d like to learn more about pattern libraries in general, this is a good starting point. Atomic design is also a great resource for learning about creating pattern libraries.

Examples of Pattern Libraries

• Material Design
• Mailchimp Pattern Library
• U.S. Federal Government Web Design Standards

Accessible Design

It is important that background color and text color sufficiently contrast each other so everyone can read text clearly. Text areas must meet either AA or AAA accessibility standards.

Color Accessibility Tools

• WebAIM Color Contrast Checker
• Contrast Ratio Tool

Typography

To help maintain a consistent, unified appearance, UT Health San Antonio’s brand standards adopted a set of typefaces to use for all communications. For online applications, we have selected two typefaces for use that are freely available from Google Fonts.

• Headings - Cardo Regular and Bold
• Body - Open Sans Regular, Regular Italic and Bold

Icon Library

We use an icon font to render icons on many of the pages in uthscsa.edu. You can download the icon font below or create your own customized icon set from Font Awesome. (this section still needs some work)

• Download UT Health San Antonio icon font
• Copy and paste icons from Font Awesome

Media Guides

To help guide you with photo and video selection, we have created photo and video guides. The guides provide technical specs as well as tips for selecting media based on what users are looking for on the page. In addition, the video guide includes optimization guidelines for YouTube.

• Web photo guide
• Video guide

Design Thinking

There are many things to consider when designing websites. We’ve compiled a few links that we think are useful for our designers.

• A Virtual Crash Course in Design Thinking, Stanford D.School
• Design Thinking, IDEO U
• Design Thinking… What is That?, Fast Company
• Designers - think big!, Tim Brown TED talk  
• Teaching design for change, Emily Pilloton TED talk

If you’re interested in learning more about how these standards are created or have any general design questions, contact the Web Team.