Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
1  
Interesting question. I'm sure I have seen a site a bit like that, but I can't think what it was. One quick tip: a website must be clear and ordered to be usable, and you're trying to make it appear impressionistic and less ordered - so give it the simplest, clearest, most consistent underlying structure possible, and make sure every decorative flourish is background that can be skimmed over and doesn't distract from or hide this structure. –  user568458 Aug 13 '13 at 14:17
1  
Only advice I have at the moment is to not confuse 'decorating' with 'design'. –  DA01 Aug 13 '13 at 15:30

1 Answer 1

up vote 3 down vote accepted

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.

Avoid

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

Exploit

  • 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.