As this is a personal website, my objective was to keep the design simple and easy to update. I designed and coded this site using a variety of toolsets, existing code, personal images and stock graphics. Below is an outline of how I went about creating this site:
Wireframes
This website is a hobby for me and I wanted to make the CSS layout as clean and easy to update as possible. To accomplish this I opted to use the 960 grid system and Adobe Fireworks CS4 to create the wireframe.
Fireworks was used to create the banner, background, buttons and overall feel of the site. The city skyline in the banner is a vector image from all shilloutes.com and the fonts were downloaded from dafont.com The 960 grid fireworks layout image served as the basis for the image sizing and determining how the text boxes would be laid out. Select images were then sliced and exported for coding.
Code and Test
All HTML/CSS/Javascript and PHP code was created by hand using the text pad application. Below is an index of all the web sites which I leveraged for creating the code of this site.
Testing and development was performed locally using the Uniform Server LAMP environment.
Gallery
The gallery which is presented in the lightbox, is an direct export the Adobe Lightroom 2.7 application using the Simpleviewer Postcard engine. Lightroom exports an HTML page to present SWF, JS and XML coding. My lightbox points directly to the exported page, making it simple to update on a regular page.
Credits
Design- Grid System - Using a grid system significantly reduced product time and made for easier to maintain code - http://960.gs
- Smashing Magazine - Daily source for design inspirations, trends, graphics and much more - http://www.smashingmagazine.com
- Da Font - Collection of terrific free fonts - http://www.dafont.com
- Deviant Art - Source of graphics, photos and general inspiration - http://www.deviantart.com
- All Silhouettes - Useful Silhouettes in EPS - http://all-silhouettes.com
- Google - My answer to just about any coding question - http://www.google.com
- PHP- Detailed examples and guides to PHP - http://php.net/index.php
- ReCaptcha - Love it or Hate it, an effective method to minimize spam and help with imaging historic books - http://www.google.com/recaptcha
- ReCaptcha / Jquery / PHP Integration - Good example of how to - bring it all together - for a contact form http://www.raymondselda.com/php-contact-form-with-jquery-validation
- Jquery - Javascript framework to simplify common code http://jquery.com
- Jquery Validation Plugin- Plugin to simplify validation code - http://bassistance.de/jquery-plugins/jquery-plugin-validation
- Lightwindow - One of the most versatile and easy to use light boxes I have found - http://www.p51labs.com/lightwindow
- Adobe LightRoom
- Adobe Fireworks
- TextPad
- Uniform Server (WAMP)