This XHTML site was designed around the company brand using the same bright and lively color scheme and elements. The main navigation consists of list elements assigned various sizes and positions and background bubble images. The bubble shaped links that float on hover using the jQuery UI Bounce effect and "pop" onclick with a jQuery switchclass call. For ease of use navigation links were also included at the bottom of each page.

The jQuery UI Accordian Widget is used on the Services page with the long lists of services divided into logical sections for viewing ease and to avoid excessive page length and scrolling. The Contact Form is validated twice, once on the client side using the jQuery Validation plug-in for user enhancement and secondly within the php script on the server side in the case that user has JavaScript turned off in the browser.

Jess Cleans is a small cleaning business owned and operated by a young entrepreneur. Her target audience consists of females thirty and over. She wanted her company’s brand to be bright and clean, with a retro early 1960’s feel. I chose to use blue with bubble graphics for the backgrounds to illustrate the clean impression of soapy water. The rest of the overall triadic color scheme is based on the blue color chosen color. The logo itself is based on the Witched font by Mischa Hof, cleaned up in Illustrator, reminiscent of the Bewitched television program. The character used in the graphics is a modified version of a vector designed by ChihHang Chung.

Keystone Generators is a small company that sells and services generator systems to homeowners, farms, and businesses. The company is located in Delta, Pennsylvania, the reasoning behind the company name as Pennsylvania’s nickname is the “Keystone State.”

Through gathering information for the website design, I became very familiar with their business and their business philosophy. Though the company sells and services generators to homeowners and businesses, they prefer to deal with commercial clients and focus on service contracts versus sales. An example of one of their largest contracts is the service of backup generators for several Verizon cellular phone towers in the area. With this in mind, their primary audience includes persons responsible for the procurement of contractors for their organization. Persons in this category would more than likely be predominately male, over thirty, corporate professionals.

Keystone Generators has used the same company logo since their inception in the mid-eighties and their logo was in severe need of a makeover. The re-designed logo is modern and simplistic. I tried to stay away from arcs and swooshes, as seen in so many modern logos. I used a lightning bolt symbol for two reasons, as a symbol of power and a symbol of thunderstorms (which create the need for generators).

Current color theory suggests that the color blue conveys a sense of trust and loyalty, men prefer the color blue, and that blue produces a strong buying intention. With these factors in mind, I chose a shade of blue as the logo’s primary color. The colors of the lightning bolt where chosen according to a triad color scheme. My first attempts with the redesign included a basic linear gradient along the lightning bolt. I opted not to include the gradient as Keystone Generators uses their logo on screen-printed T-shirts, embroidered items and other marketing items. The use of the gradient may make printing some of these items more complex and costly. I also provided a greyscale version of the design for use when printed with black and white laser printers, faxes, etc.

Clean B’s is a small cleaning company based in Baltimore. As the owner wanted to include a bee in her logo, I designed a semi-abstract curly bee in Illustrator. The text of the logo itself is a simple black. The text is based on the font A Yummy Apology by Gem Fonts, which coordinated well with the curls of the bee illustration. The text was edited and cleaned-up using Illustrator.

The business cards and postcards were designed in Photoshop. I chose a lilac purple background to complement the yellow of the bee. For the business card I chose Lucida Sans for the remaining text to balance out the heavy flourishes of the logo text. For the postcard design I used a combination of Lucida Sans and Lucida Bright to separate informational elements.

The basic design for the Big Brother’s Marble and Granite is based on a template by Pixelentity The project did, however, require heavy modification to suit the client’s needs.

The company carries thousands of products including various types of natural stones and engineered stone, some only available in slabs, some only available in tile and some available in both. The also carry a wide array of cabinets, sinks and faucets. The first task was to determine the navigational layout of the site. So that the drop-down main navigation was not extremely long, I separated the products into five categories. The stones are split into the two categories of slabs and tiles each with their own page that then contain links to the various types of stone available in each category. To ease site navigation, each specific category page contains side links to the all of the other product categories. As well, the home page also includes links to thumbnail links to every product category. Each stone product page contains the designs available in both slabs and tiles, separated into two tabs using jQuery UI Tabs.

The client supplied me with a range of stone product images in a variety of sizes and quality. All images needed to be modified and optimized in Photoshop. Images and data pertaining to the sinks, faucets, and cabinets were extracted from the distributor web sites, with permission. I created a MySQL database that contains all of the product images, titles, descriptions, and other date, the pages are populated using PHP. The thumbnails of product images all link to larger images using PrettyPhoto.

The faucet and sink product pages contain filterable content based on type, material, etc. The filter options are generated based on categories within the database and generated with PHP. The product results are loaded into the main page with AJAX.

The Contact page includes a Google map with Address AutoComplete and Geolocate using the Google Maps API. The directions are generated inside tabbed content using JavaScript. JavaScript is also used to create nicely formatted printable directions by writing the contents to a new window.The 3D Countertop Simulator was created with Demicron Wirefusion. I created the 3D models in Blender and the tileable textures in Photoshop. The textures are sent to the Java application using JavaScript. The jQuery Plug-in qTip by Craig Thompson was used to generate the custom tooltips.

Keystone Generators supplies businesses and homeowners with generator systems and provides generator maintenance and repair services. The purpose of this site is to promote Keystone Generators and enhance customer communications. Their primary audiences include business owners, corporate management, and homeowners.

Keystone Generators wants to focus on Generator Maintenance Services rather than sales. With this in mind, I placed the Services navigation link first and ensured that all page titles, meta-descriptions and index page copy text are worded to emphasize generator maintenance. The website design for is based around the modernized redesign of their logo I had done earlier, including the colors and fonts. Copy text and gallery photos were provided by Keystone Generators, while data and photos pertaining to Kohler generators will be procured from Kohler through their Distributor Resources. Some of the photos used were obtained through stock photo libraries. The slider on the home page uses the SlidesJS jQuery Plug-in and the photo gallery makes use of PrettyPhoto.

The Suess Builders Web Application is a PHP application designed to upload photos and messages to the Suess Builders Facebook, Twitter and Blog from a mobile device. The application is designed using jQuery Mobile and photo uploading is accomplished via Aurigma Up mobile application. The Photo Posting page allows the user to choose which Facebook album to add the photo to from a list dynamically generated using the PHP and the Facebook API. The posting pages also include a character count created with JavaScript for use with Twitter. If the character count exceeds the maximum allowed by Twitter the post title is used with a link to the blog.