The Process of Re-Designing Our Web Design Portfolio Site

One of my New Year’s Resolution for this year is accomplished as I finish the re-design of Uzzz Productions. Wait don’t think that I am very efficient and I finish this resolution in less than two months. This was in my resolution for 2009 also, and we never got around to it. So basically in this article, I will share the process of redesigning our web design portfolio site. This will be an interesting read, so hold on tight and begin reading.

Why Redesign?

Some of you are probably wondering why did we redesign the site. Well the answer to that is quite simple. The old design was outdated, ugly, and hideous for the modern trend. The design was last touched in 2006, so you can imagine how it was. Table structure, Flash (Eww, Not SEO Friendly), Tons of Grammatical Error, Content was not highlighted and much much more. It was to the point that I was embarrassed to show our portfolio site.

That is how it looked. Now compare that design and our new products such as WPBeginner’s site design. People could not believe that they were both created by the same company. If you check out the current design, you can see how much different and better it is. Enough of bashing the old design, lets see what the site has now.

Starting the Process of Redesign

I am the lead web designer in the team, so it was my job to come up with the design. I wanted this to be very simplistic, yet feature rich. I wanted to give this design the elegant look that I gave WPBeginner. With that in mind I started the design. The first thing I noticed that had to go was the logo because the old logo would not match any of the new designs mock ups that I made. So the first thing I did was re-create the logo. I didn’t want to change the logo completely because this has been the identity since 2006, so I moved the arrow from the middle to the top as you can see in the new design. This was the logo version 2.0

I presented the team with 4 mock ups before they finally liked this purple design. I decided to name the theme “Purple Madness” because that is exactly what it was. Insane use of jQuery and crap load of pressure from the team was making me go MADDDDDDDD. Thus it got the name Purple Madness.

Now one would think, why did I choose Purple? It is not one of the most conventional colors for the web. Well when I chose orange for WPBeginner, I set in my mind that I need to make a purple site and a green site. I did show the team a green version of WPBeginner, but sadly they did not like that. But the Purple one got the approval and now it is on the site. Purple is bright, lively, and attention grabbing. I see it as the New RED except not as annoying. That was my decision behind choosing the color Purple.

(P.S – I really want to create a Green Web Design…Let’s see when I get a chance to do that)

In the Coding Process

Coding this site was one of a kind experience. I did not separate the site in numerous images instead, it is just a few images. You would be surprised to know that the homepage is only using 8 images in which two are the list background plus and it’s hover. There are 3 images in the switcher at the top, so that leaves only 3 background images for the rest of the design.

Font choice, I decided to go ahead with Arial as the main choice because it went well with the logo font. I used Cufon to get the heading fonts which was really easy. I had a tough decision between sIFR and Cufon, but I chose Cufon due to it’s usability. It is a JavaScript thus it does not require the client to have Flash pre-installed unlike sIFR.

Many Portfolio sites have long detailed service page which I think is pretty stupid. Clients don’t really have time to read a whole page that basically says we offer PSD to HTML service. So therefore I decided to put it all in one page (the home page). I am using the best of best content slider script known as Coda. The reason why I picked this script among all the other scripts is the ease of use and the elegant speed. Coda runs very smoothly with all the other JavaScripts running on the site and it functions pretty well.

The WordPress Bit

As you know that I am a huge fan of WordPress. Like all my sites, this one is also powered by WordPress. The last version of Uzzz was also using WordPress, but the portfolio part of the site was powered with Flash. The disadvantage of that was that the site’s portfolio stuff was not read properly by the Search Engine bots that is why I decided to keep everything on WordPress in the new version.

I understand that the image above is too small to see, so make sure you click on it to see the live view to understand what I am talking about.

The site uses the category and post functions to display the portfolio. If you have used WordPress, then you know that by default, you cannot show posts like we are showing in the Portfolio page. All information is stored in one post. You can use custom fields and create 15 new custom fields every time you want to make a new entry in your Portfolio, or you can create a custom write panel like we did.

Pretty Neat eh. Well this function is not something that we do unique. It was actually written by a very cool guy named Spencer who works at WeFunction. (Check out his Tutorial) He is also based out of Florida, and I had a pleasure to meet him at WordCamp Orlando. Well using his function, we were able to make this portfolio job a lot easier.

There is a custom function that will only show Testimonial button if the testimonial exists. Testimonials have their own category, and we are utilizing the wp_query function to call the post data from related posts in the single post page for testimonials. Kinda confused what I am talking about? Just look at this example. The whole portfolio information is being extracted from a different post.

As you can see that the site features Web Design Resources. That is a simple plugin that is pulling information from the site that I want and displaying it in Uzzz. Contact form is created using Contact Form 7 Plugin.

Tweets are being pulled using jQuery and displayed using JSON. To do this, I am using a very elegant script by seaofclouds called Tweet.

The Easy Parts

Because we didn’t want any comments, it cut down on a lot of work. Search is also disabled, so we didn’t have to work a lot on that either. These were the only two easy parts in the site. The rest was not hard either, but it was time consuming.

The Last Bits

The last bits in the design was to make sure everything is working. Then I realize, I didn’t make a 404 page. My favorite part of the design. So I created a Pretty Cool 404 page (or so I think).

The site is using 9 WordPress plugins and I think it is pretty fast loading. It has a YSlow grade of B. Let me know what you thought of this new design.