Immersive Landing Pages
Webflow
Brand & Visual Design Portfolio
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Brand & Visual Design section of the portfolio.
Project Resource:
Pre-made template.
Project Process:
Heavily edited a pre-made Webflow template in order to quickly learn how the builder works and understand high-complexity functioning.
Project Timeline:
1 week
Platform-Specific Skills:
Basic Functioning
Navigator, components, variables, style selectors, etc.
Effects
Scroll-triggered effects, staggered reveals, layered motion.
Interactions
Interactive hover states, motion choreography, parallax movements.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Webflow Design Interface
Framer
Web Design Portfolio
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Web Design section of the portfolio.
Project Resource:
Pre-made template.
Project Process:
Heavily edited a pre-made Framer template in order to quickly learn how the builder works and understand high-complexity functioning.
Project Timeline:
3 days
Platform-Specific Skills:
Basic Functioning
Pages, layers, assets, style selectors, background, text flow, etc.
Effects
Scroll-triggered animation, easing & timing effects, layered motion.
Interactions
Horizontal scrolling, motion choreography, parallax movements.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Framer Design Interface
Elementor
Learning Design Portfolio
Video Demo
(Click gif to visit)
Project Overview:
Project Purpose:
Design a lead-in or ‘preview’ for the Learning Experience Design section of the portfolio.
Project Resources:
How-to instructional videos and 3rd-party CSS.
Project Process:
Integrated 3rd-party CSS code and design effects in order to quickly learn new, more complex functionality in Elementor.
Project Timeline:
1 week
Platform-Specific Skills:
Basic Functioning
Structure, containers, wrappers, backgrounds, media, CSS, etc.
Effects
Scroll-triggered animation, easing & timing effects, layered motion.
Interactions
Horizontal scrolling, scroll-triggered interactions, motion choreography.
Transitions
Smooth and seamless transitions, fluid motion, dynamic content changes.
Backend:
Elementor Design Interface