Create consistency with reusable design components.
To motivate: an activity inspired by Can't Unsee: compare two slides on the screen. Which one looks "most correct"? (I think this activity would fit a little better in #7 but I could use it here, too)
How can we create consistency and re-usability?
At the text level
Using markdown or inline classes, esp color classes, like .yellow[word]
๐ Rely on xaringanthemer and be consistent with structure.
At the block level
Boxes or groups of content that appear on the slide
๐ Write CSS classes (maybe more than one class!)
At the slide level
When the whole slide is a little different
E.g. the header_background from xaringanthemer
๐ Write a slide-level CSS class in combination with layout: true and template from remark
Activity
Two options (attendees will pick one to work on)
Create a quote with attribution box โ large quote text, small attribution text
Write a CSS .quote and .attribution class
Create a slide template for a slide with an image on the right
Slide-level CSS for .image-sidebar-right and .image-sidebar-right .attribution
Template slide using remark variables for the image and attribution details
Fantastic materials, both in terms of the content, the pedagogy, and the design!
I'll be teaching a large introductory statistics course at UC Berkeley in the spring and am looking for a web framework for our course website. I'm very inspired with what you created here for the workshop. What was your overall impression of using the Apero theme? Would you use it again for a subsequent workshop? Any lessons learned?
We need to explicitly make a note about needing to also install showtext with xaringanthemer. It's in Suggests because it's not a hard dependency, but it's required by the xaringanthemer template and by the ggplot2 theming stuff.
Create a complete theme for xaringan based on your institution or organization's style guide
xaringanthemer helps you build a complete set of styles for your slides
Start with one or two colors: style_duo_* or style_mono_*
The rest of the function name describes how those colors create the starting theme
The defaults are a starting point
The xaringanthemer template helps during the process and includes examples of nearly every slide component.
How to use xaringanthemer
(these things are done for you in the template)
Set css: xaringan-themer.css in the YAML header
Call style_* in an R chunk
OR create the xaringan-themer.css file in a separate R script
Translating a style guide to slides: keep it simple
Recreate the look and feel, but it doesn't need to be perfect
Don't use every color or every font
Example slides that uses every color in the palette
Example slides that use just one (or two) colors for emphasis
Strive for visual consistency
Activity
This activity can be a bit longer with a guide to move participants through
Bring your own style guide (or use one of our favorites)
Create a new R Markdown document from xaringanthemer's Ninja Themed Presentation template.
I might put the template in the starter kit with a note that you can get to the same place using the R Markdown template.
Colors: Use your style guide to pick one or two primary colors to be used throughout your slides.
Is one color dominant? Try style_mono_accent()
Are two colors commonly paired together? Try style_duo_accent().
Typography: style guides typically prescribe specific fonts for headings and text body.
Which fonts does your style guide recommend?
Sans serif fonts are typically easier to read on screens and at a distance. If your style guide uses both serif and sans serif fonts, try to use serif for the headings. Keep in mind that you can deviate a little for the sake of legibility.
Understand how to organize content to help focus your audience's attention
Material
using content classes
writing descriptive titles (i.e. give your audience the answer)
add presenter notes
use incremental reveals (a11y caveat here)
declutter
if it's not critical don't include it (use backup slides)
present graph & html table versions (with backup slides, but panelsets could also be good for this)
Activity idea
identify and talk through all of the different ways an ineffective slide could be made better. what xaringan tools do you already have that you could use?