Links open in new tab | Videos and gifs are set to auto-play
DEATH
TO
SLIDE
DECKS
Why your next presentation
needs to be a webpage
Rachel Winchester
Product Designer
Page Builder Summit
February 20 – 24, 2023
Share:
When you think of the word "page,"
what comes to mind?
- When
- Why
- How
When?
Table of Contents
Death to Slide Decks
Rachel Winchester
Past
Slide Show:
Circa 1600
Images shown 1-by-1 in sequence
Slide Deck:
Circa 1600
Microsoft PowerPoint: Circa 1987
Predates the mass adoption of the internet
Google Slides:
Circa 2006
Cloud-based software
Transitions
Slide Decks, Slide Shows, and PowerPoints are tied to a time when content was static and contained in finite pages.
We navigated through content by moving from slide to slide, page to page. We had to “turn the page” or hit “next.”
Transitions have always been a problem with visual storytelling, but now there are modern solutions.
“The Horse in Motion”
Eadweard Muybridge
1878
As transitions get smoother, content becomes seamless.
Today, we can present content in a way that matches how we naturally view and experience the world.
Present
Digital Video:
Circa 1986
Digital video is made of images displayed in rapid frequencies.
GIFs
Graphics Interchange Format
Digital Interfaces
Not only has content evolved drastically, but so has the way we interact with it.
Web3:
Internet is Ubiqioutous
TikTok:
Circa 2016
Times have changed.
It’s time to “transition” into the future.
(Pun #1)
Thesis
Webpage presentations fit in with today's visual culture. They match how we naturally view and experience the world.
Let's all get on the same "page" now...
(Pun #2)
Future
Think about content
in terms of:
“frame”
“window”
“feed”
“viewing area”
“canvas”
Think about interactions
in terms of:
“scroll”
“zoom”
“swipe”
“click”
“pinch”
- When
- Why
- How
Why?
Table of Contents
Death to Slide Decks
Rachel Winchester
Content
"Canvas"
"Frames"
More "Frames"
Depending on the frame rate of a video or GIF, it can look choppy or smooth,
"Viewing Areas"
A.k.a.: “Viewports”
"Windows"
Interactions
"Scroll"
“Scrolling” is so enjoyable for us, it’s practically addicting!
"Pan" & "Zoom"
"Pinch"
"Click" / "Press"
Pros
Some advantages of
webpage presentations:
Living Document
- Update as needed.
- Fix errors!
more creative
You can do everything you can do with PowerPoint, and so much more.
SEO & Marketing
- Social Share
- Links
- Pingbacks
Cons
Potential issues to be aware of,
and how to get past them:
Development
Page Builders & CMS
My tutorial:
> The Case for Elementor: Working Solo as a Product Designer
Other options:
- Google Doc: use the “Pageless” format
- Tumblr
- Blog Post
Accessibility
- Add alt text to photos
- Follow correct headings and outline structure (only 1 H1 per page)
- Scroll slowly
- Use mouse effects instead of animations
- Use rem for paragraph text
- Add disclaimer in header
Performance
- Lazy Load
- Static Websites
- Consider your web host
- When
- Why
- How
How?
Table of Contents
Death to Slide Decks
Rachel Winchester
Elements
Media
- Photos, Gifs, and Videos are essential for visual storytelling.
Links
- Essential for Marketing and SEO.
- To keep your spot in your presentation, have links open in a new tab. For accessibility, add a disclaimer to your header.
Table of Contents
- Let’s the audience, and you, keep track of where you are in your presentation.
- Allows for easy navigation, especially during Q&A.
Social Share
- Essential for marketing.
- Make it easy for your audience by placing these buttons in obvious places (header, footer)
Accordion
- Hide content until your want your audience to see it.
Reading Progress Bar
- Add a reading progress bar to give your audience a sense of the length of your page/presentation.
- The webpage’s scrollbar isn’t visible in every browser. Some users turn this off intentionally.
Animations
- Keep things interesting by adding movement – but don’t overdo it! They can be a distraction.
Hover Effects
- Use it to draw attention to a specific spot in your presentation.
Header / Footer
- Announces the beginning and end of presentation
- Branding opportunity
- Collect questions and comments
Sidebar
- Helps with navigation
- Branding opportunity
Forms
- Collect feedback, comments, and questions in targeted spots.
- Makes the presentation interactive.
Tips
narrate
Use your cursor like a laser pointer, and say each interaction you take.
Not every interaction is obvious to your audience.
minimize
Clean up your browser window by hiding the bookmarks bar and closing unnecessary tabs.
Use a lot of white space.
Stay away from unnecessary and distracting elements.
Create
Make something visually appealing to your audience. Express yourself and your brand in creative ways.
Have fun with your designs!
Compose
Composition and storytelling will always matter the most!
Think, “How can a webpage format tell my story better?”
Next time...
- Presentations on a digital canvas (Adobe, Sketch, Figma, Balsamiq, Miro, etc.)
- Presentations in Virtual Reality / Augmented Reality
Thank You!
I appreciate your feedback and any tips for improvement:
DEATH
TO
SLIDE
DECKS
Why your next presentation
needs to be a webpage
Rachel Winchester
Page Builder Summit
February 20 – 24, 2023