Pragmatic Way to Design Poetic Slides 🌻

it's a meta talk i.e. how to write & design slides for a presentation. there are mainly 2 aspects of any talk (1) Slides (the designing) (2) Presentation (the speaking); this talk will focus more on the first one i.e. slides! It's a creative process and sky is the limit. It can take your presentation to another level. will also touch a bit on some useful presentation tips.

this talk will cover:
- need of a catchy title.
- a couple important animations of keynote (a presentation software).
- elegant ways to present source codes in the slides.
- importance of icebreakers (warm up) to start the talk.
- outro sections to wind up the talk.
- why memes and pop culture references are a nice addition.
- usage of images to demonstrate something crucial.
- using QRs for important links.
- etc...

I love writing & designing slides (prev work: https://speakerdeck.com/piedcipher), it's an art, and a topic close to my heart. I'm only a beginner myself (in terms of designing slides and presenting as speaker) but my observations, insights and tips will be valuable for new & budding speakers. I'm super excited!

Transcript

2. pragmatic way to design poetic slides 🌻 April 27, 2024 3.30 pm team member at Flutter Org / SDK Contributor time is relative
3. a meta talk
4. a meta talk
5. feeling CFPs a meta talk
6. feeling CFPs a meta talk
7. feeling CFPs a meta talk
8. feeling CFPs a meta talk
9. feeling CFPs a meta talk proof of work?!
10. designing slides a meta talk CFPs
11. designing slides speaking a meta talk
12. designing slides speaking a meta talk
13. a talk consists of • but title fi rst! 💯
14. a talk consists of • but title fi rst! • icebreaker (warm-up & intro)
15. a talk consists of • but title fi rst! • icebreaker (warm-up & intro) • softwares & animations (tools)
16. a talk consists of • but title fi rst! • icebreaker (warm-up & intro) • softwares & animations (tools) • content (pre-requisites/toolchain/setup, structured sections, presenting source codes, images, memes/pop-culture references)
17. a talk consists of • but title fi rst! • icebreaker (warm-up & intro) • softwares & animations (tools) • content (pre-requisites/toolchain/setup, structured sections, presenting source codes, images, memes/pop-culture references) • winding down (resources/further reading, inspirations/thanks, social- media plug, something witty)
18. catchy title
19. catchy title • observations
20. catchy title • observations • copywriting (zomato/swiggy noti fi cations)
21. copywriting
22. copywriting
23. copywriting sharing bad news
24. catchy title • observations • copywriting (@PragDua, @ButVai, zomato/swiggy noti fi cations)
25. catchy title • observations • copywriting • LLMs (with caution)
26. catchy title • observations • copywriting • LLMs • example time… 🎨
27. talk is about OSS + Flutter SDK • Getting Started with Contributing to Flutter SDK 👌👍
28. talk is about OSS + Flutter SDK • Getting Started with Contributing to Flutter SDK 👌👍 • the other side of the coin: learning the art of contributing to Flutter SDK 🤩🔥
29. talk is about Flutter + Gemini • exploring Gemini with Flutter ✌
30. talk is about Flutter + Gemini • exploring Gemini with Flutter ✌ • intersection of Pixels & AI - what's possible with Flutter & Gemini ✨✨
31. ice breaker / warm up
32. ice breaker / warm up • mic-check & house-check
33. ice breaker / warm up • mic-check & house-check • some tale related to the topic
34. ice breaker / warm up • mic-check & house-check • some tale related to the topic • agenda
35. tale
36. tale • talk is about Flutter & Gemini
37. tale • talk is about Flutter & Gemini • wordplay or interesting things about tech
38. tale • talk is about Flutter & Gemini • wordplay or interesting things about tech • example time… 🎨
39. sky is the limit
41. • simple widgets • some clippers
42. Gemini wrote a Riddle
43. speaks 1 language, but builds for all, from phones to desktops, answers your call. Flutter - build once run everywhere
47. agenda
48. agenda • high level overview
49. agenda • lays out high level overview • tells about what to expect
50. agenda • lays out high level overview • tells about what to expect • example time… 🎨
52. importance of images
53. importance of images • showcasing crucial details ‼
54. importance of images • showcasing crucial details • easier to connect for viewers 🙌
55. importance of images • showcasing crucial details • easier to connect for viewers • carbon.now.sh for code screenshots 🎉
56. importance of images • showcasing crucial details • easier to connect for viewers • carbon.now.sh for code screenshots • example time… 🎨
60. aistudio.google.com/app/apikey
61. magic move animation
64. use cases
65. use cases • generate text from text-only input
66. use cases • generate text from text-only input • generate text from text-and-images input (multimodal)
67. use cases • generate text from text-only input • generate text from text-and-images input (multimodal) • build multi-turn conversations (chat)
68. use cases • generate text from text-only input • generate text from text-and-images input (multimodal) • build multi-turn conversations (chat) • use case 4
69. showcasing source code
70. showcasing source code • syntax highlighting
71. showcasing source code • syntax highlighting • to the point
72. showcasing source code • syntax highlighting • to the point • dissolve animation
73. showcasing source code • syntax highlighting • to the point • dissolve animation • square boxes with some opacity
74. showcasing source code • syntax highlighting • to the point • dissolve animation • square boxes with some opacity • slide duplication
76. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
77. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
78. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
79. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
80. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
81. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
82. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
83. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro-vision', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
84. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
85. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
86. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); }
87. import 'package:google_generative_ai/google_generative_ai.dart'; const apiKey = 'get it from https://aistudio.google.com/app/apikey'; void main() async { final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey); final prompt = 'how many cats are too many'; final content = [Content.text(prompt)]; final response = await model.generateContent(content); print(response.text); } syntactic sugar for network calls ✨
88. memes
89. memes • movies/tv-shows ~ pop culture refs 🍿
90. memes • movies/tv-shows ~ pop culture refs • engaging & relatability ✌
91. memes • movies/tv-shows ~ pop culture refs • engaging & relatability • avoid overuse 🙈
92. memes • movies/tv-shows ~ pop culture refs • engaging & relatability • avoid overuse • add good memes & avoid edgy ones ⚠
94. bonus 😺
95. bonus tips • practice practice practice; rehearsals before talk • speak at moderate to slow speeds & use mic 🎤 • chewing gum might help in reducing stress • keep minimal points in slides • improvise on the spot if needed • drink water in-between ⚠ • keep giving talks :)
96. resources
97. resources chethaase.medium.com/presenting-presenting-17233fa13aa5
98. resources egghead.io/lessons/egghead-animate-and-highlight-code-in- keynote-presentations
99. resources docs.google.com/presentation/d/ 1cFb6yQ3jUnUPKYiIkmw0gLo0pLcEcFmWSiwc8uDqgoQ/
100. thanks to • Dhruva Shastri (@DhruvaShastri12) • Dhrumil Shah (@Dhuma1981) • Mahima MS (@Mahi_Amy) • Samvid Mistry (@MistrySamvid) • Bhavik Makwana (@iBhavikMakwana)
101. speakerdeck.com/piedcipher
102. x.com/WTMAhmedabad
103. x.com/GDGAhmedabad meetup.com/gdg-ahmedabad
104. your feedback matters bit.ly/iwd-2024-tirth
106. thank you x.com/piedcipher linkedin.com/in/tirth-patel QnA ⁉