I've developed on five major launches of Apple Watch product pages.
The Apple pages that I helped build are highly performant, detailed, and include complex animations. Below are some of the components I built:
Storytelling throught complex animtions:
Video Scrolling Animations
Sticky Scroll Position and video trigger all combined
On load animations combined with scroll based triggers
Scrolling Gallery
See Code Snippets
Javascript functions using CSS variables
Extremely organized SCSS and keeping it DRY
Interactions:
Scroll Trigger Toggle Component
See Code Snippets
Simplifying JS interactions
Heavy use of (CSS) variables and CSS Grid
In-modal Gallery Component
See Code Snippet
Keeping SCSS DRY
Muon Space
Muon Space came to me with a need for a website to attract start-up seed funding.
We worked together on the content and I put forth the designs and code. It was an iterative, collaborative process which resulted in a new site in 4 weeks!
Combinbing Earth and Space:
Video background
Incorporating Waves into the design
See Code Snippets
Simplifying JS interactions
Heavy use of (CSS) variables and CSS Grid
Information Hierarchy:
Interactions:
Randomizing teammate positions & hover interactions
See Code Snippets
Randomizing DOM content and using CSS to apply positions
SCSS
Consuming Jobs API
Hulu Press has a shiny new site to serve the press & media
The goal of the project was to give Hulu a fresh new look without the technical debt of the exiting website. I gave them a structured layout system, user friendly interactions, tasteful animations, modern tooling with which to build from, and a code styleguide.
UX focussed approach:
Subtle Animations
UX focussed approach:
Search Component
- Focus on search: Hide other elements that are not related to search.
- Fewer clicks: Add the focus on the search input so the user can just start typing.
-
User friendly exit options:
- Closes when user clicks outside of search bar.
- Closes on ESC key.
- Closes with "Close" button.
Filters
Saving space is great — It's important to show how many filters are active if you are going to hide them.
Intuitive Forms
- Clear validation: Show the user their password validation in real-time.
- Keyboard navigatable: Make it simple for the user to get to each input using the tab
- Show/hide password: It's convenient and reduces the needs for a password confirmation.
- Floating labels: The visible label serves as a memory aid while people are in the typing stage.
Plaid launches an exciting brand new website and an all new design system.
Plaid got a fully static marketing site and documentation system. The project goals were to layer in code a completely new design system, be scalable with many flexible components and layout patterns, and release it into the market ASAP.
BIG NEWS!
Visa is acquiring Plaid for $5.3 billion, 2x its final private valuation - Tech Crunch
Adding in some fun:
Embedded Video Animations
Button hover effect
Complex interactions:
documentation Sidenav
documentation code snippet swapper
Embedded Video Animations
Challenge: Lining up video with background brush stroke elements and making it responsive.
Leveraging API's - Jobs through Lever
Flexible, responsive,
build system:
Pricing
Quote block
Flexible Component Variations
Plaid went live only 2 weeks after delivery of front-end code!
Launch date: Sept 19rd 2019
URL: https://plaid.com/