Cascading Media

Handcrafted Websites & Applications
Since 2008

Webfolio

A few samples from our web design portfolio.
Press any image to view in more detail.

Searchable Web-based Newsletter

Notes

Mobile First responsive design optimized for all major smart phones, tablet computers and modern desktop browsers. Implementation of full-text search and search by subject features. Built a custom content management system for site administrators.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • Web Fonts
  • SVG (Scalable Vector Graphics)
  • Ruby
  • Rails
  • PostgreSQL

Recording Studio

Notes

Responsive layout with full-width background images.

Technologies

  • HTML5
  • Sass (CSS3)
  • Web Fonts
  • High DPI (retina) background image
  • SVG (Scalable Vector Graphics)
  • Ruby

Health Insurance Brokerage

Design Notes

Responsive layout with resolution independent mountains and navigation buttons that expand and contract to full width of viewport.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • Web Fonts
  • SVG (Scalable Vector Graphics)
  • Ruby

Law Firm

Design Notes

Responsive layout with background image that creates a horizontal parallax effect when scaled. Subtle logo and button transparency add an organic feel to the digital composition.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • Web Fonts
  • High DPI (retina) background image
  • SVG (Scalable Vector Graphics)
  • Ruby
  • PostgreSQL

Product Page

Design Notes

Images floating to opposite sides of each section’s copy. Use of negative space and subtly contrasting background colors visually separate sections from one another.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • High DPI (retina) Images
  • SVG (Scalable Vector Graphics)
  • Ruby
  • PostgreSQL

Handcrafted Bits & Spurs

Design Notes

Fixed layout with elaborate styling and heavy use of background images create a highly custom design for Jayson’s highly custom products. This design was then integrated into a custom Drupal theme to provide content management capabilities.

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Online Store

Design Notes

The complex nature of this website’s product categories and pricing options are simplified by an advanced menu system optimized for smart phones, tablet computers and desktop browsers. An open, uncluttered layout invites visitors to browse the store’s virtual shelves.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • Web Fonts
  • High DPI (retina) Images
  • SVG (Scalable Vector Graphics)
  • Ruby
  • PostgreSQL

Electrical Contractor

Design Notes

Color palette based on the deep blue and chrome of D&J’s logo. Integrated video player with custom chrome styling. Rounded corners and depth created with background images as this site was built before such things were possible with CSS3. This design was then integrated into a custom Drupal theme to provide content management capabilities.

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Restoration and Construction Company

Design Notes

Smooth angles of the full width header and footer frame the content of each page. Navigation is connected to rotating images to the right, which reflect the subject of each page. This design was then integrated into a custom Drupal theme to provide content management capabilities.

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Wedding Website

Design Notes

Elegant simplicity created with the use of large images generously set apart by negative space and short segments of copy. Intense bursts of fuchsia pink accent important elements. Black image borders provide clean separation from the white background, while not drawing attention away from the image itself.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • High DPI (retina) Images
  • Ruby

Painting Contractor

Design Notes

Fully responsive layout with elaborate background images that adapt to the viewport’s width. Complete with integrated videos, photo galleries, content management and blogging capabilities. This design was then integrated into a custom Drupal theme.

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • PHP
  • Drupal
  • MySQL

Business Networking Group

Design Notes

Flat colored panels contrast with the raised primary content region. This design was then integrated into a custom Drupal theme to provide membership profiles and content management capabilities.

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Dog Wash and Grooming Salon

Technologies

  • HTML5
  • Sass (CSS3)
  • jQuery
  • PHP
  • Drupal
  • MySQL

Spa Dealer

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Specialized Accounting Group

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL

Photography Studio

Design Notes

Dark, minimalist approach focuses attention on the photographer’s work. Seen here is a three-dimensional carousel displaying featured photographs from each major category of work.

Technologies

  • XHTML
  • CSS 2.1
  • jQuery
  • PHP
  • Drupal
  • MySQL