User Interface

My user interface experience includes e-commerce, jQuery, JavaScript, Bootstrap, HTML5, CSS3, WordPress, and PHP. I have worked with JSON feeds and AJAX to develop interactive charts and graphs such as those listed here.
  • Responsive Design

    I have made several responsive and mobile-friendly websites. A responsive website will look good on any device. Resize the sites below in your browser, or visit them on your phone and tablet. features gradients, transitions, mixins, and other advanced features of Sass and CSS. I use Respond.js for backwards mobile compatibility, and Bootstrap for a responsive grid system. Home page features parallax scrolling. features a gaggle of cute animations and Youtube videos. It uses CSS, Sass, WordPress, and Bootstrap.

  • AJAX and JSON

    Random language generator
    This example shows how JSON data can be passed to a PHP page and returned again using a jQuery AJAX call without requiring full page reload. It shows some random sentences created using JSON libraries.

    jQuery AJAX
    This example shows how JSON data can be passed to a PHP page and returned again using a jQuery AJAX call without requiring full page reload. It shows an input form.

    Google Maps
    Google's map API allows zooming, coordinates, tooltips, and other features.

  • HTML5 and canvas

    Cute monster maker
    This is a demonstration of HTML5/canvas in which users can create new characters in an HTML5 animation dynamically. Written in JavaScript, HTML5 and CSS.

    EaselJS Demo
    EaselJS is a JavaScript library for working with the HTML5/canvas element. This demo illustrates change in velocity, speed, scale, opacity, and x/y coordinates on each animation.

  • JavaScript InfoVis Toolkit

    The JavaScript InfoVis Toolkit provides tools for creating interactive data visualizations. JIT uses JavaScript and the HTML5 canvas element to produce highly interactive graphs and charts.

  • Highcharts.js charts and graphs

    Highcharts.js is a library with a wide range of elegant charting and graphing features.

  • jQuery

    Isotope sorting and filtering example #1 | example #2
    Isotope allows for sorting, filtering, masonry layouts, and more.

    This example shows a custom collapsible panel built in jQuery and CSS.

    jQuery UI
    This demonstration shows how a grid can be edited on the fly using a modal popup.

    jQuery Mobile
    jQuery Mobile makes for fast and easy touch interaction. View this demonstration on a phone or tablet to see touch capability.

  • Menus

    Pure CSS dropdown menu
    This is a demo of a menu using only CSS selectors in order to create a horizontal drop-down menu four levels deep. It can go deeper; I recommend three levels for best user experience.

    jQuery dropdown menu
    This is a demo of a horizontal drop-down menu off a logo.

  • Balsamiq

    Rapid prototypes

    This is an example of mockup created in Balsamiq. Balsamiq is a rapid prototyping tool that allows user experience designers to communicate ideas fast without getting lost in the details.