Design Language

Use the arrow keys / swipe to navigate.

Materials

Download the slides
Download the slides with notes

Gladwell, Malcolm. Blink : the power of thinking without thinking. New York: Back Bay Books, 2007.

1 Messing, Solomon. “Visualization series: Insight from Cleveland and Tufte on plotting numeric data by groups“ solomonmg.github.io/blog/. Web. 14 Oct. 2014.
For more: https://web.cs.dal.ca/~sbrooks/csci4166-6406/seminars/readings/Cleveland_GraphicalPerception_Science85.pdf

http://www.excelcharts.com/blog/data-visualization-excel-users/excel-charts-pie-charts/

M.C. Escher. “Relativity,” 1953. http://www.mcescher.com/gallery/impossible-constructions/relativity/ Web. 14 Oct. 2014.

https://eagereyes.org/basics/rainbow-color-map

https://eagereyes.org/basics/rainbow-color-map
http://colorbrewer2.org/#

http://blog.plot.ly/post/125942000947/how-to-analyze-data-6-useful-ways-to-use-color-in

Each slide should aid one of these two goals
If I drop a deck on the floor and the pages scatter, the goal is that each slide can stand on its own and tell an individual story without the rest of the deck, but still contribute to the overarching story and intelligence developed in the

*That said, eyes will always be drawn to images / color before text, so text that must be read prior to the graphic may best be located on a slide prior to the graphic.

http://www.excelcharts.com/blog/why-dont-like-bar-charts/

Note: this applies to lists that require recall: 7 +/-2 applies to working memory. Miller’s Law does NOT need to apply to standard, written text if there is no recall requirement following

http://psychclassics.yorku.ca/Miller/
http://www.wikiwand.com/en/The_Magical_Number_Seven,_Plus_or_Minus_Two
http://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven

1 Tufte, Edward R. Envisioning Information. Cheshire, CT: Graphics, 1995. 50. Print.
2 Demaj , Damien and Field , Kenneth. “Map Examples, Figure 38.“ ICA Commission on Map Design. Web. 7 Oct. 2014.
3 Munroe, Randall. “Movie Narrative Charts“ XKCD, no. 657. Web. 7 Oct. 2014.

1 Tufte, Edward R. The Visual Display of Quantitative Information, 2nd ed. Cheshire, CT: Graphics, 2011. 169. Print.
2 Tufte, Edward R. The Visual Display of Quantitative Information, 2nd ed. Cheshire, CT: Graphics, 2011. 168. Print.

1 Tufte, Edward R. Envisioning Information. Cheshire, CT: Graphics, 1995. Ch 5. Print. Images borrowed with appreciation from Tim Bray’s illustration of data-ink ratio Bray, Tim. “The Data-Ink Ratio Example“ ongoing. Web. 7 Oct. 2014.

Images borrowed with appreciation from Tim Bray’s illustration of data-ink ratio Bray, Tim. “The Data-Ink Ratio Example“ ongoing. Web. 7 Oct. 2014.

http://www.juiceanalytics.com/writing/10-ways-to-reduce-to-improve-your-data-visualizations

http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
http://worqx.com/color/color_wheel.htm

http://worqx.com/color/combinations.htm
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

“strong” colors (high saturation, middle value) activate negative space (whitespace) Consider color contrasts.
1 B&W is actually harder on the eyes/harder to read then white & dk grey.
2 Strong colors will overwhelm weaker ones, which can be imputed to align with importance or add’l interpretation (which may be unintentional / incorrect)
3 Super-strong colors (fire engine red, neon orange) are to be avoided unless there is a specific STRONG reason for using such a strong color

http://www.incredibleart.org/lessons/middle/color2.htm
http://mwpdigitalmedia.com/blog/psychology-colour-video-post-production/

http://www.colormatters.com/color-symbolism
http://www.zevendesign.com/color-association/

http://hackerspace.lifehacker.com/some-os-x-calendar-tips-1658107833/1665644975/

Finkelstein, Ellen. “Choose fonts and colors for legibility“ EllenFinkelstein.com, July 10th, 2002. Web. 7 Oct. 2014.

http://www.webreference.com/dlab/9704/backgr.html
http://www.colortools.net/color_text_on_background.html

http://www.juiceanalytics.com/writing/make-your-text-readable-with-4-easy-tips

http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/
http://www.smashingmagazine.com/2010/05/06/50-helpful-typography-tools-and-resources/
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
http://net.tutsplus.com/tutorials/html-css-techniques/typography-on-the-web/

http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/
http://www.screencast.com/t/MTAzNDhl

https://medium.com/truth-labs/designing-data-driven-interfaces-a75d62997631?ref=webdesignernews.com

Juice Analytics Guide to Dashboard Design http://labs.juiceanalytics.com/chartchooser/index.html

http://www.labnol.org/software/find-right-chart-type-for-your-data/6523/ or http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html
Also, see:

https://eagereyes.org/basics/rainbow-color-map
http://hackerspace.lifehacker.com/some-os-x-calendar-tips-1658107833/1665644975/

http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/
http://colorusage.arc.nasa.gov/legib_1.php