design

recent posts related to design

How to design products you’ll love (inspired by Jonathan Ive)

Introduction: Recently I was talking with some people recently about “design”, and as an effort to show how the design process works, I used the process of designing a coffee mug as a way of explaining the process. This article walks you through this process, though the actual designs are up to you.

How to redesign the Twitter user interface (UI)

Twitter UI redesign: After using Twitter for the last several months, it seems like their user interface is out of sync with how I want to use their data. As I was waiting for dinner to cook last night I spent a few minutes thinking about the Twitter user interface (UI) and how I might redesign it. Here are my thoughts.

The current Twitter web interface

The things the Twitter web interface does well currently are:

Yoda on Luke’s back (cartoonized with Gimp)

This is a cartoonize’d version of Yoda on Luke Skywalker’s back during Luke’s initial training in the swamp. To create it, I found the original movie image with a Google search, opened the image in Gimp, then worked back and forth with a “Cartoonized” plugin effect, the Beautify options, and the Artistic/Oilify effect. I can do a lot better than this, but for the purposes of this example, I created this cartoon image in less than five minutes. Given more time, I would clean up Yoda quite a bit before using the Cartoonize effect.

I’ve used Gimp to create almost 2,000 images that I use with the Mac screensaver “rotate images” feature, and this is the latest addition.

(Click the image to see the full-size, 1200x600 pixel image.)

Zen Foundation business card

While I’m writing about art in business marketing materials, this was my attempt at designing a business card for my Zen Foundation business (charity). This design doesn’t blow me away either, but I enjoyed drawing the image and struggling with the fonts and alignment.

FWIW, I sketched this image during the same vacation in Seward where I sketched my Valley Programming logo. I’m not sure why exactly, but on that trip I “got drunk on art,” then thought I was a great artist and started sketching things.

CSS even/odd row selectors (zebra striping)

As a quick CSS note, if you want to achieve a “zebra striping” style with even and odd CSS row selectors, CSS styles like this will get the job done:

.path-frontpage .content-inner-right .content-type-Text:nth-child(even) {
    /* yellow */
    background-color: #fdfdf6;
}

.path-frontpage .content-inner-right .content-type-Text:nth-child(odd) {
    /* blue */
    background-color: #f3fbff;
}

I use that CSS for the front page of this website, but if you want a simpler example, here you go: