Software Development
Design & Conceptual Art
Recently, I became interested the techniques used by designers of iPhone and iPad apps to draw custom interface controls in a resolution-independent way. Oddly, these techniques aren't widely discussed.
A few tips for others seeking this kind of information:
From what I can determine, most of the resolution-independent designs posted to sites like Dribbble are composed of shape layers ( produced using the vector drawing tools in Photoshop ) to which layer effects are then applied to provide texture or special lighting.
As a test, I attempted to recreate a real-world control interface in a resolution-independent manner. I chose the alert status panel of a Nike Missile battery for this purpose. The image posted below is the result of this effort. Provided the typefaces used in the image are installed, this image may be scaled to any size.
According to MMS Subcourse No. 151, the alert status of a Nike-Hercules missile battery varied between three states: White (equipment testing status), Blue (battery prepared for action), and Red (battery engaged with enemy). Yellow status was no longer used by the time Nike-Hercules and Improved Nike Hercules missile batteries were deployed (~1954).
The typeface employed on the Nike Hercules launch set controls and indicators is similar to MS-33558 — a military standard for numeral and letter markings on aircraft instruments. MS-33558 asserts the use of uppercase Gothic text for marking instruments. Unfortunately, it was established on January 26, 1968 and therefore post-dates the typeface used on a Nike launch set.
Interestingly, a 1992 report produced by NASA titled "On the Typography of Flight-deck Documentation" indicates lowercase text is easier to comprehend than uppercase text in most situations due to pattern recognition of word shape.
Update 2012-07-25: Added notes regarding the launch set alert status.
Update 2012-07-24: Retina-fied the images served in this article with the addition of Troy Mcilvena's jQuery-Retina-Display-Plugin and the extension of a regular expression in the Stacey CMS create_asset_collection method.
Update 2012-07-23: Updated example Photoshop archive to include lighted representations of the alert status indicators.
The example Photoshop file is offered royalty-free for personal and commercial use without attribution under the terms of the Creative Commons Attribution 3.0 Unported License.
Proficient software architect and designer of web applications and web service APIs. I research and analyze user problems, develop comprehensive solutions, and communicate those solutions through written documentation, workflow diagrams, user interface mockups, technical presentations and functional prototypes.
My technical strengths are Ruby, Perl, Javascript, Ruby on Rails, HTML, and CSS. I use these technologies in day-to-day work and in the prototyping of new concepts. Visual design is a core skill. I capably draw, illustrate, and design production artwork. In web application development, I concern myself with designing user interfaces which expose the power of an application without confounding the people who will use it.
I love to build software which is respectful of people, thoughtfully designed, and simple to maintain.
Architect and lead developer of large-scale network inventory management application designed to improve customer experience, create opportunities for new products, and reduce the workload of network engineers. The application was oriented around parallelized, asynchronous web service requests and developed using Ruby on Rails, the Typhoeus gem, jQuery, Perl, and MySQL.
I was responsible for prototyping and advancing the deep client and web service application infrastructure, as well as designing many of the core application workflows, user interfaces, and web service APIs. I guided the efforts of in-house and off-shore contract development teams throughout the course of the project, wrote thorough implementation guides, and validated development and design work.
Wrote automated integration test suite using the RSpec test framework,Capybara, and Selenium. This test suite was used to validate web service calls, setup and teardown dependencies, and repeatably drive a browser through internal web application workflows.
Implemented a single-page application in HTML, CSS, Javascript, jQuery, Backbonejs, and CoffeeScript for generating and persisting JSON web service requests. This project was ultimately bundled with the internal development stack and widely used to quickly assess service responses and performance.
Co-developed Ruby EventMachine-based web service mocking framework. This was used in the early stages of large project development as a kind of sandbox for client application developers and exposed a simple Ruby DSL for specifying requests and responses.
Developed Javascript and jQuery-based framework which supported rapid development and deployment of modular applications based on web services. This project exposed me to the development of highly-scalable asynchronous web service request libraries and test-driven development of Javascript, jQuery, and jQuery plugins using the QUnit and Jasmine test frameworks.
Mentored in-house developers in various programming and design practices. I instructed colleagues in test-driven development practices using Ruby, Perl, and Javascript with RSpec, Test::Unit, and QUnit, respectively. I also trained colleagues in user interface design fundamentals, including the generation of interface mockups in Visio, Keynote, and Photoshop and the implementation of those mockups in HTML and CSS.
Developed, maintained, extended numerous critical reporting applications using a combination of technologies such as Ruby on Rails, MySQL, Apache, automated Perl and Ruby scripts, and various Javascript frameworks.
Designed, developed, deployed high-profile internal reporting application for monitoring and trending technical performance across the company.
Co-developed high-performance, fully automated regional network outage reporting application which rapidly localized network outages, reduced customer response times and capital expenses.
Integrated MapServer / GeoIP lookup services within outage reporting application to provide visual representation of outage areas and assist in locating points of failure.
Developed extendable Ruby library to interface with Cisco, Arris, Motorola Cable Modem Termination System (CMTS) devices. The library enabled persistence, replay, and export of telnet interactions for training and troubleshooting purposes.
Developed numerous small websites and moderately complex ASP, ASP.Net, C#-based web applications for a diverse range of clients: bicycle shops, auctioneers, real-estate and construction firms, non-profits, etc.
Designed and implemented extendable content management system with advanced features (CSV data export, publish / rollback, Javascript / MD5-based cross-browser security).
A curated collection of photographic work produced in 2009 and 2010.
"The House of Flowers" consists primarily of high-definition (1080p) recordings of a fireworks display.
Perception of the particle dynamics inherent in such displays is heightened by simultaneously rolling back and slowing the recording.
The movie was shot in high-definition (1080p) on a Canon 5D Mark II using an 85mm Rokinon f1.4 lens.
The movie soundtrack is the song "I'm 9 Today" by Múm.
This visualization attempts to programmatically generate randomized constellation diagrams with interesting visual dynamics.
The visualization begins by painting the canvas with randomized points. These points are stored in a two-dimensional array for reference. An image detection algorithm is then run against a random source image of a known object -- or symbol -- to seed a two-dimensional array of reference points. This array serves to constrain the target points between which constellation lines are drawn.
To add further visual interest -- and complete the effect -- a varying number of points on the canvas will be labeled with randomized names.
This visualization is not interactive.
Each constellation will be displayed for a few seconds before the process repeats with a new set of random points.
If your browser supports Java plugins, try the visualization now.
This concept art tracks a fictional city through five ages -- iron, antediluvian, diluvian, altodiluvian, and cryptic -- and speculates on how the citizens would react to macroscopic environmental changes such as floods, extensive heat waves, complete regional resource depletion, etc.
I developed a ruby library to generate hexagrams using the yarrow-stalk algorithm outlined in the appendix of Richard Wilhem's translation of the Chinese I-Ching ("Book of Changes").
The library supports the following features:
The ruby I-Ching Casting library is available for download from my Github account.
The code is offered under the MIT license.
Unsatisfied with the ASCII representation of hexagrams, I developed a visualization of the hexagrams using JRuby Processing. This visualization may be run within a web browser or as a stand-alone application.
If your browser supports Java plugins, try the visualization now.
Networked devices typically have three possible states: online, failover (impaired, but operational), and offline.
I designed a set of three icons to quickly convey these states to users monitoring such devices.
The offline icon intentionally differs from the other icons in both color and shape. The human ocular cortex is designed to prioritize resources for tracking sharply angled, brightly colored objects in the visual field.
These icons are available as high-resolution TIF files through the archive link below. These icons are offered royalty-free for personal and commercial use without attribution under the terms of the Creative Commons Attribution 3.0 Unported License.
Two different approaches to javascript-based map browsing and manipulation are presented below.
The first prototype implements a simple mapping solution using a pre-rendered map projection and custom javascript. This prototype supports the creation of new points and the import and export of points added to the map in a custom microformat.
The second prototype implements a tile-based mapping solution. This is the approach taken by most high-traffic mapping websites today and could be utilized in conjunction with a Map Server instance. The prototype allows changes in tile size and the view of debugging information.