Well, it takes a long time to do those changes! So when is it approx. will launch now? Who knows, hopefully in the beginning of next year?

HGTV.ca team can’t seem to bare the fact that the site has been outdated for over 7 or 8 years now. They felt that the site needs a little ‘refresh’.

HGTV.ca refresh

The ‘mini’ refresh was to update the look without changing the structure of the site. All I did is update the color palette. This quick update only took me less than one day to design, and another day to cut out small graphics and background images for production guys to implement. Small changes but big impact.

HGTV.ca homepage 2008 Before the refresh

HGTV.ca homepage After

HGTV.ca microsite redesign:

Well, we can’t revamp the whole site yet but we can revamp those microsites to be up to the trend.

I have revamped several micro sites for HGTV.ca. I noticed all the microsites from the past were not built on the same structure. They have different image sizes and different page layout. It really adds more work load to the production team everytime they get a request to build a new microsite!!

Income Property, Property Virgins, Home to Flip and The Property Shop are the newest large background microsites that HGTV.ca will have this fall.

I unified the site template so production team only need to do their CSS stylesheet once, and all they have to do was to change the path of the imagery and the color palette. Streamlined the process which makes everyone’s life easier.

HGTV.ca Property Virgins refresh

HGTV.ca Property Virgins microsite 2008

HGTV.ca Property Virgins 2010 refreshed!

HGTV.ca Income Property refresh

HGTV.ca Income Property 2009

HGTV.ca Income Property 2010 refreshed!

Unfortunately I am not confident enough to take on those projects. Why? I am a web designer not a graphic designer.

People tend to think graphic designer can do web and web designer can do print. It is a mistake and it will cost you a fortune if you try to mix both.

Graphic designer and web designer came from the same foundation. We all have to learn about composition, typography, color and layout. At the end, we make the product look functional and pretty.

However, with graphic designer, their specialty is with paper and print material. While web designer, we manipulate pixels within the browser space.

Now why can’t graphic designer do web?

Because most graphic designer lack of the web programming knowledge. Web is content centric and it changes all the time. A web page size could shrink and expand depends on the size of the content. A web programmer usually takes a web designer’s design and turn it into a functional website. A graphic designer will design a web site as if it’s on a paper that provides a fixed width and height to work with. A web designer will understand the technology constrain and design around the programming.

A website usually gets updated frequently, a good web designer will make it easy to update for future date. A graphic designer lacks the vision to look further than current date.

Now why can’t web designer do print?

Because most web designer lacks the understanding of print material capacity. Graphic designer understand the texture, size and the surface material of a print material, so they design the best out of the provided material.  Web designer won’t be able to provide the best result with print compare to a graphic designer.

Graphic designer are also the ones who designs logo and stationary. They understand the scale of a branding from small to large and from black/white to color. Web designer usually gets the logo and stationary from graphic designer and then transform the identity into a web space.

Now you know why I don’t do print? Because I might not be able to provide you a best result for your buck, hiring a professional graphic designer to do your print will worth a lot more for your money!

In graphic design, we learn to layout using a certain grid system, so all the element on the page are align properly and provides a better visual flow.  This goes the same to web design. Screen might not be a print magazine but it still applies the basic grid system.

One of my coworker sent me a link to ‘960 Grid System‘ site. This is probably one of the best link that I have came across so far.

960 Grid system site provides you templates to download for your Photoshop, Illustrator, Indesign,Inscape, Omnigraffle, Visio, fireworks, and Expression Design.

I personally use Photoshop to mock up my websites. This grid template is very handy because all the guide lines are lined up for you already. This makes my design to be easier because I have something that I can reference to in terms of alignment. If you have never try to design with a grid, well, I guess it’s about time for you to start. 960.gs !

This is often the compliment I got from my manager and the people I work with. They are referring that I always turn over the work so quickly that I work just as fast as a machine.

I am not a machine but I try to work efficiently.

1. Setup a design resource library

One of the reason that I can create a design so fast is that I always have my design library with me. Half of the time you will get those clients who want something out of nothing. They are also often due within short timeline. So what do you do? Dig out your library and put stuff together.

So what stuff you put in the design resource? And how do you organize it?

I create folders that named by the nature of the assets. For example, fonts, texture, pattern, icons, vector shapes..etc. Anything you want. You are ultimately responsible for your own library and be organized with it. The more organized you are the faster you can find your assets.

