Tech Speaking - Session #2

Slide Design

but before...

๐Ÿš€ย Homework ๐Ÿš€

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

๐Ÿš€ย Homework ๐Ÿš€

Design a set of slides

Use your idea from the previous homework

Improve an existing slide deck

Tech Speaking - Slides

By Alex Moldovan

Tech Speaking - Slides

  • 617