Platinum Medical Spa
This site was the first created in collaboration with my colleague who was attempting to build a business around creating websites optimized for SEO. Click on each screenshot to enlarge them. The project was released and the design remained active for about a year before it was replace with a Flash-based site that killed all the SEO value we had built.
The Design
This is a desktop only design because mobile devices like the iPhone had not become a factor to consider yet. The masthead features the reflection visual effect that was the must have effect at the time. In this case, I extended the reflection to include the navbar, an original visual design element according to my colleague.
The site features three different layouts including the homepage, a content page with a left sidebar, and a layout with no sidebar. Other navigation elements include the global site navigation in the form of a horizontal bar featuring color changes on hover and breadcrumb links on underlying pages.
Click on each screenshot to enlarge them.
The Homepage
The complete homepage design featuring the reflection topnav
Topnav Detail View
A detailed look at the topnav with the relection visual effect
Above the Fold View
Screen shot of the homepage above-the-fold crop
Services Page
Services page featuring the section menu in the left sidebar
Service Deals
This is a detail of the service deals/discounts on the homepage
Contact Page
Contact page layout with no sidebars
Technical Details
My main contribution to the development of the site was the markup and CSS.
The Markup
The site was compliant with the strict XHTML standard (HTML5 was still just a glimmer of hope at this time). My colleague took my front-end code and incorporated it into his custom PHP framework.
CSS
The site features some classic CSS techniques for creating gradients and box shadows using images since browser support for these properties did not exist yet. The topnav hover changes were managed using the CSS Sprites technique.