When scrolling through the section called “The Drops,” cards appear as the reader scrolls showing which prizes were available. These buttons turn a different color and rotate when users hover over them. There are CTA buttons encouraging users to “Follow Along” throughout the page. Elements that look like paper cutouts of basketball hoops, sneakers, and Foot Locker gift cards continuously rain down the screen. The first thing visitors see is a colorful background that looks a bit like a basketball court. The site excelled in capturing visitor’s attention and sustaining it. Fans had to follow along on social and then enter gated challenges to win exclusive sneakers, merch, and experiences. Its purpose was to inform and incentivize visitors to participate in a virtual basketball and sneaker contest on Twitter. Foot Locker's Home Gameįoot Locker’s Home Game is a microsite designed and developed by CTHDRL. If you hover over any of the individual images, then the image becomes a white text box with the brand’s name and an invitation to view the project, and the background becomes a full-width image from the case study. You’ll find parallax scrolling, fly-in animations, hover animations, and much more.įor example, if you scroll down the page, you’ll find a unique portfolio section that looks like a collage board with images. Its website is a treasure trove of interaction. Whiteboard is a creative agency that drives strategy, designs brands, develops websites, builds apps, and launches campaigns, among other responsibilities. This proves that interactive design and website performance don’t have to be tradeoffs. Coded with HTML5 and CSS3 and weighing less than 8MB, the site loads incredibly fast. The best part about this site is that it’s optimized for performance. Thanks to a fade-in transition effect, the page fades in and changes background color to visually depict the loading process. If you click on any individual project, then you are redirected to a more comprehensive landing page. If you click “View Projects,” you are automatically scrolled down to a list of his projects. Eamonn Day LavelleĮamonn Day Lavelle provides an excellent example of a simple interactive portfolio website. As you scroll, you’ll notice plenty of additional interactive elements. Once you hover over the banner, it stops scrolling. At the bottom, you’ll see a scrolling banner that invites you to enter the sweepstakes or share it on Facebook or Instagram to increase your own chances. Once you do, the background will be replaced by a hand drawn map. When you land on the homepage, you are invited to “plant your seed.” You have to slide the rotating element into the glass to essentially unlock the rest of the site. Designed and developed by Affinity Creative, its purpose was to educate and incentivize customers to enter the Redwood Glamping Experience Sweepstakes.Įarth Month With A Redwoof not only invites users to interact with the site - it requires it. Earth Month With A RedwoodĮarth Month With A Redwood is a microsite for Redwood Empire Whiskey. It’s the perfect combination of interactive and informative. But when you hover over one of these names or descriptions, the cursor reveals a short animated clip that’s basically a trailer of the project. It seems like a simple table with the name of the brand the agency worked with and a short description of the project. You’ll find one of the most unique interactive elements when you scroll down to their Archives. Their website offers multiple ways for visitors to interact, including horizontal scrolling, animated text, GIFs, and video backgrounds.
Fernįern is an Atlanta-based animation and design studio that specializes in animation, illustration, and storytelling. Here are some of the best examples of interactive design. This type of website does more than delight users - it helps keep them engaged on the site for longer. Interactive websites either respond to a user’s interaction or guide the user journey with captivating animations, videos, and other interactive elements (like on this homepage).
Then, we’ll walk through some actionable steps you can take to make your site interactive. In this post, we’ll take a look at more than a dozen interactive websites that can inspire your own web design. The result is a more engaged and memorable user experience. Visitors on interactive websites are invited to scroll, click on navigation items, view portfolio items, and participate in other ways.
0 kommentar(er)
