I’ve encountered many back-end web developers who feel that there’s alot of mystery – even snobbery – behind visual design. There are plenty of rules of do’s and don’ts for web design out there, but I wanted to condense some of the theories behind design into a few simple concepts. I presented this at BarCampChicago so you know what to look for to understand the next great design you see. Check out the great video of the presentation that my shadow made:
Or, if you don’t have 20 minutes to spare, here’s a SlideShare version, complete with summarized comments:
- - -You should follow me on Twitter here.
mech e said,
December 8, 2008 @ 6:50 pm
The ipod design is a bit more complex than factors of scaling (proportions as you say). The corners meet the side with what is known as G2 continuity. That means the radius of curvature is continuous as you trace around the perimeter. If the corners were simple 1/4 circles and the edges straight lines, then the radius of curvature would change from the radius of the circle to infinity where the curved part meets the straight part, giving a non-continuous jump.
Humans sense change, and curvature is related to change in direction, where direction is related to a change in position. That is a bit more subtle than scaling of size, yet it is something that people pick up on very easily.
kadavy said,
December 8, 2008 @ 7:36 pm
Than you, @mech e – very interesting! I tried to look up G2 curvature on Wikipedia, but I’m not quite sure I get it just yet. I’ll have to read over it a couple times – unless you know of a better source on the subject?
mech e said,
December 10, 2008 @ 8:43 pm
I learned about this concept in class….but I found a PDF that seems to cover it well. http://mfgcommunity.autodesk.com/files/blog/amy/Complex.pdf
See page 4 to get visual examples of G0, G1, and G2 continuity. You may have trouble finding info since it is actually G^2 and that does not make for a very good keyword (G2 continuity works OK though).
kadavy said,
December 10, 2008 @ 9:58 pm
I see, @mech e, so with G2 continuity, “the curvature varies smoothly between connected curves or surfaces.”
I know I often try to experiment to add some character to the all-too-common “rounded corners” in web design. I wonder if there is any efficient and repeatable method by which to create beveled corners with G2 continuity in Illustrator and Photoshop. Thoughts?
mech e said,
December 10, 2008 @ 10:47 pm
The answer there is Bezier curves (other similar math constructs are Hermite curves and Splines). For a 3rd order Bezier curve there are 4 control points. They control the magnitude and direction of the tangent vectors at the end points. Or in other words, in order to be able to control the tangency of a Bezier curve at each end point, it needs to be 3rd order or higher.
I am not good w/ photoshop, but a tutorial like this can get you started: http://www.myjanee.com/tuts/hearts/heart1.htm
You can plop down two points using the pen tool and then “convert” both of them, giving you a 3rd order bezier curve. This mouse dragging way of doing math would drive me crazy. But hey, I am no graphic designer. If you really want to have fun you can look up Bezier curves (http://en.wikipedia.org/wiki/Bezier_curves) and plug constants into some algebra graphing software.
For corners, my suggestion is to come up w/ a kinda rule of thumb like you have in your 0.75 rule. Pixels are discreet and not continuous. So whatever you have will just be an approximation in the end. You may find that something like 3 pixels vertical, 1 horizontal, 2 pixels vertical, 1 horizontal, 1 vertical 1 horizontal, 1 vertical, 2 horizontal, 1 vertical 3 horizontal gives an approximate curve that you want..(or one that you don’t want?)..Notice how each vertical/horizontal pair effectively describes the slope of a segment connecting them. By changing the ratio from almost vertical to 1:1 to almost horizontal, you are approximating how a continuous curve behaves.
With Bezier curves you can go as crazy as you want.
Patrick Algrim said,
February 10, 2009 @ 12:36 pm
I really enjoyed the video. We share some of the same mindset when it comes to proportions and the theories behind grid systems. I will be attempting to speak about relative subjects in Chicago here sometime in May. I think a lot of what might help people understand grid systems and proportions better, is a more solid understanding of it’s history. Otherwise, disbelievers may assume it’s a random or radical new thought. Also, grids have now become a fad, which I don’t really love, because it’s still not being respected as a general design rule. Overall, great job at presenting a very tough subject, one that most people have a hard time understanding or having emotion for.