Working on Siebstudio

12

Last week a friend of mine, Sieb, launched his new website for his design company called Siebstudio.
The website got mentioned on creattica and got some nice exposure through it.
This article will explain my part in the development and what we did to create a site like this.

Example
Visit the website

As some of you might know, me and Sieb work at the same place and we get together from time to time.
We’ve created quite a lot of website in our time and I always like when we have to collaborate to make an awesome looking website that pops.

So a couple of weeks ago I got to see the new and in progress Siebstudio website which instantaneously blew my mind.
The one thing that wasn’t done yet (because it’s not Sieb’s specialty) was the advanced code behind the site. Sieb did get a nice base for me too work on and got the effects ready as he wanted it.
There were a couple of things missing though, and that’s where I came in, using my jQuery / javascript magic.

Let me just point out a few features of the site:

  • Sorting elements on screen using Masonry (animated)
  • Displaying different artwork and slides using Cycle
  • Loading the clicked items through AJAX
  • Dynamically change the visiting url with Javascript making it possible to share / like / tweet links even though the content is loaded dynamically without a new HTTP request
  • Different types of blocks so the content is not set to one layout

After hours of coding, having fun, drinking beers and having smokes the website was finally done. Most annoying stuff I encountered was obviously getting it to work in Internet Explorer (that freaking browser!) and getting that twitter/facebook like urls to work. But it works now.

Hope you like the website. I really think Sieb outdid himself again. My compliments.

Drop any comments below, much appreciated.

Take care,
Gaya

Other articles

If you liked this article you can add this post to:


 

11 Comments

  1. issac dhan said: February 10, 2011 at 7:53 pm | Permalink

    I checked every link on above article . Very informative .
    Thanks for that. I love to design website layout(“learning by self study”) . Your articles will help a lot.

    I bookmarked this site.

    Thanks.


  2. caina said: February 15, 2011 at 8:37 pm | Permalink

    the effect is just Awesome!


  3. thrash said: February 22, 2011 at 6:12 am | Permalink

    the effect by clicking on the options is amazing


  4. Narfotic said: March 8, 2011 at 4:00 pm | Permalink

    Fisrt of all, love this website!
    Been studying the code and I get the gist of most of it but I can’t seem to be able to figure out where the AJAX data is coming from. Would you mind explaining this?


  5. Venu Ananda said: April 30, 2011 at 7:25 pm | Permalink

    My compliments on your work on your friend’s website. You truly know what you’re doing! Keep on being an inspiration to the rest of us.


  6. LK Web Designs said: May 5, 2011 at 9:51 am | Permalink

    I like it very creative, :-)


  7. Seyed said: May 17, 2011 at 8:10 am | Permalink

    awesome work…


  8. Seyed said: May 17, 2011 at 8:11 am | Permalink

    surely work with you.


  9. James said: July 11, 2011 at 2:37 pm | Permalink

    Its awesome work… I love every links..


  10. harish said: July 13, 2011 at 5:09 pm | Permalink

    Nice content of site.
    I like most presentationslider


  11. Whaze said: August 27, 2011 at 11:57 pm | Permalink

    Very nice website i like to much effect for Facebook Like its brilliant effect whole the web is prefect just keep it ;).


Leave a Comment

Your email is never shared. Get your own avatar with gravatar! Required fields are marked *

*

*



 

One Trackback

  1. By Working on Siebstudio | WebAIO on November 21, 2011 at 6:24 am