A new segment that is being added to my blog is the Web Development Progress Report, which is a blog about my progresses with certain website contracts I am given. I will show you the test site, describe how and why things are done in certain ways. Hopefully this gives newer desginers/coders, as well as more seasoned veterans some ideas. Input is welcomed, but due to the fact that my projects have a time-budget (how many hours can I put into this project for the money I’m getting) as well as a deadline so not all inputs will be taken. After all this is my project.

The contract that I am working on right now is for Calcon Construction, located in Calgary, Alberta. You may be asking “I thought your web design business was in Vancouer, Jeff?” but I got this one thorugh a referral from Rhonda Sherwood, and her sister works for Calcon in Alberta.

Their current website is here - and now you know why they wanted a new one. So we started work about a month ago.. the development process has been going on for a while, which is why this post’s chapter is 1.5, not 1.

(more…)

Many of you probably noticed by now that on my sidebar, I have a box-style banner for iStockPhoto.com, an online stock photography website. I have been a designer for a while, and I realized the value of this website a while back. My Client, Rhonda Sherwood’s site was created using mostly photos from that website, and it yielded great design results.

Also I am working on a piece for my realtor client Ted Kwon, and we used their high quality photos too.

At the bottom of this article I will also tell you how you can win a few free credits on iStockPhotos.com.

Here are my top 5 reasons for recommending them :

(more…)

As I was updating my sidebar widgets, I made some design changes to my blog. It did not take too long (hooray CSS!!!) but it’s worth a look.

Robb DeVore’s post regarding Web 2.0 and fresh designs gave me some inspiration to clean my site up.

1. Widgets Sidebar perfection - As I mentioned in my previous post regarding how to properly use the widgets sidebar plugin, I cleaned up my sidebar and re-ordered items as they should be. Also, I removed the “Meta” widget. There’s no purpose for it. Feeds are already consolidated through my feedburner plugin at the top, and I can log in manually by typing in wp-admin/ at the end of my URL. The link to wordpress’s website is already at the bottom of all my pages indicated as a partner. No need to take up more space than necessary.
2. The box shape models were changed. I created a gradient shape of 1px X 100px that went from #cccccc to #eeeeee, and I embedded that as backgrounds for the side <ul> tags, as well as my .post class boxes. Each post now starts with the gradiation effect starting from the top, and same with the boxes. This accomplished three things : it provided more consistency with my top banner; it segregated the boxes/posts more effectively and cleanly; it emphasizes the title of each box/post bettter.
3. … I know that usually people expect 3 in a list (I don’t know why - the genie has 3 wishes, hockey has 3 periods), but there is no #3. Those are the two minor (but significant) design changes I made tonight.

I hope this site looks a LOT better than the old one (I hated the old design - just never got around to fixing it but tonight I had some ideas).

If you have been in the photoshop world for a few years (like myself) you’ll know that the TV screen effect has been around for nearly 10 years now. I learned it first in the late 90’s when I was a scrawny little kid playing with Photoshop 5.0!!! In this post I will show you a slightly different technique of emulating an LED screen (one of those gigantic screens with rather large LED bulbs on it that you see on city buildings, concernts, events, etc.), and also I will cover how to emulate a conventional TV screen effect (although conventional CRT TVs are now fading away…).

These tricks are not too difficult nor time consuming, yet it can add a good edge to your web-design work or any other design work, and satisfy yourself or your clients. Here is my sample of the Photoshop file that I actually worked on with this project. Download it and inspect it if you like.

(more…)