Grayscale to Color

The inspiration for these two websites was the photos that are currently on our computer - my husband plays in a few bands and had taken photos of gigs as well as his studio and equipment.

This is my first design, the fully grayscale, based on his band speakerdust. I wanted the design to be image-rich yet simple. The branding is at the typical upper-left in a larger, bold, full black in a different typeface than the navigational type. When I look at this, my eye goes to one of two places first - either the logo in the corner, or the block of text in the center. I think the upper left corner, because it is a typical location for the website logo, is more of a psychological habit from using the internet. Visually, my eye was most attracted to the texturally- and tonally-different text in the center. I used a dark bar to bring the eye back toward the left, and the angle of the sound board in the photo leads back up to the logo, which then flows across to the right through the navigation, which rests above and below a horizontal rule.

This is my full-color design, based on the practice of bending circuitry of instruments and other electronics to achieve distorted and otherwise affected music. Off the theme of a circuit board, I used a black background color and bright neon and white for all type. With the darkness of the background, my eye first goes to the larger bright block of type making up the title of the web page, "Milwaukee" in bright green, and "Circuit-Bent Music" in bright blue. The navigational items are in gray, and on hover / select of the main navigational categories, the sub-navigation grows down from them; on hover a sub-navigational item will glow in a neon color rather than the default white. Because there is quite a bit of neon across the page, my eyes move next to the white article titles.

This is the result of taking all color out of the design. My eye still goes first to the title of the page, and next to the article titles. A bit more emphasis flows to the navigational elements which are considerably lighter toned than the background.

This is what the color site looks like to a blue-blind user. The neon text at the bottom of the page is minimized to the point that I would certainly need to increase the tonal contrast between that type and the black background. For instance, I could keep all text in very light / bright shades of yellow. Again, the navigational elements, due to their contrast with the background, are pulled forward.

This is how the design looks to a red-blind user. Hierarchically, the words "Circuit-Bent Music" are the first thing my eye moves to, and there is an apparent correlation between "Milwaukee" and the photos heading the articles below because of the overall yellowish cast.
After seeing how the web design would look to a variety of users, I can understand the value of designing with contrasting tones in mind. To bring the eye in a logical order across the page, the best strategy might be to design with elements that stand out against the background regardless of a user's color vision abilities - in other words, placing those elements against a background that is either considerably darker or lighter than the element. Also, if all elements were of only two tones - light or dark, the effect would be minimized because blocks of overall tone would get lost alongside one another. So the less-important information should be kept within the middle-tonal range.