In today’s world, ACC members wish to interact with the College's digital resources on their own terms—when and where they want—utilizing increasingly varied devices and channels. In order to most effectively accommodate member needs and leverage the significance of the ACC brand as a selling point, it is important that the College's digital portfolio provide a unified and seamless experience.

The ACC digital portfolio consists of roughly 150 digital products, including websites, microsites, mobile apps, and newsletters. This Online User Experience (UX) Design Guide is a critical tool for use in achieving a consistent and intuitive user experience across the College's digital inventory. The guide contributes to the success of products by providing:

1. A unified visual design framework with specifications that expand on and clarify existing ACC.org styles, providing a visual “umbrella” for ACC digital offerings to align with. It also clarifies the similarities and differences of ACC print and web standards.
2. Interactive design standards and User Interface (UI) element templates based on UX best practices to improve the consistency and usability of ACC digital products across platforms.
3. Guidance on how to use the guide for product design and development.
4. Ease of access to the College's standards for both internal and external developers, in order to promote consistency across ACC digital products.

When used during product design and development, the online UX Design Guide Project provides the following benefits:

• A more consistent, predictable, and satisfying user experience for members and other users
• A more unified and professional brand image across ACC digital products
• A standard user interface (UI) design policy, providing a design baseline for new product development, thus improving the efficiency of product development and ensuring that ACC products look like ACC products

ACC has three main product families with distinctly different user populations:

1. Member/Cardiology-centered products. This includes clinical, education, advocacy, JACC, Annual Meeting, and other member-related products.
2. Institutional products for quality improvement and measurement.
3. Patient-centered products that cater to patient and caregiver needs.

While the initial release of this style guide is primarily focused on the College's member-centered digital offerings, future releases will provide greater focus on the Institutional and Patient-centered families. Moreover, while the sections below focus on visual styles, subsequent releases of the Design Guide will include interactive standards that specify UI elements and their expected behaviors. Please note, the College's Logo and Branding standards apply across all ACC product families without exception.

The primary color in the ACC logo, "ACC Brand Blue," is a blue built from process colors consisting of 100 percent Cyan, 69 percent Magenta, 8 percent Yellow, and 54 percent Black. From a print perspective, the closest spot color to this build is PMS 295. For Web-use purposes, the hexadecimal (hex) number for ACC Brand Blue is #002e5a. Please note, "ACC Brand Blue" is similar in appearance to the dark blue used for ACC.org's navigation bar (see "Use of Color" section below); however, ACC Brand Blue is not intended for use in navigation schemes.

