Antifragile UI/UX is a platform focused on showing screen recordings of how digital products adapt and respond to errors in a user's flow. I used React with Styled-Components for all my front-end development, Amazon S3 to serve all my images, Wista to host my videos, and Now to host the site. I have the project up on Github.
As a designer creating user interfaces and experiences I look for inspiration in a few great products. I always find myself recording these experiences and taking notes. Instead of having them sit in a folder somewhere collecting dust, I thought I would create a platform where I can document and share them with others.
I'm a fan of just the right amount of animations. In other words, not using animations just because we can. Instead, using animations because they enhance the user experience. I wanted the entire card section to stand out when a user hovered over it. So I added a transition into a card with a slight light purple drop shadow. When a user clicks on the card I wanted a smooth transition into the next page. For this I made the title transition with the user. You'll notice the title goes from it's original large font-size into a smaller font-size.
When scaling the home page down to mobile the header title and content would crunch up next to each other. I wanted to keep the large title effect but still give the content room to breath. So, when on mobile, the title now shows up as a subtle backdrop. This helps bring the main content to the forefront.
I wanted a way for the user to know which video they were viewing from the list. For this I added an active and disable state to each video link. When a video is active the user will see the link turn from a grey color to bold purple color. When a user hovers over the circle navigation it will slowly pop out with a drop shadow and filling the arrow icon with the active purple color. I gave the arrow icon for our text link buttons a subtle bounce effect. This way, when hovered, it indicates to the user another page will be opened.
Active links and navigation