Menu

The ACC's App Framework Version 2.8 Code Name: Bristol

The American College of Cardiology is proud of its standards of excellence when it comes to the information it supplies to the best cardiologists in the world. And now it is taking great pains to bring that exceptional standards to its UI design.

Design Philosophy

Bristol is the first major release for UI & Design Standards by the college. The project was spearheaded by a cross division team governed by the Design Standards and Branding Commitee which was made up by team members from Digital Stradegy, Marketing & Branding, and IT.

The newest design from IT team is code named Bristol and ink. The design is intended to be clean, open and focused on making data entry as smooth as possible. Subtle textures and single lines mimic the feel of a pad of paper and a ball point pen. The design consists of clean usage of a single "ink" and shades of grey. The other "action" colors are used to imply intent or application responses. Simple modifications of the primary ink color allows recognition and product branding.

What Benefits Does the Framework give.

From our member's perspective, the expectation is that the guide will make ACC products instantly recognizable through consistent brand and visual design across print and digital products. Good and consistent interaction design with reduce the customer learning curve of our digital product while reinforcing the ACC brand.

Internally, the guide has significant benefits as well, if used during product design and development:

  • Reduce product design time by providing a visual design framework, eliminating the need for recurring style decisions
  • Reduce product development time by providing a user interface element code base from which to generate customized designs.
  • Enable product suite updates, and reduce single app maintenance.

New to Bristol

Version 2.8

Page Level Callouts '.page-message'
  • Page or system level alert designs
  • Page Messages are State Effected

Version 2.7

Ghost Cards
  • State effected ghost cards fade into the background
  • Colored Paper morph and shrink when on ghost cards

Version 2.6

Graphic Enhancement of Overlap Tabs
  • Selectecd and/or Active tab treatment
  • Branding Level now colors tab treatments

Version 2.5

Refactor of Paper Cards
  • Paper Cards
  • Colored Paper Refactored
  • Background Paper States
  • Colored Paper States
New Features to Tabs
  • Lock added Tab States
  • Visited added Tab States
Overlap Tabs
  • DOM Change
  • Overlap Tabs will now stay in line with cards with the added change of moving nav.overlap to a container element

Version 2.4

Foundation 6.2
  • Button Group altered to use Foundation stack functions
Refactoring of states to remove unused states. Current List of States
  • Error (.error)
  • Warning (.warning)
  • Success (.success)
  • Info (.info)
  • highlighted (.highlighted)
  • disabled (.disabled)
Switch Upgrade
  • Grouped Switches
  • State Coloring for inactive and active states on switches
  • Paper Layer responds to vertical break points
  • Page Layout responds to vertical break points
Spacing and alignment
  • Paint Dipped Cards. Alignment of holders
  • use of calc() to remove single spaces of boarders when in browsers that support the function

Version 2.3

Vertical Media Queries and Adjustments
  • Modular Scale Modification - line height and margin adapth to small height
  • Vertical breakpoints added at 320, 480, 768px
  • Paper Layer responds to vertical break points
  • Page Layout responds to vertical break points

Version 2.2

Grid Based Questions
  • Size Modifies
  • Label Location Modifier
  • Indent Modifier
  • Repeating Input Grouping

Version 2.1

  • Unit Switches
  • Grid Based Questions

Version 2.0

  • Foundation 6 is now fully integrated with the Framework
  • Expanded Paper details
  • New Switches
  • Button Groups Simplified
  • New Top Bar for Web Layouts
Version 1 Documentation