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

Our Top Sites For Design Inspiration

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…

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.

Ready for More on the Roofs

Screen Shot 2016-06-03 at 12.24.09 PM

Ready for More on the Roofs is a cool and exciting website that represents Converse’s new Chuck Taylors, and there are a number of innovative features that make it stand out. Between page transitions, video footage from a handheld camera plays on the screen to take you on an adventure to the roof of the building. Each new page feels like a checkpoint on the bigger journey where you can engage with interactive features on the site. For example, when you get into the elevator, you control the speed at which you ascend by scrolling quickly or scrolling slowly. Again, on the roof, you are able to scroll your mouse to climb up a flight of stairs. The experience allows you to feel as though you are really there - the camera is shaky and even moves up and down the way your actual head would in order to look at where you are going. Other features, like the navigation bar marking number of flights, and a heart rate monitor keeping track of your workout, both allow you to stay aware of your surroundings throughout the trek. Overall, this interactive experience leaves the viewer feeling excited - not to mention, somewhat exhausted from climbing so many flights of stairs.

Ready for More on the Roofs

Look Book | Quechua

Screen Shot 2016-06-03 at 12.14.37 PM

The Quechua look book is an interesting site with subtle but impressive web design. The homepage features a list of options in bold white font: when hovering over one of the words, the letters come to life by changing color, and the featured photo in the background changes. By simply swiping up, the pages change in a smooth manner, making the transitions fluid and seamless. The parallax effect adds dimension to each page, and it gives the text and photos a sense of depth. Sleek and delicate, the navigation bar along the left side of the page provides an elegant line for the viewer’s eye to follow as they scroll farther down on the screen.

Look Book | Quechua

Make it Bright

Screen Shot 2016-06-03 at 12.16.42 PM

Make it Bright is exceptional not only in its story, but also with its web design. After designing a new pair of sneakers, Diadora has decided to hand deliver the box from Italy all the way to Spain, and the purpose of the Make it Bright website is to document the journey. Within the site, you can view the full route, watch the story, and even experience the run. The web design on the Experience page is by far the most exciting. When hovering over each of the photographs, they tilt in a way that gives them life and dimension, and it feels like you are holding a printed photograph in your hand. There is a clever navigation bar that stretches from left to right along the bottom of the page, and you can use your cursor to progress in the journey. As you drag the yellow bullseye along the path, a small icon of a running man appears, emphasizing the movement on the page in parallel with the marathon itself.

Make it Bright

Get Lost. Get Natural

Get Lost. Get Natural is a website designed to take you on a grand tour around Switzerland, and there are a number of impressive features throughout the site. As you begin scrolling down on the first page, each new screen comes into view with a jolt: it’s almost as though the page is clicking into place. Stretching down the center of the screen is a slender red line which acts as a spine to support the site, and it gives the viewer’s eye a pathway to follow to the next page. Much of the design is angular and geometric with a number of small diamond-shaped icons. When hovering over certain icons, they become animated, giving them life and movement. Overall, Get Lost. Get Natural is a clean and easy-to-navigate site with visually pleasing features.

Get Lost - Get Natural

Challenge Focus Bikes

Screen Shot 2016-06-03 at 12.25.16 PM copy

The Challenge Focus Bikes website is impressive in its design and layout. The entire site, essentially, is built on a diagonal: each page has a thin diagonal line down the screen, text appears on an angle, and page transitions even move from one side to another in a slightly slanted way. In this way, the angularity of the screen is reminiscent of the skeleton of a bike, creating a sense of uniform throughout the site. Everything appears above the fold, and each page has a different high definition photograph in the background. When hovering over icons and page options, there is either a color change, or small movement, bringing the site, as a whole, to life.

Challenge Focus Bikes

More Articles By Ashley

Recent Articles

Previous post Our Top Sites For Design Inspiration May 25, 2016
Next post Our Top Sites For Design Inspiration June 13, 2016