So I had an interesting assignment thrown at me at work (Brunello Creative) last week. We had a client who needed a bunch of print work done and at the last minute wanted a 3 page micro site done in just about a day. (go check it out: Humac360.com) Guess who got the project? ME!!! I’ll show you my process from sketching, to photoshop mock ups to production and launch!

First things first…CONTENT!!!

After the client gave the ok for the project I started looking at what I what I had to work with: 2 pdfs of a brochure and a few photos:

The humac 360 in all its glory. This little thing can be hooked up to weight lifting machines to track the progress of physical therapy patients.

The device can then be plugged into a computer to generate biofeedback:

Humac 360 brochures our print designer Jess made

1 Research

After sketching I looked around on the web for some microsite inspiration. I found a lot of mini-sites for cars and ritzy products that were all flashed based. This is all fine and dandy but there’s no way I was making a flash site with this timeline – The client needed a simple brochure type site so I decided to go in that direction.

2 Getting friendly with my pen and paper

Even though I was on a brief timeline for this project I did not forgo one of the most important stages of design: sketching! I drew a bunch of squares on my paper and sketch up 3 or so designs. After some brief discussion (with myself hahah) I picked a direction and went for it.

Some of the design variations I came up with:

The sketch I picked to take to the next phase

3 Photoshop Mockups

I fired up photoshop and made mockups for the homepage, a text page and a contact page. I wanted to go for a brushed metal look since that’s what the actual product was made out of. Pretty simple and straight forward. I wanted this site to be simple and get information to the customer quickly. I also wanted to draw attention to the product itself. In order to do this I made the Humac 360 (or the red box thingy) break outside of the blue header area. This also points the user to the site navigation in the right hand sidebar.



Another feature the client wanted was a link back to the main website. I made it clear that this product was made by CSMI by placing an absolutely positioned banner in the upper left corner of the site.

I also wanted to challenge myself with this design so I decided to add the element of a color switcher to the right sidebar. The Humac 360 product comes in 4 lovely colors (hmm imacs anyone? :) ). I was not sure how I was going to implement this feature, but decided to go for it anyways.


The last feature I wanted to include was some lovely css3 elements. If you hover over the links in the sidebar you will notice that I used the border-radius attribute that is quite lovely :) Sorry IE users – you get to see an ugly box :)

4 HTML, CSS, PHP Oh My!!!

I needed to get this design up and running fast so I started with the 960 grid system. I modified the width of the whole layout and selected two of the columns to use and BAM! I had a layout! I also went in and changed the class names to things that…well…were more meaningful (no more .grid_6) I love starting out with existing frameworks because it usually makes some of the (IE) coding headaches go away!


Next up I had to figure out how I was going to approach the color switcher element. I’ll admit I was lazy and took the easy way out. Each block links to a separate page with a different class applied to the humac360 element. I know there are much better ways to do this, but this is one of the things i left last on the list. I’ll eventually get to sicking some sort of style sheet switcher in there. :)

Another coding…feature is that I found this AWESOME png hack? called DD_belatedPNG. Why is this png thingamajig so amazing? It allows you to use png files as background images in ie6. This is a shortfall of some of the other png hacks out there.

Another feature I added to the site was thickbox. Eventually the client wants to display a few videos on the site. Thickbox works like litebox but it allows other types of content.

Ready, Set, Website!!!


So after all that was said and done – I had a working 3 page microsite in less than 24 hours! I know theres room for improvement in the design and probably the coding as well. Its interesting to see what can be done in an extreme timeframe. Check out the site: http://humac360.com

What do YOU think?

Leave a comment and let me know what you guys think! Have you ever had a rush project like this? Tell me about it! Show it to me!

[51] Comments
Posted in Boston, Graphic Design, Web Design, design