How can I make more consistent icons by controlling the ratio of icon using grid?

Question

I have experience using Sketch for UI design. I also know Illustrator, vector tools and different shape tools (like align, subtract, union ..etc). Recently I want to top my skills more by starting to design icons. I have downloaded several sets of flat icons. I tried to re-create the icon using my current knowledge but it just seem off.

Here is the icon as my practice target:

I don't need to be exactly the same with the target icon, but I do want to achieve a nicely balanced that's pleasing to look at.

There are a few thinking process I have when designing this icon. 1. Two levels of line thickness. (i choose it to be 2px / 4px) 2. Use vectors with rounded ends and corners to craft the outline. 3. Apply a 8-15px rounded corner to the end of the trolley basket. 4. create equal division of top and bottom of basket using grid lines.

With the four logics, I started building the icon:

The handle bar's length is just random. I don't know how long it should be.

Applied equal divisions to top and bottom, it didn't look pleasant, so I shifted to make another line closer to the end of the basket.

Added colour and shadow at the bottom of the basket, again, the shadow height is just based on subjective feelings.

Final Touches:

I think the 2px / 4px combination is too weird, so I changed to a 2.6px / 5.2px combination. I also made the wheel smaller.

Final Comparison:

As I mentioned, I was not planning to create a pixel perfect duplicate of the original. However, I do find my version a little weird. My hypothesis is that there are several parts of the icon which obeys the Golden Ratio, or at least when the design process happens, there have been some mathematical consideration on the spacing. I wonder what I can do better to improve my thinking process of designing an icon. Please use this icon as an example and give me some guidance!

Thanks!

Answer 1

My hypothesis is that there are several parts of the icon which obeys the Golden Ratio, or at least when the design process happens, there have been some mathematical consideration on the spacing

That's likely not the case at all. There's nothing magic about the Golden Ratio. It's an abused design trope that isn't nearly as useful as people claim it to be.

Rather, I believe you hit the nail on the head with your comment:

The handle bar's length is just random. I don't know how long it should be

The handle bar's length should be as long as it needs to be to look good.

With illustration, much of it is pure aesthetic decisions made by the designer.

Grids and math can help--namely when your illustration is heavily geometric, but one has to trust their own eyes and that hast to trump any mathematical grid you may be using.

Take typesetting, for example. You can space type (leading, letterspacing, etc) mathematically. But that usually looks wrong. As such, designers usually have to manually tweak things until they look right--even if the math disagrees.