Navigation

24 Clever Website Designs That Combine jQuery and Illustration

Inspiration, JavaScript, Web Design | Dec 18, 2009

Thanks to the might of JavaScript, the words “dynamic” and “illustration” no longer apply exclusively to Flash-based websites.

Now that dynamic HTML is a reality in most commonly used browsers and that a lot of fancy JavaScript libraries exist to make using it easy, CSS websites can take back some of the street cred held so tightly by Flash.

Of these new JavaScript libraries, jQuery has become one of the most widely adopted because of its ease of use, breadth of features and initial focus on visual uniqueness.

Here are 24 clever examples of website designs using jQuery and Illustration.

 

1.Form Fifty Five

Features: Changing header illustration; multiple small slideshow windows.

Description: Not only does this website have a lot of genuinely good design-related content, but jQuery is used in a variety of ways to enhance the website’s appearance and usability. Add in a periodically changing illustrated background and some nice circular interface controls and you have a beautiful marriage of jQuery and illustration.

Home page with header illustration:


Left column with tags toggled on:


Window shade header for logging in:


 

2. Frozn

Features: Vertical and horizontal sliding.

Description: Other than the big, brightly colored circles with numbers, the feature I noticed most was the illustrated profile pictures. So, I clicked them. That’s when the magic happened: vertical and horizontal window-shading that opened a full set of blog entries with embedded Vimeo videos. The persistent footer gradient is an interesting effect when you scroll down.

Big circles and author illustrations on the home page:


Vertically expanding content:


Author illustrations expand to reveal blog entries and video:

 

3. iPhone Mockup

Features: Drag and drop, targeting
Description: If you’ve ever thought of creating an app for the iPhone (and which Web developer hasn’t?), then this might be a website to check out. It allows you to drag and drop sketched or computer-drawn interface elements onto a sketched or computer-drawn iPhone outline. Although it is pretty bare bones in design, it is an innovative use of illustration that could only have been pulled off previously with Flash.

Computer-drawn iPhone editor:


Sketched iPhone editor:

 

4. Florida Flourish

Features: Mouseovers with transparency, slideshow
Description: The brilliant colors and detail of the illustrated tree on this splash page are immediate attention-grabbers. Click on any of the categories branching from the tree and you’ll get not only descriptive jQuery-driven content but a completely different tree, too. Scroll down and you’ll see a nice centered slideshow and a footer that takes the natural motif underground.

Full view of home page, with big tree, slideshow and footer:


“Usability” tree:


“Flexibility” tree:

 

5. Tea Round App

Features: Slideshow, minor animation, sliding objects
Description:
Maybe it’s me or a sign that Apple has brilliant designers, but I like websites that have cropped iPhone photos. This website has an animated one, with an in-screen slideshow triggered by mousing over some well-crafted buttons. The rounded Helvetica type blends in well with the design of the phone and buttons. The tea-themed illustrations on the page and in the screenshots of the app tie everything together.

Animations within the iPhone graphic on the page:


Pop-up window displays the app’s screen:


Another Tea Round app screen shown in the iPhone graphic:

 

6. Best Before

Features: Screen positioning, navigation animation
Description: If websites could take jQuery steroids, this would be the Barry Bonds of the web. With all the dynamic visuals, this website could easily be mistaken for a Flash website. After careful inspection, though, you’ll find that the page is neither Flash nor complex from a programming standpoint. But the realization that not a trace of Flash exists will remain etched in your psyche.

The home menu:


More stuff in curly braces:


Sub-menu and portfolio:

 

Animation

Finding a website design for which DHTML was chosen to create the animation is always a surprise. The best part for me is that I can see it on my iPhone. I’m sure that’s not the main reason why the designers chose to ignore Flash and its animation-friendly tools. I don’t know how much they relied on jQuery to code their animations, but they had to have had sadistic tendencies of some kind to pull it off.

 

7. Tori’s Eye

Features: Origami birds flying horizontally.

Description: Who thinks to use origami on a Web page? And who thinks to use blue origami birds to represent tweets, rather than the standard blue illustration? And who thinks to animate tweets? The answer to these questions is, the creators of Tori’s Eye. Build a website with any one of those features and you’d have something completely original. For these creators, having all of these features wasn’t enough. They made the counter-intuitive decision to do all of the animation without Flash!

Origami Twitter birds flying across a landscape:

 

8. Bags

Features: Slideshow and footer animation with one-color icons.

