Lately I've been contemplating the value of rounded corners in design. Is it eye-candy? Or does it add value to the user experience?
Let me put it this way:
I hope it is clear that the rounded corners do make a difference. On the left side, you see one surface devided by a line. On the right side you see two adjoining boxes. The difference? Only the rounded corners.
How does that translate into color? Lines can easily be interpreted as contrasts. If we do so, we get the following image:
Again: on the left one surface, on the right two boxes. The unity of shape and color forms an image.
BTW: I hate it that the blogging software (Movable Type) draws a box around my illustrations. In this case it pretty much destroys the effect. However, I'm not well versed in CSS, so I'm afraid I'll have to live with it...
Comments (11)
For the CSS... in mt-static/themes/221chameleon/221chameleon.css, look for a line that says ".entry-body p img" and change the "border: 1px..." to "border: 0px..."!
And keep up the good posts! :)
Posted by GBUK | June 5, 2008 2:10 PM
Posted on June 5, 2008 14:10
I kinda subconsciously felt that rounded corners were better, but your side by side examples are eye opening!
Posted by Debbie Goodrow | June 6, 2008 4:23 AM
Posted on June 6, 2008 04:23
I understand and agree with the gestalt behind your conclusions. Did you have to bias it by using two similar shades of soothing blues for one case and contrasting harsh colors for the other?
Posted by Jon Peltier | June 18, 2008 5:02 PM
Posted on June 18, 2008 17:02
About the css, you could just add this line in the css file:
img {border:0 !important}
but this will hide borders on ALL images on this site.
You might also want to consider switching to WordPress :)
Interesting posts, btw.
Posted by scribu | August 7, 2008 1:27 AM
Posted on August 7, 2008 01:27
Wow — I've never thought about it this way, but now it makes perfect sense. This is very interesting.
Posted by Dmitry | August 19, 2008 12:24 AM
Posted on August 19, 2008 00:24
Rounded corners also look safer and more approachable, due to synesthesia.
Theres also a nice story about how the first rounded rectangles were championed by Steve Jobs:
http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt
Posted by Keith | September 25, 2008 3:15 AM
Posted on September 25, 2008 03:15
The boxes around your image are created by this:
221chameleon.css (line 198)
.entry-body p img
{border:1px solid #4C4944;}
you could overwrite it by chucking this in your css
.entry-body p img {border:none}
And to make sure it overwrites the existing version, you could try making it
div .entry-body p img {border:none}
And if that still doesn't work, just add
.entry-body p img {border:none !important}
Posted by p0ss | September 25, 2008 7:41 AM
Posted on September 25, 2008 07:41
@Keith
Thanks for the wonderfull link to the Steve Jobs story.
Posted by Igor | September 25, 2008 9:20 AM
Posted on September 25, 2008 09:20
"I cannot be arsed to spend a few minutes on learning one trivial bit of the technology I'm using, so I'm just going to blame the software and forever suffer under its alleged shortcoming."
Yay, anti-intellectualism FTW!
Posted by scnr | September 25, 2008 11:03 AM
Posted on September 25, 2008 11:03
from design aspects it's nice, but from developers aspect is headache for crossbrowsing.
Posted by Marin | September 25, 2008 5:54 PM
Posted on September 25, 2008 17:54
This would have had a great impact on me if you used the same colors in both the rounded corners and non-rounded corners box.
Posted by leslie | November 10, 2008 8:36 PM
Posted on November 10, 2008 20:36