
Design Without Color First - febin
https://medium.com/devsdesign/4-reasons-why-you-should-design-without-color-first-c0e38180f689
======
everdev
The points all make sense, but anytime I've tried to show clients anything
less than a high fidelity mock-up (wireframes, design palette, b/w mockups,
etc.), I've been meet with something been indifference and guarded acceptance.

Most of my clients (who have marketing but not design backgrounds) want that
"wow" factor when they see the first mockups. By easing into the designs I
felt like I lost that.

As a designer I realized I wasn't just delivering a JPG, but a design
experience. My clients seemed to equally enjoy putting their mark on the
design and imaging the same "wow" factor their CEO would feel when they saw
the latest iteration.

So, while I love this process for personal projects or for companies familiar
with the design process, for the average marketing team I'm still going full
color mockups.

~~~
maroonblazer
>Most of my clients (who have marketing but not design backgrounds) want that
"wow" factor when they see the first mockups. By easing into the designs I
felt like I lost that.

When I got started in marketing the best designers I had the pleasure of
working with educated me as to the different kinds of decisions design needs
to make.

The finished product is the amalgamation of many different, distinct,
decisions. Those decisions include things like: what is the objective of this
page? If there's more than one objective which one is more important? If there
are several objectives how do they compare in terms of importance to the end
user? How does that contrast with the goals of the business? How do we want
the user to feel? What do we want them to think? What action do we want them
to take?

Some of these questions require high fidelity design while others do not. The
lower fidelity designs typically help answer the strategic questions that the
higher fidelity designs will build upon and execute. Using sketches and
wireframes facilitates separating these conversations.

If a client is looking for a 'wow' factor with the first mockup then they've
confused themself with the end user.

~~~
thunderbong
That was indeed brilliantly put. I'm saving this. So many questions get
answered if you explain this right at the very beginning of the design
process.

This kind of approach should also apply to good requirements gathering in my
opinion.

------
mithr
This sounds similar to the advice often given to budding photographers back in
the day -- learn the ropes on black and white film, and only then move into
color.

Focusing on B&W forces you to work on your composition and be able to produce
an interesting, captivating image without letting colors "compensate" for
subpar composition by drawing the eye to a brightly colored object or patch.
Even if you're mainly interested in color photography and eventually want to
focus on properly using colors, starting without them will give you a
foundation that you might otherwise never acquire.

~~~
gmiller123456
"learn the ropes on black and white film, and only then move into color"

Actually, this was because developing color prints is orders of magnitude more
difficult than B&W prints. Most of your famous early photographers are known
for what they did in the dark room, not for their composition skills. E.g. you
can buy an Ansel Adams poster for a few dollars, but an actual Ansel Adams
print will run you several thousand.

I haven't seen any material since the digital age took over (sometime around
2000) recommend that photographers start with B&W.

~~~
jacobolus
I would still recommend that people start with black and white pictures, or at
least spend some serious time on it sometime early in studying to make
photographs. Darkroom skills per se have little to do with it. I would also
recommend that aspiring painters spend some time making black and white
photos, charcoal drawings, or the like.

Learning to see and think about the lightness relationships in a picture is a
very valuable skill for color photography which is easier to learn when trying
to make black and white pictures because there are fewer distractions and
fewer choices to make.

> _I haven 't seen any material since the digital age took over recommend that
> photographers start with B&W._

I am not super familiar with recent introductory photo courses/books/etc. Have
you examined many of those?

~~~
gmiller123456
Yes, all of your more traditional mediums will start with black and white for
the same reason that color is vastly more complex. No one should start to
paint in color until they've got a good foundation on just getting shapes
correct.

While I haven't taken any formal classes in photography, I started learning
around 2000 which is about the time digital started taking over. I started
with film, then quickly moved to digital. None of the digital materials I used
ever recommended starting with B&W. And the more formal classes I've looked at
(but not taken) don't appear to start with B&W either. At the very least, they
cover a lot of color stuff, where the older film classes only covered B&W,
color was considered very advanced.

I honestly think B&W photography is actually harder than color when talking
digital. That's because the scene you see has color in it, and it can be tough
to imagine what shapes will be dominant when converted to B&W.

------
munificent
I've done this several times with my own design because otherwise I tend to
get lost tweaking colors for hours. It's been a good technique to get me
unblocked and moving forward.

At the same time, I've found that when I circle back to add color to the
resulting design, it gets even harder to choose an interesting palette. I get
used to seeing it monochromatic and adding vibrant colors looks "wrong" to me,
so the end result is often less saturated than I really prefer.

Much of this is probably because I'm just not very skilled at working with
color.

~~~
wa1987
You might find this article interesting:

[https://refactoringui.com/previews/building-your-color-
palet...](https://refactoringui.com/previews/building-your-color-palette/)

~~~
frosted-flakes
That's exactly the approach I started using, after reading that article a
couple of months ago, and it's made everything so much easier. There's no more
constant tweaking of colours once I have the main palette set, and colours are
much more consistent. Before this, I never realised how many colours I
actually need.

Following the advice in the article, my current project has six hues, each of
which has 9 shades. I really like that diagram of the chat UI that shows all
the different colours that were needed.

------
crazygringo
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.

~~~
mrxd
> 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?

~~~
kazinator
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.

~~~
mrxd
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.

------
nategri
I would add that this approach would also help you design interfaces that are
more friendly for colorblind users.

------
erickhill
I used to do this a lot when I worked at a design firm and the branding/color
hadn't been defined. It did help quite a lot at times. But for some clients it
caused annoyance/confusion at first.

------
Theodores
This is still visual design instead of content driven design. Design is how it
works, not what it is supposed to look like when the content has been added
after the project has been handed over.

From the tools used in the article - Squarespace - I imagine this is how best
to make 'div soup' rather than premium content that has excellent document
structure and accessibility built in as a consequence.

If you get document structure right by starting content first and making sure
that a story is told (even if it is just a product page) then you can then go
from there to the final visual design relatively easily. If you want to change
the thing wholesale for different colours then you can. But you have to be
working with CSS Grid and CSS variables instead of 'div soup' with trillions
of classes to be able to take this more modern content first design approach.

If working content first then you can work on the visuals as you go. For
instance you might find that the captions are not always working with images
on all device types due to there being too much text. Then you can work on
your content to maybe put the captions into a 'details/summary' element that
solves that design problem elegantly whilst also improving the document
structure. Also, because you are working with real content with real images
you can find out what colours work. Because you are merely using CSS variables
you can also see what happens when you change the --background-color to Papaya
Whip to see if that helps more than the monochrome you started with.

At some time some people in this industry have to get off the div soup and the
big up front designs that have to be cast in stone and handed over to
developers to 'paint by numbers'.

------
deltron3030
Do you start from scratch, or with your own boilerplate that you have
developed over time as a designer?

Because then you'll most likely already have color palettes that work on a
general level, and different component archetypes that are easily adjustable
for any brand.

I mean, why not bake your taste and experience into your own design system
that you then use for other project specific design systems as a starting
point?

------
strokirk
To play the devil's advocate: I've been given rough wireframes without color
before, where we didn't have enough time to add color later on. The feedback
from customer was that the design looked unfriendly and out of touch with the
rest of the product.

Then again - it might have been because I was unfamiliar with frontend coding,
or that we didn't really go past the wireframes stage.

~~~
GuiA
Wireframes are not deliverables! Your client has no more business seeing them
than they have seeing the random diagrams/pseudocode your programmers are
whiteboarding as they build out the infrastructure of the product.

Clients are typically not designers, and when you show them anything visual,
they will see and judge it as a design standing on its own, and not as an
intermediary part of your process.

Anything that is seen by the client is a deliverable and should receive the
utmost amount of polish and attention. As a designer/engineer/someone who
makes things, you may be able to mentally fill in the blanks or visualize what
the finished product might look like based on wireframes, diagrams, etc. Your
client cannot, and showing them non deliverables will only muddy the
conversation.

Just to make it clear - I am not advocating working in obscurity for months,
not giving the clients anything, and then giving them the finished product on
a silver platter - this is just as bad. You should absolutely be delivering
regularly, getting feedback from the client on the deliverables, and iterating
that way. But everything that you give the client is something that stands on
its own, not a wireframe that you introduce by awkwardly saying "well, we
didn't have time to add color, but just imagine...".

~~~
tobr
You can’t exactly have it both ways, though? Either you involve the client and
the client’s clients in iterations, which means they must occasionally see
nasty, inconsistent, less than half-finished sketches, or you waste most of
their money making the wrong concepts look nice.

There’s nothing awkward about not using color. It’s smart and makes you focus
on the right stuff in most of the design process. That’s something any
reasonable client will understand perfectly well.

------
eankeen
When just starting out with website development, I designed without color. It
proved effective because I did not have to worry about fiddling with colors.
However, I don't design without colors for the simple reason that I can easily
incorporate colors into my design without thinking. I use a color scheme
called open-color for all my projects. If I'm using sass, for example, I just
refer to the color $oc-blue-2 for a light shade of blue. I feel designing with
basic colors before putting in actual color values is much better.

------
silveira
I have being doing this for a while using Balsamiq Mockups 3.

The fact that everything is rendered as a low fidelity mock really helps avoid
discussions like "move this 2 pixels to the left" or "maybe this blue should
be more towards green". The exceptions are set in wireframe and when we have a
working version is a nice surprise.

------
organicdude
This is realistic within a an internal team of designers. It doesn't seem to
fly with clients and non-sophisticated internal shareholders.

------
anandsatyan
Agree. I've faced the same issue with clients before. But you can still make
very attractive mockups in grayscale to impress.

------
graphememes
Structure is just as important as _design_ or _style_.

Just different stages of _the process_ or _development_.

------
jdlyga
Designing without color is textbook if you've taken a course in it.

------
franze
In the zeros I wasted hours with discussions about colors, in the 10s hours
with discussion about fonts.....