Description: The use of jQuery here is most obvious when the slideshow is triggered by a click in the navigation area. The expansive white space, black type and matching icon illustrations make for a nice-looking website. But lo and behold, an animation in the footer hasn’t stopped working since your arrival. Right-click the solid black animations and you’ll discover the secret to the website’s long-running movie: Sprites and DHTML.

Home page with a lot of white space:


Big icons scattered throughout the slideshow content:


Footer animation runs continuously, regardless of where you are on the website:
388


 

9. Kidd 81

Features: Header animation traveling horizontally.

Description: The bright-colored winter-themed drawings here catch your attention immediately, and the design has continuity all the way down to the footer. Like some of these other websites that use jQuery to animate objects, the smooth-moving images seem indistinguishable from Flash at first glance. The icing on the cake, though, is the draggable “Wow! I can’t believe you can drag these” icons.

Home page header animations:


A footer with the same illustrated theme:


The store section has the same character and colors:

 

Vertical Scrolling

A few JavaScript tools are capable of triggering smooth scrolling between sections of a page. jQuery, of course, is more than capable of performing this effect, and at least a few of the websites in this section take that route. Dynamic scrolling is a nice effect, but combined with creative and detailed illustrations, the feature is but one part of the bigger picture.

 

10. Tomas Pojeta

Features: Sky, ocean, underwater.

Description: Like a few other websites in this section, Pojeta adopts a motif that goes from high altitude to below the surface. The top of the website is in outer space, with its highly detailed rocket and monkey. Scroll down and you’ll see aliens and balloons in the lower atmosphere. Further down is an Easter Island-looking piece of land in the middle of the water, which leads to an underwater view with a submarine. Each illustration fits, and the transitions are about as seamless as it gets.

Rocket and monkey in space:


Easter Island and toucan:


Submarine underwater:

 

11. Morphix

Features: Space, sky, land, underground.

Description: Morphix also begins with some upper atmospheric action, but then transitions to land instead of sea, and finishes with an underground cutaway. The style is obviously different, but the illustration for each layer spans the width of the page, like the last one, creating a sense of horizon. And again, the transition from sky to underground flows smoothly, especially with the dynamic scrolling.

Upper atmosphere, with portfolio:


Ground level, with cows and skyscrapers:


Underground, with tree roots and groundhog:

 

12. GANDRWeb

Features: Various infographics.

Description: Unlike the previous two websites, this one uses infographics in place of characters, landscapes and backgrounds. Each section of the page explains the accompanying graphic. The bottom of the page features, unsurprisingly, a big web form. A purely sales-related website that uses so much good illustration is rare. The jQuery-triggered transitions add gloss to the message.

Infographic explaining benefits and pricing:


Infographic explaining the design process:


Web form:

 

13. Orman Clark

Features: Clouds, ground and flying objects

Description: Like the first two websites in this section, Orman Clark’s website begins with sky, but the tall page sticks with cloud sky all the way to the footer, where we hit the ground. A noticeable difference between this page and most of the others in this article is the fixed position of the main navigation and illustration. This is accentuated by the starburst at the top of the background that highlights the floating egg. The website also features a well-integrated jQuery slideshow for the portfolio.

Balloon, cow and egg:


Biplane and jQuery portfolio slideshow:


Web form, footer and fixed navigation:

 

14. Dreamerlines

Features: Various collages.

Description: The Dreamerlines site takes a discrete approach. Like GANDRweb, each section has a distinct graphic that is tied to its neighboring sections only by white space. Each section, though, is unique, detailed, colorful and attention-grabbing. Heavy illustrations, big bold text and background coloring set the tone.

Big text to begin:


In-your-face collage:


Web form surrounded by a lot of visuals:

 

15. Social Snack

Features: Wire, birds and ground.

Description: The sky motif never gets old, and designers can choose from any number of palettes to color their horizon. Social Snack’s horizon is a bit hazy, with a pronounced green and brown. Birds sit on wires that are scattered vertically throughout the page to separate sections. The website finishes with a rooftop. Although the blog doesn’t have smooth jQuery scrolling, the fun illustrated header with cute characters deserves mention.

The color palette and bird motif at the top:


The frames for the team photos hang off a bird wire:


Cute characters in the blog section:

 

Slideshow

One of the most frequent and recognizable uses of jQuery is for the venerable slideshow. Whenever you see content gliding across the screen after a mouse click, and no Flash can be found, it’s probably jQuery. You’ll find slideshows on corporate websites, landing pages, agency portfolios, e-commerce websites, everywhere. They are that ubiquitous. Below are a few examples of slideshows that come alive because of sharp illustrations.

 

16. GoSiteWave

Features: Vertical slideshow with horizontal navigation and attractive icons.

