Elements of Effective Presentation

class: center, middle, inverse, title-slide

.title[
# <font size = 7 color = "white">Elements of Effective Presentation</font>
]
.subtitle[
## <img src="img/presenter.png" width=160 height=90>
]
.author[
### <font size = 5 color = "white"> Cheng Peng </font>
]
.institute[
### <font size = 6 color = "white">West Chester University of Pennsylvania</font><br>
]
.date[
### <font color = "white" size =4> Prepared for<br> </font> <br> <font color = "chocolate" size = 6> STA490: Statistics Capstone </font> <br> <br> 
]

---

name:toc
class:inverse1, top

# Table of Contents

<BR>

<table align="center", width = "50%">
<tr>
<td style="text-size:50px; line-height: 1.5; font-variant:small-caps">

<font size = 6><img src="ram.png" width=30, height=25> <b> Make slides clear and readable. </b></font>
 <br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Keep slides simple and consistent. </b></font> <br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Effectively using visuals. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Effectively using web technologies. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Using graphics effectively. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Using colors cautiously. </b></font><br>
<font size = 6><img src="ram.png" width=30, height=25> <b> Effectively delivering presentation. </b></font><br>
<font size = 6><img src="ram.png" width=30, height=25> <b> Avoiding common mistakes. </b></font>
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#toc0) 
[<img src="next.png" width=60, height=18, align="right">](#storytelling)

---
class:inverse middle center
name:storytelling

# Presentation is all about storytelling!

[<img src="previous.png" width=60, height=18, align="left">](#toc) 
[<img src="next.png" width=60, height=18, align="right">](#Presentclear)

---
name:Presentclear

# <font color="#70384A"> Make Presentation Clear </font>
<br>

<table align="center", width = "60%">
<tr>
<td style="line-height: 1.5; font-variant:small-caps; text-color:#70384A;">
<font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Overall: concise, simple and relevant.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Content in logical structure.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> One theme per slide. </font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Using keywords and phrases.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use less sentences, avoid paragraphs.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Aesthetics of tables and graphics.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Using LaTex equations if necessary. </font>
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#story-telling) 
[<img src="next.png" width=60, height=18, align="right">](#readable)

---
name:readable

<h1 align="center"><font color="#70384A"> Make Slides Readable </font></h1>
<br>

<table align="center", width = "60%">
<tr>
<td style="text-size:50px; line-height: 1.5; text-color:#70384A; font-face: 'Trebuchet MS', sans-serif;">
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use web safe fonts.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use readable font size. </font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use consistent font face.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid blocks of text.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid capitalized text.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Highlight aesthetics of visuals.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use LaTex equations if necessary. </font><br>

</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#Presentclear) 
[<img src="next.png" width=60, height=18, align="right">](#overdesign)

---
name:overdesign

<h1 align="center"><font color="#70384A"> Avoiding Over-design </font></h1>
<br>

<font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoiding cluttering information.</font><br>

<font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoiding unnecessary information.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid crowding slides by splitting.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid distracting background.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid over decoration.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid too many animations.</font><br> 
 
  <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid text-heavy slides.</font><br>
  
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#readable) 
[<img src="next.png" width=60, height=18, align="right">](#overusetech)

---
name:overusetech

<h1 align="center"><font color="#70384A"> Overusing Technology</font></h1>
<br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Aim to communicate not tech showcase.<br>

<img src="ram0.png"  width=40, height=33> Use animations sparingly.<br> 
 
<img src="ram0.png"  width=40, height=33> Use sound and video only if needed.<br>
 
<img src="ram0.png"  width=40, height=33> Avoid using sound if possible.<br>
 
<img src="ram0.png"  width=40, height=33> Use video only if needed.<br>
 
<img src="ram0.png"  width=40, height=33>Avoid using sound and video the same time.<br> 
 
<img src="ram0.png"  width=40, height=33>Avoid switching to different tech platform<br> 
 </font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#overusetech) 
[<img src="next.png" width=60, height=18, align="right">](#consistency)

---
name:consistency

# <font color="#70384A"> Consistent Design Presentation Slides </font> 
<br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Choose a theme and stick to it.<br>

<img src="ram0.png"  width=40, height=33> Maintain the key design elements.<br> 
 
<img src="ram0.png"  width=40, height=33> Use of dominant and secondary colors. <br>
 
<img src="ram0.png"  width=40, height=33> Font and background consistency. <br>
 
<img src="ram0.png"  width=40, height=33> Consistency of bullets point and alternatives.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#overusetech) 
[<img src="next.png" width=60, height=18, align="right">](#visuals)

---
name:visuals

# <font color="#70384A"> Use and Create Visual Contents </font> 
<br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A">Visual contents: tables and graphs<br>

<img src="ram0.png"  width=40, height=33> Visuals for communication not decoration.<br>

<img src="ram0.png"  width=40, height=33> Use of complementary and analogous colors. <br>
 
<img src="ram0.png"  width=40, height=33> Controlling size of tables and graphs<br>
 
<img src="ram0.png"  width=40, height=33> Visuals must be readable.<br>

<img src="ram0.png"  width=40, height=33> No more than two visuals per slide.<br>

<img src="ram0.png"  width=40, height=33> Right visual for right information.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#consistency) 
[<img src="next.png" width=60, height=18, align="right">](UsingColors)

---
name:UsingColors

# <font color="#70384A"> Use Colors Effectively </font> 
<br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Color contrast. <a href="https://accessibleweb.com/color-contrast-checker/" target="_blank" 
     onclick="window.open('https://accessibleweb.com/color-contrast-checker/','name',
                   'width=1200,height=1000)"> [Color contrast checker 
                   <img src="img/linkicon.png" width=50 height=50>]</a> <br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Color meanings. <a href="img/ColorEmotion.png" target="_blank" 
     onclick="window.open('img/ColorEmotion.png','name',
                   'width=1400,height=800)"> [Color psychology 
                   <img src="img/linkicon.png" width=50 height=50>]</a> <br>

<img src="ram0.png"  width=40, height=33> Avoidance of color combination.<br>

<img src="ram0.png"  width=40, height=33> Dark background with light text and graphics. <br>
 
<img src="ram0.png"  width=40, height=33> Light background with dark text and graphics<br>
 
<img src="ram0.png"  width=40, height=33> Using background graphics with caution.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#visuals) 
[<img src="next.png" width=60, height=18, align="right">](#DeliveryPresentation01)

---
name:DeliveryPresentation01

# <font color="#70384A"> Delivering A Good Presentation I </font> 
<br>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Know your audience.</font><span><img src="img/1knowAudience.png" width = "700", height="100" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Think about an impressive start.</font><span><img src="img/2StartStrong.png" width = "550", height="100" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Speak with passion.</font><span><img src="img/3Passion.png" width = "550", height="70" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Keep it simple and short.</font><span><img src="img/4KeepItSimpleShort.png" width = "650", height="120" /></span></a>
</div>
 
</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#UsingColors) 
[<img src="next.png" width=60, height=18, align="right">](#DeliveryPresentation02)

---
name:DeliveryPresentation02

# <font color="#70384A"> Delivering A Good Presentation II </font> 
<br>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Effective use of voice.</font><span><img src="img/5UseVoice.png" width = "650", height="120" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Maintain eye contact.</font><span><img src="img/6eyeContact.png" width = "650", height="100" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Use body language.</font><span><img src="img/7bodyLanguage.png" width = "650", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Deal with nervousness.</font><span><img src="img/8DealNervousness.png" width = "400", height="150" /></span></a>
</div>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#DeliveryPresentation01) 
[<img src="next.png" width=60, height=18, align="right">](#CommonMistakes)

---
name:CommonMistakes

# <font color="#70384A"> Common Mistakes </font> 
<br>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Ignoring the audience.</font><span><img src="img/0ignoringAudience.png" width = "650", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Expecting visuals to do presentation for you.</font><span><img src="img/1Visual.png" width = "650", height="100" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Spending more time on slides than presentation.</font><span><img src="img/2SpendingTimeOnSlide.png" width = "500", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Reading directly from slides.</font><span><img src="img/3ReadingDlides.png" width = "650", height="150" /></span></a>
</div>
 
<font color="#70384A" size= 6> 
<img src="ram0.png"  width=40, height=33> Inadequate preparation and rehearsal.<br>
 
<img src="ram0.png"  width=40, height=33> Turning all the lights off.<br>

<img src="ram0.png"  width=40, height=33> <font color="#70384A" size= 6>Hiding in the corner.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#DeliveryPresentation02) 
[<img src="next.png" width=60, height=18, align="right">](#Thanks)

---
name:Thanks
class: inverse1 center, middle

# Thanks!

Slides created using R packages:

[**xaringan**](https://github.com/yihui/xaringan)<br>
[**gadenbuie/xaringanthemer**](https://github.com/gadenbuie/xaringanthemer)<br>
[**knitr**](http://yihui.name/knitr)<br>
[**R Markdown**](https://rmarkdown.rstudio.com)<br>
via <br>
[**RStudio Desktop**](https://posit.co/download/rstudio-desktop/)