Painting The Perfect Sunset: Better Colors For The Web

[revoltpuppy]

Painting The Perfect Sunset: Better Colors For The Web

Type of Presentation

[X] Standard Length Talk [ ] Lightning Talk [ ] Workshop [ ] Moderated Discussion

Description

For the program

Our eyes see color in the real world differently depending on variables like our surroundings, the weather, and the time of day. Painters like Claude Monet have known this for centuries. Photographers make their living off of this fact. Even comic book artists have picked up on this idea. Yet when web designers use colors for websites and interfaces, it’s usually a matter of taking a handful of pre-selected swatches and sloppily using the eye-dropper to select sterile variations. Today, Sass and CSS give us tools to mix color on the fly and blend them in powerful new ways. We can learn from the traditional, artistic way of mixing pigments, and apply the concept of real world lighting to amplify our palettes to make them more rich and pleasing.

Whether we’re working on highly rendered 3D interfaces or going all-in on the new flat fad, Sass color mixing functions and new CSS properties make natural and interesting color very easy. Furthermore, new media queries will allow us create dynamic palettes that Monet could never have dreamed. While learning from traditional art, photography, and pop culture, we can use modern technology to create better, richer, and more dynamic color palettes.

Additional information for the judges

This talk will cover:

• A new way of easily mixing color and creating more artistic and aesthetically pleasing color palettes with Sass.
• Cutting-edge advancements in CSS colors like blending modes and the isolation property.
• A look into the future at CSS luminosity media queries and how Sass can play a role.
• Color theory for the web.
• A brief history of color on the web.
• A tour of a “Sass Zen Garden of Color” demoing the concepts learned in the talk.

The bulk of this talk should be pretty easy to grasp. There will be some simple one-line code samples.

To frame this, I will reference painters like Claude Monet, Bob Ross, Alex Ross, and the brothers Hildebrandt, as well as the work of photographers and Hollywood cinematographers, and the coloring style of Marvel Comics, which they’ve dubbed “The Perfect Sunset” (thus the title of this talk).

The demo site gives color on the web effectively the same treatment that the Zen Garden gives CSS. You can see how, just by changing a few Sass variables, the color on the page can vary—sometimes subtly and sometimes dramatically. Most of the links don’t work (it’s just a demo), but each of the product pages does. Check them out, and you can see how the Sass color mixing augments each illustration.

Speaker Info

• Name : Justin McDowell
• Location : Olympia, WA
• Contact : ragdoll@revoltpuppy.com

  More Info

  Social Media:

• Twitter : @revoltpuppy
• GitHub : @revoltpuppy
• Url(s) : Demo Site—Gullfoss Travel Supply Co., The Perfect Sunset, Five-Minute Version

  Bio:

Justin McDowell is the web designer for The Evergreen State College where he leads the visual and front-end design of their responsive website. He also founded Ignite Lincoln and directed 64 speakers over four sold-out events, making it one of the biggest lighting-talk shows of its kind in the world.

He enjoys sequential art and pushing the limits of color on the web, both of which he spoke about previously at Seattle Refresh. He also gave a talk about showing your team’s worth with core values at the Washington State Higher Education Technology Conference. His biggest fan is a corgi.

Photo:

[misscs]

To get a better idea of the Sass component, can you expand upon what you will be sharing in your new way of easily mixing color? Thanks!

[revoltpuppy]

So glad you asked! The talk covers several of Sass’s color functions.

• How we can use Sass to make working with color dead-simple without deciphering hex codes or doing math to create variations in our themes.
• lighten() and darken() and the pitfalls we can run into.
• scale-color() and why it’s much better than the above for modifying the lightness of a color.
• How to mix color with mix(), and from there—this is a big part of the talk—getting a bit philosophical about color and how we can use mix() to create interesting palettes that go far beyond tinting and shading with black and white. For example, let’s think like Monet or hell, even Michael Bay, and instead mix with a sunny yellow for highlights and deep purple for shadows. Armed with mix(), along with a small handful of Sass color variables, we can create nuanced color palettes without the designer having to think about it.
• Closing with some thoughts on using mix() along with future luminosity media queries to create truly dynamic color schemes that shift with the intensity of the light around us.

Is that specific enough? I tried to cover it pretty well in the video I linked to in my proposal: The Perfect Sunset, Five-Minute Version, but of course it’s hard to do it all justice in just five minutes. Do let me know if you still need more information.

[elyseholladay]

Hi Justin!

Thank you so much for submitting to SassConf this year!

Unfortunately, we weren’t able to select your talk.

We had an incredible number of submissions this year: 81, in fact, enough to fill up over two weeks of Sassy goodness! But we only have two days, and we couldn’t pick everything.

If you have any questions at all about our selection process, your submission, or anything else at all, please reach out: elyse@sassconf.com and I’ll gladly give you more details.

Again, thank you for submitting. It’s people like you, who are willing to put themselves out there and work hard and submit and give talks that make it possible to even have SassConf. I hope you will submit again next year and continue to be part of the Sass community!

See you in November!