Guidelines and references used in site design.
The site uses solutions based on the ideas and philosophy of several sources. Use these links and references to get a deeper understanding of how the different components of the site were built and how they are maintained.
- "Atomic Design by Brad Frost"
Principles of web design and Pattern Lab.
- Pattern Lab
Guide for creating atomic designs.
- "Naming SASS Color Variables" by Geoff Graham
- "Better SASS variables through abstraction" by Craig Dennis
- "Typographic Design Patterns And Current Practices (2013 Edition)"
On the importance of typographic details in good web design.
- "Myth #3: People Don't Scroll"
Research-based article from UX Myths.
- WebAIM Color Contrast Checker
Test and evaluate color contrast ratios of website elements to determine content accessibility using WCAG guidelines.
- "Making Data Tables Responsive"
Code and instructions from NPR on creating responsive tables.
- Kalamuna / Kalastatic
Static site framework for prototyping and building out CMS-less web sites on GitHub.
KSS template and style guide for Bootstrap.
- Sass Colour Function Calculator
Calculate the Sass color function required to get from one color to another.
5-1.3 Data visualization
- “Doing the Line Charts Right.”
Vis4.net. Aisch, Gregor. Graphics, June 2012. Web. 30 March 2016.
- “Charts and Accessibility”.
Accessibility and Usability at Penn State. n.d. Web 30 March 2016.
- Web Content Accessibility Guidelines (WCAG) 2.0.
W3C Recommendation 11 December 2008. Web. 30 March 2016.
- ColorBrewer 2.0: Color Advice for Cartography.
Brewer, Cynthia. Web 10 August 2016.
5-2 Data Visualization Guidelines
Apply these principles to data charts and graphs. When developing and creating data visualization objects:
- Use FRBSF.org data visualization colors, which are designed to complement the Brand palette.
- Use approved color combinations optimized for users with Protanopia and Deuteranopia color blindness, and black-and-white printing.
- Use other approaches besides color (texture, varying shapes) to communicate information in charts.
- Focus on readability of chart by considering “data-ink ratio.”
- Keep the non-erasable core of a graphic and remove or de-emphasize unnecessary elements (for example, border around charts).
- Include copy that explains the visualization (for accessibility purposes).
- Place the labels close to data lines when possible instead of in a separate legend.
- Format figure and chart titles and source attributions as text outside of images for accessibility and search optimization.