Color and design for mobile devices

For the SVG Open 2007 conference

Jerrold Maddox
Professor of Art
The Pennsylvania State University
School of Visual Arts, 210 Patterson
University Park
PA 16802
United States
jxm22@psu.edu


Abstract


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. The possibilities are many, exciting, easy to do, scalable and light weight. For my presentation I will demonstrate some of these possibilities through five designs, each showing ways to explore color and shape on a small scale.


Table of Contents


1. Introduction
2. Some color variables
3. Third sample design
4. Fourth sample design
5. Fifth sample design
6. Sixth sample design

1. Introduction

Introductory images

First 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 final 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.

2. Some color variables

Color examples

Here are simple presentations of some of the ways color can be varied for those who have not been exposed to these ideas before. There are examples of value(light and dark) - #1 - hue(colors) - #2 - intensity(brigntness and dullness) - #3 - closely related colors(next to each other on the color wheel) - #4 - split compliment(across the color wheel, but not directly) - #5 - and simultaneous contrast (a neutral taking on a complimentary color cast) - #6.

3. Third sample design

Design examples

This example is a grid of lines with a rectangular overlay - the variations are in color, value and intensity.

4. Fourth sample design

Design examples

This example uses sixteen lines of different weights varied with color and value and, in one case, #5, in color and length of line, as a break and accent. Each is against a differently colored background.

5. Fifth sample design

Design examples

A square is rotated twenty times to create a circle with a border with the color and value varied and in the sixth example, the weight of the line varied.

6. Sixth sample design

Design examples

Six circular motifs, four using colors near each other on the color wheel with variations in lightness and darkness - notice that the second (orange) and the forth(blue) optically blend in the transitions. The fith uses a split pair of complimentary colors and the sixth uses compliments with variations created by accents.

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.