Article in Product Design UX UI category.
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.
Natan’s website creates an elegant look with a simple design for its viewers. The couture clothing is shown with beautiful photographs and there are a number of small detailed features on the site that add to its design: when hovering your cursor over each photograph on the homepage, it slightly enlarges, bringing the product to life. In the foreground of each image is a delicate line that reaches to the edge of the page, acting as a guideline that your eye is meant to follow. Their models all have a soft, gentle appearance, creating a true feeling of femininity for the clothing.
Exo Skills is a site designed to help you build connected products and wearables. On the homepage, the background is stained in a soft black and white color scheme with a two-dimensional square that sits at the center. A light rotates around the sharp edges of the frame, allowing it to become three-dimensional, and it draws in your eye to see what more the site has to offer. Bold, primary-colored text boxes present themselves on the screen that look like iPads. As you scroll, the colors come into view using a partial CCS flip animation, making it seem as though you’re reaching your hand into the screen to lift them the same way you flip your iPads up from a tabletop. As a whole, the site is clean and simple in design and leaves you feeling like you had an interactive experience.
Colored in piercing royal blue, Details immediately grasps the viewers attention with a vivid, dazzling appearance. As you explore more of the site, gold sparkly oxford shoes come into view, with bright mint green paint splattered on top of them, and it brings your eye down on the page. There are a number of detailed features that add to the design, such as a color change when your cursor hovers over certain areas, infinite scrolling, and the parallax effect. At the bottom of the page, there is a blue stained finger that points to a Details business card with their logo at the center. The 3-dimensional letter “D” suggests the image of a window, instilling a curiosity in its viewer. In this way, you are connected back to the brand of the site.
The concept behind this site is pretty brilliant: two photographers shot different landscapes in different parts of the world at the exact same time. Hence, the cleverly named site, Jetlag. The different time zones throughout the world are marked along the top perimeter of the page in a way that looks like a keyboard, as it foreshadows the page transition that quickly sweeps across the screen in a wave-like movement. The glissando effect makes you think of pianokeys, or perhaps a wind chime, and though there is no sound, the viewer is left with a thought of music. On each following screen, two photographs are shown adjacent to one another, enhancing the stark contrast between the two locations, specifically due to the different time zones. As a result, the site becomes a photographic yin yang, hanging in the space between two countries that lay miles apart from each other.
Out Monster The Monster
Dedicated to the recent movie Triple 9, this website is full of action and thrill. The overall color scheme is predominantly black and red, emphasizing power, danger, and energy. The way the site is organization is impressive, allowing you to view images and clips from the movie according to your preference of actor. When moving to the next page, each image slides into view from the side of the screen in a smooth motion, the top image just a little faster than the bottom image, giving the screen a weighted feeling, and making the viewer think of turning a page in a book. Overall, the site gives a proper portrayal of the movie’s theme.
The layout of Bare Made is minimalist with sleek, refined imagery. The Bare logo sits on the upper left corner with one line from each letter is missing. It allows your eye to complete the letters in your head, while also emphasizing the meaning of the word bare. Almost all of the photos are in black and white, many with just the bare bags in color, so that you can focus on only the leather products. For their #bareitall campaign, every model is photographed completely naked with one of the bags modestly covering certain parts of their body. In this way, you draw a parallel between the bare skin of the models, with the pure leather of the bags.