Web and Application Technology

WEB and APPLICATION TECHNOLOGY

Technology helps define what’s possible in the digital world; a rich set of tools is at our disposal when it comes to designing and building sites, products and applications. Unfortunately, these tools comes with constraints; we need to consider how and where they can be used, how well they perform, how they can interoperate, and how they fail. Good digital strategies respect these realities.

Digital designs live and die by technology; it’s incumbent on designers to make informed decisions and to communicate effectively with UI developers and engineers about feasibility and level of effort.

Technology has been integral to all of my work, first as a research scientist, then as a Web developer and interaction designer. In a nutshell:

  • 12 years of experience programming in a variety of languages (e.g., FORTRAN 77, tcl/tk, Java) in UNIX development environments
  • 15 years spent building Web sites, including applications based on core Web technologies and the LAMP stack
  • Four years working with a variety of modern Web technologies (frameworks, components, workflow tools, version control), which included prototype development and mentoring other designers

Education for Non-Technologists

If designers want to be at the top of their game, they need to understand UI technology. Very few designers, in my experience, have technical backgrounds, and most have very little interest in technology. This lack of knowledge and interest is myopic for a digital designer: if what you design can’t be built, it’s irrelevant. Designers often wonder why developers don’t build what they designed, to pixel perfection, but the answer is clear: you didn’t understand the technology envelope within which you had to design. As technologies have evolved, things have mostly gotten better for designers: what you design can, in many cases, be built (given adequate time and resources). But it’s very rare that you won’t run into challenges, even with highly skilled teams.

Here are a few examples of the work I’ve done trying to arm designers (and other team members) for the real world, where things need to get built.

Web Components
Large-scale design systems almost always combine the design patterns within the system with a reference implementation. Web components are a great way to build re-usable design elements, but they come with a price. In this presentation, I walk through the basics of Web components and Polymer, and discuss some of the challenges GE faced in using this approach. Design Systems for the Real World contains a more in-depth look at this interesting problem.
AJAX
A long time ago, in a galaxy far, far away, it used to take Web pages a long time to load. If there were lots of images or other content, a REALLY long time. In an effort to overcome these challenges, a constellation of technologies and techniques dubbed AJAX coalesced in the early 2000s, then exploded into prominence with the arrival of Google Maps in 2004. AJAX changed everything and had a huge impact on designers, so it was important to understand the potential and constraints of this technology.
Object-oriented Programming
Every programmer has to learn object-oriented programming. It helps to understand the basics, since the concepts and techniques show up repeatedly in the world of Web application design.
ActionScript
It’s a technology the will make its way into history, known as the scripting language engine that was used to drive Adobe (then Macromedia) Flash animations. Even though it’s been replaced with other technologies, at the time (~2008) it was a crucial technology for anyone producing sophisticated Flash content (which designers were being asked to do more often). I created this presentation in an attempt to de-mystify ActionScript and provide designers with some fundamentals if they wanted to learn more.

Samples of Web Application Development

OPS: A design agency operations tool
Time is money in the consulting business, and it’s critical to be able to track hours across a series of clients and projects. OPS was designed and built to meet this need, with a flexible, object-oriented infrastructure, tiered permissions, reporting and more.
Votesters
The 2004 election was a close race, with voters in swing states playing a crucial role. A small group of concerned citizens and I designed and built this social networking site aimed at getting out the vote.
Presentation Extranet
Another critical element of the design consulting business is presentation of work in progress, and handoff of final assets. I designed and built a flexible, project-based system designed to support design presentations to diverse clients, across multiple projects.

Samples of UNIX Application Development

Wulffman
An interactive 3-D visualization environment that can be used to build complex, low-energy crystal shapes of any specified symmetry. Prior to this tool’s creation, there was no simple, visual interface that allowed people to perform these types of calculations.
packLet
A simple tool that helps Tcl/Tk application developers to visualize the way containment-based "geometry management" works in the Tk programming language. tkPack was not only a tutorial device, but was highly useful as a first step in Tcl/Tk application development.
pstool
A graphical tool that allowed users to visualize and control processes running on their UNIX machine (similar to Activity Monitor on Mac OS).