Description: The vertically scrolling slideshow, combined with the icons and images, are the real story here. Slideshows are expected to scroll horizontally, so the opposite here is eye-catching. The bright blues and oranges, slick rounded buttons and dark background with skillfully placed streaks of light add to the effect. Of course, if the icons weren’t so well done, the website might not have made the cut.

Home page slide graphics:


Another slideshow:

 

17. Sketchen

Features: Horizontal slideshow of Flash movies, with pre-loaded content, big text and illustrations.

Description: If you like yellow, you’ll love this website. This slideshow features big cropped illustrations that keep the yellow background intact. An additional slideshow in the pop-up “lightbox” contains the portfolio. Did I mention that the illustrations were big? They take up a lot of space, but they’re very well done. The background color and images are accented by the green and white navigational elements, and the sharp contrast ensures that usability is not a concern.

Megaphone:


White footer:


Apple:


Portfolio in “lightbox”:


 

18. Form Fifty Five

Features: Smooth vertical scrolling, dynamically generated blog content, slideshow, main navigation highlighting,

Description: Don’t let the monochrome color palette and the simple line drawings fool you. This agency site has everything. Smooth vertical scrolling, a fixed footer that overlays content, a portfolio slideshow, dynamically embedded blog content, etc. With all of these functions going for it, what really sets the site apart is the total number of random illustrations, and the fact they’re all pretty funny. Along those lines, a visit to the site isn’t complete without sampling the hilarious “About” video.

Lots of illustrations in the start screen


Typefaces match the illustration style


Portfolio slide show


Footer navigation titles highlight as you scroll

 

Horizontal Scrolling

Unlike the slideshow, which is usually confined to a section of a website, horizontal scrolling (as defined here) happens at the browser level, or at least feels that way. Dynamic horizontal scrolling does not have as many great examples as vertical scrolling; but as you’ll see, designers who think horizontally have great imaginations.

 

19. Serial Cut

Features: Large illustrations for portfolio; horizontal and vertical scrolling.

Description: This slideshow is really designed to take up the browser’s viewing area. You can’t scroll left or right, but does it matter? The illustrations and design are so outstanding that the developer could have had criss-cross, upside-down or any other unintuitive method of navigating and people would still spend the effort figuring out what’s coming next. What really helps is the size of the navigation icon and that the portfolio photos and images take up the entire screen.

Trains:


CD cover:


3-D guy with shoes:

 

20. Tyler Finck

Features: Horizontal transitions, with animations created out of the background.

Description: Here’s a great example of using the background image to create an animation effect for the dynamic horizontal scrolling. The color palette is primarily black and white. The typefaces are bold and have thick blocky backgrounds in certain places, and the image-based type has a sketchy look. The complete package works well.

A minimalist home page:


Bio:


The money shot:

 

Other Functionality

Some websites that use jQuery are not easily categorizable. They might have uncommon features or make subtle use of jQuery or adapt a common technique in an unusual way. Pre-loading, automatic text-completion, fading in and out, and layering text over images are some of the tricks found in the final set of websites in this collection.

 

21. Orange Label

Features: Image pre-loading.

Description: Image pre-loading is the extent of Orange Label’s use of jQuery. As you scroll down, portfolio items are added to the page (with a rotating graphic telling you that they’re pre-loading). From a usability standpoint, this convenient feature keeps the page from automatically loading bandwidth-hogging content. The illustration at the top is big, colorful, highly detailed and delicious eye candy.

The illustration:


Illustration zoomed in:


Portfolio item and footer:

 

22. Silk Icon Finder

Features: Text completion.

Description: Type in the name of an icon, and this website sorts its icons based on possible results of what you’ve typed so far. The quality of icons is pretty good, and the service is quite convenient on the whole. Because the design is really about search results, it has little in the way of visual distraction, which is a big plus.

Default view:


Search results for “light”:

 

23. Vyniknite

Features: Fades.

Description: This website begins with a great dandelion illustration, good layout and nice selection of typefaces. The only noticeable jQuery action happening is the fading and out that happens when navigating the tabs. Another little slice of heaven is the way the dandelion stems overlap both the active and inactive tabs. And if you look closely at the background, you’ll see some elaborate wind swirls accompanying the floating fauna.

Dandelions galore:

 

24. Halo Agency

Features: Automatic slideshow with background illustration; text over images.

Description: Backgrounds, backgrounds, backgrounds. Navigate through this website and you’ll find a variety of decorative ones full of colorful 3-D illustrations. An impressive portfolio can be accessed through a jQuery slideshow on the home page. Alternatively, you can find information about each item in the portfolio (or “work”) section from the text overlay on the thumbnail.

