7 examples of innovative effects and techniques in webdesign

Over the years, CSS and Javascript has enabled clever designers to come up with innovative tricks and solutions to common design challenges.

While it would be impossible to list all such tricks, this post humbly attempts to list a few of the favorites I could recall. Included are resizing and positioning tricks, animations and Javascript trickery. These techniques are unique (or rare) to the best of my knowledge, and have not been discussed anywhere by their designers, please correct me if I’m wrong. Also, don’t forget to suggest any other innovative tricks you have noticed, I’ll add them to part two of this post to be published later.

Don’t forget to add this post to your bookmarks, as I’m pretty sure that next time you’ll make a website, you’ll probably want to refer to it for some inspiration.

Paulicious: desktop-like design
Drag drop javascript desktop effects in web design

A remarkable theme that loads everything via AJAX, and presents content in a desktop-esque feel. You can even choose from a few different wallpapers (click the icon on bottom left corner). The icons are links to posts and videos that the author has choosen to be on the desktop. When clicking on an icon, the post content comes up in a resizeable, draggable window. You can also minimize the ‘windows’ and bring them up again (you can see a few windows I’ve minimized, in the screenshot above).

Will someone ask him to release the source so that we can all learn from it? :)

Dev Thought: clouds and sky

Devthought has draggable, moving, animated clouds and sky, probably depending on real-world climate (I say this because unfortunately, while taking the screenshot, the clouds were not present – damn the sun and bright skies).

HelloWorld.show

I have not described this design in the title for a lack of better words, but the boxes on the page move around depending on how you move the mouse over them. The box over which you hover also pops up with more brightnes. Mouse coordinates are shown live on the top left corner.

iTheme: customizable, drag-drop sidebar

iTheme was one of the earliest WordPress themes to use Javascript for some serious pizzaz – you can rearrange the sidebar boxes, and the theme will remember it.

Icondock: drag-drop shopping cart

Icondock has a shopping tray to which you can load icons for purchase (by clicking plus buttons on icons), and the preview will load in the shopping tray, and the total price of purchase will be updated real-time – all without reloading the page.

Zaum&Brown: moving text boxes

The info boxes are pushed down when you resize to a lower width, and they come back up when resized to a larger width.

ifElse.co.uk: Resolution-depended sidebars

When you resize to a width just more than required for the first two columns of ifElse, the right sidebar repositions itself to a footer. For larger resolutions, the footer is absent, and the sidebar is visible.

Now that you have new ideas for your next website, I recommend you look for low cost web hosting to look for the best web host for your site.

Recommended for designers
Comments
  1. Pliggs said at 4:27 pm on August 25, 2009

    Nice compilation. I really like Dev Thought, looks fantastic.

  2. Anna said at 9:39 pm on August 25, 2009

    This is a nice collection of design / functionality tip bits. I recently used a j query plug in call easyslider. Once it was installed its was really easy to update and style. The images are just in a bullet point list so it very easy to swap or add new images, you can also just copy and past it in to a whole new page and just redirect the bullets to a new folder to gain a whole new slider for a new page. Very effective and lots easier and faster than flash.

  3. Atul said at 1:28 pm on August 26, 2009

    Nice post….I really like the icon dock….there icons are like precious gems.

  4. Most Interesting Ideas said at 12:15 pm on August 27, 2009

    I like desktop-like design idea.

  5. Dave Sparks said at 2:47 pm on August 27, 2009

    A brilliant collection, quite a few techniques I’ve not come across in javascript before. If anyone has any how-to’s or tutorials for anything similar would be great to have a look, otherwise I’m off to trawl through some source code to see what I can find.

  6. Alex said at 7:17 pm on August 27, 2009

    Nice list, i like the moving text boxes. GJ

  7. Sumesh said at 6:54 am on August 28, 2009

    Yep, that’s my gripe too, I wish at least some of them had tutorials for these effects. You might be able to find some from third-party sources, I’ll try to search around and post links.

  8. Brian said at 5:31 pm on September 2, 2009

    I reallY like the Icon dock Immensely helpful

  9. Farid Hadi said at 12:54 pm on September 3, 2009

    Wow! I just fell in love with paulicio.us! And Zaum & Brown’s website is stunning!

  10. Tanay | TJDzine said at 12:37 am on September 7, 2009

    Devthoughts does look stunning. It would be great to read some tuts on these effects, please do share any links you might find.

  11. Paul Bennett said at 10:10 pm on September 9, 2009

    Hi guys, found this in my incoming links and thought I’d stop by :)

    The source code for paulicio.us isn’t publicly available yet, but if you visit the site you’ll see a preview video of the public version of the theme. I expect to release it in the next month.

    Cheers!

  12. andrew said at 12:31 am on September 10, 2009

    Interesting read, thanks.
    Love devthought.com useful information and great design. As for as tutorials go, I would have to agree with Dave Sparks, crawling through the source is the best way to figure the stuff out. And once you do, do a tutorial and send it to me! ; )

  13. Free Social Icons said at 8:06 am on October 6, 2009

    That real time weather thing is interesting I think it would be cool to have a website header that changes based on the weather in a certain location. Very cool idea.

  14. Leon said at 7:40 pm on October 14, 2009

    Great list. I really like the overall look of zaum & brown. this will come in handy for future projects, thanks!

  15. Tomas said at 10:57 pm on October 14, 2009

    Great article, thanks. I like iTheme the most.

  16. Stijn Neirinck said at 7:32 pm on October 15, 2009

    I’m wonder wat the future will bring for websites, mayby VR?

    Nice post!!!

  17. DesignLovr said at 5:42 am on January 13, 2010

    Great collection! Javascript at its best!

  18. Green Hosting Services said at 12:29 am on January 14, 2010

    These are some excellent examples. I think another innovation for web design within the past decade would be the birth of open source projects such as Joomla, Drupal and WordPress.

  19. Mike said at 1:52 am on January 14, 2010

    DevThought is brilliant. Inspired.

  20. Angel said at 6:38 pm on April 23, 2010

    nice post ….

  21. John said at 4:10 pm on May 21, 2010

    Interesting article ! Useful list ! thanks

  22. Rob said at 2:42 pm on June 18, 2010

    good little collection, I like the Zaum & Brown page, very nice

  23. Reza said at 3:21 am on September 15, 2010

    Very informative and helpful. Thaks very much.

  24. Internetaware said at 7:29 pm on October 15, 2010

    Love this! Only one problem haha when I try and write articles about themes, they’ve never got anything this good :O

  25. Blackberry App Development said at 2:30 pm on November 17, 2010

    Desktop like design is really cool. Nice techniques used above. :)

Leave a Reply