SerpentVenom Spa


This 2009 design is the third version of my former website, SerpentVenom. SerpentVenom featured my art and design portfolios as well as my blog and some articles I had written. I retired the site when I realized I had not updated the blog in over a year.

The Design

Project screenshot gallery
Project page detail
Home page detail of masthead
Project gallery lightbox

SerpentVenom was originally designed for desktop only and was eventually converted to be responsive in order to support mobile devices like phones and tablets. Color is used to distinguish one type of content from another; blue for web projects, green for art projects and yellow for blog posts and articles. The color palette is drawn first from the blue of the logo. Shades and tints were created by adjusting the HSB values in PhotoShop. Green and yellow hues were selected using similar saturation and blackness values as the main blue color.

The layout of the homepage is built upon repeated use of the golden ratio. The golden ratio also influences other page layouts such as the project pages, blog post pages, blog archive pages, and article pages.

Project pages featured a unique UI to control what aspect of the project was featured such as Design, Development and a project gallery that displayed images using my custom lightbox script.

Homepage layout
Homepage tablet layout
Blog page layout
Project page layout

This incarnation of SerpentVenom stayed in production for nearly 7 years. While I was sad to see it go, I felt that a change was in order and so I rebranded to use Ugly Bunnies.

The Development

SerpentVenom was powered by Wordpress using a custom theme that I developed from scratch. The markup is HTML5 compliant. Layouts, gradients and transitions are all provided by CSS. The Project Viewer and Lightbox are written in vanilla JavaScript.

Responsive design is achieved using CSS media queries. Flexbox was used to change the layout order for small screen devices.