Dean (Zhuiyang) Chen

I finished designing my portfolio page. You can check it out under the about me section on the left nav.

I was amazed at the ease of use and powerful features geared towards web design that Adobe integrated in to Fireworks CS3 when I introduced it to my girlfriend last night. The multitude of brushes themselves, including all types of color changing confetti and "alien paint", many of which respond to pressure from the pen for the Wacom Bamboo tablet I got her for Christmas, provides all the tools a design will need. I was so impressed that I had to check out those features for myself, and there is no better way to do test Fireworks potential than to produce a real world design.

Ironically the design itself is inspired from Fireworks' feature set. The grid background was inspired from the show grid feature available in Fireworks, and the glow for these boxes was inspired by an accidental click in the styles panel of Fireworks. I'm pretty satisfied with the new layout that I created in a few hours(would have taken 30 minutes if I knew exactly what I wanted). Fireworks makes applying styles extremely easily by providing a preset that takes only one click to apply and can be easily edited under the properties panel to match your needs. Although I didn't need it, the integration with other Adobe products such as Dreamweaver, Photoshop and Flash is definitely there. Fireworks has now replaced Photoshop for all my web design needs, I don't miss anything from Fireworks' reduced feature set.

However, it is not without its faults. It would run very sluggish in Windows Vista until I disabled in Aero interface, documented on Adobe's site after a quick google search. This is just unacceptable since the final version of Windows Vista was released prior to CS3 and the beta of Vista has been available for testing for years. I was also unable to take advantage of Fireworks' slice feature since it refuses to save in any format other than horribly compressed jpeg, that distorts the dotted lines and ruins the glow from boxes. I believe all the images on a site except for colorful images should be PNG, since jpeg sucks at compressing fancy designs with transparency and gradients. Fireworks also save flattened PNGs as PNG 8, which only saves a very small subset of the color spectrum of the file ruining any gradients. I didn't notice this until I had already made all the components to the design and realized how horrible the gradient from the blue glow looks.

It only took 5 minutes to implement the new design after I prepared the images(there are only three of them, one for the header, body and footer) since all that was required was small updates to less than a dozen lines in my CSS. If you are using Firefox just right click on the header body and footer too see how I implemented the design. You can checkout my old design here.

The next step is to clean up my left side nav and move some of it on to the header. By the way, I did all of this with a sprained and/or fractured right wrist, and I'm right handed, which shows how efficient Fireworks workflow is.

I started this project more than a month ago as a Christmas present for my girlfriend Jane. The general layout is inspired from this site but I definitely like the design better and will most likely update the dark backgrounds of this site in to something a bit more vibrant along the lines of dark blue and white. The biggest challenge was getting those thick green and white lines to line up, I ended up resorting to transparent pngs but as most web developers know it doesn't work in internet explorer 6 so I specified a non-transparent png for the ie6 stylesheet and still need to line it up. I realize that there's a couple of hacks to get around this limitation, one of which I'm using on this site, but the transparent header refused the align correctly when hacked. Other than that, everything else worked out pretty smoothly and this is definitely one of my better designs.

I also made a PHP powered RSS feed that automatically updates as I make new posts and am to alert google and some other sites that my page has been updated... very convenient. You can subscribe to the feed on the left menu under subscribe or by clicking the orange RSS icon near your browser address bar. It was initially created so that Jane's new posts will sync directly with her facebook notes through RSS, but it wasn't very hard to copy the code for my uses. I'm trying to find the best way to present source codes on this website but I'll definitely publish the source of my RSS generator in the near future. It pretty much involves outputting posts, much like my index page does but in XML tags. I also implemented two classifications, popular and favorite, the former based on the view count which is stored along with the post in the database and the latter just a check box when the post is being edited.

There's also some small cosmetic changes such as the green back and forward buttons instead of the boring text and the pencil on the top right corner for my personal use.