Here’s some site where I often visit to grab  ‘free design resources’

• Bittbox.com
• Dezignus.com
• Webresourcesdepot.com
• Tutorialblog.org
• Adobe Exchange
  

Most of the sites often link to other free resources as well, so feel free to dig in!

2. Juggling small task and big task in an efficient way

I guess it’s annoying when you are in the middle of work and suddenly there are small projects show up and they are due the next day. Yes, I know you can’t avoid those, but that’s the ‘time management’ skill comes in.

I usually will take a look at the time line of the project and decide what to work on first. However, I always tackle small projects first (for example, banner ads ). I get them out of the way first so I can concentrate on bigger project later.

It’s unavoidable that people always come back with more changes, but that’s the life of web designer, you just have to deal with changes and not to stress about it.

Oh, another thing I do is, I work on the project as soon as it was hand down to me. I don’t wait for 2 days after I decided to be brain-dead for a while. I work with momentum and I keep it that way.

3. Continue reading and researching

Sometimes I get those ‘downtime’ where I finish my projects and nothing new comes in. I use those downtime to do more reading and collecting design resources. I read about technology and design patterns. You can’t be a web designer if you don’t know CSS. That’s just wrong.

Also, people often mistake print designer as web designer, which is sad but it’s reality. The way we use typography is for screen reader. We design for legibility while practicing the foundation of typography. A practical guide to web typography is a good guide for those who wants to read into type setting for web readers. Another awesome post from Smashing Magazine – Typographic Design Patterns and Best Practices, it gives a very good consensus of the typography practices that web designers use these days.

Smashing Magazine is probably the best place for me to read about design trends, typography, idea and tips.

4. Do ‘other stuff ‘

Have you ever come across ‘creative block’ sometimes? I get that from time to time. It’s often because I am staring at the same project for too long. I lost the ‘creative’ sight of it. Therefore I stop working and just do something else instead. It could be just chat with friends on MSN, go for a walk or simply just look at sites that is totally irrelavant with design.

After I have taken 5 min break or 30min ‘mental’ break, I usually can come back with abit more refreshed mind to do my work.

5. Lastly…

# 1 rule to become a kickass designer is don’t think about work and talk about work after you get home.

# 2 rule to become a kickass designer is don’t think about work and talk about work after you get home.

Cuz literally you will just annoy the crap out of your family and your friends. No matter how frustrate your work is, just don’t talk about it. Leave it behind till you come back the next day. You will be less stressed and live longer.

Cheers!

Push down  – 970 pixel x 418 pixel

XXL box – 468 pixel x 648 pixel

Fixed Panel – 336 pixel x 860 pixel

We contracted out our new design to an outside company. Great, the new design already taken place, so how are we gonna implement the new design without disturbing the existing template?

Take a look of the new design layout wireframe.

new thestar.com layout

The new design will be a 3 column layout. We will always have a leaderboard and a big box on the page.  The content will follow by a major headline story and then a list of story line up. Everything looks good except the new humongous ads sizes break all the layout rule.

Problem: The new ad sizes does not fit with the new design! As always that advertiser wants their ad above-the-fold to get exposure.  Our design was created and built before those new ad sizes. And of course the outside company is not gonna go back to the layout mode unless we slap them with more cash.

Solution: Tweak the layout in the most minimal way and keep everything on the page identical. In order to cut down the developer’s work, I had to take the existing layout and tweak the most minimal way so that we won’t need to touch the majority of the existing CSS stylesheet.

Push down advertising is the easiest to mock up because all you need is to push down all the content below navigation. Then again, it’s so huge that you can’t ignore.

Push Down 970pixel x 418pixel

Here’s a real example from businessinsider.com for push down advertisting.

Push Down Ad closed mode

Push Down Ad open mode

XXL Ad gives me a headache. Ideally, we want to keep our 3 column layout, but this nasty size literally takes up half of the website width!!! So I had to reorganize the headline story content and have it share space with the XXL ad in it’s own box and push everything down.

XXL Box Ad (468 pixel x 648 pixel)

Finally, the fixed panel. The width of fixed panel is 336pixel. It is literally 36 pixel wider than our right rail, which has our big box ad and all the related contents. And with 860pixel in height, there’s no way the headline story abstract can show that much copy to accommodate the height. Therefore I had to bring some story line up and shrink the width in order to accommodate the odd width size.

