Vector Drawing for App Design
blog post #2
When I was a kid my parents would ask me to clean my room. They’d leave and come back to find me in the middle of a tornado of books, clothes, and toys. I would be overwhelmed at the mess I’d created after expending what felt like so much energy. At the start of the cleaning session, I was sure if I took out everything I owned I’d have the energy to put it back in some new and superior order. Instead, I’d get fixated on the best way to organize a single drawer in my desk or I’d find a that pair of pants that I meant to sew a patch onto. Before I looked at the room around me, I felt a sense of satisfaction. I’d done so much right?Unfortunately, all I had to show my parents were the tiny bits of order that weren’t really visible through the chaos.
As an adult I am reminded of this anecdote when I start a new project. It always starts with a sense of impending doom. It’s hard for me to see how I can efficently get from start to finish, but I know what destruction follows if I don’t have a plan. In its natural state, my brain likes to pick up shiny objects, or in the case of building applications, fun puzzles or technologies and mess with them for hours. By the time I come up for air, I might not have gotten much closer to a final product.
After a meeting with my teammates I was tasked with creating the preliminary designs for our web and mobile application. Not long after starting, a got excited about creating some simple images to spice up the design, which lead me to this week’s distraction. Figma’s vector drawing tool! You can use it to create a network of lines and points that eventually connect back to the first point in the network. When the network is complete, you can fill it with a color or manipulate it to create smooth curved lines between the points. You can also stack these vector networks on top of each other in layers to create images like this cool little flask!
How does this work? Turns out the answer is math! Figma and other vector drawing tools use Bézier curves, controlled by Bézier handles that appear when a user attempts to adjust the curvature of a line with the network. These curves are named after a French engineer Pierre Bézier, who used them to design smooth curves for the bodies of cars in the 1960s. One cool feature of these curves is that they are infinitely scalable. It follows that drawings composed of connecting Bézier curves are also infinity scalable! Which means that vector drawings maintain their image quality differently sized screens. Nobody likes pixellated images, so these are perfect for mobile and web design. To top it off, Vector drawings are often stored in SVG (scalable vector graphics) files that are often much smaller than other image files, so they are also quick to load!
January 25, 2023
Sources:
https://help.figma.com/hc/en-us/articles/360040450213-Vector-networks
