Skip to main content

Things I Learned on Designing Products from Cartoons


I recently started drawing cartoon figures for my daughter, after years of not drawing. It occurred to me that the drawing skills I learned back in the day help in mocking-up user interfaces.

It’s about perspective and outline

Drawing a cartoon figure is simple, really. The trick is to find a distinctive outline (the shape Mickey-Mouse’s head, the curve of a horse’s body) and drawing it first. Then you lineup every other detail in relation to the outline while keeping perspective in mind. I do the same thing when drawing a mockup of a web page or dashboard. I start off by what should draw the user’s attention (usually in the top center of page) and then layout elements around it.

Use the least amount of material to convey a message

Cartoon figures are made from just a few lines. These few lines make up a shape (a dog, a bird) and also convey a character. Tweety’s beak is curved to suggest a smile, Road-Runner’s limbs tell us the Road-Runner is in motion. Picasso’s one line drawings are a famous example of how a living object can be abstracted down to just one line. In web design, just like in comics, minimalism improves usability. Google is famous for this approach. When I build forms, for example, I spend time to reduce many permutations and complex possibilities to as few fields as possible.  



Comments

Popular posts from this blog

Metallurgist mods made with Sloyd

Name: Stonebreaker Description: The Stonebreaker is a massive broadsword forged for the Onarks , its chipped blade a testament to countless battles, capable of smashing through stone and armor with raw, unrelenting power. Name: Bloodreap Description: The Bloodreap is a hauntingly curved scythe favored by the SaƤngwyr , its blade eternally stained with blood, perfect for swift, lethal strikes that drain both life and vitality from its foes. Name: Gilded Terra Description: Forged by the royal ironsmith from rare earth materials and gold, the Gilded Terra channels the elemental mastery of the Horas , resonating with the raw power of earth and fire in every strike. Name: Verdant Sovereign Description: A masterfully crafted spear with an emerald blade, the Verdant Sovereign channels the ancient Nature Magic of the Elari , striking with both regal precision and elemental fury. Name: Stellar Edge Description: Crafted using advanced alien technology by the Tingava , the Stellar Edge ...

The World of Zero Growth

Jay Forrester , the founder of System Dynamics, a man regarded by many as a legend, was a guest lecturer in SDM ’s System Design class. At 92, Forrester is still relentless at finding the true implications of public policies through system dynamic simulations and working to correct policy. His work in the 70’s and onwards on the limits to growth led him to believe that people are consuming and growing beyond the world’s capacity and that disastrous consequences will follow. The implication of this belief is harsh; humanity should stop striving for growth and instead maintain a net growth of zero. Most extreme opinions are a product of dichotomous “black and white” thinking. This case is entirely different. Extensive research, innovation and his boldness to face an unpleasant revelation created this extreme view. Forester realizes that it is futile to lobby for such changes. Policy makers cannot radically change the direction of policy without a strong support of constituents. T...

AA Problem

AA stands for Attention Allocation not Alcoholic Anonymous. Sorry for the deceiving eye catcher. PTT presentation is work I did in 2005 in the purely abstract edges of Operation Research. I uploaded a PPT presentation. The presentation is lighter and more colorful than the actual article. Warning you have to be a bit of a geek to press the link above. For the super geeks I put a link to the full article. It’s called “Attention Allocation to Partially Observable Heterogeneous Customers – with Imperfect Treatment”, Catchy? Full AA Problem article