Work

Web, Print, and Mobile Goodies

ProcessCards Website

  • ClientSelf
  • DateJanuary 2012
  • RoleDesigner & Developer

Overview

To accompany my ProcessCards, I thought it would be fitting to create a responsive microsite. The challenge would be to create a semantic, responsive, and future-proof website that would entice users to find out more about ProcessCards.

Layout

With a fluid responsive layout, and breakpoints set at 768px, and 340px, this website was designed to perfectly fit desktop, tablet, and smartphone screens. The 1140 grid system was utilized for its simplicity, and ease of use.

Markup and Technology

To create a site that was future proof and design-agnostic, I turned to CSS media queries and HTML5 markup. To ensure a design that was also backwards compatible with non-HTML5 browsers, I made use of the HTML5 shiv script. jQuery was used for basic form validation, and transparency/fade-in effects. The backend of this site is powered by PHP, ,mySQL and WordPress.

Visual Design & Aesthetics

Myriad Pro-family typefaces were used throughout this website for headings. Arial was used for body text and lower-level headings. The primary color palette consists of black, white, shades of grey, and blue. Imagery of popular mobile devices incorporating the cards were used to reinforce the concept of responsive design.

ProcessCards Website
ProcessCards Website