Draw static watercolor

[ellenbechtel]

Some screenshots!

With background texture, underneath everything

With texture on top, blended with Multiply 100%

[cnell-usgs]

current view:

working on color schemes with @ellenbechtel (#506) , refining river boundary, and sketch options for chapters. To do:

• [ ] refine/include river reaches
• [ ] think about mobile vs desktop. Are there separate images? How does the watercolor translate to a full screen, landscape view, on desktop?
• [ ] sketches for salinity, road salt

[ellenbechtel]

We've got some color pallets to choose from! @jread-usgs and @aappling-usgs we'd love to get your opinions.

First, a few things.

Before cementing the color choice: I first make sure that visuals work in grayscale/BW, both because of accessibility for colorblind folks and so that the visual works on its function alone, and color treatment merely emphasized and enhances, rather than trying to use color to compensate for anything that might otherwise not be working.

Picking a color pallet: My general rule for making color pallets that are cohesive and make the visuals distinct is:

• 1 neutral dark
• 1 neutral light
• 1 bright central color, the "main"
• 1 contrasting color
• 1 extra, in case we need to highlight something

Using the colors: When we pick a pallet for this particular watercolor-style vis, we are gonna get not just these colors, but the whole range of opacity/intensity of each one of these choices. That's great! Sometimes the color will build up, and sometimes it'll be watered down, and that layering gives some excellent dimension and texture. Picking a few colors via a color pallet isn't meant to limit us to only a few colors, but rather they act as centers of gravity that we orbit around.

So, the pallets!

Our Favorites

Medium-Rank

Color Direction: What do you think? Are we going in the right direction? If not, could you share a few photos that go in the direction you envision?

[jordansread]

I LOVE the first two. I also like the last one. All of them are great and you both clearly have a better eye for this than me, so would be happy with any of these choices.

The first one is a little easier to see right now since the example is in water color already, but like I said, all of them are :+1:

[ellenbechtel]

Excellent! Great to hear. @aappling-usgs thoughts?

[aappling-usgs]

Wow, yes, these are all great, and I agree with your 2 favorites. Is the idea that you'd keep the gray background for the viz, or do these colors need to be visible against something lighter like the papers Colleen has been experimenting with?

[ellenbechtel]

Oh sorry! Same answer as before, with the sankey - the dark gray is just the default background color in Illustrator.

But, you bring up an interesting point about background. No urgent decision to make here, but looking ahead, color choices for various elements are something that Colleen and I will be thinking about as we make styling edits throughout the design process - colors certainly look different when placed on different backgrounds. Here's what they look like on a white background.

But sometimes, a default #000000 white background can look cold or sterile. We might, eventually, want to give the background of our piece a very faint tint. See what it does?

Plus, black inking on top will give it even more dimension!

All goes to say - I think if you're good with these colors, let's run them by the whole team. Once we get a group 👍 we can start running with them for the opening watercolor. And once the visuals for the other chapters are functional, we can think through color treatment for each one of those too, so the color enhances and emphasizes what's already there.

[cnell-usgs]

Yesterday American Rivers released a story about the DRB (river of the year!) that also uses the watercolor look: https://storymaps.arcgis.com/stories/4f8b7c5cf5db49a59360f4cfcd7f2a78

They did a nice job with the watercolor, however, the content and use of the map to aid the story is very different from what we are working on. This definitely warrants discussion as we move forward, and thinking about how we can differentiate the look of our map from theirs.

[abriggs-usgs]

Dang, what are the chances that someone else would issue a visualization on the Delaware River with watercolor a month before we do?!?

As a point of learning, their adaption to mobile is interesting, though I'm not sure it is completely effective.

[ellenbechtel]

Alright! A few options. Just made a whole bunch that we can play with.

The things I'm thinking about are:

• Making sure the inside of the DRB doesn't look like the ocean
• Making sure the inside of the DRB is light enough for ink to stand out over it
• Making sure the edges of the DRB aren't too pixelated
• Making sure that the beautiful watercolor texture doesn't make it too hard to read text.
• Making the ocean high enough contrast with the text going over it. Should it be dark, and text be light? Or ocean be light, and text be dark?

Don't need hard answers now, and I'll be presenting these and some more options at crit this afternoon so I'll incorporate that feedback too.

Some favorite options:

Some other options:

[ellenbechtel]

Feedback from crit that I'll incorporate for demo today:

The favorite was this direction with a bunch of modifications

• We like the light state background.
• Make the DRB land lighter (but still mostly green) and the ocean lighter (but still dark and mostly blue)
• Can we experiment with cropping so that we know that all crop sizes (square, FB, Twitter, poster, etc) all look good?
• Can we experiment with a few more anchor points such as faint state names, or region names on the map that help the user orient to where we are?

[jordansread]

Maybe this is already being discussed, but I wanted to point out that it looks like the Atlantic Ocean is labeled as the Delaware River Basin. I know that is kind of a "duh, people will figure it out", but I think it should be taken into account.

[abriggs-usgs]

lol. That ☝ is a good point and great example of how being too close and familiar with a topic shades our ability to see some things. I totally over looked that point, as I am in the 'This is the Delaware story' mindset. But people outside that space will most likely be like 'hey that is a map of the Eastern Seaboard.'

[ellenbechtel]

Thanks to some super hi-res gis magic we're back in business!!! Getting dangerously close to being done. Have a great weekend everybody!

[ellenbechtel]

Some really helpful advice from Hayley about state labelling:

"Typically my preference would be for option 3 - I always prefer to track and curve labels to the area I'm labeling, and I think it works REALLY well here with the watercolor and handwriting-esque font. However, it isn't often seen in web mapping b/c rendering the curved labels for web display doesn't always turn out. But if this map will already be an image or svg, and it will be pretty high resolution, maybe it would be fine?"

Working on incorporating her feedback this morning.

[ellenbechtel]

Got a bunch of tweaks we can play with at Demo today, especially regarding decisions about what inked annotations are/aren't on the final map (and obviously, title pending). Here's my favorite version:

Mobile:

Desktop:

But we can play with some versions I've set up with some other additions! Including:

• A few city names to anchor the location
• Drinking water intake locations
• more illustrations for fun, like one of a reservoir, of a stream gage, etc.
• making salt front lines appear differently

• optional title/key extras

  Looking forward to discussing.

[cnell-usgs]

Looks so good! I like how you used white with the sketches to make them stand out a bit more