Like all designers, I sometimes reach a point where my brain doesn’t design. It simply regurgitates tired old drop shadows and gradients. Fortunately, I have a habit of collecting sites that I find on Stumbleupon, Twitter, and other places, that I find visually inspiring. I may not get any ideas out of them directly, but these unique and sometimes outrageous layouts, colors, and styling, all help my brain to break moulds and think outside the box.
It only recently occurred to me, however, that some of you would like to see those sites (silly me, I know). So without further ado, here are 13 websites worth staring at, courtesy of the WWW – the Wacky Wonderful Web.
My love for automobile design really wasn’t going to escape this list. In a sea of bog-standard car microsites, the A1’s bold red hue and attitude-drenched styling elements make you sit up and listen. Which is a feat in itself, because the car itself doesn’t do that. The site doesn’t load that fast, which is a minus in my view, but if you’re patient, the visual feast is worth it.
- LOVE the color (my screenshot doesn’t pick it up as richly, for some reason. I highly suggest viewing the site.)
- There’s not a flat horizontal line in sight. Everything from the background, to the navigation, and even the car, is set at this cocky angle that makes the site seem anything but still.
- The giant A1 typography at the back seems a much better background than any typical road or city image.
Minimalism is such a designer cliché. Yet few site designs (or ANY designs, honestly) manage to pull it off. Creative mastermind Marc Atlan’s website is one of those. With pure white space, extremely minimalist corner-set navigation, and the usage of bold, striking, images, Marc’s website personifies the man himself.
- The minimalist (yes I know I’m overusing that term) navigation is not only visually pleasing, it’s also quick to load, and adaptable to the various submenus.
- The site itself, despite being a large Flash site, loads pretty fast. You never get the feeling that you’re waiting for the site.
- The Flash scales well to various dimensions. This is an often overlooked point in Flash-based web design, and it’s nice to see it done well.
Sometimes visual inspiration comes from the oddest of places. This site is, as best as I can guess, a HTML 5 experiment from New York-based creative agency Big Spaceship, and is set to some seriously funky music. Did I understand what it was about? Not really. But did I come back to play with it again? Yep.
- Umm, shiny green thingies? And the preloader is done well.
- Nice music?
- Aaaaaaand I’m done.
Continuing the trend with the odd-but-inspiring is Japanese sports nutritionist Vittel, who presents what can only be described as a Flash-based jukebox. You get an animation of a runner, with the camera angle continuously changing. Using the sidebar on the right, you can change the color of the man and the background, as well as the camera angle, and the type of background pattern. But more importantly, the site promotes several tracks of music, also selectable on the right. If you like the track, just click ‘GET THIS MUSIC!’.
- Generally quick loading times for something this expansive means that some pretty nifty ActionScripting was done. Well played, running man, well played.
- The bold typography works well with the overall theme of the background. I’d also argue that the colors work well, but since those are changeable it’s not really valid.
- Smooth interactive animation on the navigation makes this site a joy to browse through.
I am generally used to Grey Goose’s excellent advertising and branding, starting from their gorgeous print ads. But even my jaw drops at this stunning set of four Flash websites. Collectively known as the Dashboard (and appropriately so, might I add), these four sites are the work of Urbandaddy, a team devoted to making sure you have the absolute best night on the town. Every mini-panel in the site can be clicked and opened up to showcase more info (along with some stunning animated effects), and the dynamic nature of the content makes the site buzz with activity, much like the city it’s tracking.
- Each of the four cities have subtle variations in their layout and content. Las Vegas has a list of top ten Elvis songs playing now. How’s that for relevant?
- Careful attention to detail with the effects, graphics, and typography means that not one bit of this site is a visual letdown.
- The giggle-worthy Tightness of Pants Index. Just saying.
If there’s a list of visually appealing sites, it’s pretty much a given that at least one of them would be for a fragrance. Selling the emotion and the personality is a vital part of fragrance marketing, and the Scorpio website manages to do this with flying colors.
- The amazing color mood and lighting adds the perfect finishing touch to what is an already ultra-sexy visual.
- The two pyramids as well as the subtle but appealing animated effects around the navigation don’t detract from the main visual, instead adding to its emotion.
- The buildings in the back have lights switching on and off at various intervals. How’s that for attention to detail?
To be honest, I clicked on this site because of the amusing little play on words. I’m a sucker for those things. I then nearly closed the browser because of the slow-loading, tacky 3D video. Thankfully I left it open. The site’s colorful and spacious layout, while pleasing to the eye and appropriate for their target audience, is hardly surprising. What WAS a wonderful surprise, however, is that to access the other sections of the site you have to lead the horse by the reins! Now THAT’s taking design thinking to a whole new level.
- The unique and charming sense of navigation.
- Navigation aside, this site is not 100% problem-free (being a beta version though, this is ignorable). Occasionally when loading the site, the main Flash wouldn’t display.
- Oh, and one time when everything DID display well, I lost my horse. But that might have just been me…
To be honest, I have no blinking clue what this site is about. What I DO know, however, is that clicking on the tiny menu pulltab at the top left will give you access to a whole bunch of other fascinating effects. What I find amazing about this project, is that how simple math can be used to create such impressive and kinetic visual effects.
- The absolute lack of anything intelligent to do on the site. This is purely “TEEHEE MOUSEPOKE POKE” matter. Ahem.
- The smooth animation and the attention to tiny, if somewhat pointless, detail. Case in point: The pixellated snow effect will actually slide down each other if the slope is steep enough.
- Not much else, really. It’s just a refreshing change from shiny buttons and vivid colors.
Whether or not you actually use a Sony product, you’ve got to hand it to them. They pull no punches when it comes to visual impact, whether it’s in their products, or in this case, their advertising. The absolutely gorgeous use of tilt-shift videography really gives you this impression of little people staring at a wonderful new device.
- The initial video takes a while to load, and in my opinion is completely unnecessary. Intro videos serve to whet the visual appetite, but if the main course is just as appealing, just skip straight to the real thing.
- Tilt-shift videography. I’d imagine that it took tremendous effort to pull off, but pull it off they did. And beautifully, at that.
- The snorkelling dude in the background of the screen. He seems happy to see the little people, don’t you think?
Illustrators are a dime a dozen nowadays, and even if you’re one of the good ones, you’re still going to find yourself mired in competition. So how do you stand out? By seamlessly integrating your artwork with smoothly animated web effects to create a browsing experience that speaks about your work with every move of the mouse.
- Moving your mouse over the button area’s flower (as seen in thumbnail) triggers a beautiful coloring effect. I have to admit, I wasted almost ten minutes just doing that over and over again so I could ooh and aah at it.
- Despite looking like the navigation would be ergonomically poor, it’s actually very well laid out. Contact info, news, and quick categories are stuck to the sides of the browser, while a quick newsletter submission form, sound control, and fullscreen toggle button are neatly arranged in the lower right corner.
- The site breaks the general rule of thumb by using more than 3 typefaces (I count four), but doesn’t look worse for it. Goes to show, if it makes your design look good, feel free to break every rule in the book.
You’d think that they’d just take out an ad in their own advertising system. Nope, if Google does something, it’s gotta be wacky, unexpected, and as colorful as legally possible. This is actually a giant interactive Flash ad on YouTube that challenges the user to solve a set of puzzles within the fastest possible time, apparently demonstrating that life with Chrome can be this fast (of course, you can use any browser…).
- A big oversight on the development team’s part, the first time you race will have a much longer time as you have to wait for the video to buffer, as well as the quiz content to load. While it’s quite common, and easily fixable by going a second time around, I expect better of the Google empire.
- The graphics are adorable! I love how they didn’t use the typical shiny and polished Flash graphics, instead using real time video capture.
- My best was 1:20. You?
The site is called ‘Gymnasium’. The typeface, graphic styling, and background all lead you to continue believing that it’s about a gymnasium. And then the page loads, and staring at you in the face is…a cupboard? And yet there IS some relevance. A quick read through Mater’s website will tell you that the designs of the Gymnasium range of products were inspired by old-school gymnasiums, and that an earlier line (the high school history lesson line, aptly named) was made from recycled gym floorboards. The relevance continues into the future, with Mater donating a portion of the sales profits from this line “to promoting sports in developing countries, allowing a new generation to be inspired to play and create.”
- I’m not sure whether the products themselves would remind me of old school gyms, but the site certainly does. Brilliant attention to detail with the reflections of the lights on the walls, the typeface, and even the lines that appear as you hover over the navigation.
- The site’s no-nonsense layout helps it focus attention to the two possible audience flows: either they want to see what the product looks like, or they want the navigation. No frills, no messing around.
- Gym sound effects! Audio effects tend to take a back seat in web design, at least beyond the clicky button noises. It’s nice to see a full design experience being executed from all angles.
I started with an automobile site, so it’s only appropriate that I wrap up the list with another one. The new Nissan Leaf is making heads turn and eyes stare for various reasons (as critics of the design will tell you, not all those reasons are good ones…), but apparently Nissan has decided to use that in the site design. Thus the site actually emulates the movements of a person’s head, panning or shifting slightly when you move the mouse, and even hovering slightly up and down when you don’t, to simulate breathing I guess. It even has a creepy eyelid cover at the beginning. The site is smooth, loads fast, and is well laid out. Hopefully the car is as good an experience.
- The aforementioned head movement. Since the theme of the site is about experiencing it yourself, it plays well into the mood of the site.
- The navigational button at the bottom. Note how the power button angles sideways and opens out smoothly. Well done on that one, Nissan. If I’m not mistaken, the angled power button or ‘e’ is also present on the car’s onboard system.
- They really should have chosen a more vibrant color for the car. This one just puts me to sleep. The breathing movement is not helping.
So there you have it. I’d love to hear what you have to say about these sites, especially if it’s influenced you somehow. Let me know about it in the comments!