Featured Articles
Article in Under the Hood category.
Our Top Sites for Design Inspiration
The best of the week in website design, as chosen by Fueled's Creative Director, Rob Palmer.
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.
Keep Portland Weird: Earthquake Preparedness
We’re suckers for satire, and this homage to earthquake survival by the folks over at digital production agency, Oblio, has indeed hit all the right parts of our funny-bone. Paper cutout-like animations lead you through an alphabet of creative and hilarious survival necessities. The brief, 1-2 sentence descriptions cater to our short attention spans and allow us to scroll through all 26 suggestions. Just in case you find yourself really eager, you can return to the easily navigable alphabet menu and choose based on the animation that appears as you hover over a letter with you cursor. Though every section of this simple site is worth a click, we are particular fans of “M”. We won’t ruin the surprise here of what it stands for, but it’s good to know someone is looking out for our most important facial feature.
Keep Portland Weird: Earthquake Preparedness
Histography
Histography brings the major events of the past 14 billion years of history to your screen using an interactive timeline and events culled from Wikipedia. This final project created for the Bezalel Academy of Arts and Design captures literally everything in time, from editorial pieces about Dolly the cloned sheep to the date the Beatles released “Help”. Rollover scrolling lets you move through time (centuries, even) seamlessly as the dots marking events follow your cursor on the screen, creating a visualizer-esque sequence that is both interactive and gratifying. We love the simplicity of the overall visual design and ease of scrolling through millennia at a time, with our cursor playing follow-the-leader. We think every design student should take note of this site as what a final project could be.
Greenwood Campbell
The Greenwood Campbell site is a testament to this English digital agency’s design prowess. By clicking “Explore”, you’re transported to a StreetView tour of their offices, complete with click-and-drag rotation and the ability to move through different rooms. Clicking on any of the hovering red dots brings you to a simple page introducing another advantage or component of the company. The visual-driven nature of the site and the 360-degree panoramic view transports the visitor right into their offices for a stunning display of website design capabilities.
Mugs
Mugs, a restaurant, tea parlor and all-around quaint café in France presents us with a website that has us wishing we were in this small corner of France and able to pop in for a light bite. Vibrant, high-quality photos of the food, interior, and other parts of the restaurant are presented with subtle motion animations as you move through the site and are invited to see for yourself why this place is worth a visit. The directive to scroll through the site avoids any confusion or navigational mishaps, while the bilingual feature makes it more accessible. A particularly fun feature is the interactive food menu, where as you scroll through tantalizing images of the fare you can follow a link that pops up into a full menu of that category.
Codedoodle
Codedoodle’s aim is to showcase a series of brief and interactive creative-coding sketches. Sponsored by Nexus Interactive Arts, the site is updated on a regular basis to bring you the most current sketches and you can also install it directly into your Google Chrome browser. Initially entering the site, you are treated to a brief, engaging animation that gives way to a similarly-themed main page. Hovering over any of the numbered dots gives you a preview of the sketch, along with a scrambled code animation below with the sketch’s creator and title. The typography reminds you this is a site celebrating coding, while the simplicity of the visual design and interactivity attracts all types of audiences.
Deutser
Enter the inter-galactic journey that is consulting firm Deutser’s home site. The starry-night background moves with your cursor as you’re transported through the company’s founding mantras, delivered with bold clarity in sizable, classic white font as the site’s introduction. Using the drop-down menu that’s impossible to miss by pressing the button in the upper left corner, each section delivers a video-animated title background that you then scroll down through for further content. Just as the firm promises, Deutser’s site also subscribes to the idea of “Clarity. Delivered daily”.
Peanutize Me
In honor of The Peanuts Movie, a modern movie update to the television classic, Peanutize Me lets you create your own Peanuts character. It’s fun and engaging for all ages, where customizing everything from your character’s sunglasses to the color of their shoes is made clear by choosing from the visuals that pop up next to the character. You’re made to feel a part of the creative process with this site, where the whimsy of animated film is emphasized by bold colors, block typography and a wholly straightforward nature. The ability to share and/or download your avatar is an added benefit of the site. We decided to share with you our avatar, which is meant to resemble that hipster/potentially-crazed New Yorker.
99 Homes: Properties of Power
A supplement to the home site for the film, 99 Homes, 99 Homes: Properties of Power is the interactive rule book on achieving power. From the moment you land on the site, you are treated to a movie sequence that acts as the background to a centrally-located figure of the number, “99”. That “99” serves a purpose as you continue into the site: it is the navigation menu. This ingenious use of the number, which is also a theme of its own, lets you jump from page to page (there are 99 pages, or “properties of power”, total). Alternatively, you can scroll through each page that transitions like flipping through a book and enjoy the alternating still shots from the film and geometrically-stylized figures that comprise the background. This site is another example of a film utilizing an interactive supplementary site to its benefit and once again has us hooked on its design details.
62 Models
The design of the 62 Models site is the perfect parallel to the beautiful people this New Zealand-based modeling agency represents. Streamlined, chic, and supplemented with sepia-toned photographs of the 62 Models team, the site appears effortless with its white background and clear displays. The interactive “Stories” feature lets you scroll through a variety of editorials, from photo shoots to shows. Each is laid out as a visual story, a testament to the design of the site as a whole which relies on images to keep the visitor engaged and informed.
On the Grid
On the Grid provides a stunning, visually-oriented new way to explore cities of the world. Curated by designers around the world, the list of cities is impressive and still expanding rapidly. The introductory page is designed like a blueprint, with a navy background containing white line drawings relevant to the city and giving a preview of what is to come once you click through. We enjoyed the bold colors and entertaining fonts that categorize the city’s neighborhoods and the bulletin of images that accompany each destination. On the Grid is an all-around more pleasurable, streamlined alternative to Yelp and travel blogs, with its high-definition images and retro aesthetic highlighted by plenty of quality content.
Panache
Despite our inability to understand French, the pleasure we had while scrolling through Panache’s site, the France-based digital and graphic communication company, overcame any language-related obstacles. While scrolling down from the introductory page with it’s flashing, changing title, you experience a geometric transition animation that follows your motion. It’s a visual engagement tactic that, despite its simplicity, is a hypnotic piece of design. The interactivity continues as you scroll through the following page and the Panache logo fills with color then dissolves into pixels as you move down the screen. It brings a playful element to the company while drawing attention to the brief content laid out artfully to its right. Finally, you’re treated to a second geometric animation that enfolds the screen in spiral layers, leaving you with a positive and lasting impression of the company and its design expertise.
