Story behind designing YourConfess

Posted by in Blog, Inside talk on Aug 8, 2010

Story behind designing YourConfess

As told before, yourconfess.com was our first actual Freelance work! It was basically based on a script bought by the site admin. To be precise the script was from PHP Monster Make Confessions Script. Despite of the features offered by the script, the design was really something to work at! So, Bajaj Anmol, the admin of YourConfess hired us to do the designing job! We worked with him through out the complete designing procedure and finally we handed him over the complete design after after around 3 days work!

The designing process was quite complicated as we had to understand the script first before designing it! So, in the backend it was 60% of PHP development and 40% of CSS/XHTML. Here is what we did!

#0: The PSD First:


Whatever we design, we first make the final design from Photoshop. Our team member, Pyrotechnicpixie is a Photoshop expert and she does does all the thing necessary in PS. Here was the final output…

#1: Started editing the Template files:

This step was really the most time consuming! As now that out client got satisfied with the design we had to implement it… We had to go through loads of files… A snapshot is given below!

As far I remember, there was about 20 files opened in 20 tabs on my Komodo Edit. ;) … Anyways we had a little luck there as the template was using smarty! So editing it was a little simpler…

#2: Adding up widgets:

We noticed that the script really lacked social networking widgets which a site like this one needs badly! So we injected a little of our own code and put in Facebook and other Social Networking widgets inside the site!

#3: Giving the final touch:

The touch was really not that simple! In the end what we did was:

  • Added proper icons to the site’s user interface;
  • Made some fancy ul li unordered list styles for the sidebar!
  • Some cool jQuery stuff to make the site even better! For example check the twitter button on the footer or just check the cool navigation menu!

And after 3 days of work we were glad to complete our first project! Do have a look of it here… Here is a complete screen grab!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>