User Interface

I have made several responsive and mobile-friendly websites. A responsive website will look good on any device. Resize Ankiewicz.com or Monsters.net in your browser, or visit them on your phone and tablet. 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

    Ankiewicz.com
    Ankiewicz.com 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.

    Monsters.net
    Monsters.net features a gaggle of cute animations and Youtube videos. It uses CSS, Sass, WordPress, and Bootstrap.

  • 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.

  • AJAX and JSON

    AJAX 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.

  • 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.

    Accordion
    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.