How can I evoke the style of Impressionism in a web design?

Design of almost all sites on the web is sharp. How can I create a good web page where tabs, buttons, and other UI elements mimic the style of impressionism?

I find common themes of impressionism to be small brush strokes, open composition, depiction of light as opposed to usual web graphics.

  • Do you think is it possible to connect these two?
  • Do you have any ideas how to do that?
  • Or maybe someone did it before and you know page like that?

I’ll appreciate each opinion, idea, link or photo.


This is a great branding exercise. A brand often evokes concepts and imagery that, on the surface, don’t work well with designed communication. So you have to find the essence of those concepts and images, the underlying structures that affect a lasting impression on the viewer/user.

It’s important to remember that you’re talking about designing an interface, not painting a picture. The picture is meant to be emotionally engaged with, but the interface requires action and logical progression.

So what is the essence of Impressionist painting?

  • Nature: It was primarily concerned with recording the effects of light on natural or outdoor environments.
  • Natural Light: Every technique was an attempt to capture the pureness of the Sun’s light.
  • Bold Color: In service of reproducing light, colors were (mostly) not mixed on the palette but used straight from the tube and placed in close proximity to force the eye to mix them from a distance.
  • Openness: Impressionists were concerned mostly with large spaces where the effect of light was like pin points on distant objects.

If you want to capture the specific technique of small strokes of color, I’d relegate that to imagery and backgrounds. For the main components of the interface I think you’ll have more success evoking the broader concepts above.


  • Hard edges
  • Plastic effects (think iOS buttons)
  • Drop shadows
  • Gradients


  • Subtle changes in contrast
  • Natural tones
  • Open layouts
  • A sense of depth (paralax?)
  • Light

I don’t think any of this means you need to rely on image-based graphics all over your site. You just have to be sure that your use of pure HTML styles has a sense of the natural to it.

Source : Link , Question Author : akuzma , Answer Author : Community

Leave a Comment