News for hackers. Stuff that matters.
Re:Design Without Color First by crazygringo on Tuesday February 12, 2019 @03:36PM (#19147246)
Sorry but I completely disagree.

This makes as much sense as designing without different font sizes, designing without borders, or designing without rounded corners so everything is rectangular.

Visual design has a vocabulary where everything can be a useful tool for differentiation, but which requires a visual balance between too much uniformity and too much variety.

Arbitrarily removing color as a tool and treating it as an "extra" to be added back in later makes as much sense as writing a program that organizes code and variables into separate files instead of separate classes, and then adds back classes later.

Certainly, sites should still be completely usable by the colorblind, but color is in no way an "extra". It is functional, and treating it merely as ornament instead will lead to a more limited, more likely worse design -- the same as if you limited yourself to a single font size and were unable to draw extra attention to headings over body text, for instance.

And if you want to focus solely on layout? That's what wireframing is for, and you ignore everything else, not just color.

Re:Design Without Color First by jacobolus on Tuesday February 12, 2019 @05:30PM (#19148324)
Removing color is not arbitrary. It is based on the physical features of human color vision.

The human eye has three types (“L”, “M”, “S”) of cone cell light detectors, but the raw data from these detectors never makes it to the visual cortex of the brain. The first level of processing inside the eye combines these into an L + M lightness signal and two color difference signals (L – M and L + M – S), which are then further combined into higher-level spatial patterns, etc.

Lightness contrast is most of how the visual system distinguishes motion, shapes, textures, and fine details.

Two bordering shapes without lightness contrast get visually smeared together, text without lightness contrast is illegible, design elements without lightness contrast are largely indistinguishable, etc., even if the colors are otherwise strongly contrasting.

* * *

> makes as much sense as designing without different font sizes, designing without borders, or designing without rounded corners so everything is rectangular

Designing with rectangles only as a first step to iterate quickly seems like a reasonable idea. Your other two suggestions are not analogous.

A better comparison might be getting the melody of a song right before figuring out the lyrics.

Re:Design Without Color First by crazygringo on Tuesday February 12, 2019 @07:07PM (#19149040)
A grayscale design with a light gray button somewhere among other light gray buttons has zero emphasis whatsoever.

A grayscale design with a highly-saturated orange button that is technically the same lightness as the other light gray buttons will stand out immensely and the eye will be immediately drawn to it.

Likewise, a light orange button against a dark blue contrast creates a far stronger separation than a light gray button against a dark gray background, even though the "lightnesses" are still the same.

So I really don't understand how you're trying to argue that color doesn't matter.

Re:Design Without Color First by jacobolus on Tuesday February 12, 2019 @09:36PM (#19149861)
Nobody says color doesn’t matter, or that final designs should not use color.

If your intense orange button has nearly the same lightness as its intense blue background, it’s going to look like a headache-inducing blob instead of like a button.

> light orange button against a dark blue contrast creates a far stronger separation than a light gray button against a dark gray background

It’s not that much stronger separation, in my experience. Light on dark is much more fundamentally important to the design than orange on blue.

If you made it intense middle orange on intense middle blue, the result would be horrifically bad. But light gray on dark gray is just fine.

If you get the lightness contrast right, you have broad latitude in color choices and you won’t be able to screw things up too badly. You can switch between light yellow on dark red, light blue on dark purple, light orange on dark blue, light gray on dark brown, etc. On the other hand, if you get the lightness contrast wrong, then there’s pretty much no way to fix it with color. Which is why it is helpful to design for lightness first.

That doesn’t mean that you can’t e.g. keep in mind while you are doing your black and white setup work that a particular button is going to get a super zappy red color against a largely neutral slate colored design (or whatever), but even so, you want the lightness relationships to be right. Doing the lightness work separately up front can be helpful for many artists: it will preclude many of the worst design mistakes, and focus attention on making text legible, structurally important shapes stand out from their background, and so on.

Re:Design Without Color First by Rumudiez on Tuesday February 12, 2019 @04:00PM (#19147439)
The advice is sound, IMO. Fine arts teach in this way and it’s an accepted best practice.

The approach is reductionist and aims for solving the right problems first. You can reach for color, typography, etc after you’ve done the legwork to know your design satisfies basic constraints. It’s hard for me to generalize the statement, but learning to design this way (BFA at a well-known fine arts college) had an immediate positive effect on the usability of my apps and readability of print media. I still use the technique today.

Re:Design Without Color First by omnimus on Tuesday February 12, 2019 @06:14PM (#19148693)
Although i agree that bringing color as afterthought is bad advice... i disagree about the limiting.

It is actually powerful way to work. You start with some concept and create limits around it. You mentioned using one font size - thats wonderful tactic. Often time it is enough or almost enough. Design is about balance and it is much easier to sucessfully balance 5 variables than 50. In fact i doubt anyone can do it. Great designers are just very good at hiding that they made their job easier.

Re:Design Without Color First by mrxd on Tuesday February 12, 2019 @06:11PM (#19148665)
> color is in no way an "extra". It is functional, and treating it merely as ornament instead will lead to a more limited, more likely worse design

Completely agree. It's a bizarre suggestion, to just arbitrarily drop one of the most important tools. What if traffic lights were designed this way?

Re:Design Without Color First by kazinator on Tuesday February 12, 2019 @07:22PM (#19149146)
What if traffic lights were designed this way?

They are; reason being: color-blind drivers are out there.

Traffic lights have consistencies which allow drivers not to rely on color. The consistencies aren't global, but hold within major geo-political regions.

For instance, where traffic lights are vertical, it's usually red on top, then yellow, then green. The order isn't perturbed. Moreover, the red light may be larger and brighter.

Re:Design Without Color First by mrxd on Tuesday February 12, 2019 @07:38PM (#19149240)
Yes thank you, I'm aware of how traffic lights work. They don't rely exclusively on color—clearly a different design philosophy from the advice of this article, which is to not use color at all for functional purposes.
Re:Design Without Color First by odyssey7 on Tuesday February 12, 2019 @07:23PM (#19149158)
From an accessibility standpoint, a design needs to work well in black and white / without color. Color shouldn't be functional in the sense that people need it to use a design easily and safely.