design

Users Are Stupid - a Guiding UX Principle

About a week ago, a road near my condo was closed off due to construction. Prominent signs were placed at three separate junctions warning drivers to take a detour. Judging by these signs, a rational individual would get the hint and turn right, avoiding any unnecessary danger to his life or his vehicle.

Unfortunately, users (and drivers) are NOT rational when it comes to most decisions. They have a goal, and they'll do whatever they think is best to achieve that goal, whether or not it's allowed, legal, and/or rational.

Case in point: I sat outside and watched car after car go completely around not one, but three glaringly obvious barriers to avoid a two minute detour.

Here's the first warning, at the first intersection:

Road Sign #1: Road Closed
Pretty obvious, eh? Would you drive around this sign?

And, after that gauntlet (5 different signs saying "DON'T DO THIS!"), here's the second warning:

Using Google's New Font Library for Headings...

Today Google announced they'd help advance web typography by hosting open-sourced fonts on their CDN, and by giving the code to easily embed fonts on websites on a new website, the Google Font Directory.

It was amazingly simple: just copy the <link> code and paste it in your template's header, then set any element on your page to use the Google-provided font(s). I started using OFL Sorts Mill Goudy TT, and I like the look (except for the lower-case y, which seems to be cut off).

(The code simply adds an @font-face declaration via a Google-hosted CSS file... I wonder if it's legit to self-host the CSS and font file; I haven't read through the terms and conditions yet).

I'm thinking of using this library for a few other projects on which I'm working. Much easier than Typekit, and it doesn't require any javascript or flash overhead, like alternatives such as Cufon and sIFR do.

Dancing Baby (Illustration)

NFP Dancing Baby

Creighton model NFP students will recognize the dancing baby above. I am starting work on a project related to NFP, and I was in need of the image. So, being handy in Illustrator, I snapped a shot of my fiancée's chart, zoomed in on one of the dancing baby stickers, and hand-traced the lines in Illustrator.

I might clean it up a little more sometime, but for now, this will do. After a second glance, it almost looks like a cage-fighting baby. Hmm...

Monopoly Game Board Design (Illustrator/Vector Artwork)

While I was attending Kenrick-Glennon Seminary, a few brother seminarians and I had a long run of Monopoly tournaments, and we became quite adept at the game. Of course, my winning strategy was to always give up any and all properties to get Boardwalk and Park Place, buy a hotel, and hope someone hit the hotel before I went bankrupt...

I created this vector file (below) in Illustrator after many hours of path-tracing original Monopoly board art, my own hand-drawn designs, and some clipart. I was intending to print it on some cardstock and mold some actual pieces (like a biretta, a Liturgy of the Hours book, a pipe organ, etc.) to play the game, but never got around to that part before leaving.

(Click image to view larger).
Seminopoly

Decline in Church Architecture and Art

These images speak for themselves, but I will offer a few asides to help explain why I was saddened after visiting the Holy Name Cathedral in Chicago a few months ago.

Tabernacle - Holy Name Cathedral, Chicago
What... the... I think they might reserve the Body of Christ somewhere in that mess.

Rose Window - Holy Name Cathedral, Chicago
To think that, before the fire, there was probably very beautiful, meaningful and symbolic imagery in that stained glass. Now it's an abstract, and dare I say, boring sight. My eyes grew tired trying to see what was up there.

Archdiocese of Saint Louis Redesigns Website

Archdiocese of Saint Louis' Upgraded Website

The Archdiocese of Saint Louis today upgraded its entire website to a new design and a new platform, allowing offices and agencies to more quickly and more easily communicate with the faithful in the Archdiocese (and around the world!).

I've been working on this project (with a lot of help from Palantir, a web development company in Chicago) and some local developers for the past year, and I am pleased with the result (I hope you are, too!). I've written up more information about the technical aspects of the site on Open Source Catholic (read more about the Archdiocese of Saint Louis' Upgraded Website), and I will continue writing some posts about specific details on the Open Source Catholic website.

Some of the highlights of the redesign:

Building a Theme for Drupal 7

After having built out many themes for Drupal 6 (and a couple for Drupal 5), I'm going to start from scratch on a couple designs and build a theme in Drupal 7, which will be released sometime in 2010. I'll take you along my journey in this article.

Please note, this article is a work in progress, and I'll be updating it as I go. Hopefully, within a couple weeks, I'll have the article complete, and a nice new theme to release on Drupal.org (maybe), only for Drupal 7.

To get things kicked off, here are a few articles that have good background information on Drupal 7 theming:

Designing a Good Website

This article will help you to learn some fundamental principles in web design and to design your own nice-looking, functional website

Over the past eight years (ever since I've owned a Macintosh), I've designed many different websites. I've dabbled in different web programming languages and done many, many technical tasks (some of which I don't remember how to do). But does this make me a good web designer? Not necessarily. I've learned through experience and research only so much about web design. It's more of an art than a science really; but it takes a lot more than an artist's mind to design a functional and eye-catching website.

Adding Module Stylesheets using drupal_add_css()

A couple days ago, when building a quick site with limited functionality (basically a pretty front end to a database website), I ran into a hiccup with my custom module/theme for the site, which caused me to scratch my head for a few minutes.

In my custom module (called 'idcards'), I added a stylesheet for a couple forms on the site using the drupal_add_css() function:

/**
 * Implementation of drupal_add_css()
 */
drupal_add_css(drupal_get_path('module', 'idcards') .'/idcards.css');

Later on in the development, I added a custom theme (based off a Zen subtheme I use for many smaller sites), and in that custom theme's .info file, I added a stylesheet named idcards.css.

When I cleared all the caches, I noticed the custom form styling (added by the module's idcards.css file) was missing, and on further investigation, I found that the module's idcards.css file was not being added to the pages!

Full Site Buildout: Part 2 - Theme Development

Part 2 of a series: Building out a full Drupal site in a weekend.

Well, one plane flight down, and a conference to go, I have the main structure of the theme set up (locally; haven't pushed it out to opensourcecatholic.com yet). I decided to go with Zen 2.x's -dev releases, for the simple fact that it's new and the way the Zen project is moving. There are a few rough areas in the documentation, mostly in the 'Readme' file for installing a subtheme, but I got through everything okay.

This theme, I hope, will make its way onto the fine Drupal.org theme repository; getting a CVS account, I'm sure, will be fun ;-)