Make Tech Slides Work

Supporting slides of the intro-level talk about making good slides presented at Delivery Hero internal meet-up.

Transcript

1. Make tech slides work Karin-Aleksandra Monoid DH Backend Chapter meet-up 17-07-2020, Berlin
2. Your slides are not your IDE
3. me@here ~ % not your console either
4. Agenda • Text • Fonts • Code • Presenting • Visuals
5. Text
6. Less text (bad example) Do not put everything you are going to say on a slide. First, you are going to share that exact information using your voice. Second, no one wants to read that much text anyway during your presentation. Third, not everyone can even read that fast.
7. Less text • Use short summaries • Remove pronouns, particles, minor words
8. Fonts
9. Fonts Use readable font for main text • Ok • I guess • Not really • •
10. Mixing fonts: Less is more • Be careful when copy-pasting • Keep it neat and simple • Apply theme if needed
11. Monospaced fonts • Improve code readability
12. Monospaced fonts. Comparison lI|iO0 lI|iO0
13. Monospaced fonts. Comparison !true !true
14. Monospaced fonts. Comparison name1=["William", "Shakespeare", 1564] name2=["John", "Locke", 1632] name3=["Jonathan", "Littell", 1967] name1=["William", "Shakespeare", 1564] name2=["John", "Locke", 1632] name3=["Jonathan", "Littell", 1967]
15. “Forget the people in front of you: design for people three rooms away from you.”
16. Line breaks <button class="favorite styled" type="button"> Too small :( </button>
17. Line breaks <button class="favorite styled" type="button"> Much better :) </button>
18. Syntax highlighting Do not turn your code snippets into a magic unicorn
19. Syntax highlighting Use only when needed Highlight the parts you want your audience to focus on
20. Syntax highlighting Use only when needed Highlight the parts you want your audience to focus on
21. Presenting
22. Pointer . Can you see it?
23. Pointer . Laser pointer
24. Underline or circle important stuff for last row of audience
25. import org.junit.Assert.assertEquals import org.junit.Assert.assertFalse import org.junit.Assert.assertTrue import org.junit.jupiter.api.Test import java.util.UUID import kotlin.test.assertNotNull class SmallerTest : BigTest { @Test fun `very important test fails when imports are not shown on slides`() { ...
26. import org.junit.Assert.assertEquals import org.junit.Assert.assertFalse import org.junit.Assert.assertTrue import org.junit.jupiter.api.Test import java.util.UUID import kotlin.test.assertNotNull class SmallerTest : BigTest { @Test fun `very important test fails when imports are not shown on slides`() { ... People here know how to import stuff
27. @Test fun `very important test fails when imports are not shown on slides`() { // Important code }
28. @Test fun `very important test fails when imports are not shown on slides`() { // Important code }
29. @Test fun `very important test fails when imports are not shown on slides`() { // Important code }
30. Visuals
31. Colors Red and green are my happy colors! Source: https://contrastchecker.com/?c=ff0000&b=00ab00
32. Colors Readable for > and < 18px fonts +grayscale Source: https://contrastchecker.com/?c=680077&b=ffffff
33. Screenshots
34. Screenshots
35. Screenshots Always ask yourself “what and why?”
36. My face when someone uses an outdated meme
37. Memes • Use modern language • Hype only on topics that no one will read in 2048 (e.g. JS frameworks) • Consider audience age, background etc.
38. Diagrams, graphs, tables • Use where you can! • Don’t forget about color contrast and font size
39. Diagrams, graphs, tables • Yesterday the customer didn’t need a cake • Tomorrow they will need one • 7364 days later they will order 7364 cakes
40. Further reading (instead of `thank you`) 1. <codeware/> how to present code 2. Zach Holman "Slide Design for Developers" 3. https://practicaltypography.com/