Branding, Content, Digital
Responsive Web Design & Development
A Color-Adaptive Portfolio Website for an Artist 1.0
Who says artists’ portfolios have to be presented on neutral backgrounds? Instead, explore a color-adaptive portfolio for an artist. We welcome you to experience the project in the vignettes below; or, visit the live project at www.deborahlgiles.com (now in version 2.0).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.