Web Development

There is a new look coming to this site soon, and you can preview it here.

So, what goes into designing a website?

Lots of sweat, time, and typing. For me anyway. The current look was designed in about 20 hours over a weekend in June, using Photoshop 7 to generate graphics and Notepad to design the WordPress theme. The new look has taken (to date) about 12 hours, using more advanced tools (Photoshop CS3 and Dreamweaver CS3, mostly).

A website like this is pretty complicated–a lot more than just desiging a brochure to print or a short video to show. For the new look, I started my design in Photoshop, by creating a document and making my graphics. Normally, the next step is to just chop up the final graphic into parts and link them in the code; all of this can be done easily and automatically in Photoshop and Dreamweaver. Problem is, I’m not really all that sure of how to work Dreamweaver and I really like the control I can have over the code directly by writing it myself. And it looks cleaner. And I know how it works. I guess I’m a geek…

If you mouse over or click on the navigation bar at the top of the page, you’ll notice different effects. Normally, each button and each button “state” (normal, highlight, clicked, or active) will have their own image. This can take a while to download, which is unpleasant and detracts from the experience. I borrowed a page from Apple’s awesome website and created the entire nav bar and all of its states as a single image.

Then, I use simple CSS code to adjust each button’s position on the image. The CSS is in a separate file, making it easy to integrate anywhere on my site without creating lots of duplicates.

Another example of the different kinds of files and skills used is the image slideshow on the home page. This is accomplished using a widely available script that I setup with the names of the images I want used.

Tonight, I got these sample files posted to my website and did the beginnings of the type styles for the blog posts.

What’s ahead?

• Finishing all the styles for the layout and type in blog posts.
• Creating a “style reference sheet” for me to use as I write blog posts.
• Creating a dynamic sidebar with links and comments and so forth.
• Designing other pages – really just modifying the “blog” page slightly.
• Designing and developing the gallery. I’ve heard good things about Gallery2 and I think I’ll try to integrate that somehow. I also like the effects of a script called “Thickbox.js” that does some cool things with images.
• And the big one: Converting this all-HTML (static) design into a PHP WordPress theme. This will involve all code so it should go faster than the design process. Hopefully.

Stay posted for further previews, and please, comment and let me know what you think!