I'm Designer!

[mario]

Hi guys, I'd like to see what people are using to design Web sites. What is your design process like?

[Scott Watkins]

I generally will handle all design between Photoshop and Illustrator. I'll work up the comps in Photoshop. If I have any vector images from Illustrator, I'll place them into Photoshop. I usually organize my psd layers to match my css divs. This way, I can generate the images that I'll use for background images in my css without too much effort (just hide the layers that aren't to be included). Then, it's a matter of working up the css file and xhtml file. No science here, just organize the divs to match my design structure and create the class and id tags in the css file. After that, I fix anything that doesn't work in IE and use IE conditional statements for a separate IE safe css file.

[mario]

I have become a huge supporter of Fireworks CS3 and the rapid prototyping approach for designing sites. Fireworks allows me to mock up home pages as well as interior pages and show the developers all the functionality of the navigation.

Within one fireworks file you can set up multiple pages (Home, Contact Us, News, etc.) and then use hot spots to link them together. It then allows you to export these pages as super basic, yet functional, HTML pages.

Here is an example of a basic Click-Through: http://www.ou.edu/webcomm_comps/pa/home.htm

Click on "Press" in the main navigation to see an interior page and navigation behavior.
Click on the first link "read more about OU's scholarship goal" in the body of the page to see a press release page.

You can also use the rapid prototyping approach to show functionality inside a page. Here is an example of a finished click-through comp: http://www.ou.edu/webcomm_comps/cal/main.htm

(use the back button to go back to the home page after each click.)
Click on "Show Details" on the second fake event: Lecture: Dr. Glenn Dorsey, The Science of Black Holes.

Click on the "18" on the calendar grid to see how that works.

Click on the search box to simulate a search for "Speaker"

Click on the Category drop-down to simulate selecting the "Religion" category.

Click on "View Academic Calendar" to see what the academic calendar might look like.

So you can see how helpful this is for presentation of the design. Instead of showing a static graphic or printouts and having to verbally explain the functionality, you can actually show how the site will work. Also, when i pass off the comp to our developers, they have a great understanding of functionality of the site.

[Scott Watkins]

OK, I've not used this feature. I discarded Fireworks a few years ago in lieu of Photoshop. I like the quick and easy way this works, without having to build code each time something changes. This would be an awesome way to pitch new enhancements to our site (not just prototyping a new site). Thanks for the info! Would you be willing to create a quick screencast on how to use this feature?

[mario]

Id love to create a quick screencast. next time im mocking up a site ill try to build in time to set that up. This is also something i might be able to demo at a roundtable, if enough people were interested.