3-hour course for beginners on designing a multi-page site with 3D assets, animations, adaptive layouts and CMS
Sponsored by https://www.framer.com/?utm_source=designcode&utm_medium=youtube
Final site: https://soft-buttons-231170.framer.app
Template: https://framer.com/projects/new?duplicate=jVScTJ0E7HJdoU7FGIie
Assets: https://www.dropbox.com/s/f4jo6h50mc9vlxf/Framer%20Site.zip?st=p2nfogg8&dl=0
Text content: https://designcode.io/framer-3d-site
Spline URL #1: https://my.spline.design/framercopy-bd9e7275da55ebaf7252e8a0e4e0055f/
Spline URL #2: https://my.spline.design/daccord-49093ae84c00862e2451c953172dde5c/
Imagine being able to create a fully functional site from a design tool without writing a single line of code. Framer offers the power of CSS layouts and animations with the familiar and quick editing capabilities of Figma. You can deploy and iterate almost instantly without having to wait for builds and you have essential features like search engine optimizations and a content management system.
0:00 Intro to Framer
4:06 3D Animation and Text Styles
15:50 Stacks and Adaptive Layout
32:46 Components and Interactions
48:17 Top Bar Menu Animation
01:06:32 Scroll Parallax
01:29:05 Appear Animation
01:45:52 Overlay and Forms
02:03:40 Pages and Breakpoints
02:19:55 CMS and Content
#webdesign #uidesign #nocode
source
