Article in Under the Hood category.
Our Top Sites for Design Inspiration
Each week at Fueled, Creative Director Rob Palmer shares his picks from around the web for inspirational design. Here we share that list with you.
Every week at Fueled, our London-based Creative Director, Rob Palmer, shares a handful of inspirational websites with our teams in New York, Los Angeles, and Chicago. This weekly email acts as a virtual water cooler, encouraging us to congregate across time zones and discuss what brands and blogs are doing to push new trends in web design.
McDonald's - Bacon Clubhouse
The burger is the superstar here on McDonald’s site celebrating the release of their new menu item, the Bacon Clubhouse. It’s not all high-res burger photographs, though (though there is a bit of that); instead, the site celebrates the product release with an interactive and highly entertaining game of i-Spy that incorporates the opportunity to win a free burger. Using your cursor as a rotational/directional tool, zoom in and out of the burger picture on-screen in search of the hidden burger within. Find the burger, win a burger. We didn’t succeed so we can’t tell you what happens next, but the site itself was enough entertainment to keep us satisfied. The inspired idea, combined with the innovative graphic of pixelations as you zoom in and out of nothing less than a hamburger make this site both absurd and genius.
The home site of independent design agency, 22°, is a study in streamlined design complemented by interactive elements. The chic color palette, accented with orange, creates a cohesive and appealing aesthetic throughout the site, while the simple typography is bolded in areas that deserve greater attention. The portfolio page is an alluring layout of high-quality shots from their various projects, ranging from landing pages to personal website design. The ability to click into these and zoom in for a closer look is an element made even more accessible through the simple scrolling motion. The “Agency” page is particularly attractive, as scrolling through initiates various animations and content to appear onscreen in a uniquely organized fashion.
We did not predict the premise behind Hack Academy: It functions as the website for the anti-hacking campaign launched by CIGREF, a national French organization promoting digital and technology culture. The humorous content, combined with the high-quality video clips and creative interactive features, makes it feel more like a movie website than an awareness campaign. This ability to entertain while educating is the major success of Hack Academy, and its appealing design features elevate it to noteworthy status. From the video backgrounds on the jury page to the interactive game where you battle each character in hacker knowledge and cybersafety, there’s plenty to enjoy while learning the basic techniques of a hacker and how to defend yourself. Worthwhile information presented alongside engaging design is truly a win-win.
Movie websites can be stunning, visual journeys that both promote the film and let the visitor delve deeper into the premise and characters. Spotlight is no exception: it transports the visitor through the movie while highlighting the true story behind the film’s plot. Through videos playing in the background to clips and photos, there’s a wealth of visual content to complement the rave media reviews and lines of text, enticing viewers and emphasizing the theme of the film. The video extras, combined with a page to meet the cast and another of a gallery with cast photos provide the supplemental material we look for in a movie site. Add to this the captivating design features, such as the entire “Uncover the Scandal” page, and Spotlight takes its place among the best movie websites.
Stand Up to Cancer
Stand Up to Cancer is the organization behind this site, which is a compilation of tweets from their #howifight campaign on Twitter. The site incorporates modern design techniques to produce a website that mirrors the contemporary initiative it represents while also including personalized elements (like the sketched animations) that make it feel informal and familiar. Explore a portion of the over 35,000 ways to fight cancer mentioned on the site by either clicking into each sketched image or pressing “See All Ways” and hovering over the numbers. Both options are engaging ways to feel a part of the campaign and personalize the experience with the ability to read individual’s tweets on how they help fight cancer. The Stand Up to Cancer site, with its unique design and positive attitude, draws visitors in while promoting a cause we can all believe in.
Halo 5: Guardians Visualizer
Part fan site, part promotional tool, the Guardian Visualizer page of the Halo 5 website fulfills both roles with one particularly unique design feature to match: The helmet of a Guardian (if you’re not familiar with Halo at this point, there’s just no hope) hovers front and center as a 3-D model in a movable star-scape. Use your cursor to rotate and change angles in order to click through the various pieces that comprise the helmet. These pieces are fan-submitted posts, reviews, videos, etc. that bring a new level of personalization to a video game website; it’s a true tribute to players. Images and video appear in pop-up windows, an added bonus that again emphasizes the customizable aspect of the site. A timeline below the image lets you move through various points in time since the game’s release was announced and view different fan reactions and submissions. The attractive design, combined with the customized content, make this site one of the most original ways we’ve seen to pay tribute to fans.