As referenced in examples 1 and 3, the ACC logo can be presented in both ACC Brand Blue (#002e5a) and "black" (#212020). No other colors may be used to reproduce the ACC logo. On dark backgrounds (examples 2 and 4), only the type on the right side changes to white. Nothing on the seal portion of the logo changes color.

All use of ACC brand identity artwork is contingent upon prior agreement, review and approval, without exception.

Example 1 Example 2

Mobile-Friendly Simplified Logo Treatment Example 3 Example 4

Branding Artwork Files (EPS format) for Download* ACC Seal >>> This logo treatment is reserved for special applications such as certificates and should not be applied to web or mobile applications by default without permission. ACC Signature Lockup >>> This logo treatment is the primary and default identifier for all ACC properties. ACC Signature Mobile-Friendly Simplified Lockup >>> This logo treatment is reserved for instances where branding artwork is needed for extremely small spaces (e.g., within a mobile footer). The .svg file format is recommended for this treatment in order to ensure maximum clarity of image. For further guidance on ACC Brand Standards, please consult the ACC Brand Identity Standards Manual by clicking here or consult with ACC’s Creative and Branding Team. * The use of ACC brand identity artwork is contingent upon prior agreement, review and approval, without exception.

Icons are used to indicate calls to action and/or to clarify the function of the link (e.g., a link to an external website or a link to a downloadable media file, etc.). In order to maintain a consistent and cohesive design, the use of the Font Awesome suite of iconography is considered best practice, rather than image based icons or custom designs of whatever format. Click here for a full list of Font Awesome css-based icons >>>

Uniform use of fonts aids communication and ensures consistency in brand presentation. A clear hierarchy for the type system has been created to help visitors navigate through the site efficiently. The fonts used in the design complement one another and establish the ACC.org brand.

The following typefaces are used:

• OpenSans is used for the majority of body text on ACC.org. OpenSans is a web font available for download here. The font was chosen for graphical treatments because it creates greater visual hierarchy within the site and helps establish a distinct and recognizable online experience. Roboto Sans is an acceptable alternative font for body text.

OpenSans | The quick brown fox jumps over the lazy dog

• Roboto may also be used as a primary font as an alternative to OpenSans. A web font, it is available for download here. Its application is more for titles and main navigation.

Roboto | The quick brown fox jumps over the lazy dog

• Roboto Slab is also a web font available for download here. Its application is more for titles and main navigation.

Roboto Slab | The quick brown fox jumps over the lazy dog

NOTE: The Google font, Raleway, is currently being used on ACC.org but is being phased out in favor of OpenSans. Please do not use Raleway for future products.

Please follow the following best practices:

DO NOT

• Use font families other than OpenSans, Roboto Sans or Roboto Slab
• Manipulate the integrity of typefaces
• Skew, stretch, or warp type
• Ghost type (i.e., use a % tint against a dark background).

The color palette for the ACC.org web site is loosely based on the ACC family of colors. The palette has been adapted to the online environment and augmented with additional colors appropriate to interactive information display. This will ensure an elegant visual design system.

The color palette for the site makes up the overall visual appearance of the header, footer, modules, menus and other graphical elements.

ACC.org is an example of a content-heavy site, consequently, ease of reading is of the utmost visual importance. To promote readability on Web pages with high text density, follow the simple color guidelines below:

• Use white as the dominating field of color on a page as to make reading easier.
• Use the darker blue or lighter blue for call to action text links, menus, and buttons.
• Use the scrubs green for calls to action involving financial transactions.
• Use lighter colors as backgrounds with the exception of the footer, which leverages the dark grey.

It is important to use consistent imagery that complements the open, clean, and vibrant visual design. When selecting images for Web use, please follow these best practices:

.jpg
e.g., Article images, headshots and icons (.jpg is a compressed image format. Depending on the compression setting applied when the image is saved, you may see artifacts and fuzziness. It is our recommendation that .jpg files be saved for web use using the default "Save for Web..." setting in Adobe Photoshop, which allows for an ideal balance of clarity and reduced file size)

DO Use vibrant, clearly focused full color images whenever possible Use stock photography or other professional photography Select images that support the content of a page and the ACC.org brand DO NOT Do not use images below 72 dpi Do not skew, stretch, or warp images out of perspective Do not use non-edited imagery or personal photography

Please refer to the ACC Branding section above for guidance on the proper formatting and styling of ALL ACC brand identity imagery. The use of ACC brand identity artwork is contingent upon prior agreement, review and approval, without exception.

Primary Image Format .jpg e.g., Article images, headshots and icons (.jpg is a compressed image format. Depending on the compression setting applied when the image is saved, you may see artifacts and fuzziness. It is our recommendation that .jpg files be saved for web use using the default "Save for Web..." setting in Adobe Photoshop, which allows for an ideal balance of clarity and reduced file size) Acceptable Image Note: Clarity and ideal file size (110px x 110px 4.8 KB) Unacceptable Image Note: Fuzziness/pixelization and larger file size due to jpg compression settings (110px x 110px 14.5 KB)

Secondary (Limited Use) Image Formats .png e.g., Branding and logo artwork (.png is a lossless image-type. Images saved in this format can have greater clarity at the expense of a larger file size, which can ultimately increase page-load times. The .png format also supports transparent backgrounds.)

.svg e.g., Branding and logos (.svg is an XML-based vector image format; which excellent for small mobile-screen rendering of logo artwork. e.g., ACC.org's mobile header is an .svg file)

Non-Standard Image Formats .gif (includes: animations* and memes. GIF format is occasionally used for iconography, but such usage is discouraged).

* While high quality animated GIF files can potentially be used for educational imagery (e.g., irregular heartbeats or an echocardiogram); however, repeat instances of animated GIF files on a Web page can cause Web browsers to crash. It is recommended that inline video be used for such illustrations, rather than animated GIF files.

Header

For the main ACC member websites, it is recommended that the layout of UI elements be consistent with ACC.org in order to most effectively communicate the ACC brand. Header UI element guidelines are as follows:

1. The primary Logo treatment should be in the upper left portion of the header space.
2. Navigation Bar, dropdown menus and interactive behaviors should compositionally and functionally align with acc.org styles (e.g., color, font families, size parameters and spacing)
• Roboto Slab for menu titles on the navigation bar (size, line width, and color)
• Menu items should follow font selection for overall site (either roboto sans or open sans)
• The “home” icon should be the first element on the nav bar.
3. Quick/utility Links (located at the upper right portion of the header space, above the search bar) should be in the font selected for the site (roboto sans or open sans)
4. Login/Library toggle button placed to the right of the Navigation bar, with label appropriate to the site
5. “Create an account” link, if required, should be place above the login/library button and aligned right with quick link text.
6. The search text field should be consistent with the visual style of ACC.org. (“All Types” menu is optional).

Spacing parameters

Footer

As with the header, the footer space of ACC member websites should compositionally and functionally align with ACC.org styles (e.g., color, font families, size parameters and spacing) in order to most effectively communicate the ACC brand. Acceptable fonts for use in the footer space are OpenSans or Roboto.

Spacing parameters