Home page with slideshow:


The portfolio overlays text on images:


Another colorful background:


Written exclusively for WDD by Maurice Wright. He is a web developer and designer and creator of Moluv.com. Since 2000, Moluv has been a source of design inspiration for creative minds looking for the best-looking websites on the Internet.

How has jQuery changed the way you design your websites? Please comment below…


Share this post
Comments (no login required)
  • http://hexacreative.web.id Nafi’

    WOAH! inspired me for jQuery + Creative Design = Great Work.
    thanks!

    • http://designinformer.com Design Informer

      I agree! These sites are incredible. What you used to just do in Flash is now possible with jQuery. I really need to step up my game and learn some jQuery.

  • http://www.bali-villa-direct-owner.com luxury bali villa

    Wow this is fantastic idea in fact, Wow how cute, thank u its really amazing, I feel so bad…I haven’t gotten you anything…sorry! Merry Christmas. Thank you for all the great stuff you give and give and give! Keep it up, !Awesome.. Great Collection.I totally love it. An inspired, i go to try these for my works.

  • Stuart

    If you want more crazy designs with jQuery animation check out the Irregular Choice; http://www.irregularchoice.com/

    • http://www.moluv.com Mo

      Wow. The Irregular Choice web site is insane.

  • http://phonelover.ru Vadim (Phonelover)

    Awesome collection!!! Love almost all of them!!!

  • http://milos.milikic.info Milos Milikic

    Nice examples and inspiration. Thaks!

  • http://charanj.it cchana

    some absolutely beautiful examples there

  • http://www.yorickpeterse.com Yorick Peterse

    What happened to the quality articles that are actually related to webdesign / webdeveloplemt ? For the love of god, stop writing list based articles like Smashing Magazine does.

    • http://www.webdesignerdepot.com Walter

      WDD has always had a mix of things, good quality articles on design, inspiration posts and yes, lists too.

  • http://www.kaplang.com/blog Michelle

    wow great collection, I liked orman clark the best :)

  • http://www.redesignyourbiz.com/ maverick

    absolutely mind-blowing sites. a really good list that will inspire designers like me.

    thanks for the brilliant list.

  • http://www.redfactory.nl Lars Wienbelt

    Very nice collection indeed!
    These kind of websites inspired me to use jquery on my own website: http://www.redfactory.nl (to do some shameless linking).
    The funny thing is that its quite easy when you get the hang of it.

  • http://www.artelix.nl Melvin José

    This is a very cool collection. Some of them I have seen before.
    But the others just amaze me.

  • http://www.sametomorrow.com/blog adam

    Nice post and collection of sites

  • http://sosmedia.org sosmedia

    This is a great list — some inspiring ideas on how to integrate jquery. Thanks!

  • http://web4half.com/ sha

    Some of these are really amazing!

    Its Love IT :P

    And honestly, you have a great list. I just can’t stop drooling.

    thanks for sharing

    Shawnna.

  • http://www.DigitalOvercast.com kien

    Woah! ALL of the examples are awesome! Very creative. I love #6 (Best Before). Very clean and intuitive. I want to learn JQ now.

  • http://www.operationtechnology.com Brad

    I likey, especially the Tomas Pojeta site.

  • Brian Jones

    Nice collection and some good inspiration with this list – thank you for sharing

  • http://maustingraphics.com Michale Austin

    Wish my site made the list… Maybe next time, but thanks for the grate links!!

  • http://sexidesign.com Melody

    These sites are so cool and dynamic…nice list.

  • http://www.solidconsulting.be Tim

    Very nice list!
    @Michale just looked at your website, which is very nice to!
    Perhaps it is in another list someday!

  • http://djdesignerlab.com Djdesignerlab

    I love using jquery with my design. It give the website to be more stand out. I love this collection

  • http://frostywebdesigns.com The Frosty

    Love the collection! Been doing a lot with jQuery lately!

  • http://www.blog.joshmedranodesign.com Josh

    Wow! Really nice examples of work :0) Great topic too.

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    Really good list. Illustrations will never go out of style.

  • http://www.smashingshare.com Waheed Akhtar

    Thanks for sharing this great collection with detail

  • http://beben-koben.blogspot.com/ BEBEN

    its a rock!!! awesome….grrrr
    ck ck ck

  • http://www.webtint.net/ Johnny

    Awesome roundup, loads of quality websites.

  • http://flaboratory.ru markinyan

    Cows and skyscrapers are great. :)
    And Orange Label – i think its very long deal to make such pixelart. Respect to author :)

  • Chandler

    Pretty nice list there. I’ve been trying to integrate some jquery too with forms and image popups too..

  • http://gulalisweet.co.cc zoeldt

    great concept by frozn.fi, wrapped everythinng in one. Thanks for sharing with us :D

  • http://www.crearedesign.co.uk/ Oliver

    Amazing collection of sites. Very creative and great examples of jQuery and illustration. These are a great inspiration for my next website design. Thanks for taking the time to share these with us.

  • http://web4half.com/ Quality Web Designer

    Awesome.

    This is a very cool collection

    Am inspired, i go to try these for my works.

    Thank…

    ***..Merry X MAS to everyone..***

  • http://www.papercraftcentral.net Fernanda Gomez

    Thanks for sharing, very nice designs, it inspired me with ideas!

  • http://www.palimadra.com Pali Madra

    Maurice a very good collection and congratulations to the creators of the sites who are featured on this post.

    I think we should continue to grow this list by adding more sites which are similar examples maybe one post in a couple of months.

  • http://www.netparasistemleri.com/ Para Kazanmak

    It’s amazing designs! I like this very much.
    Especially “Orman Clark” is very funny :)

  • http://www.kadinlaricin.gen.tr Guzellik

    I like number 19

  • http://www.xn--n3cfb1b0c1c3cf2e.com แรนเถื่อน

    great collection!!! Love almost all of them!

  • http://www.absolute-design.co.uk Web Design Nottingham

    I was always worried about what happens when the browser has jquery disabled, however looking at these designs has cleared up a lot of misconceptions I had!

    Thanks

  • http://www.cosmoder.com hair transplant

    I love #6 (Best Before). Very clean and intuitive.

  • http://emlakx.net emlak ilanları

    absolutely mind-blowing sites. a really good list that will inspire designers like me.

    thanks for the brilliant list

  • http://vardarlarinsaat.com/vidanjor.html Vidanjör

    great collection!!! Love almost all of them!

  • http://www.logobird.com.au Logobird Designs

    Awesome roundup. I need to improve my jquery.
    This is just the inspiration I need!

  • http://www.onlynpara.tr.gg internetten para kazanma yolları
  • http://picmarkrpro.com watermarking

    Morphix amazing)) nice work

  • http://www.websitedesignerdubai.com Hashim

    Good collection of resources in one place…

  • http://boldis.ru Boldis Media

    Florida Flourish very interesting idea, thanks!

  • http://www.pornoizliyor.com pornoizliyor

    Good collection of resources in one place…

  • http://xn--n3cfb1b0c1c3cf2e.blogsshopping.com/ แรนเถื่อน

    wow great collection, I liked orman clark the best

  • http://www.designbeep.com Arshad

    Thanks for the collection

    ”Serial Cut” is wonderful..please have a look at

  • http://www.strafecreative.co.uk/ Strafe Creative – Web Design

    Awesome round up here! Always good to work on my jquery, thanks again

  • http://www.anindasinema.com Sinema

    wow great collection, I liked orman clark the best

  • http://hostgatorstep.com hostgator

    Great stuff guys! I really don’t know how much time it takes for your guys to compile such a list of excellent resources but it takes a lot of time for me to digest it all! Keep up the good work! Thank you!

  • http://www.iranynemetorszag.com Külföldi munka

    Wonderful read, and excellent points. Cheers

  • http://www.pixelwebstudio.co.uk yellowww

    Nice examples of works!

  • http://www.volkanerdogan.com volkan

    great website collection

  • Dirk Tromp

    Goodness! What a good overview of the possibilities. Lot’s of inspiration for my new site coming up. Thanks a million

  • kiki

    very amazing, i wanna the source code of Florida Flourish..!!!
    may i ask to it…
    WOOOOOOOWWWW….!!

  • http://www.smartwebsource.com Naoshad Nayeem

    what a post! Very useful reference. GR8… :-)

  • http://www.treasures-canada.com tommyboy

    Astounding graphics. I wanna have them all :)

  • http://www.jga.net.au Mike

    Great sites guys. As an older (arghhh!) designer searching for new ways to give my client’s sites a lift, they were very inspirational. Loved Halo’s stuff. Anyone got any great car retail stuff they’ve seen? Still struggling with JQ, but it beats Flash for ease of use.

  • http://www.rhyswelsh.com Freelance Web Designer Cardiff

    Really strong graphic images, perfect for web designs – it’s what design is all about!

  • http://www.mkldesign.co.uk Web Design Nottingham

    pure inspiration, brilliant collections of designs.