30 September 2011

84: Balanced asymetry for mobile devices.

Is it possible to do nonlinear gradients in CSS? For example, say I'd like more black at the top in a gradated banner. Can I define a starting point for the gradient to begin? What I've seen so far has a start and finish point at the edges of the div. Can one tweak this behind floating text? A 50% "break" in the middle isn't aesthetic always.

This control would make a difference in perception. Human don't see things linearly. It's more appealing to have "balanced asymmetry" sometimes. This is golden ratio and optical stuff. I'll explain more how this affects the UI you are working on in a bit. I seem to be wandering in my head today on various topics. This is NOT unusual. :)

http://www.1stwebdesigner.com/design/symmetrical-asymmetrical-web-design/

http://en.wikipedia.org/wiki/Symmetry#Symmetry_in_aesthetics

http://desktoppub.about.com/od/designprinciples/g/asymmetrical.htm

http://desktoppub.about.com/od/designprinciples/l/aa_balance2.htm

Asymmetry --and balanced asymmetry-- can create a more dramatic design. Yet it is so subtle, viewers are usually unaware of the manipulation (subconscious).

The use of asymmetrical balance is especially useful for mobile websites. First, it is weightless (doesn't hog bandwidth). Second, most mobile screens are centered and boring. Third, it can be done with simple CSS and HTML elements. No graphics files are necessarily needed.

No comments:

Post a Comment