Description:
Lafayette Carwash & Detail Center is a family owned business that serves several Contra Costa County cities including Lafayette, Orinda, Moraga, and Walnut Creek.

This is the 1st redesign of the site was initially launched in the summer of 2008. The purpose of the redesign was to bring the site’s aesthetics into a more contemporary look & feel – it features a subdued-blue-monotone color palette, clean lines, and “airy” layout. Just as important is that the framework has been established to implement more comprehensive SEO tactics to ensure that the site ranks well in search engines.

www.lafayettecarwash.com

Description:
In His Name Clothing is a San Francisco Bay Area based clothing company that I’ve been providing web services for since 2008. The 2011 site design is the third version that I’ve had the pleasure of programming based on the design created by company founder Chris Chance.

For the eCommerce backend the website employs Paypal’s merchant services to implement a shopping cart and provide a user-friendly experience for a merchant to manage their sales. Another feature of the site takes advantage of several javascript plugins to bring dynamic elements to site by using Nivo Slider for the header slideshow, Anything Slider for the Lookbook page photo gallery, and Galleria for a photo slideshow on each item’s page. Finally, CSS sprites are used for the navigation menu as well as the thumbnails for the Guys, Girls, and Accessories pages.

In His Name Clothing

Description:
continuED Medical is a medical education company operating out northern California and is the second site developed with Rob Rullo of Rullo Communications.

Provided with a logo with an icon colored in orange & yellow hues my approach was to create a site with a blue & grey background to ensure that the logo coloration would dominate – further on orange would become accent and highlight color throughout the site.

www.continuedmedical.com

Description:
s3v3n Gaming Clan is a North American based online gaming clan specializing is 1st person shooters and are actively involved in amateur competition.

As with many groups involved in activities that are team-oriented and tactical the site’s aesthetic exudes a military theme. An integral aspect of the site, and primary feature is a forum section where the clan members can post topics for discussion. The forum software is courtesy of PHPBB3 and I’ve taken full advantage of it’s open-source structure to customize a forum that would mirror the established style of the site.

www.vii-clan.com

Description:
LCS Designs is a Southern California fashion design business found by recent Chapman University graduate Lindsey Saletta

The development approach was to create an aesthetic that was elegant, but not too graphically complex that it would compete against the photographs that are the true feature of the site. In order to manage the photo galleries 2 javascript plugins were used to create the dynamics of the collections page.

• Jcarousel Lite creates the image slider
• Shadowbox 3 launches the screen overlay featuring the selected image

www.lcsdesigns.com

Description:
The site is the official movie site for Chapman senior Traci Hays’ thesis film titled Lions Among Men.

The strategy for the site was to create an user experience that allowed for a direct approach – to provide the necessary information on a single page. The execution was positive, and with a suitable thematic background, the needed assets were nicely laid out in a very “airy” way.

www.lionsamongmenmovie.com/

Description:
Rullo Communications is a San Francisco Bay Area based medical educational and communications company.

Provided with a logo I used the vibrant blue of the logo as a catalyst for the color scheme of the site – the key that I found valuable when working such a vibrant color was keep a simple-monotone color palatte. The site is effective, direct, quick-loading, and for an added touch of dynamics 2 javascript plugins were employed.

• MenuMatic animates the drop down menus
• Shadowbox 3 launches the screen overlay featuring images & videos

www.rullocommunications.com/

Installing Shadowbox on an HTML page is a rather simple process, but when it comes to triggering Shadowbox from a flash file the programming can be a bit overwhelming for a coder not to familiar with the intricacies of javascript. The following is an overview of the process to implement Shadowbox into flash.

HTML

Actionscript 2

Actionscript 3

Snippet untested.

For a bit more comprehensive Shadowbox functionality one can also program Shadowbox to display a media gallery. I’ve documented how here: http://www.hectorarandawebworx.com/main/shadowbox-flash-triggered-gallery

Well the customization is quite simple since the icons are png images and all that needs to be done is replace those images with one’s own. But first a few things need to be taken into account:

• The replacement images must be able to fit in the existing footprint
• Some minor css code needs to be altered in the shadowbox.css file

Design

The first step is to deign the new buttons in a image editing program. I’ll be using Photoshop.

• Open a new canvas with the dimensions of 100px by 16px; 16px is the height of the original Shadowbox buttons and at this time the width isn’t a concern.
• Using the type tool type out on separate layers the words for each button: Close, Next, Prev [Previous is truncated for width], Pause, and Play. I used Arial, bold, and a font size of 14. You’re welcome to use any font and color desired as long as it doesn’t exceed the 16px height.
• Select all the layers and center them horizontally and vertically on the canvas.
• Using the crop tool crop out the extra space on each side of the text and ensure the height is still 16px. In my example the width ended up being 42px and Pause was the longest text line.
• Now overwrite save each button to it’s respective counterpart in the Shadowbox folder. Ensure that the buttons are saved as png and have a transparent background.

CSS

Open the Shadowbox.css file and look for this line of code:

Replace the width:16px to what your new buttons’ width. In my example it was 42px.

Live Examples

www.michaelchance.com

www.fatbox.com

Description:
Fat Box is a San Francisco Bay Area based film & television production company with over to 15 years of experience in commercials, documentaries, advertaising, 3d & 2d animation, and much more.

The approach to the design was to maintain the original branding colors of yellow & black and the preexisting logo. The site is composed of a variety of pages and to manage the various sections MenuMatic’s javascript drop down menu was employed to provide a user-friendly experience in selecting the desired page to view. The site is also video media heavy and Shadowbox 3 was used to launch the screen overlay effect and featured the selected video.

www.fatbox.com