<title>
<![CDATA[ Making beautiful slides for your talks, part 4: Design elements and inspiration ]]>
...</title>
<description>
<![CDATA[ As a teenager, I was really into creating and designing websites. It was my biggest hobby (before being online 24/7 was common or “cool… ]]>
...</description>
<link>https://ines.io/blog/beautiful-slides-talks-part-4-design-elements</link>
<guid isPermaLink="false">https://ines.io/blog/beautiful-slides-talks-part-4-design-elements</guid>
<pubDate>Sun, 13 Apr 2025 00:00:00 GMT</pubDate>
<content:encoded><p>As a <a href="/blog/how-i-started-coding">teenager</a>, I was really into creating and designing websites. It was my biggest hobby (before being online 24/7 was common or “cool”), and there were many days where I couldn’t wait to get home from school and continue working on a new design. To this day, this is the feeling I’m trying to recapture when making slides. If opening up the presentation to work on it is getting me all excited, I know I’m on the right track.</p>
<p>In this series, I’ve already covered general design tips and how to find an aesthetic, so this post dives deeper into the little details. I’ll include examples of visual design elements I used to implement different aesthetics and share some resources and inspiration you can use for your talks.</p>
<p>🎨 <strong>Part 1:</strong> <a href="/blog/beginners-guide-beautiful-slides-talks">Design tips for beginners</a> ✨ <strong>Part 2:</strong> <a href="/blog/beautiful-slides-talks-part-2-aesthetics">All about aesthetics</a> 🛠️ Part 3: <a href="/blog/beautiful-slides-talks-part-3-technical-content">Technical content</a> 🧩 <strong>Part 4: Design elements</strong> 💌 <strong>Part 5:</strong> <a href="/blog/beautiful-slides-talks-part-5-sharing-presentations">Sharing your presentations</a></p>
<p><em><strong>Disclaimer</strong> (since my previous post also got widely shared outside of my circles): This blog post series is not intended as a general-purpose guide to making universally good slides. It mostly collects some tips based on how I make <a href="https://speakerdeck.com/inesmontani">my slides</a>, which are quite specific and targeted to a certain type of conference, talk style and audience. I get a lot of questions from people who like my slides and want to do something similar for their talks, which is what inspired this post.</em></p>
<hr>
<h2>Design elements</h2>
<p>Not everything you use has to have a deeper meaning – most of the time, I use design elements because I think they look kinda cool. I think that’s fine, as long as you don’t overdo it. Attention to detail also helps keeping your audience engaged and I like the element of surprise and including little details to discover on each new slide.</p>
<h3>Boxes and containers</h3>
<p>Boxes and containers are the simplest and most obvious design elements: they group content together and ensure that text remains readable, e.g. by giving it a solid white background color. I like to play around with different styles like borders, background opacity, shadows and rounded corners to match the style of my presentation.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAdwQbAKP/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAIBAyES/9oACAEBAAEFAusWyGMP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIQESH/2gAIAQMBAT8BOPQj/8QAGBEAAgMAAAAAAAAAAAAAAAAAABEBEiL/2gAIAQIBAT8BWWWk/8QAGhAAAAcAAAAAAAAAAAAAAAAAAAECEBExQf/aAAgBAQAGPwIlYItv/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARIXH/2gAIAQEAAT8hAbTjY6jFXcGmCT//2gAMAwEAAgADAAAAEPQ//8QAGBEAAgMAAAAAAAAAAAAAAAAAAAEhMfH/2gAIAQMBAT8QjUaJH//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxAIhaX/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFR4f/aAAgBAQABPxAtCrKyOuIMLqWw2LFF5X2f/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/55fac/slides_elements-boxes.webp 198w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/5b4d3/slides_elements-boxes.webp 395w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/848e4/slides_elements-boxes.webp 790w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8d239/slides_elements-boxes.webp 1185w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/888d0/slides_elements-boxes.webp 1580w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/da28f/slides_elements-boxes.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/9db10/slides_elements-boxes.jpg 198w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/16a07/slides_elements-boxes.jpg 395w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg 790w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/0b93b/slides_elements-boxes.jpg 1185w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/8f04a/slides_elements-boxes.jpg 1580w,
/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/1d134/slides_elements-boxes.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/7d0e58c5a9ca89c071f8ca5bc45ce8a1/d27a6/slides_elements-boxes.jpg"
alt="Examples of boxes and containers used in my slides"
title="Examples of boxes and containers used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai' target='_blank'>#6</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of boxes and containers used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/ki-zwischen-freiheit-und-kontrolle-the-ai-revolution-will-not-be-monopolized' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/what-the-history-of-the-web-can-teach-us-about-the-future-of-ai' target='_blank'>#6</a>)</p></figcaption>
</figure>
<h3>Speech bubbles, arrows and annotations</h3>
<p>Many of my talks include diagrams and flowcharts to explain <a href="/blog/beautiful-slides-talks-part-3-technical-content">technical concepts</a>. These usually combine boxes, arrows and speech bubbles for annotations, and are great to visualize dynamic processes – much better than just plain text.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 30.303030303030305%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KAH/8QAFxABAAMAAAAAAAAAAAAAAAAAAAERQf/aAAgBAQABBQLUW//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAQIf/aAAgBAQAGPwJU/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAETFBUf/aAAgBAQABPyGi/IQSdUWV1V5P/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAAIDAQAAAAAAAAAAAAAAAAERADFBcf/aAAgBAQABPxADICGNTIEy3FWbW8N7P//Z'); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/55fac/slides_technical-flowchart-example.webp 198w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/5b4d3/slides_technical-flowchart-example.webp 395w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/848e4/slides_technical-flowchart-example.webp 790w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/8d239/slides_technical-flowchart-example.webp 1185w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/888d0/slides_technical-flowchart-example.webp 1580w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/548e7/slides_technical-flowchart-example.webp 2400w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/7a14784c299a0fb3ffa24c1214ffc9f5/9db10/slides_technical-flowchart-example.jpg 198w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/16a07/slides_technical-flowchart-example.jpg 395w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg 790w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/0b93b/slides_technical-flowchart-example.jpg 1185w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/8f04a/slides_technical-flowchart-example.jpg 1580w,
/static/7a14784c299a0fb3ffa24c1214ffc9f5/fdb5a/slides_technical-flowchart-example.jpg 2400w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/7a14784c299a0fb3ffa24c1214ffc9f5/d27a6/slides_technical-flowchart-example.jpg"
alt="Comparison of slide with list vs. same content with flowchart"
title="Comparison of the same content as a list and visualized as a flowchart"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Comparison of the same content as a list and visualized as a flowchart</p></figcaption>
</figure>
<p>For arrows, you can experiment with solid, dashed or dotted lines, different arrowhead styles, colors and curves. Speech bubbles can optionally have rounded corners, borders, shadows or a slightly see-through background color, and point to the relevant element on the slide. I try to stick to a minimum font size of 30pt, to make sure that annotations are readable, even from the back of a room. I also like to use them as an alternative to a regular lists and collections of keywords.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQT/2gAMAwEAAhADEAAAAa5Cg0RM/wD/xAAYEAACAwAAAAAAAAAAAAAAAAABAxEzQf/aAAgBAQABBQJghaLN/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/ATV//8QAFhEBAQEAAAAAAAAAAAAAAAAAARAy/9oACAECAQE/ATDP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQITH/2gAIAQEABj8CduNZ/8QAGhAAAgMBAQAAAAAAAAAAAAAAAREAITFBUf/aAAgBAQABPyHdCCsy++GFt6T/2gAMAwEAAgADAAAAEIgv/8QAFREBAQAAAAAAAAAAAAAAAAAAEDH/2gAIAQMBAT8Qkf/EABURAQEAAAAAAAAAAAAAAAAAALEQ/9oACAECAQE/EHE//8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSFh/9oACAEBAAE/EDP6VXnX2BDrCCiEFAHJ/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/5b888f7916204c5aa15e618ecff7f98a/55fac/slides_elements-bubbles.webp 198w,
/static/5b888f7916204c5aa15e618ecff7f98a/5b4d3/slides_elements-bubbles.webp 395w,
/static/5b888f7916204c5aa15e618ecff7f98a/848e4/slides_elements-bubbles.webp 790w,
/static/5b888f7916204c5aa15e618ecff7f98a/8d239/slides_elements-bubbles.webp 1185w,
/static/5b888f7916204c5aa15e618ecff7f98a/888d0/slides_elements-bubbles.webp 1580w,
/static/5b888f7916204c5aa15e618ecff7f98a/da28f/slides_elements-bubbles.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/5b888f7916204c5aa15e618ecff7f98a/9db10/slides_elements-bubbles.jpg 198w,
/static/5b888f7916204c5aa15e618ecff7f98a/16a07/slides_elements-bubbles.jpg 395w,
/static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg 790w,
/static/5b888f7916204c5aa15e618ecff7f98a/0b93b/slides_elements-bubbles.jpg 1185w,
/static/5b888f7916204c5aa15e618ecff7f98a/8f04a/slides_elements-bubbles.jpg 1580w,
/static/5b888f7916204c5aa15e618ecff7f98a/1d134/slides_elements-bubbles.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/5b888f7916204c5aa15e618ecff7f98a/d27a6/slides_elements-bubbles.jpg"
alt="Examples of speech bubbles used in my slides"
title="Examples of speech bubbles used in my slides (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of speech bubbles used in my slides (<a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption>
</figure>
<h3>Emoji and icons</h3>
<p>The easiest way to incorporate emoji is by using those that come with your operating system, like <a href="https://emojipedia.org/apple">Apple’s</a> colored emoji set. However, there’s are many <a href="https://emojipedia.org/vendors">different styles</a>, including open-source sets like <a href="https://emojipedia.org/openmoji">OpenMoji</a> or pixel art icons from <a href="https://emojipedia.org/serenityos">SerenityOS</a>. I typically try to pick an emoji or icon set that best fits the overall aesthetic of my slides.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHSkmqgz//EABgQAAIDAAAAAAAAAAAAAAAAAAABAhEh/9oACAEBAAEFAq1REf/EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/AWf/xAAXEQADAQAAAAAAAAAAAAAAAAABAxAy/9oACAECAQE/AU5M/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAEQMYH/2gAIAQEABj8CyLZ//8QAGRABAAIDAAAAAAAAAAAAAAAAAQARIUFR/9oACAEBAAE/ITJAA1dwoJu7P//aAAwDAQACAAMAAAAQB+//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAWEQADAAAAAAAAAAAAAAAAAAAQocH/2gAIAQIBAT8Qeg//xAAZEAEBAAMBAAAAAAAAAAAAAAABEQAhMZH/2gAIAQEAAT8QJKs0nuNqCAW76ZSCCl4z/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/0466702b53c575731d7754d8ecff55f2/55fac/slides_elements-emoji.webp 198w,
/static/0466702b53c575731d7754d8ecff55f2/5b4d3/slides_elements-emoji.webp 395w,
/static/0466702b53c575731d7754d8ecff55f2/848e4/slides_elements-emoji.webp 790w,
/static/0466702b53c575731d7754d8ecff55f2/8d239/slides_elements-emoji.webp 1185w,
/static/0466702b53c575731d7754d8ecff55f2/888d0/slides_elements-emoji.webp 1580w,
/static/0466702b53c575731d7754d8ecff55f2/da28f/slides_elements-emoji.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/0466702b53c575731d7754d8ecff55f2/9db10/slides_elements-emoji.jpg 198w,
/static/0466702b53c575731d7754d8ecff55f2/16a07/slides_elements-emoji.jpg 395w,
/static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg 790w,
/static/0466702b53c575731d7754d8ecff55f2/0b93b/slides_elements-emoji.jpg 1185w,
/static/0466702b53c575731d7754d8ecff55f2/8f04a/slides_elements-emoji.jpg 1580w,
/static/0466702b53c575731d7754d8ecff55f2/1d134/slides_elements-emoji.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/0466702b53c575731d7754d8ecff55f2/d27a6/slides_elements-emoji.jpg"
alt="Examples of emoji used in my slides"
title="Examples of emoji used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/large-language-models-from-prototype-to-production' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#3</a>)</p></figcaption>
</figure>
<p>You can use emoji in place of list bullets or as recurring icons to illustrate a concept or term. They also give you quick and easy illustrations in a consistent style. Whenever I need an illustration, I first check if there’s an emoji for it!</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAMAAf/aAAwDAQACEAMQAAABsSItEYv/xAAYEAACAwAAAAAAAAAAAAAAAAABMgACA//aAAgBAQABBQKyYsBP/8QAFhEAAwAAAAAAAAAAAAAAAAAAAxAy/9oACAEDAQE/ARSv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAQIQMf/aAAgBAgEBPwFcM//EABcQAQADAAAAAAAAAAAAAAAAAAEAECH/2gAIAQEABj8CYYV//8QAHBAAAgICAwAAAAAAAAAAAAAAAREAMSFBYXGR/9oACAEBAAE/IRWzuKSIOaHECrPs/9oADAMBAAIAAwAAABCL/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QBhn/xAAYEQACAwAAAAAAAAAAAAAAAAAAATFR8P/aAAgBAgEBPxBnqhQf/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARQSFRof/aAAgBAQABPxADVjtfJKzacmog+KJ//9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/f3482357f351685b0c946dca1eb278dd/55fac/slides_elements-emoji2.webp 198w,
/static/f3482357f351685b0c946dca1eb278dd/5b4d3/slides_elements-emoji2.webp 395w,
/static/f3482357f351685b0c946dca1eb278dd/848e4/slides_elements-emoji2.webp 790w,
/static/f3482357f351685b0c946dca1eb278dd/8d239/slides_elements-emoji2.webp 1185w,
/static/f3482357f351685b0c946dca1eb278dd/888d0/slides_elements-emoji2.webp 1580w,
/static/f3482357f351685b0c946dca1eb278dd/da28f/slides_elements-emoji2.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/f3482357f351685b0c946dca1eb278dd/9db10/slides_elements-emoji2.jpg 198w,
/static/f3482357f351685b0c946dca1eb278dd/16a07/slides_elements-emoji2.jpg 395w,
/static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg 790w,
/static/f3482357f351685b0c946dca1eb278dd/0b93b/slides_elements-emoji2.jpg 1185w,
/static/f3482357f351685b0c946dca1eb278dd/8f04a/slides_elements-emoji2.jpg 1580w,
/static/f3482357f351685b0c946dca1eb278dd/1d134/slides_elements-emoji2.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/f3482357f351685b0c946dca1eb278dd/d27a6/slides_elements-emoji2.jpg"
alt="Examples of emoji used in my slides"
title="Examples of emoji as illustrations used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#3</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of emoji as illustrations used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/kunstliche-intelligenz-technologie-der-zukunft-und-warum-open-source-die-karten-neu-mischt' target='_blank'>#2</a>, <a href='https://speakerdeck.com/honnibal/practical-tips-for-bootstrapping-information-extraction-pipelines' target='_blank'>#3</a>)</p></figcaption>
</figure>
<h3>Gradients, patterns and textures</h3>
<p>If solid background colors feel too plain and your slides need more “life” or “pop”, what you’re looking for are textures or patterns. This is also one of the best ways to connect your design back to your talk’s <a href="/blog/beautiful-slides-talks-part-2-aesthetics">aesthetic</a>.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 37.878787878787875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/9oADAMBAAIQAxAAAAG9xMob/wD/xAAYEAACAwAAAAAAAAAAAAAAAAACIgADEf/aAAgBAQABBQKoHMVyf//EABsRAAIBBQAAAAAAAAAAAAAAAAABAgMSFCFR/9oACAEDAQE/AYK7TMalw//EABgRAAIDAAAAAAAAAAAAAAAAAAACARMx/9oACAECAQE/AZdtLWP/xAAXEAEAAwAAAAAAAAAAAAAAAAAxAAEQ/9oACAEBAAY/AqTGf//EABkQAAMBAQEAAAAAAAAAAAAAAAABIRExQf/aAAgBAQABPyGm8dVCHqq+jL//2gAMAwEAAgADAAAAEH/f/8QAGBEBAQADAAAAAAAAAAAAAAAAAQBR0fD/2gAIAQMBAT8QDCbou7//xAAZEQADAAMAAAAAAAAAAAAAAAAAASERMbH/2gAIAQIBAT8QaVUWHfD/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhYVFx/9oACAEBAAE/EHMYZA+U9gGybydl7t/MJ//Z'); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/f4426993a7f74de1d9cafc7b754d1053/55fac/slides_elements-bg.webp 198w,
/static/f4426993a7f74de1d9cafc7b754d1053/5b4d3/slides_elements-bg.webp 395w,
/static/f4426993a7f74de1d9cafc7b754d1053/848e4/slides_elements-bg.webp 790w,
/static/f4426993a7f74de1d9cafc7b754d1053/8d239/slides_elements-bg.webp 1185w,
/static/f4426993a7f74de1d9cafc7b754d1053/888d0/slides_elements-bg.webp 1580w,
/static/f4426993a7f74de1d9cafc7b754d1053/da28f/slides_elements-bg.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/f4426993a7f74de1d9cafc7b754d1053/9db10/slides_elements-bg.jpg 198w,
/static/f4426993a7f74de1d9cafc7b754d1053/16a07/slides_elements-bg.jpg 395w,
/static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg 790w,
/static/f4426993a7f74de1d9cafc7b754d1053/0b93b/slides_elements-bg.jpg 1185w,
/static/f4426993a7f74de1d9cafc7b754d1053/8f04a/slides_elements-bg.jpg 1580w,
/static/f4426993a7f74de1d9cafc7b754d1053/1d134/slides_elements-bg.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/f4426993a7f74de1d9cafc7b754d1053/d27a6/slides_elements-bg.jpg"
alt="Examples of textures, gradients and patterns used in my slides"
title="Examples of textures, gradients and patterns used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows' target='_blank'>#6</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of textures, gradients and patterns used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>, <a href='https://speakerdeck.com/inesmontani/the-future-of-nlp-in-python-keynote-pycon-colombia-2020' target='_blank'>#4</a>, <a href='https://speakerdeck.com/inesmontani/the-ai-revolution-will-not-be-monopolized-how-open-source-beats-economies-of-scale-even-for-llms' target='_blank'>#5</a>, <a href='https://speakerdeck.com/inesmontani/incorporating-llms-into-practical-nlp-workflows' target='_blank'>#6</a>)</p></figcaption>
</figure>
<p>There’s a huge variety of textures available on sites like <a href="https://www.freepik.com/search?format=search&last_filter=query&last_value=texture&query=texture">Freepik</a> or <a href="https://creativemarket.com/graphics/textures">Creative Market</a>, from surfaces of real-world objects like paper, plastic or paint, to noise and distortion (think old VHS tapes). You can also search those sites for so-called “seamless” patterns, meaning patterns that can be tiled and repeated. For gradients, you can find inspiration on <a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a> or <a href="https://coolors.co/gradients">Coolors</a>, which is also a great resource for color palettes. Just try to avoid backgrounds that are too visually busy to not distract from the content, and use boxes (see above) with a plain background color if needed to keep texts readable.</p>
<h3>Shadow and glow</h3>
<p>Elevation, light and shadows imitate paper and create depth, and you can use them to add a more designed feel, make text more readable or introduce visual hierarchies. (Google’s <a href="https://m2.material.io/design/environment/light-shadows.html">Material Design</a> has some nice examples of how shadows can be used as part of a design system. If you want to go even deeper, <a href="https://www.joshwcomeau.com/css/designing-shadows/">this tutorial</a> covers shadows in CSS, but you can also apply the tips to other tools and mediums.)</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 18.686868686868685%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/2gAMAwEAAhADEAAAActKTIFD/8QAGRAAAgMBAAAAAAAAAAAAAAAAAQMAERIy/9oACAEBAAEFAlm2M52Z/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhMv/aAAgBAwEBPwF4Zdv/xAAWEQEBAQAAAAAAAAAAAAAAAAABADH/2gAIAQIBAT8BdIv/xAAVEAEBAAAAAAAAAAAAAAAAAAACEP/aAAgBAQAGPwI3/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAERITFRYYH/2gAIAQEAAT8hqYS/ZghcP//aAAwDAQACAAMAAAAQ8D//xAAYEQEBAAMAAAAAAAAAAAAAAAABABFx8P/aAAgBAwEBPxDjqYWG/8QAGREAAwADAAAAAAAAAAAAAAAAAAERITHw/9oACAECAQE/EMYdsRRH/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAhMUFxEf/aAAgBAQABPxBmgLccgDyXbpNYIrwM/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/55fac/slides_elements-shadow.webp 198w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/5b4d3/slides_elements-shadow.webp 395w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/848e4/slides_elements-shadow.webp 790w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8d239/slides_elements-shadow.webp 1185w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/888d0/slides_elements-shadow.webp 1580w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/da28f/slides_elements-shadow.webp 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/9db10/slides_elements-shadow.jpg 198w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/16a07/slides_elements-shadow.jpg 395w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg 790w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/0b93b/slides_elements-shadow.jpg 1185w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/8f04a/slides_elements-shadow.jpg 1580w,
/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/1d134/slides_elements-shadow.jpg 2880w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/1c1bdb8d6a1acacb70cbcd86e95cfea9/d27a6/slides_elements-shadow.jpg"
alt="Examples of shadows and glow used in my slides"
title="Examples of shadows and glow used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Examples of shadows and glow used in my slides (<a href='https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai' target='_blank'>#1</a>, <a href='https://speakerdeck.com/inesmontani/taking-llms-out-of-the-black-box-a-practical-guide-to-human-in-the-loop-distillation' target='_blank'>#2</a>, <a href='https://speakerdeck.com/inesmontani/spacy-meets-llms-using-generative-ai-for-structured-data' target='_blank'>#3</a>)</p></figcaption>
</figure>
<p>You can experiment with different combinations of the distance and offset (how far away the shadow is placed), blur (how soft or blurry it is), opacity (how transparent it is), color (whether to use the standard black or a custom color) and also the angle (where the light source is coming from).</p>
<p>Some fonts include variants for adding depth, which you can layer on top of each other to create a 3D effect – for example, the 70s-style <a href="https://www.myfonts.com/collections/alkaria-font-konstantinestudio">Alkaria</a>, which I’ve used in <a href="https://speakerdeck.com/inesmontani/applied-nlp-in-the-age-of-generative-ai">my talk</a> on applied NLP, or the retro sign-inspired <a href="https://www.myfonts.com/collections/frontage-font-juri-zaech">Frontage</a>. In fact, MyFonts has a whole collections of <a href="https://www.myfonts.com/pages/tags/stackable-fonts">stackable fonts</a> to choose from.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 24.747474747474747%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHVtCpCn//EABUQAQEAAAAAAAAAAAAAAAAAABAx/9oACAEBAAEFAq//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFRABAQAAAAAAAAAAAAAAAAAAARD/2gAIAQEABj8Cb//EABkQAAMBAQEAAAAAAAAAAAAAAAABESFRgf/aAAgBAQABPyFWFS3hKlr8Ef/aAAwDAQACAAMAAAAQDD//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/EB//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAn/8QAGxAAAgMAAwAAAAAAAAAAAAAAAREAMUEhYXH/2gAIAQEAAT8QNYiwIx24Kg9LZTmf/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/55fac/slides_elements-stacking.webp 198w,
/static/af3ee6cc2719bcd699eeac3524330c9d/5b4d3/slides_elements-stacking.webp 395w,
/static/af3ee6cc2719bcd699eeac3524330c9d/848e4/slides_elements-stacking.webp 790w,
/static/af3ee6cc2719bcd699eeac3524330c9d/f7a48/slides_elements-stacking.webp 844w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/af3ee6cc2719bcd699eeac3524330c9d/9db10/slides_elements-stacking.jpg 198w,
/static/af3ee6cc2719bcd699eeac3524330c9d/16a07/slides_elements-stacking.jpg 395w,
/static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg 790w,
/static/af3ee6cc2719bcd699eeac3524330c9d/0004b/slides_elements-stacking.jpg 844w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/af3ee6cc2719bcd699eeac3524330c9d/d27a6/slides_elements-stacking.jpg"
alt="Font stacking with Alkaria and Frontage"
title="Font stacking with shadows and 3D effect (<a href='https://www.myfonts.com/collections/alkaria-font-konstantinestudio' target='_blank'>Alkaria</a>, <a href='https://www.myfonts.com/collections/frontage-font-juri-zaech' target='_blank'>Frontage</a>)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Font stacking with shadows and 3D effect (<a href='https://www.myfonts.com/collections/alkaria-font-konstantinestudio' target='_blank'>Alkaria</a>, <a href='https://www.myfonts.com/collections/frontage-font-juri-zaech' target='_blank'>Frontage</a>)</p></figcaption>
</figure>
<hr>
<h2>More tips and tricks</h2>
<h3>Learn your presentation tool’s styling shortcuts</h3>
<p><a href="https://support.apple.com/guide/keynote/copy-and-paste-text-tan7cad4c5e1/mac">Keynote</a> and <a href="https://support.microsoft.com/en-us/office/copy-the-fill-and-formatting-from-one-shape-to-ano%E2%8C%98ther-2ed0a654-a6fb-4170-ba7a-9132b77917b3">PowerPoint</a> both have a “copy style” feature that lets you apply the same formatting and style of one shape or element to another. This typically includes the background color, borders, shadows and font settings. You can also save element styles as a preset that you can apply with one click. I also use <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">grouping</a> for elements and layers, so I can move them around together as I design my slides, and I usually <a href="https://support.apple.com/guide/keynote/layer-group-and-lock-objects-tan003ee8980">lock</a> fixed objects like the logo and background elements so they stay in place.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 7.07070707070707%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAABABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABzgQH/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABPyF//9oADAMBAAIAAwAAABDzz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABYQAQEBAAAAAAAAAAAAAAAAAAEAMf/aAAgBAQABPxBxjJ2//9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/20e41e593b971c440e2133149877b8e5/55fac/slides_elements-toolbar.webp 198w,
/static/20e41e593b971c440e2133149877b8e5/5b4d3/slides_elements-toolbar.webp 395w,
/static/20e41e593b971c440e2133149877b8e5/848e4/slides_elements-toolbar.webp 790w,
/static/20e41e593b971c440e2133149877b8e5/8d239/slides_elements-toolbar.webp 1185w,
/static/20e41e593b971c440e2133149877b8e5/864b2/slides_elements-toolbar.webp 1319w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/20e41e593b971c440e2133149877b8e5/9db10/slides_elements-toolbar.jpg 198w,
/static/20e41e593b971c440e2133149877b8e5/16a07/slides_elements-toolbar.jpg 395w,
/static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg 790w,
/static/20e41e593b971c440e2133149877b8e5/0b93b/slides_elements-toolbar.jpg 1185w,
/static/20e41e593b971c440e2133149877b8e5/1a6c7/slides_elements-toolbar.jpg 1319w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/20e41e593b971c440e2133149877b8e5/d27a6/slides_elements-toolbar.jpg"
alt="Screenshot of my customized toolbar in Keynote"
title="Part of my <a href='https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac' target='_blank'>customized toolbar</a> in Keynote with added shortcuts for grouping, styling, layer order and locked layers"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>Part of my <a href='https://support.apple.com/guide/keynote/customize-the-keynote-toolbar-tan81f1db118/mac' target='_blank'>customized toolbar</a> in Keynote with added shortcuts for grouping, styling, layer order and locked layers</p></figcaption>
</figure>
<p>Also keep an eye on actions you commonly perform in the design process, including those that feel really tedious, and check if there are keyboard shortcuts or buttons that you can add to your toolbar for easy access. (For example, Keynote’s support for <a href="https://www.designbeginswithl.com/2020/05/font-tips-how-to-access-and-use-glyphs.html">alternate glyphs</a>, i.e. different versions of the same letter in fonts that support it, isn’t super convenient, but I was pleased to discover I could at least toggle the typography panel with <code>⌘</code>+<code>T</code>.)</p>
<h3>Use an asset manager</h3>
<p>Once you start collecting design assets like illustrations, patterns or textures, you need a way to store and organize them. I use <a href="https://eagle.cool/">Eagle</a>, which is available for a one-time license fee and comes with a great UI for categorizing, tagging, searching and viewing design files. It supports all common file formats, including Photoshop and Illustrator files, automatically creates preview images and lets you drag and drop assets into your design or presentation tool. There’s also a browser <a href="https://eagle.cool/extensions">extension</a> that makes it easy to save screenshots and images from the web. I currently have two libraries: one for inspiration and screenshots, and one for design assets.</p>
<figure class="gatsby-resp-image-figure" style="">
<span
class="gatsby-resp-image-wrapper"
style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; "
>
<a
class="gatsby-resp-image-link"
href="/static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg"
style="display: block"
target="_blank"
rel="noopener"
>
<span
class="gatsby-resp-image-background-image"
style="padding-bottom: 54.04040404040404%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe2TEJbH/8QAGBABAQADAAAAAAAAAAAAAAAAAAEREiH/2gAIAQEAAQUCbJxWEf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAICAwEAAAAAAAAAAAAAAAABESFBUXHR/9oACAEBAAE/IfSUZnomzfSqIF1Z/9oADAMBAAIAAwAAABDjD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExYUGR/9oACAEBAAE/ELbh3UcUiBG63fjk3TCM4P2Zrk3P/9k='); background-size: cover; display: block;"
></span>
<picture>
<source
srcset="/static/f9d5afa2aeea41a189910a06e5911091/55fac/slides_elements-eagle.webp 198w,
/static/f9d5afa2aeea41a189910a06e5911091/5b4d3/slides_elements-eagle.webp 395w,
/static/f9d5afa2aeea41a189910a06e5911091/848e4/slides_elements-eagle.webp 790w,
/static/f9d5afa2aeea41a189910a06e5911091/8d239/slides_elements-eagle.webp 1185w,
/static/f9d5afa2aeea41a189910a06e5911091/888d0/slides_elements-eagle.webp 1580w,
/static/f9d5afa2aeea41a189910a06e5911091/aaf86/slides_elements-eagle.webp 2055w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/webp"
/>
<source
srcset="/static/f9d5afa2aeea41a189910a06e5911091/9db10/slides_elements-eagle.jpg 198w,
/static/f9d5afa2aeea41a189910a06e5911091/16a07/slides_elements-eagle.jpg 395w,
/static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg 790w,
/static/f9d5afa2aeea41a189910a06e5911091/0b93b/slides_elements-eagle.jpg 1185w,
/static/f9d5afa2aeea41a189910a06e5911091/8f04a/slides_elements-eagle.jpg 1580w,
/static/f9d5afa2aeea41a189910a06e5911091/e2603/slides_elements-eagle.jpg 2055w"
sizes="(max-width: 790px) 100vw, 790px"
type="image/jpeg"
/>
<img
class="gatsby-resp-image-image"
src="/static/f9d5afa2aeea41a189910a06e5911091/d27a6/slides_elements-eagle.jpg"
alt="slides elements eagle"
title="My design asset library and custom folders in <a href='https://eagle.cool' target='_blank'>Eagle</a> (I clearly had a lot of fun organizing my files!)"
loading="lazy"
decoding="async"
style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"
/>
</picture>
</a>
</span>
<figcaption class="gatsby-resp-image-figcaption"><p>My design asset library and custom folders in <a href='https://eagle.cool' target='_blank'>Eagle</a> (I clearly had a lot of fun organizing my files!)</p></figcaption>
</figure>
<p>In <a href="/blog/beginners-guide-beautiful-slides-talks">part 1</a>, I already recommended using a font manager like <a href="https://rightfontapp.com">RightFont</a> or <a href="https://fontba.se">FontBase</a> once you get serious about collecting fonts, and an asset manager is a great complement to that. If you’re working in an organization with a dedicated design team, you can also check in with them to see which tools they already use and if you can get in on it.</p>
<hr>
<h2>Resources</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><span>🖼️ <strong>Textures</strong></span></td>
<td><a href="https://www.freepik.com/search?format=search&last_filter=query&last_value=texture&query=texture">Freepik</a>, <a href="https://creativemarket.com/graphics/textures">Creative Market</a></td>
</tr>
<tr>
<td><span>🎨 <strong>Gradients</strong></span></td>
<td><a href="https://uigradients.com">uiGradients</a>, <a href="https://gradienthunt.com">Gradient Hunt</a>, <a href="https://coolors.co/gradients">Coolors</a></td>
</tr>
<tr>
<td><span>🧩 <strong>Patterns</strong></span></td>
<td><a href="https://www.freepik.com/search?term=seamless+pattern">Freepik</a>, <a href="https://creativemarket.com/graphics/patterns">Creative Market</a></td>
</tr>
<tr>
<td><span>😀 <strong>Emoji</strong></span></td>
<td><a href="https://emojipedia.org">Emojipedia</a>, <a href="https://thenounproject.com">The Noun Project</a></td>
</tr>
<tr>
<td><span>✍️ <strong>Stackable Fonts</strong></span></td>
<td><a href="https://www.myfonts.com/pages/tags/stackable-fonts">MyFonts</a>, <a href="https://creativemarket.com/search/layered-font">Creative Market</a></td>
</tr>
<tr>
<td><span>🗃️ <strong>File Managers</strong></span></td>
<td><a href="https://eagle.cool">Eagle</a>, <a href="https://rightfontapp.com">RightFont</a>, <a href="https://fontba.se">FontBase</a></td>
</tr>
<tr>
<td><span>👩🎨 <strong>Design</strong></span></td>
<td><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, <a href="https://www.adobe.com/products/illustrator.html">Illustrator</a>, <a href="https://www.figma.com">Figma</a>, <a href="https://www.sketch.com">Sketch</a>, <a href="https://canva.com">Canva</a></td>
</tr>
<tr>
<td><span>💻 <strong>Presentation</strong></span></td>
<td><a href="https://www.apple.com/keynote/">Keynote</a>, <a href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>, <a href="https://workspace.google.com/products/slides/">Google Slides</a></td>
</tr>
</tbody>
</table>
<p><link-button href="/blog/beautiful-slides-talks-part-5-sharing-presentations" icon="right">Part 5: Sharing your presentations</link-button></p></content:encoded>