Comments on: Design for the Coder’s Mind: Reverse-Engineering Visual Design

By: Design for Hackers: THE BOOK!

Design for Hackers: THE BOOK! — Thu, 13 Jan 2011 05:31:34 +0000

[...] I remembered the talk that a friend encouraged me to give at BarCamp Chicago a couple of years ago, Design for the Coder’s Mind: Reverse-Engineering Visual Design. I at least had something to start with, but the title needed more pop. Since I also love the [...]

By: What I’ve Read: 10-09-05 to 10-09-19 | CSS Radar

What I’ve Read: 10-09-05 to 10-09-19 | CSS Radar — Mon, 20 Sep 2010 10:06:06 +0000

[...] Design for the Coder’s Mind: Reverse-Engineering Visual Design [...]

By: Patrick Algrim

Patrick Algrim — Tue, 10 Feb 2009 19:36:06 +0000

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.

By: mech e

mech e — Thu, 11 Dec 2008 05:47:13 +0000

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.

By: kadavy

kadavy — Thu, 11 Dec 2008 04:58:28 +0000

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?

By: mech e

mech e — Thu, 11 Dec 2008 03:43:46 +0000

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

By: kadavy

kadavy — Tue, 09 Dec 2008 02:36:18 +0000

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?

By: mech e

mech e — Tue, 09 Dec 2008 01:50:41 +0000

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.