class: title <div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">9</div> <h1>Design Components</h1> <div class="conf-logo"></div> <div class="talk-meta"> <p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p> <p class="talk-date"> <a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a> </p> </div> --- background-image: url(https://source.unsplash.com/aWXVxy8BSzc) background-size: cover <span role="img" aria-label="Slide background shows: An outdoor concert at a festival, from behind a large audience of fans all with their hands in the air."</span> .footnote.white[Photo by [Hanny Naibaho](https://unsplash.com/@hannynaibaho)] ??? Think about your favorite song? How long would it take you to recognize it? From the first note? When you hear the chorus? --- background-image: url(https://source.unsplash.com/_r0mZJ5QjXU) background-size: cover <span role="img" aria-label="Slide background shows: A busy, pedestrian-only street in Dublin; on the left a man stands on the sidewalk playing an acoustic guitar and singing into a microphone."</span> .footnote.white[Photo by [.white[Alejandro Lopez]](https://unsplash.com/@lopify)] ??? What if you heard the song somewhere totally different? What would it take to recognize it on a crowded street? --- background-image: url(https://source.unsplash.com/tq7RtEvezSY) background-size: cover <span role="img" aria-label="Slide background shows: the hands of a child playing piano in soft focus."</span> .footnote.white[Photo by [.white[Clark Young]](https://unsplash.com/@cbyoung)] ??? Or if you stripped it down to its most minimal parts, how much of the song would you need before you start to sing along. --- .f2[ We can do something .blue[similar] with our slides ] --- class: bottom right .f4[ Consistency makes it .purple[EASIER] to follow ] --- class: header_background # Structure .f5.mt4[ guides .right.mt4[ your ] .center.mt5[ attention ] ] --- class: left middle .f5[ Lorem ipsum dolor sit amet, .red[where] consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore .green[should] et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .orange[you] ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit .purple[be] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui .blue[looking?] officia deserunt mollit anim id est laborum. ] --- class: left middle .f5.black-20[ Lorem ipsum dolor sit amet, .red[where] consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore .green[should] et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .orange[you] ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit .purple[be] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui .blue[looking?] officia deserunt mollit anim id est laborum. ] --- class: center middle bg-blue # .white[Design Makes Communication Easier] ??? If you're anything like me, those last slides were distracting. It was harder to follow what I was saying, especially with the text in so many different places or so much visual information on the screen. But you can use slide design to facilitate communication... --- layout: true class: f6 # Where can you apply design thinking? --- .fl.w-20.b.tr.pr4[ Text ] .fr.w-80[ Markdown or inline classes `.yellow[Watch out...]` ] ??? Use R Markdown and color consistently for specific words. Can you think of any good examples? (code vs packages) Use xaringanthemer to set yourself up for success. -- .fl.w-20.b.tr.pr4.cb[ Block ] .fr.w-80[ Boxes or groups of content `.callout[ ... ]` ] ??? Boxes or groups of content. Example? `.pull-right` Have to remember to apply it consistently, so write your own classes with special meaning if it makes it easier. -- .fl.w-20.b.tr.pr4.cb[ Slide ] .fr.w-80[ Special kinds of slides `class: header_background` ] ??? Style the whole slide for special circumstances. Examples: use `inverse` as a strong signal that you're changing topics. Or we've used `header_background` from xaringanthemer to add a header to slides when it's *your turn* to do something. --- layout: true # One little thing: unsplash images ---  --- .w-75.center[  ] --- .w-60.ph2.tc.ba.bw1.b--light-gray.br3.center[ .code[.black[unsplash.com/photos/].red[FWA4Zk1hFls]]  ] --- .w-60.ph2.tc.ba.bw1.b--light-gray.br3.center[ .code[.black[source.unsplash.com/].red[FWA4Zk1hFls]]  ] --- layout: false background-image: url(https://source.unsplash.com/FWA4Zk1hFls/1600x900) background-size: cover <span role="img" aria-label="Slide background shows: A group of ring-tailed lemurs huddled together in a wooden enclosure, looking directly at the camera."</span> .bg-black-70.white.absolute.top-0.left-0.code.pl2.animated.slideInDown.delay-2s[ background-image: url(https:&#x200B;//source.unsplash.com/.pink[FWA4Zk1hFls]/.green[1600x900]) background-size: cover ] --- layout: false class: header_background f5 # Choose your final activity 1. An interesting quote on a boring slide<br>&#x1F449; a fancy **quote slide** 1. A regular slide with a bit of text<br>&#x1F449; a sidebar image **slide template** .blue[<svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg>] [materials/act-03/09-design-components](https://presentable-user2021.netlify.app/materials/act-03/09-design-components/)