Building Better Interfaces - Interactivity and Animation in UI Design

Overview

Explore interface design, interactivity, and animation in this CSS Day 2019 conference talk by Hakim El Hattab. Dive deep into UI component design, addressing common pitfalls and offering practical solutions. Learn how to create enjoyable user interfaces, correlating fun at work with building engaging web experiences. Discover techniques for improving focus, magnification, loading feedback, popups, notifications, hover menus, and keyboard accessibility. Gain insights on CSS, SVG, and JavaScript implementation for better interfaces. Access accompanying slides and follow the speaker for more web design expertise.

Syllabus

Introduction
Focus
Magnifying List
CheckWave
Flipside
RevealJS
Loading
Loading Feedback
Loading Over Slides
Lada
Popups
Popouts
Editor Settings
COG Wheel
Wireframe
Notifications
Hover menus
Timeout
Dynamic Hit Area
Drawing the Hit Area
CSS DX
Core Components
Keyboard Accessibility
Layout Flexibility
Keyboard Shortcuts
Animations
Speaker Notes
Drag and Drop
Transforming States
Make work enjoyable
SVG Table of Contents
JavaScript