Article in Product Design UX UI, Under the Hood categories.

Our Top Sites For Design Inspiration

Fueled Creative Director Rob Palmer sends out a weekly roundup of the best sites out there now, based on design and meant to entertain and…

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.

Sonik Pass

Screen Shot 2016-04-06 at 2.26.44 PM

Sonik Pass is a cyber security solution with a number of cool features on their site. On the homepage, there’s an imperfect circle made up of a few overlapping, messy lines. It appears as if someone is dragging a pen in a circular movement over and over again in a rotating motion. The revolutions mesmerize the viewer, and it looks like a bundle of wires that you could wind up onto a spool. The logo, the menu bar, and the navigation bar all have the same wiry look with the same warm color scheme. The site uses the parallax effect and the background shifts left and right as your mouse scrolls. Farther down on the page, the circular design appears again and it expands outward, similar to a bullseye, or the way water ripples out after dropping a small pebble in it.

Sonik Pass

Sound of Change

Screen Shot 2016-04-06 at 2.27.51 PM

The Sound of Change is cool and innovative in its representation of street music. The homepage grabs the viewer's attention: chill music plays in the background and bold white font sits in the foreground with a subtle outline of a speaker. As the music plays, the words beat and pump to the sound of electric guitar, as though you can see the inside of the speaker - even reminiscent of a beating heart. On the website, the transition between pages is smooth and gives a feeling of continuity as everything appears to be above the fold. One continuous white line stretches across the center of the page from left to right and is similar to a sound wave. The line seems to be endless and it acts as a cohesive vehicle to bring you from one page to another throughout the site.

Sound of Change

Ouur

Screen Shot 2016-04-06 at 2.29.57 PM

This website is minimalist and simple in design. Every page has a sepia-toned hue that gives an overall matted feel to the images and the words that appear. By allowing the entire site to be the same color, it creates a sense of unity between pages. It almost gives a lifeless feeling to the site; however, the mouseover experience makes up for it. When hovering over a photograph, the image suddenly gains its color back. In this way, each photo seems to be asleep until the viewer scrolls over it - and brings it to life.

Ouur

iFly 50

Screen Shot 2016-04-06 at 5.59.02 PM

iFly50 is designed to captivate you with 50 breathtaking reasons to travel the world. Exploring the site creates an interactive experience for the user: you are able to scroll through 50 stunning photographs from locations all over the globe. The page transitions move from bottom to top like a camera’s shutter opening and closing, and the parallax effect gives the two dimensional photographs depth. The sound effects add to the experience, and on a number of different photos, you can hold down the spacebar to take a complete 360 degree tour. There is also a heart button on the top right corner. Though you will probably want to “love” every photograph, the site limits you to only five - so choose wisely.

iFly50

Vive Ready

Screen Shot 2016-04-06 at 4.26.39 PM

Vive Ready’s web design is innovative, exciting, and high tech. When first entering the site, a graph design fills the page and subtle movements in its color create a 3-dimensional feel. The homepage directs you to visit the site on your mobile phone, where you are meant to input a specific personalized code. Your phone then becomes a device similar to a Wiimote and you can play a game with the screen of your laptop or desktop. A car on the screen starts shooting pies of pizza towards you and your Wiimote is meant to slice them. It doesn’t get much cooler, or more fun than this. As the ultimate interactive experience, participating in this game encourages its users to have fun and connect with the website. Just be sure you’re Vive ready.

Vive Ready

Name Our Ship

Screen Shot 2016-04-06 at 2.34.28 PM

Name Our Ship’s web design is clever and relevant to the function of the site. An image of an iceberg sits in the center of the homepage, and a video plays from the perspective of the bow of a ship. Its forward motion emphasizes the progress and movement they are making towards the ship being complete - and named. Along the top edge of the page is a squiggly line reminiscent of the ocean’s waves and a small boat bounces up and down on it. The wavy line represents a timeline to the completion of the ship, and the boat icon clearly marks where they are in the process. The hamburger menu on the top right corner also reflects the soft wavy lines, and the overall blue color to the site makes the viewer think of the ocean in the Arctic.

Name Our Ship

Discovery Building

Screen Shot 2016-04-06 at 2.36.02 PM

The Discovery Building is a public space to conduct research in Madison, Wisconsin, and their website has a number of interesting features. Most of the site displays Wisconsin’s classic red color with a simple white font. A clean red line stretches down the center of the page, acting as a spine that your eye is meant to follow below the fold. The following content and photographs appear on the page using the parallax effect, and the site as a whole is clean and organized.

Discovery Building

Bonobo Jeans

screen_shot_2016-04-06_at_3.03.46_pm_720

Bonobo Jeans provides a cool interactive experience for its viewer. The mood of the website is immediately set with vibe-y electro music playing in the background and video clips of young people having fun. The homepage reads: “We are not wild. We are just…” and it invites you to finish the sentence. Depending on which letter you choose, a certain adjective appears on the page, and you can complete the word by typing the rest of the letters. There is a different page for each descriptive word, and the transitions between them are smooth and fluid. Rather than pages moving vertically, bottom to top, they transition horizontally from right to left on the screen. In this way, it makes the viewer feel like they are flipping through a clothing catalogue and browsing cool, trendy jeans.

Bonobo Jeans

More Articles By Ashley

Recent Articles

Previous post Our Top Sites For Design Inspiration March 31, 2016
Next post Article Club April 14, 2016