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.
Pro Boom Botix
The Boom Botix website is exceptional and outstanding in its web design. On the homepage, a simple hexagon sits at the center of the screen with a slightly 3 dimensional look to it. When hovering your cursor, which is a slender arrow, you can click once to create a massive crack across the page, and twice to shatter the entire screen. The slo-mo explosion looks as though the fragments of the page are bursting out of the screen, and the visual effects make the viewer think of music that is shattering a glass window. When scrolling on the next page, the parallax effect adds to the dimension of the screen and instead of horizontal page breaks, there are diagonal dividers that enhance the angles of the speaker itself. The coolest part of the site is the interactive experience when twirling the speaker around. By dragging your mouse over the curved line on the screen, the speaker rotates to give you a truly 360 degree view.
Nosaj Thing is a website dedicated to the record producer’s new album, No Reality, that was released in April 2016. The homepage of the site has a black backdrop with a crazy visual effect that feels trippy and exciting. If you could picture what a sound wave blanket would look like, that is just what this is. With scribbly white lines all paralleled with each other, the sound waves take on shape and dimension by moving further into the darkness. An interactive experience is given to the user when you move or hold down your cursor to change the direction in which the blanket is moving. It twirls, shifts, and spins, eventually speeding up so much that the white scribbles form an almost completely solid white blanket. Everything appears above the fold, which gives the whole site a feeling of continuity as the blanket’s movement is never ending. With the only color on the page being the bold red font in the foreground, the name of the album really sticks out in the viewer’s mind.
New Ideo is a simple and clean website, and there are a number of small features that add to its web design. With simple black font and and crisp, clean photographs, the site gives an overall feeling of being straightforward and easy to use. When hovering over each heading, a bright yellow color highlights the word, almost the way a highlighter would by hand. Similarly, beneath each photograph is a simple yellow strip of color that complements the aforementioned feature. When hovering over a picture, it enlarges, as though it is zooming in. This added feature bring the photographs, and the website as a whole to life.
When you think of architecture, you think of blueprints and cardboard models. With the Bartolo Villemard Architecture Urbanism (BVAU) website, that’s just what you’ll find. All photographs on the website are black and white, giving a simple and serious feeling to the site. When hovering your cursor over a picture, a subtle color is given to it: the photograph either transitions to complete color, or certain aspects are highlighted in color in order to emphasize what is most important. In this way, it brings the photographs to life and gives the website an energetic feeling.
On Formative: Public Porsche Blackbox
If you’ve ever wondered what it’s like to drive a Porsche, On Formative is here to give you a virtual reality experience. An unfinished image of a Porsche drives through space at the center of the screen with bright lasers and neon lights to give the car dimension. With fast speeding lights, it looks like the Porsche is cruising over the dotted track. The navigation bar looks like an EKG that stretches from left to right along the bottom of the screen, and as the car advances into space, a white marker represents its progress. You can use the spacebar to freeze the car in its tracks - literally - making the experience a truly interactive one. The most fun part is that you can choose different tracks for the car to speed on, giving the site a feeling that it’s a video game.