Anthony Milner

Have you every wondered why Adobe kept Fireworks in CS after buying Macromedia? After all Adobe had a very similar product in Photoshop. A few of our Designers attended one of the Adobe training days at Darling Harbour last week and learnt amongst other things a key difference between Fireworks and Photoshop – image compression.

Every designer know how to save for web in their sleep. Resizing and downsampling the image to 72dpi and setting the compression rate to 60% or 80% for best results is a part of every web designers repertoire but getting the right mix of file size and quality has always been a challenge.

What we were interested to discover was that Fireworks does a far superior job at compressing the image and maintaining quality than photoshop.

Here is a sample of the same jpg image compressed with Fireworks and Photoshop at 80% quality.

The Fireworks image on the left came out at 55kb whilst the Photoshop image is at 96kb. That’s a huge difference….

and here’s another couple of images. The Photoshop image (left) has been reduced to match the Fireworks image (right) file size 16KB.

If we can shave almost 50% filesize off every image whilst maintaining quality then in my opinion Fireworks pays for itself on day one.

Mark Cohen recently blogged about a very cool web application called animoto which let’s you build video animations very quickly. It was timely because we wanted to produce a short animation to showcase our recent work and this allowed us to knock one up in minutes. We could have spent $$ doing this professionally and may still do so but this is a very cool and easy way to proof of concept the idea. This was produced in 15 minutes…

Thanks Mark (and animoto)

I was about to go to the Google Mashups, Web Apps and API’s talk and then got a recommendation from Michael Kordahi to go see Andy Clarke’s talk.

Andy spoke about and demonstrated the parallels between comic book and webpage design and layout.  Comic books like websites have a limited amount of space to convey a message.

Comic books use panel size to emphasise the amount of attention you should be giving to it. Using size and shape of panels in an ecommerce store can give the user more time to digest the offering.

Use of alternating content blocks with either backrounds or borders to draw emphasis to regions of the page.

Another interesting technique is using text contrast in various panels to help the user to flow through site more effectively.

Do we need to have a another look at splash pages? Not old school splash pages on the home page but rather a device to help someone new to understand where they are. E.G apple.com – iphone launch “Welcome to iPhone”

Drama is important in web design. Tell a story. Through design we should help the reader flow through the site/story we are trying to tell them. Too often we leave the user to their own devices.

Work on structure and page layout initially without colour. When colour is introduced it can dilute the message.