Fixed Panel Ad 336 pixel x 860 pixel

So why those large ad? I guess the advertisers are now aware the demand for premium inventory, and not just blinking skyscraper anymore.

businessinsider.com believes the following reasons why advertisers want to move away from just banners:

• If advertisers really want to buy banners, they’ll do it for cheaper through an ad network.
• Banners are too easy to ignore. Demand-generation ads need to interrupt content (like they do everywhere but online).
• When people think of the banner, they think of a blinky, subprime mortgage ad where you have to shoot the duck.

After years of working as designer in the corporate environment, you will notice couple things

• Always design around advertisement
• Always provide the best above the fold exposure for advertisement
• Making online banner ads and sponsored by logo are like daily chore

I am not a big fan of advertisement, but what can you do? it pays everyone’s salary!

Rogers Homephone Challenge Couch Comparison

Both companies are money-gauging company so it’s just disgusting for me to even want to look at the ad. However, what it gets interesting is when company is attacking eachother using the same marketing approach.

Bell's couch comparison

This is Bell’s couch comparison Ad that is advertised on today’s Metronews paper. It took the whole spread. It says “You think I am expensive for my homephone service? I have more stuff to offer for the digital TV!”

While those two are fighting for each other. I saw this Ad from Telehop that took the same couch idea and then added their own. It simply says “I am the cheapest for the best offer, sucka!”

Telehop Couch comparison

nice.

Currently my company is doing a revamp on our biggest news site – thestar.com. With the new design, I can see that we are trying to de-clutter our information display. However, we still can’t get away from our traditional ways of display information.

When I saw this Google newsmap post from Information Aesthetics

It gives the “control” to the users to “discover” the stories vs our traditional ways of controlling the output.

Jeff Veen from Small Batch, Inc., who is also known from WikiRank gave this excellent speech on designing for big data. He clearly stated that giving the control to the users over data is definately the trend and the future of the web. He stated couple important rules about data visualization.

• We are always storytelling our contents, now it’s time to give user control to have them to discover the story
• We provides visual cues for users, now it’s time to make it into tools so that the users can interact and control their cues.
• We provide editing features but now it’s time to give the filtering control to the user to manage the output
  

And this is truly the manner of web 2.0 approach. We are giving the control to the users in a less response time and more interactive way.

This definately adds a boost to web accessbility. Awesome.

I just love the fact that somone blends both trailer together so well. nice job.

Using sitemap as your footer

Awesome show and tell from Web Designer’s Wall. Nick raise a good point using sitemap in the footer. Cut down the clicks, engage interactivity, saves time and enhance page design are all good reasons to design for responsiveness.

20+ cheat sheets for designers

Nothing better than cutting down my production time! Sweet!

Our condo recently just got flooded due to the waterline breakage behind the fridge. We had to remove all the carpet so now we are living on the bare concrete! I had planned to get hardwood floor anywayz, but everything starts one month early! And because we are on the bare concrete, nothing better than just paint the whole place anywayz.

During the painting process, we had to remove our wall shelf in order to get all the area painted. The problem is, after we remove the shelf, the anchor in the drywall is no longer valid! We put the shelf back in, put the stuff back on, and then “whomp”, everything comes back down plus adding holes to the drywall. Argh.

Now we have to patch up the holes, and we can’t install the shelf on the wall again! So what can we do about the shelf? Add few legs to the shelf and make it into a little table to hold the stuff instead.

Handsome makeover for ugly AC unit

This all came from the great inspiration of Ikea Hacker blog.  I randomly check this site for inspiration. I do agree that IKEA’s stuff is never really that durable, but IKEA is everywhere (and probably the cheapest for the design that they offer)! And because all the furniture came in pieces, you can reuse those pieces and make it to something else. It’s brilliant!

This guy transformed his ugly AC unit into a handsome furniture piece that adds accent to the place. It’s just beautiful!

And someone put together Vika Fintorp leg and Lack shelf to make a slim entry table. It’s also brilliant!

This is far the best hack I’ve seen. Salad Bowl Speakers. Who would thought of a salad bowl can be turned into something sexy.

Home improvement is one of my 2009 goal, and it’s literally taking half of my free time to accomplish it. Think outside of the box is what I say to myself all the time, but most of the time I still think inside of the box. lol