solo development and design
When not working on her doctorate degree in comparative literature at the University of Toronto, Lara deBeyer teaches children and adults piano in her living room. She enlisted me to create a landing page for her just–launched business, Whole Note Music Studio. I prototyped the site in a couple days and we deployed it two weeks later.
Static HTML5 and CSS3 with respond.js for media-query browser support and Leaflet for an interactive OpenStreetMap.
Visit Whole Note Music Studio
Working with Lara’s suggestion of “something blue”, I designed a minimalist but visually engaging portfolio for Whole Note. The single–page site is fully responsive for a mobile–first browsing experience.
Subtle accents like bullet points made from eighth–notes and accidentals add playful but professional detail, as do typefaces Buena Park and Cronos Pro (both served via Adobe Typekit).
When I decided to start a music studio out of my home this summer and contacted Kyle about making a website, my ideas were unformed and, though hopeful, quite raw. I felt that I should have an online presence of some kind; Kyle quickly picked up the slack ends of my thoughts (I sent a knitting design as a colour template) and went to work.
The result was the best I could have hoped for.
He worked quickly and efficiently to create a distinct and interesting–looking website that both sets my business apart and appeals to my target demographic. He incorporated everything that I asked for, consulted with me frequently, and gave thoughtful feedback. He was also kind enough to make me some flyers based on the graphics on the website.
The comments I have received about this site have been overwhelmingly positive. Most of my business comes through the site, and my clients (students and students’ parents) find it visually appealing and easy to navigate.
solo development and design
Four years ago my sister Kailey left Canada to
Australia. I designed a blog for her to
keep in touch with her family back home and friends around
the world. She tagged each post with her current location and from
these an itinerary of her travels was plotted on a Google map.
Served by Django 1.0 via Python 2.5 and mod_wsgi on Apache 2. Browser support provided by Base2 (+DOM), Animator.js, and the Google Maps API.
Browse an archive of Peck & Find
P&F’s style was intended to be whimsical yet subtle so as not to distract from Kailey’s writing. The site’s high-contrast pink and brown wordmark and argyle textures were a lot of fun to play with, as was designing the four sliding navigation icons.
Each post ends with a rule composed from silhouettes of buildings Kailey had photographed the year previous while touring the United Kingdom and mainland Europe. See if you can spot the Roman Colosseum or le moulin rouge mal famé.
In place of Django’s user authentication system, OpenID was supported to encourage comments from LiveJournal and Blogger guests and to promote the consolidation of online identities.
Guest actions were audited by custom code which allowed almost every action to be undone rather than irreversibly committed. This design pattern streamlines the user interface by removing the need for scare screens.
A utility was also written to schedule queries made by Django’s ORM so as to execute them in order of their foreign key dependencies. The same data is requested as few times as possible while the relationships between model instances returned by those queries are kept intact. At best, the server is queried once for each (necessary) table in the database per HTTP request.
solo development and joint design
During her undergraduate career at UCSB and the University of Edinburgh, Holly Conrad wrote and illustrated a comic for the web and student newspapers at those universities. The Lil’Lucifer site was kept minimalist—viewers can rate comics but not comment on them—yet highly interactive.
Originally served by Django 0.96 via Python 2.5 and flup on lighttpd. Browser support provided by Dean Edward’s event functions (circa 2005) and an early version of Animator.js.
View an archive of Lil'Lucifer
Custom functionality included asynchronous requests for additional comic information in JSON format, and rating of comics using a hand-rolled XMLHttpRequest wrapper.
solo development and design
The Icon guild website was the first project I worked on that was actually used by other people—by 2007, over eight hundred guests were registered with the site. I quickly became embroiled in the intricacies of web development without being aware of the frameworks and tools that provide tested, best-practice solutions to banal problems (like how to separate user interface, logic, and data in a project).
Though my ignorance led me to reinvent many wheels, I gained an invaluable education designing and programming a user permissions system, blog, forum, and a couple custom applications from the ground up. I probably learned twice as much over again maintaining those components.
I was never able to “finish” Icon to my satisfaction, but it served as a vital laboratory in which to experiment with dynamic, database-driven web pages.
Deployed to a traditional LAMP stack using mod_rewrite for sane URIs. Browser support provided by Prototype 1.4 and moo.fx 1.2.3.
Check out an archive of Icon
At the time, I found the idea of serving XML and translating it to XSLT as a templating solution appealing for its potential Ajax efficiencies. Learning XSLT and XPath introduced me to the joys of functional programming—but in verbose XML.
Icon runs an approximation of the MVC pattern: data is retrieved and modified by hand-written SQL queries rather than via an intermediary ORM; application logic is separated from view routing and XML composition.
Markup generated in PHP is translated to XHTML 1.1 server-side or, if the user agent supports it, client-side.
A flexible user rights system was designed to allow restrictions on individual content items, like news posts, articles, and forum threads. Each item is tagged with a permission “hint” which, with content type and CRUD action, indicates how a guest may interact with it.
Guests, in turn, are assigned “groups” specifying the content types with which they are able to interact, with which permission hints, and in which ways. With a single hint per item but multiple groups per guest, Icon was able to administer a fine grain of access control through a simple interface.
The forums were the most active section of the site. To make them more visually interesting, posts by some guild members featured an avatar of their Warcraft character and a unique title describing their role in the guild.
Guests were also encouraged to distinguish their content by selecting an in-game icon. This double meaning of the guild name served as inspiration for the style of the site, intended to evoke Icon’s playful, often flippant, mood.
Over twenty-five hundred images from the game are indexed in the Icon Selector; they are loaded asynchronously on request.
Looking for the rundown?
I markup semantic hypertext, design stylesheets, and script behaviour client-side. On the server, I program PHP or Python. I have experience with a bunch of relational databases (MySQL, PostgreSQL, and Microsoft SQL Server), various server configurations, and have worked with Adobe Photoshop for about a decade.
Web work continues to intrigue me because I get to do many different things. There is no dichotomy between form and function here—the tools of the designer are those of the developer.
And there is so much to learn! I want to know more about typography, load balancing, and project management. I’m curious about NoSQL databases and event-driven servers like node.js. I’d love to share my web expertise and passion for Django with other creative types. Let's make the web easier to use and less disappointing, one site at a time.
Mail me, electronically.