May 2008 Posts

May 2008 Posts

3 UI Design Books for Your College Class

My friend Jake called me a few days ago to tell me he will be teaching a User Interface Design class at Ferris State University in Grand Rapids, MI next Fall. After my congratulations, he asked me to help him pick out a textbook for his students. Here were my suggestions:

Universal Principles of Design - William Lidwell, Kritina Holden, Jill Butler

I loved this book from the moment I picked it up and learned why the iPod makes us happy - it's the Golden Proportion, or the Golden Rectangle, as some might say. Then, at the bottom of that page, you get "links" to some other design topics you may find helpful when discussing the Golden Proportion, like The Rule of Thirds. Anyone who designs anything, from software to hardware and anything between, needs a copy of this book.

I told Jake to have a copy of this book around for the class to reference, but I wasn't sure if they all needed one.

Beautiful Evidence - Edward R. Tufte

This is the one book out of these three that I don't own... yet. I saw this in the book store while searching for a book about Processing, so you can also find it near the graphics books. Information Design is the name of the game, and Mr. Tufte has some of the most beautiful and useful designs you will ever see. He even goes in to how they displayed and photographed some of his sculpture outdoors. Absolutely breathtaking.

This book would be a great resource for a Level II UI Design class, but I think it is perhaps too detailed for beginners.

Design Whys: Designing Web Site Interface Elements - Eric Eaton

I've heard a lot of folks tout Don't Make Me Think as the bible to user-interface design for the web. Honestly, the title and presentation of this book drew me in a little deeper when I was buying it a few years ago.

Since my friend was looking for a book about UI Design, I found this on my shelf and made my final recommendation to use Eric Eaton's book for his class.

Design Whys starts out by telling you what this Interface Design stuff is all about, and walks you through specifying and planning a project. Then you get an introduction to the common UI elements: links, buttons, form elements; what makes a link clickable, colors, designing for different browsers and devices, why use a link vs. a button, basic typography. The section on Advanced Interface Elements breaks us out of what's normally possible on the web to cover things that would now be considered AJAX-y forms, applications, metaphorical interfaces, and custom or experimental UI elements, like those created with DHTML, Flash or 3D.

After the first 200 pages of the book, he launches us into a case study of some useful websites (at least as they were in 2003). The sites in the book are no less useful, beautiful, or innaovative than they were 5 years ago, though. It's interesting to take a look at what folks were doing back then that the world still hasn't caught up with. We seem to be constantly wanting to homogenize the experience (maybe I'm guilty of that as well). There's room to be daring on the web, and I don't mean large fonts, pastels, and rounded corners.

I hope Jake takes my suggestions to heart and picks the best candidate. If you have a UI design book you swear by, or you have a comment or question about one of these books, I'd love to hear it.

Categories:

Tags:

Commenting on this Blog post is closed.

Weekend Projects - Lightweight Photo Service

This is a project I've been thinking about for a while, and I'd love to do a hack weekend to get this working sometime.

One thing that's been a problem with us at Petentials (and many other sites running Drupal) is Photo uploading, sharing, embedding, etc. Aaron Winborn created a great tool called Embedded Media Field that abstracts the hosting of photos, videos and audio files for a Drupal installation - what I'm thinking of doing is writing a custom interface for that module that allows a user to upload the files without leaving the page, and then talks to Drupal to tell it to make a new node for the photo, add it to a gallery, or the same for a batch of images - Aaron's module does quite a bit of this already.

I was wondering if Menalto Gallery (G2) could help us out here, but that's really meant to be used as its own system - I really just want to create a REST/CRUD interface we can throw on a subdomain to serve up images and thumbnails, while also generating new thumbnails as needed. G2 has lots of these features, but then we'd have to keep the user tables in synch and I'm not sure we need everything they have to offer.

This is not meant to be a flickr or a photobucket, but the replacement for hosting images in-house. It should be insanely transparent to the users - they should not need to register, have any plugins or enter any extra screens.

My thoughts are the following:

Use lighttpd or a stripped-down version of Apache with PHP. No database (unless to store API keys and permissions for when you want to update/delete a file).
All files get served statically - if we hit a 404, redirect to a PHP script which generates the image. Then all future requests are static.
Once the image is generated, we could host it on S3, Akamai or another CDN? I remember seeing something like this with Gigavox's podcast hosting solution - I'm going to go check out their screencasts/documentation again to see if they explain it or I can figure it out.
Make it open source and let other folks use it and hack on it.
Ability to link to images over the web, or upload .zip .gz files via FTP, or email in images, eventually allow for mobile uploads, etc.
We'd also want to have support for checking referrers so we can deny certain folks and perhaps serve watermarked images to non-approved sites? I think some of this can be done at the Apache/lighttpd level, and I'd prefer configuration over code in as many places as possible.

The application by itself won't do anything - you'd need a CMS to integrate it with. My choice is Drupal, of course.

Certainly on the wish list for embedded media field is the ability to integrate this content transparently in the background (see Vox's media features). Using something like PingVision's Drupal Markup Engine and a WYSIWIG editor might get us most of the way there. It's an API that lets you specify custom tags - mostly these can be used to add images, video or blocks inside a node, but there are dozens of uses that have not been invented yet, I'm sure. If the editor can have plugins written (Kupu is the editor of choice for Acquia's Carbon). I don't think it should insert raw HTML, but a custom tag so we can abstract the method of storage - just something like [image:13456] or [video:13456] or [audio:13456] or [gallery:13456] at least until HTML5 gives us a standard for implementing this.

One reason why the Embedded Media Field is so great is because if YouTube changes the player, or if they introduce the option to turn off the related videos at the end, or even if you come up with your own .FLV wrapper, like a deep-tagging service, all your calls to videos are made through this tag - it's an API for HTML code.

If we get an editor that supports this sort of stuff and a module/plugin for major CMSes and platforms, those can all live in one place. Wordpress has support for TinyMCE or the plain-text editor, but it must support others, yes? Another editor that would be high on my list is the YUI Rich Text Editor.

I could probably go on all day, but I think I've gotten a decent explanation for this cluster of projects out there.

Categories:

Tags:

Commenting on this Blog post is closed.