Sunday 26 January 2014

Trend alert: 20 animated website designs

In order to be a great designer, you need to be on top of the trend before it becomes a trend. Being able to have this sense of what’s going to take off is key in creating a wonderful product. You’re recognized for being one of the ‘firsts’ and you’re also given props for your innovation and new approach to common problems.
All this is great and desired. It can, however, be tough to keep up with trends because they come so frequently and you never know what’s going to stick. What seems to be hot today can end up cooling off dramatically by the end of the week. Whether it’s a design style or a development technique, you’ve got to be ahead of the curve.
With advances in technology, I think it’s safe to say one of the trends to look forward to are animated web designs. Now, no this isn’t really news, as that’s essentially the idea behind Flash websites, but now we have to do it without (or minimal) Flash. We also have to do in a way that interests viewers and doesn’t push them away. Today, I’ve found 20 web designs that use minimal to dramatic amounts of animation in their design. Let’s jump right in.

Le Singe Fume Sa Cigarette

This website is odd and creative. Also, for me, it has a mysterious quality because I don’t speak French! This extremely minimal movement and animation on this site is especially intriguing from an artist perspective.

Adventure World

There are many theme parks that have websites that normally just tell you about attractions and how to go about purchasing tickets. There’s really no excitement value for whatever. Fortunately, Adventure World has added a bit of excitement with their extremely animated website. After all, what better way to get you interested than to show you what’s ahead?

Pragmatic Mates

Pragmatic Mates is a creative studio that focuses in app development and creation. Now, just going to this site, you probably wouldn’t think much of it. Every website nowadays tends to have a huge slider. What I find unique about this particular ‘slider’, is it’s ability to slide in and animate different layers.

Baroque.me

This is another simple project or experiment that illustrates music in real time. Even if this isn’t your favorite genre, this is quite a fascinating thing to watch.

blacknegative

Blacknegative is one of my most favorite sites. Of course, they’ve utilized a lot of programming knowledge to do some crazy things inside. But the interaction of the website is amazing in it’s own right as well. I implore you, if you haven’t already, to scope out every inch of this super-amazing website.

Copywriters of Distinction

Sometimes your job isn’t just to put forth your service and tell people why you’re the best, sometimes you have to tell them WHY they need your services. Copywriting isn’t something that’s extremely popular, but they use animation to present reasons why you must utilize copywriting for whatever it is you’re doing.

Denise Chandler 

Denise seems to have a lot of personality. You can see it in her self-description and you can see in her portfolio. What’s most important is that we see it on the entire design of her website. It’s fun and interesting for sure.

Blue Acorn

Blue Acorn is a cute and quaint site. It’s extremely clean and to the point, so the movement is used as a means to entertain and draw you in.

Games We Played

This is a really neat and forthright idea. Here, someone has decided to essentially make a list of the games they played as a child in Singapore. The movement is displayed as a rollover which makes for a very pleasant surprise.

graf miville

This is one of those feel-good agencies that seems not to take themselves too seriously. They’re interested more in the creative than what’s formal and informal. They design and animations on this website seem to give off that same feel-good vibe.

Anni Wang

Anni Wang’s website is not filled with constant animation as if it’s some sort of animated tale, but there are certain elements of her website that come to life. The idea here is to create excitement with what’s given and to show off her skills as a web developer. Very creative, indeed!

InTacto

We all know about those wonderful scrolling websites and what they can do. This InTacto group utilizes this technique to show use a wonderful story on their history and their work.

JAM with Chrome

So, of course an online game is going to have animation, but of great importance is the technologies used to create this little project. JAM with Chrome lets you play ‘live’ music with your friends or by yourself. Don’t try this one out if you have lots of work to do!

Kikk Festival

Kikk is a digital festival that takes keen interest in creativity by figuring out what’s so artistic about some of the newer digital technologies. It’s an event that took place the end of last year, but fortunately, we have the ability to still see this website. The subtle animation creates depth with what would otherwise be a very static website.

The BOom and The Arty

This is an example of a site that’s already interesting by itself. The content and design and layout are absolutely amazing and stand for one of the best portfolio websites I’ve ever seen. In the meantime, they’ve added on great video and animations to make this site even more interesting.

The Kennedys

You know when you’re out late at night and you’re walking down the strip and all the places you pass have crazy neon lights? I mean, they’re bright and they’re flashing and catching your attention. Well, this website has them!

The UK Energy Consumption Guide from Evoenergy

When you have a lot of information and statistics to share, it’s often important to present them in the best way possible. I mean, it’s real easy to get real boring, real quickly with that type of thing. This consumption guide does a good job of using infographics and a bit of animation to really make this thing interesting.

Tori’s Eye

This is an experimental website in Twitter Searching. You can search keywords and hashtags to visually see what people are talking about. It’s a cool little idea and it’s even more interesting with the addition of the fluid animations.

Werkstatt 

Much like the Blacknegative website, Werkstatt has utilized some great animations and interactions for us to really get lost in the website. This is another amazing site that presents the common portfolio in an uncommon way.

Weroll

Carpooling is one of those things that should catch on, but hasn’t really gotten popular. I think the only way you can romanticize this idea of riding with strangers via design and Weroll has done that. The subtle animations in the header keep you interested and playing with it (if you have a short attention span like me).

It’s the beginning of 2013 and lots of experts are telling us what to and what not to expect from web design. While many of these sites were created in 2012 and 2011, I think it’s safe to say web design is going a more dynamic and entertaining route. What better ways to add a little pizzaz to your designs than adding some animation?

1 comment:

  1. I am a constant reader of blogs. I have read this whole blog and it is an amazing blog for web designer who are dealing daily with the new challenges and tasks. Thank You for sharing such a valuable, informative and useful about animated website designing. Cartoon website design | Cartoon Style Website Design | Best Animated Website Design

    ReplyDelete