Pssst. We’re building a React & Apollo version of the
platform! Keep us in mind for your next digital project.
A Watercolor Artist’s Color-Adaptive Responsive Portfolio: Site on iPad, iPhone, iMac & MacBook Pro
Responsive’s a Must, Color-Adaptive is Icing on the Cake

The color-adaptive, interactive, responsive artist’s portfolio website frames the pieces beautifully on a variety of device sizes.

Responsive’s a Must, Color-Adaptive is Icing on the Cake

The color-adaptive, interactive, responsive artist’s portfolio website frames the pieces beautifully on a variety of device sizes.

A new kind of art gallery: colorful and interactive.

More often than not, art is displayed on a neutral background in formal gallery settings and portfolios: shades of white, or even black. A neutral background may put all the focus on the art itself, but what if a changing context of display could help us understand more about the art we view? What if we view the art not in a neutral context, but within the context of itself?

This portfolio website allows for exactly that: for each piece of art shown, an algorithm generates a palette of colors from the artwork itself. One color is preset as the initial background color, but the user can switch to other colors in the palette at will, inviting a level of exploration, interaction, and play that is rarely seen in galleries and portfolios.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Default Color
Koi Pond: Interactive Color Palette, Default Color

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Default Color

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 2
Koi Pond: Interactive Color Palette, Color 2

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 2

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 4
Koi Pond: Interactive Color Palette, Color 4

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 4

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 6
Koi Pond: Interactive Color Palette, Color 6

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 6

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 1
Koi Pond: Interactive Color Palette, Color 1

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 1

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 3
Koi Pond: Interactive Color Palette, Color 3

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 3

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 5
Koi Pond: Interactive Color Palette, Color 5

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 5

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A Color-Adaptive Portfolio Website for an Artist: Koi Pond - Interactive Color Palette, Color 7
Koi Pond: Interactive Color Palette, Color 7

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

Koi Pond: Interactive Color Palette, Color 7

By default, each painting is originally shown with the color deemed by the algorithm as most important for the particular image. But, seven additional colors calculated from the image are provided in the interactive color palette, allowing for a varied viewing experience. The paired text color is calculated with a custom algorithm adapting to the changing background color on the fly.

A study in color-adaptive user experience.

As our first foray into the world of color-adaptive user interfaces, this site has become a precedent informing all our work as we move forward. By building on top of an open source plug-in, Color Thief, we were able to quickly prototype and implement the customized color-adaptive interface.

The portfolio is initially set up using the plug-in to pull colors from each image uploaded. Then, to boost performance, the selected colors are stored in the database, so no load time is wasted on image analyzation. The text color, however, is generated on the fly with an algorithm we developed that uses modular scales to pair pleasing and legible text colors with each adaptive background.

A Color-Adaptive Portfolio Website for an Artist: Integrated Media - Greeting Cards
Greeting Cards

Greeting cards feature detail shots of watercolor paintings, with the artist’s branding on the back.

Greeting Cards

Greeting cards feature detail shots of watercolor paintings, with the artist’s branding on the back.

A Color-Adaptive Portfolio Website for an Artist: Integrated Media - Business Cards
Coordinated Business Cards

Full bleed, full color business cards feature the artist's work on one side, with contact details on the reverse. A mini color palette underlining the site address references the interactive color palette feature of the website.

Coordinated Business Cards

Full bleed, full color business cards feature the artist's work on one side, with contact details on the reverse. A mini color palette underlining the site address references the interactive color palette feature of the website.

Creating a logo an artist that lets the art be the focus.

Though an artist’s style may evolve dramatically with time, there is something that often (well, sometimes) remains more consistent: the artist’s signature. The signature — whether it’s a clear name or a scribbled flourish — is a window into the identity of the artist, a consistent feature in a sea of expression. To some, signing their name is a final stamp of approval: a mark of something created that took time and investment that is now complete.

So, when it comes to designing a logo for an artist, what could be more appropriate than their own signature? In this case, in print media, the hand-painted signature is paired with a color palette from the color-adaptive portfolio website, visually linking the digital and print marketing materials.

Where did this project go next?

This was version 1.0, and we (and the artist) loved it! But, since then, we’ve all evolved.

Version 2.0 of this project has now rolled out, and you can explore it at the live site, and visit it in our portfolio.

Hey, we hope you liked our work!

Would you like to check out the services we offer?

Interdisciplinary Design

Our team is trained to solve problems holistically, designing for digital, physical, and hybrid applications using an integrative design process.

Full Stack Web Development

Our award-winning design & development team is unique in that we not only can geek out over the technical specs, but we can also hold our own with a room full of designers.

Custom Crafted Content

Whether it’s through the written word, through visual storytelling, or through the combined forces of both, we craft tailored content to help you get your message seen and heard through all the noise.

Can we help you with anything?

Or, would you like to join our (rarely used) mailing list?

Feel free to reach out with any questions you may have for us about our services, our work, or anything else that’s got you curious.

Get in touch.