Tech Speaking - Session #2
Slide Design
but before...
What is a slidedeck?
Your Content?
Your Structure?
Your slides are NOT
The content that you present
Your go to resource during the talk / your notes
A transcript / captions of your talk
Your slides shouldn't make sense without the talk
Your slides ARE
Your visual support throughout the talk
Another channel through we you communicate ideas
A way of emphasizing the key points of your talk
Design
Black or White?
Typography & Contrast
Think about the audience
Slides should be
VIVID
COLORFUL
MEMORABLE
The slide is your playground
animate
emphasize
follow
The slide is your playground
my
voice
Things that don't matter
The number of slides
The tool used for building your slides
The file format of your slides*
Takeaways
Build slides with the audience in mind
Use your slide flow to guide the audience through the talk
Use images and powerful colors to send your message
Showcase
Roast the slide!
Responsive Design
Aim for min 3.5 contrast
WCAG AA Standard - 4.5
WCAG AA Standard - 7
Small fonts need more contrast
const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TSX })
const stencilStylePlugin = createCSSPlugin({
declareDependency: 'decorator',
templateStyle: 'jsx',
templateChunkName: 'jsx-component',
})
const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TSX })
export const createStencilComponentGenerator = (mapping: Mapping = {}): ComponentGenerator => {
const generator = createComponentGenerator()
generator.addMapping(stencilMapping)
generator.addMapping(mapping)
generator.addPlugin(stencilComponentPlugin)
generator.addPlugin(stencilStylePlugin)
generator.addPlugin(importStatementsPlugin)
generator.addPostProcessor(prettierJS)
return generator
}My implementation for the stencil component generator
Types of Slides
1. Text Slides
This is important!
Nu e nimic pe lumea asta la fel. Ca viata care-o am in cartier.
ViLLy
Eat
Sleep
Code
Repeat
This is a new section!
1. Text Slides
2. Image / Video
Production Build
1. Text Slides
2. Image / Video
3. Diagram / Table
JavaScript
Style Calc
Layout
Paint
Composite
Layout
Paint
Composite
Paint
Composite
Composite
Does it change the geometry of the element?
(ex: width, margin, border)
Is it a visual property?
(ex: color, background-color, visibility)
Does it promote the element to a new layer?
(ex: transform, opacity)
1. Text Slides
2. Image / Video
3. Diagram / Table
4. Code
function animateBox() {
/* ... */
offset = offset + step
box.style.marginLeft = offset + "px";
/* ... */
requestAnimationFrame(animateBox);
}1. Text Slides
2. Image / Video
3. Diagram / Table
4. Code
5. Intro / Presentation
I'm Alex, nice to meet you!
@alexnmoldovan
Co-Founder @JSHeroes
✍ freecodecamp.org/news/author/alexnm/
Hello 🇬🇧FullStackConf!
Open Source Engineer @teleportHQ
http://bit.ly/fullstack-perf
Dos and Donts
16:9!
Layout
Paint
Composite
Paint
Composite
Composite
Does it change the geometry of the element?
(ex: width, margin, border)
Is it a visual property?
(ex: color, background-color, visibility)
Does it promote the element to a new layer?
(ex: transform, opacity)
Consistent Transitions
Slide 1 of 21
My Awesome Talk
IT Conference 2020
Avoid small text
Do you see this?
Gösser🍺
Better
Good
Regaining focus
You can't really see it
You can't really see it
Design a set of slides
Use your idea from the previous homework
Improve an existing slide deck
Tech Speaking - Slides
By Alex Moldovan
