Color and design for mobile devices – Update

Jerrold Maddox
Penn State University
Play (22min) Download: MP4 | MP3

One of the most exciting opportunities to explore, to me at least, is the interaction of color using SVG on the small screens of mobile devices. By that I mean exploring the ways color can be varied through hue, value and intensity and the interactions between them to make images which are interesting, surprising and satisfying to look at.

As an example, here is an image which works with reds and blacks in a stack of rectangles scaled at 350px and 125px:

Both the reds and blacks (most really dark reds from hex #900 to #100) become progressively darker and create a deepening color space. The reds (#f00 to #700) in this image are the same reds in the three variations on the design. The apparent changes in them is due to the altered context around them.

The first variation is the same design with instead of the deep reds for the dark, there are greens (the complimentary color of the red – hex from #0a0 to #010).

In it the contrast of the colors across the color wheel make a livelier image and because, scaled to this size—225px x 225px—the lines are narrow enough for the optical mixture of the colors to be evident.

The first of the next two examples above uses colors that take a step away from the red—to either side, a red-violet, #e09 to #601, and an yellow-orange, #f90 to #710, and the last variation is a split compliment—#09f – #02a and #089 – #031—from the opposite side of the color wheel

The possibilities, I hope these few examples make clear, are many, exciting, easy to do, scalable and light weight. For my presentation I would extend these through at least four addition designs showing other ways to explore color and shape on a small scale.

Links: