More Proof! How I used Adobe Fireworks CS5 to Design a Simple Website

There is an adage that goes like this, “The proof is in the pudding”. Translated, To fully test something you need to experience it yourself. Yes, it’s from the old English language days but the meaning still bears some relevance for this present time.

I’ve always had the view that a designer must always be growing artistically and otherwise, by continually cultivating new programs, skills and knowledge as one possibly can.  And as such, Adobe Fireworks CS5 is one I will recommend to any aspiring or seasoned designer to learn and have in their arsenal.  In my aim to bring more spotlight to Adobe Fireworks CS5 immense capabilities for folks indifferent to it, while emboldening present users; I will showcase the process taken in using Fireworks CS5 to design a simple website Hearts and Hands Newborn Care.

First, before I commence I think it would do well to give some background on the website created. Hearts and Hands Newborn Care is the online presence of a nurse that specializing in the care of newborn babies, twins, quads, singletons particularly at nights. With that said, a few things must be kept in mind.

1. The design must maintain the theme of babies striking a balance between professional and illustrative for the targeted audience.

2. Because Adobe Fireworks CS5 at it’s core was made for screen design, it was paramount that everything with the exception of the logo be made entirely in Adobe Fireworks CS5. Although, I won’t be showing very detailed snapshots of the process.

Well enough said, let’s begin.

1. Sketch to Wireframe
Like every design project, some research was done on the baby nurse industry to figure out influencing things like colors, their site architecture, layouts, text etc. Fortunately enough, the identity and colors were already done, so the process moved a little faster. The next step in process is some loose website sketches to flush some ideas. These are what I came up with.

Sketch#1

Sketch#2

I choose sketch #2 as it more reflective to the final website.  Although I must admit it’s little hard to figure out here.

From here, I created a more refined simple wireframe to demonstrate to the client the intended layout direction the site will have. All this was done in a very short time frame.

Please note that it’s not exactly as the final website but close to it. This is a part of web design, it sometimes presents unpredictable decisions.

It wasn’t converted into a working prototype as it’s was small and the client was on a tight deadline. I immediately proceeded from the wireframe to a design mockups. I did several but eventually focused one I think fits the requirement.

2. Vector/Bitmap based Illustration
I love the idea it can handle both bitmap and vector at the same time quite well. It is suitable to create icons and illustrations for the web, as in my case where all the illustrations, graphics were created entirely in Fireworks CS5.

3. Decluttering through Pages
If you have never seen or heard of this feature, you’re missing on something fabulous. This is where I can confidently say Fireworks trumps both Photoshop and Illustrator. For comparative reasons, in Photoshop one would have a layers representing individual pages that will increase in file size. But where Adobe Fireworks streams this is by having a master page with common elements, linked to the various sub pages. As in this case, the elements like the logo and navigation was permanent across the design concept in which allowed me to make subpages much easier.

4. Brilliant PNG and Image Optimization
This is another factor in which Adobe Fireworks CS5 clearly eclipses Photoshop and Illustrator. Using a trick I learned from watching a David Hogue at Max2011 online about PNG8 + Alpha Transparency Optimization . Why? It’s two fold. First, it maintains transparency and it keeps at a decent size as demonstrated here.

IE6 gave an undesirable result, so please be aware of this.

5. Other notable things worth mentioning I used or didn’t used

1. Rounded corners - For navigation and side images with the rounded corners, I used the feature to do it quite simple by inserting some numbers. Unlike Photoshop and Illustrator extra step(s) would be needed.

2. Slicing Tool - I could have used this but I’m old fashion in that I like to have more control over the images but overall this is a time saver.

3. Exporting HTML/CSS - I’m old fashioned type of guy, so I opted against using this feature. It is a solid feature to utilize but I like to have more control over the elements. It’s just me though

Okay so I have given you I hope enough proof of why Adobe Fireworks CS5 is a great design program to pick up. Still having doubts? Like I said in the beginning the proof is in the pudding, take a plunge and uncover the delights that await you.

Check out the site @ www.heartsandhandsnewborncare.com